<!-- Default -->
<div class="c-status">
<div class="c-status__content">
<p role="status" class="c-status__text"><strong>Notiz</strong> Allgemeine Hinweise</p>
</div>
</div>
<!-- Info -->
<div class="c-status c-status--info">
<div class="c-status__content">
<p role="status" class="c-status__text"><strong>Information</strong> Die folgende Information ist wichtig.</p>
</div>
</div>
<!-- Success -->
<div class="c-status c-status--success">
<div class="c-status__content">
<p role="status" class="c-status__text"><strong>Erfolg</strong> Alles gut gelaufen.</p>
</div>
</div>
<!-- Warning -->
<div class="c-status c-status--warning">
<div class="c-status__content">
<p role="status" class="c-status__text"><strong>Warnung</strong> Sie laufen Gefahr, dass etwas schief läuft.</p>
</div>
</div>
<!-- Danger -->
<div class="c-status c-status--danger">
<div class="c-status__content">
<p role="status" class="c-status__text"><strong>Gefahr</strong> Etwas ist defekt.</p>
</div>
</div>
<!-- Default -->
<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>
<!-- Info -->
<div class="c-status c-status--info">
<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>
<!-- Success -->
<div class="c-status c-status--success">
<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>
<!-- Warning -->
<div class="c-status c-status--warning">
<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>
<!-- Danger -->
<div class="c-status c-status--danger">
<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>
/* Default */
{
"additionalClasses": "",
"title": "Notiz",
"text": "Allgemeine Hinweise"
}
/* Info */
{
"additionalClasses": "",
"title": "Information",
"text": "Die folgende Information ist wichtig."
}
/* Success */
{
"additionalClasses": "",
"title": "Erfolg",
"text": "Alles gut gelaufen."
}
/* Warning */
{
"additionalClasses": "",
"title": "Warnung",
"text": "Sie laufen Gefahr, dass etwas schief läuft."
}
/* Danger */
{
"additionalClasses": "",
"title": "Gefahr",
"text": "Etwas ist defekt."
}
.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: