Card

Cards dienen zur Gruppierung zusammengehöriger Inhalte.
Sie können Texte, Formulare, Aktionen oder andere Komponenten enthalten.

Beispiele

Basic

Eine einfache Card zur Gruppierung von Inhalten.

Einfacher Inhalt


<div class="m-card">
    Einfacher Inhalt
</div>

With Header

Eine Card mit Kopfbereich und Titel.

Die Wetterstation ist online.


<div class="m-card">
    <div class="m-card__header">
        <h3 class="m-card__title">
            Wetterstation
        </h3>
    </div>

    <div class="m-card__body">
        Die Wetterstation ist online.
    </div>
</div>

With Footer

Aktionen können im Footer-Bereich platziert werden.

Einstellungen gespeichert.


<div class="m-card">
    <div class="m-card__body">
        Einstellungen gespeichert.
    </div>

    <div class="m-card__footer">
        <button class="a-button -primary -blue">
            <span class="a-button__label">
                Bearbeiten
            </span>
        </button>
    </div>
</div>

Form Example

Cards eignen sich hervorragend als Container für Formulare.

Name

Nachricht


<div class="m-card">
    <div class="m-card__header">
        <h3 class="m-card__title">
            Kontaktformular
        </h3>
    </div>

    <div class="m-card__body">
        <div class="m-form-group">
            <label
                class="m-form-group__label"
                for="name">
                Name
            </label>

            <input
                class="a-input"
                id="name"
                type="text">
        </div>

        <div class="m-form-group">
            <label
                class="m-form-group__label"
                for="message">
                Nachricht
            </label>

            <textarea
                class="a-textarea"
                id="message"></textarea>
        </div>
    </div>

    <div class="m-card__footer">
        <button class="a-button -primary -blue">
            <span class="a-button__label">
                Senden
            </span>
        </button>
    </div>
</div>

Klassen

Klasse	Beschreibung
`.m-card`	Container der Card-Komponente.
`.m-card__header`	Optionaler Kopfbereich der Card.
`.m-card__title`	Titel innerhalb des Headers.
`.m-card__body`	Hauptinhalt der Card.
`.m-card__footer`	Optionaler Fußbereich für Aktionen.

Hinweise

Cards dienen der visuellen Gruppierung zusammengehöriger Inhalte. Sie können andere Komponenten beliebig kombinieren.

Best Practices

Verwende Cards für klar abgegrenzte Inhaltsbereiche wie Formulare, Dashboards oder Einstellungen.

Verschachtle Cards nur mit Bedacht. Zu viele Ebenen erschweren die visuelle Orientierung.

Accessibility

Überschriften innerhalb von Cards sollten die semantische Dokumentstruktur einhalten.

Buttons, Formulare und Links innerhalb der Card behalten ihre jeweiligen Accessibility-Anforderungen.