<header class="c-headline">
<div class="c-headline__kicker">
<span class="c-headline__kicker-item">
Hildesheim
</span>
<span class="c-headline__kicker-item">
Sport
</span>
</div>
<div class="c-headline__title">
<h1 itemprop="headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
</div>
</header>
<header class="c-headline{% if additionalClass %} {{ additionalClass }}{% endif %}">
<div class="c-headline__kicker">
{% for kicker in kickers %}
<span class="c-headline__kicker-item">
{{ kicker }}
</span>
{% endfor %}
</div>
<div class="c-headline__title">
<h1 itemprop="headline">{{ title }}</h1>
</div>
</header>
{
"kickers": [
"Hildesheim",
"Sport"
],
"title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
}
.c-headline {
@include headlineDecoration();
padding: 0 0 0 $spacing;
&__kicker {
@include fluid-type(rem-calc(640), rem-calc(1200), rem-calc(22), rem-calc(20));
color: $color-grey;
// Override color when used in dark sections
.o-section.o-section--dark & {
color: $color-white;
text-shadow: 1px 1px 2px rgba($color-black, .25);
}
}
&__kicker-item {
//margin-right: $spacing-s;
}
&__title h1,
&__title h2,
&__title h3 {
@include fluid-type(rem-calc(640), rem-calc(1200), rem-calc(25), rem-calc(46));
font-weight: $font-weight-normal;
line-height: rem-calc(30);
margin: 0 0 rem-calc(30) 0;
}
@include breakpoint(medium) {
&__title h1,
&__title h2,
&__title h3 {
line-height: rem-calc(45);
}
}
@include breakpoint(large) {
&__title h1,
&__title h2,
&__title h3 {
line-height: rem-calc(55);
}
}
}
There are no notes for this item.