FigmaOpenCode

Preline

Synonyme: Sekundärüberschrift, Unterüberschrift, Caption, Kategorie
Ähnliche Komponenten: Heading, Title, Subline

Kurzbeschreibung

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

Beispiele

Varianten

Code anzeigen

<p class="kern-preline kern-preline--large">Diese Preline 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-preline">Diese Preline ist in der Größe „default" dargestellt. Diese Standardgröße eignet sich für Cards und Formularabschnitte.</p>
<p class="kern-preline kern-preline--small">Diese Preline ist in der Größe „small" dargestellt. Ideal für kompakte Layouts mit kurzen Erklärungen direkt unter kleinen Titles.</p>

Beschreibung

Eine Preline 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 darüber eingesetzt. Die Preline 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

Verwende Preline, um einen Themenbereich, eine Kategorie oder eine Einleitung oberhalb eines Titels zu markieren. Preline wird nie alleinstehend verwendet, sondern immer in Verbindung mit einer darüberliegenden Komponente – Title oder Heading.
Preline wird nicht eigenständig verwendet und steht im engen inhaltlichen Zusammenspiel mit dem darunterliegenden 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 übergeordneten 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 übergeordneten 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.

• Achte auf verständliche Sprache – besonders bei erklärenden Sublines in Formularen.
• Der Text muss bei 320px Breite vollständig sichtbar sein, ohne horizontales Scrollen.
• Preline 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

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

Implementierungsabhängig

WCAG 1.4.10

Preline 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

Preline wird als echten Text und nicht als Bild dargestellt

Bestanden

WCAG 1.4.6

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

Bestanden

WCAG 1.4.12

Preline ist bei angepassten Zeilenabständen lesbar