Zum Hauptinhalt springen
Version: 2.1.0
FigmaOpenCode

Preline

Synonyme: Ergänzungstext, Sekundärüberschrift
Ähnliche Komponenten: Heading, Title, Subline

Kurzbeschreibung​

Ein 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 ihn 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. Er passt zu Standard-Titles in Formularen oder Karten.</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. Es 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​

Preline ergänzt visuell und inhaltlich einen Title oder Heading, indem er zusätzliche Informationen liefert. 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 Erläuterungen, Hinweise oder motivierende Aussagen.
  • 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