FigmaOpenCode

Subline

Synonyme: Sekundärüberschrift, Unterüberschrift, Caption, Subheading
Ähnliche Komponenten: Heading, Preline, Title

Kurzbeschreibung

Eine Subline ergänzt einen Title oder eine Heading um zusätzliche, erläuternde Informationen.

Beispiele

Varianten

Code anzeigen

<p class="kern-subline kern-subline--large">Diese Subline ist in der Größe „large" dargestellt. Verwende sie gemeinsam mit einem großen Title oder Heading – z.&#8239;B. in prominenten Modulen oder Dialogen.</p>
<p class="kern-subline">Diese Subline ist in der Größe „default" dargestellt. Diese Standardgröße eignet sich für Cards, Formularabschnitte und Tabellen.</p>
<p class="kern-subline kern-subline--small">Diese Subline ist in der Größe „small" dargestellt. Ideal für kompakte Layouts mit kurzen Erklärungen direkt unter kleinen Überschriften.</p>

Beschreibung

Eine Subline besteht meist aus einem kurzen, erklärenden Text. Sie ist eine Textkomponente zur Darstellung ergänzender Inhalte, die eine Heading oder einen Title kontextuell vertiefen.
Sie wird typischerweise direkt darunter eingesetzt. Die Subline liefert Erläuterungen oder unterstützende Hinweise, bleibt dabei aber visuell und hierarchisch im Hintergrund.
Je nach Platz und Bedeutung kann zwischen drei Größen gewählt werden: „large“, „default“ und „small“.

Verwendungsregeln

Subline ergänzt visuell und inhaltlich einen Title oder Heading, indem sie zusätzliche Informationen liefert. Subline wird nicht eigenständig verwendet und steht im engen inhaltlichen Zusammenspiel mit dem darüberliegenden Title oder Heading. Wähle die passende Größe („large“, „default“ und „small“) entsprechend zum eingesetzten Heading oder Title, um ein harmonisches Schriftbild zu gewährleisten. Platziere die Subline direkt unterhalb der dazugehörigen Überschrift, ohne zusätzlichen Abstand – die vertikale Rhythmik ist bereits in den Styles berücksichtigt.

Dos und Don’ts

• Halte den Text kurz und prägnant, z. B. für kontextgebende Hinweise oder Kategorien
• Verwende Preline nicht als alleinstehende Überschrift. Sie ist immer ergänzend zu Title oder Heading gedacht.
• Nutze Preline nicht für ausführliche Erklärungen oder Fließtext. Dafür ist die Body-Komponente vorgesehen.
• Verwende Preline nicht ohne inhaltlichen Bezug zur untergeordneten Aussage.
• Setze keine zusätzlichen Textauszeichnungen wie Fett oder Kursiv ein, da der Stil ist bereits enthalten ist.
• Kombiniere Preline nicht mit inkonsistenten Größen. Es sollte die gleiche Größe wie beim untergeordneten Heading oder Title („large“, „default“ und „small“) verwendet werden.
• Nutze Preline nicht zur Strukturierung der Seite, dafür ist ausschließlich die Heading-Komponente zuständig.

Barrierefreiheit

Die Komponente ist in Bezug auf Schriftgröße, Kontrast und Zoomverhalten barrierefrei umgesetzt.

• Der Text muss bei 320px Breite vollständig sichtbar sein, ohne horizontales Scrollen.
• Subline muss auf 200 % vergrößert werden können, ohne Layoutprobleme zu verursachen.
• Textbereiche dürfen durch Skalierung nicht überlappen oder abgeschnitten werden.

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.4.4

Subline ist bis auf 200% vergrößerbar ohne Inhaltsverlust

Implementierungsabhängig

WCAG 1.4.10

Subline ist bei einer Bildschirmbreite von 320px ohne horizontales Scrollen lesbar

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.4.5

Subline wird als echten Text und nicht als Bild dargestellt

Bestanden

WCAG 1.4.6

Subline erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.12

Subline ist bei angepassten Zeilenabständen lesbar