300 #permalink Buttons

Diverse Arten von Buttons.

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

300.10 #permalink CTA & Status Buttons

Examples

Default styling

.btn--primary

"Primary"

.btn--secondary

"Secondary" (weniger prominent als Primary)

.btn--stretched

langgezogen

.btn--link

Linkstyle

.btn--success

Hinweis / Erfolg

.btn--info

Hinweis / Info

.btn--warning

Fehler / Warnung

.btn--danger

Fehler / Gefahr

Markup

<div class="pa2">
    <button type="button" class="btn [modifier class]">
        Button
    </button>
</div>

Source: src/components/_buttons.scss, line 11

300.20 #permalink Mobile Nav Toggler

Example

Markup

<article>
    <span style="display:inline-block; vertical-align: middle"> <!-- span kann weg -->
        <a href="#" class="nav-btn noprint" title="Navigation ein-/ausblenden">
            <i class="fas fa-bars"></i>
        </a>
    </span>
</article>

Source: src/components/_buttons.scss, line 244

300.30 #permalink Avatar Nav Toggler

Example

Markup

<article>
    <span style="display:inline-block; vertical-align: middle"> <!-- span kann weg -->
        <a href="#" class="avatar-cta" title="Buchungsdaten anzeigen">
            <i class="fas fa-user avatar__symbol"></i>
        </a>
    </span>
</article>

Source: src/components/_buttons.scss, line 282