1 #permalink Alerts

Source: src/components/_alerts.scss, line 1

1.1 #permalink Status Alerts

Hervorgehobene Boxen, die aufgrund ihrer Farben verschiedene Stati (Erfolg, Hinweis, Warnung, Fehler, etc.) ausdrücken. Sie integrieren sich dabei in den üblichen Elementfluss.

Examples

Default styling

Ich bin eine Alert-Box und habe etwas zu sagen. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Mit einem Link.

.alert--success

Erfolgsmeldung

.alert--info

Infomeldung

.alert--warning

Warnmeldung

.alert--danger

Fehlermeldung

Markup

<p class="alert alert--icon [modifier class]">
    <i class="fas fa-check mr2"></i>
    <span>
        Ich bin eine Alert-Box und habe etwas zu sagen.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua. <a href="javascript:">Mit
        einem Link.</a>
    </span>
</p>

Source: src/components/_alerts.scss, line 9

1.2 #permalink Info-Text Alert

Examples

Default styling

Alert für umfangreichere Texte oder auch ganze "Info-Seiten"

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.text-alert--bordered

mit Umrandung

Alert für umfangreichere Texte oder auch ganze "Info-Seiten"

.text-alert--shadowed

mit Schatten

Alert für umfangreichere Texte oder auch ganze "Info-Seiten"

Markup

<div class="ma2">
<article class="text-alert [modifier class]">
    <div class="big-alert-icon">
        <i class="fas fa-info-circle"></i>
    </div>
    <h3 class="pt0">
        Alert für umfangreichere Texte oder auch ganze "Info-Seiten"
    </h3>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, <a href="javascript:" title="Beispiellink">no sea
        takimata sanctus est</a>.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <p>
        <a href="javascript:">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</article>
</div>

Source: src/components/_alerts.scss, line 137