Phoenix Reisen Styleguide

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