colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
41 lines (35 loc) • 794 B
text/stylus
// Teaser
//
// Displayed in listings, a teaser is a content summary that contains:
// - a label
// - a title
// - a summary text
//
// Markup: teaser.twig
//
// Styleguide: Elements.Teaser
.teaser
_p(2)
&-catchline
_mt(.25)
font-size .9em
font-style italic
&-communication
&-production
background-color var(--color-native)
color var(--color-native-foreground)
&-headline
font-family $fontstack-base
margin 0
font-weight bold
font-size _rem(11px)
line-height _getLh(@font-size)
text-transform uppercase
&-title
font-family $fontstack-base
margin 0
font-weight bold
line-height 1.2
&-summary
_pt(.25)
margin 0