Zum Hauptinhalt springen
Version: 2.2.0
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.

Inhaltsverzeichnis