DK97 UI

Stat Grid

Das Stat Grid dient zur responsiven Anordnung mehrerer Stat Cards.
Es eignet sich für Dashboards, Monitoring-Ansichten und Wetterstationen.

Beispiele

Basic

Einfaches Grid mit mehreren Stat Cards.

Temperatur
18.5 °C
Feuchtigkeit
67 %
Luftdruck
1017.8 hPa 

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

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

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

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

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

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

Weather Dashboard

Beispiel einer Wetterübersicht mit mehreren Messwerten.

Temperatur
18.5 °C
Feuchtigkeit
67 %
Luftdruck
1017.8 hPa
Wind
3.2 km/h
Böe
11.9 km/h
UV
2.0

<div class="o-stat-grid">
    <div class="m-stat-card">
        <div class="m-stat-card__label">Temperatur</div>
        <div class="m-stat-card__value">18.5 °C</div>
    </div>

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

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

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

    <div class="m-stat-card">
        <div class="m-stat-card__label">Böe</div>
        <div class="m-stat-card__value">11.9 km/h</div>
    </div>

    <div class="m-stat-card">
        <div class="m-stat-card__label">UV</div>
        <div class="m-stat-card__value">2.0</div>
    </div>
</div>

Klassen

Klasse Beschreibung
.o-stat-grid Responsives Grid zur Anordnung von Stat Cards.

Hinweise

Hinweis
Das Stat Grid ist unabhängig von den dargestellten Daten und kann für beliebige Kennzahlen verwendet werden.

Best Practices

Empfohlene Verwendung
Verwende Stat Cards innerhalb eines Stat Grids, um Kennzahlen konsistent und übersichtlich darzustellen.
Vermeiden
Sehr große Inhaltsblöcke sollten nicht innerhalb eines Stat Grids dargestellt werden. Das Grid ist für kompakte Kennzahlen gedacht.

Accessibility

Lesbarkeit
Die Beschriftung einer Stat Card sollte den dargestellten Wert eindeutig beschreiben.