<div class="c-highlight-box">
<div class="c-highlight-box__title">Anmerkung zum Artikel</div>
<div class="c-highlight-box__content">
<p>Sie haben einen Fehler im Artikel gefunden? Oder haben Sie weitere Informationen zu dem Thema für uns? Dann teilen Sie uns diese gerne mit.</p>
</div>
<div class="c-highlight-box__link">
<a href="#"><i class="fa fa-pen"></i> Korrektur anmerken</a>
</div>
</div>
<div class="c-highlight-box">
<div class="c-highlight-box__title">{{ title }}</div>
<div class="c-highlight-box__content">
<p>{{ content }}</p>
</div>
<div class="c-highlight-box__link">
<a href="#"><i class="fa fa-{{ icon }}"></i> {{ link }}</a>
</div>
</div>
{
"title": "Anmerkung zum Artikel",
"content": "Sie haben einen Fehler im Artikel gefunden? Oder haben Sie weitere Informationen zu dem Thema für uns? Dann teilen Sie uns diese gerne mit.",
"link": "Korrektur anmerken",
"icon": "pen"
}
.c-highlight-box {
background-color: $color-grey-lightest;
border-left: 2px solid $color-yellow;
color: $black;
display: grid;
grid-column-gap: rem-calc(15);
grid-template-areas: 'headline' 'content' 'link';
margin: rem-calc(10);
padding: rem-calc(15);
@include breakpoint(medium) {
grid-template-areas: 'headline headline' 'content link';
}
&__title {
font-size: $font-size-l;
font-weight: bold;
grid-area: headline;
line-height: 1;
padding-bottom: rem-calc(15);
}
&__content {
grid-area: content;
}
&__link {
grid-area: link;
@include breakpoint(medium) {
display: flex;
justify-content: flex-end;
a {
align-self: flex-end;
}
}
}
}
There are no notes for this item.