<div class="c-status">
<div class="c-status__content">
<p role="status" class="c-status__text"><strong>Notiz</strong> Allgemeine Hinweise</p>
</div>
</div>
<div class="c-status">
<div class="c-status__content">
<p role="status" class="c-status__text">{% if title %}<strong>{{ title }}</strong> {% endif %}{% if text %}{% endif %}{{ text }}</p>
</div>
</div>
{
"additionalClasses": "",
"title": "Notiz",
"text": "Allgemeine Hinweise"
}
.c-status {
background-color: opacify($color-grey-lightest, .1);
border: rem-calc(1) dashed $color-grey-light;
color: $color-black;
margin: rem-calc(20 0);
padding: rem-calc(20);
&__content {
width: 50%;
p {
line-height: rem-calc(22);
}
@include breakpoint(large) {
width: 100%;
}
}
&--info {
background-color: opacify($color-blue, .1);
border-color: darken($color-blue, 20);
color: $color-white;
}
&--success {
background-color: opacify($color-green, .1);
border-color: darken($color-green, 20);
}
&--warning {
background-color: opacify(lighten($color-yellow, 40), .1);
border-color: $color-yellow;
}
&--danger {
background-color: opacify(lighten($color-red, 40), .1);
border-color: $color-red;
}
}
This component renders status messages inside a colored box. The message may consist of a title and a text. There are five variants available: