Vergib t-label--s für Kategorie-Tags oder die kleine Zeile über einer Überschrift. Großbuchstaben und Sperrung kommen automatisch.
Die drei Größen
| Klasse | Typischer Einsatz |
|---|---|
t-label--m |
Formularfeld-Beschriftung, größeres Label |
t-label--s |
Kategorie-Tag, Badge in einer Karte |
t-label--xs |
Kleinste Stufe — Meta-Angabe, Zähler |
Was ein Label automatisch mitbringt
- Großbuchstaben — du tippst normal, die Darstellung wandelt um
- Sperrung (mehr Abstand zwischen den Buchstaben) — macht Großbuchstaben lesbar
- Dezente Farbe — Labels sollen die Überschrift nicht übertönen
Schreib den Text also in normaler Schreibweise: „Hilfe & Dokumentation“, nicht „HILFE & DOKUMENTATION“. Sonst geht die Information verloren, wo eigentlich Großbuchstaben stehen — wichtig für Screenreader.
Das Eyebrow-Muster
Der häufigste Einsatz: eine kleine Zeile über der Hauptüberschrift, die den Kontext nennt.
| Element | Klasse |
|---|---|
| „Für Vereine“ (Text-Widget) | t-label--s u-mb--xs |
| „Eine Website, die Mitglieder gewinnt“ (H1) | t-heading--xxl |
Achtung: Ein Eyebrow ist keine Überschrift. Nimm ein Text-Widget, nicht ein Überschriften-Widget — sonst steht in der Gliederung eine H2, die inhaltlich keine ist. Mehr dazu in Warum eine H1 klein aussehen darf.
Label auf dunklem Grund
Ergänze t-color--on-dark: t-label--s t-color--on-dark.