DK97 UI

Stat Card

Stat Cards dienen zur Darstellung einzelner Kennzahlen oder Messwerte.
Sie eignen sich für Dashboards, Statusseiten, Wetterstationen oder Monitoring-Anwendungen.

Beispiele

Basic

Temperatur
18.5 °C 

<div class="m-stat-card">
    <div class="m-stat-card__label">
        Temperatur
    </div>

    <div class="m-stat-card__value">
        18.5 °C
    </div>
</div>

With Meta

Luftfeuchtigkeit
67 %
Letzte Messung vor 1 Minute 

<div class="m-stat-card">
    <div class="m-stat-card__label">
        Luftfeuchtigkeit
    </div>

    <div class="m-stat-card__value">
        67 %
    </div>

    <div class="m-stat-card__meta">
        Letzte Messung vor 1 Minute
    </div>
</div>

With Trend

Luftdruck
1017.8 hPa
+1.2 hPa 

<div class="m-stat-card">
    <div class="m-stat-card__label">
        Luftdruck
    </div>

    <div class="m-stat-card__value">
        1017.8 hPa
    </div>

    <div class="m-stat-card__trend -positive">
        +1.2 hPa
    </div>
</div>

With Icon

Wind
3.2 km/h
Böe: 11.9 km/h 

<div class="m-stat-card">
    <div class="m-stat-card__header">
        <div class="m-stat-card__label">
            Wind
        </div>

        <span class="m-stat-card__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#wind"></use>
            </svg>
        </span>
    </div>

    <div class="m-stat-card__value">
        3.2 km/h
    </div>

    <div class="m-stat-card__meta">
        Böe: 11.9 km/h
    </div>
</div>

Klassen

Klasse Beschreibung
.m-stat-card Container der Stat Card.
.m-stat-card__header Optionaler Kopfbereich.
.m-stat-card__label Bezeichnung des Messwertes.
.m-stat-card__icon Optionales Icon.
.m-stat-card__value Der eigentliche Wert.
.m-stat-card__meta Zusätzliche Informationen.
.m-stat-card__trend Trendanzeige.

Hinweise

Hinweis
Stat Cards sind generisch gehalten und können für Wetterdaten, Monitoring, Servermetriken oder andere Kennzahlen verwendet werden.

Best Practices

Empfohlene Verwendung
Jede Stat Card sollte genau eine Kennzahl hervorheben.
Vermeiden
Zu viele Informationen innerhalb einer Stat Card erschweren die schnelle Erfassung.

Accessibility

Verständliche Beschriftungen
Die Bezeichnung einer Stat Card sollte den dargestellten Wert eindeutig beschreiben.