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

Inhaltsverzeichnis