<a href="#">
<div class="c-breaking-news">
<span class="c-breaking-news__title">Eilmeldung</span>
<div class="c-breaking-news__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolores nostrum officia quaerat quibusdam</p>
</div>
</div>
</a>
<a href="#">
<div class="c-breaking-news">
<span class="c-breaking-news__title">{{ title }}</span>
<div class="c-breaking-news__content">
<p>{{ content }}</p>
</div>
</div>
</a>
{
"additionalClasses": "",
"title": "Eilmeldung",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolores nostrum officia quaerat quibusdam"
}
.c-breaking-news {
background-color: $color-red;
color: white;
margin: rem-calc(20 0);
padding: rem-calc(10 15);
@include transition(background-color);
&__title {
border-bottom: 1px solid white;
display: inline-block;
font-size: rem-calc(14);
padding-bottom: rem-calc(5);
text-transform: uppercase;
&::after {
content: '+++';
display: inline-block;
margin-left: rem-calc(5);
}
}
&__content {
> p {
font-size: rem-calc(24);
font-weight: bold;
margin: 0;
@include fluid-type(rem-calc(640), rem-calc(1200), rem-calc(16), rem-calc(20));
}
}
&:active,
&:focus,
&:hover {
background-color: darken($color-red, 5%);
}
}
There are no notes for this item.