Zum Hauptinhalt springen
Version: 2.1.0
FigmaOpenCode

Title

Synonyme: Komponententitel, Abschnittstitel
Ähnliche Komponenten: Heading, Subline

Kurzbeschreibung​

Ein Title wird für Überschriften innerhalb von Komponenten verwendet.

Beispiele​

Varianten​

Code anzeigen
<h2 class="kern-title kern-title--large">Dieser Title ist in der Größe „large" dargestellt. Diese Variante eignet sich für prominente Titel in größeren UI-Elementen wie Dialogen oder Cards.</h2>
<h3 class="kern-title">Dieser Title ist in der Größe „default" dargestellt. Diese Standardgröße eignet sich für Cards, Formularabschnitte und Tabellen.</h3>
<h4 class="kern-title kern-title--small">Dieser Title ist in der Größe „small" dargestellt. Er eignet sich für kompakte Layouts mit begrenztem Raum.</h4>

Beschreibung​

Title eignet sich für Überschriften innerhalb von Komponenten, z. B. in Cards, Dialogen oder Formularabschnitten. Die Komponente ist in drei Größen verfügbar – „small“, „default“ und „large“.

Sie dient der visuellen Gliederung innerhalb von UI-Elementen und hilft Nutzenden, sich schnell zu orientieren.
Ein Title besteht meist aus einem kurzen, prägnanten Text und wird in der Regel über dem Inhalt platziert, auf den er sich bezieht.

Verwendungsregeln​

Verwende Title, um Komponenten prägnant zu benennen – z. B. in Dialogen, Formulargruppen oder Karten. Die Komponente dient der visuellen Gliederung innerhalb von UI-Elementen und unterstützt die schnelle Orientierung im Interface.

Da visuelle Struktur immer auch inhaltliche Struktur bedeutet, muss Title mit einem passenden HTML-<h*>-Element ausgezeichnet werden. Nur so ist die Überschrift auch für assistive Technologien wie Screenreader zugänglich. Diese semantische Auszeichnung verpflichtend, um die Barrierefreiheit nach WCAG und BITV sicherzustellen.

Die Variante „large“ eignet sich für prominente Titel in größeren UI-Elementen wie Dialogen oder Cards.
„Default“ ist die Standardgröße und kann in Formularabschnitten und Tabellen verwendet werden.
Für kompakte Layouts bietet sich „small“ an.

Kombiniere Title bei Bedarf mit Subline innerhalb einer Größenstufe, um zusätzliche Informationen unterhalb des Titels anzuzeigen.

Welche Heading-Ebene soll ich für Title verwenden?​

KontextEmpfohlene Heading-Ebene
Title in Alert, Dialog o. Ä.<h2> bis <h3>
Title in Card o. Ä.<h3> bis <h5>
Visuell betonter Text ohne StrukturKein Title, sondern z. B. <p> + Klasse

Dos und Don’ts​

  • Verwende Title, wenn du einen Abschnitt innerhalb einer Komponente klar benennen möchtest.
  • Achte auf eine passende HTML-Heading-Ebene (<h2>, <h3> …), um die visuelle Struktur auch semantisch abzubilden.
  • Verwende die passende Größe („large“, „default“, „small“) abhängig vom verfügbaren Raum und der visuellen Hierarchie.
  • Innerhalb von Title sollten keine zusätzlichen Formatierungen wie Fettdruck verwendet werden, da der Stil bereits visuell hervorgehoben ist.
  • Nutze Title nicht für längere Texte oder erklärende Inhalte – dafür gibt es die Body-Komponente.
  • Achte darauf, dass Title nicht die einzige Möglichkeit ist, die Funktion eines Abschnitts zu erkennen. Insbesondere bei barrierefreier Nutzung sollte ergänzende semantische Struktur vorhanden sein.

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – wie Schriftgröße und Kontrastverhältnis.

  • Title darf nicht als Ersatz für semantische Überschriften eingesetzt werden.
  • Stelle sicher, dass Title in Screenreadern nicht als <h1>–<h6> interpretiert wird.
  • Es darf keine Überschriften-Ebene übersprungen werden (z. B. von <h2> direkt zu <h4>) – das stört die Orientierung für Screenreader.
  • Title muss bei einer Bildschirmbreite von 320px ohne horizontales Scrollen vollständig sichtbar sein.
  • Bei 200% Zoom muss Title skalieren, ohne Layoutbereiche zu überdecken oder überlagert zu werden.
    • Es ist zulässig, dass Inhalte vertikal gescrollt werden müssen.
    • Plattformbasierte oder eigene Zoomfunktionen können genutzt werden.

Inhaltsverzeichnis