Zum Hauptinhalt springen
FigmaOpenCode

Text

Synonyme: Fließtext, Paragraph
Ähnliche Komponenten: Heading

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Text vermittelt Informationen in schriftlicher Form.

Beispiele​

Beispiele​

Default Text​

Code anzeigen
<p class="kern-text">Das ist ein Default Text. Das ist ein Default Text. Das ist ein Default Text. Das ist ein Default Text. Das ist ein Default Text. Das ist ein Default Text. Das ist ein Default Text.</p>

Large Text​

Code anzeigen
<p class="kern-text kern-text--large">Das ist ein Large Text. Das ist ein Large Text. Das ist ein Large Text. Das ist ein Large Text. Das ist ein Large Text. Das ist ein Large Text. Das ist ein Large Text. Das ist ein Large Text.</p>

Small Text​

Code anzeigen
<p class="kern-text kern-text--small">Das ist ein Small Text. Das ist ein Small Text. Das ist ein Small Text. Das ist ein Small Text. Das ist ein Small Text. Das ist ein Small Text. Das ist ein Small Text. Das ist ein Small Text.</p>

Bold Text​

Code anzeigen
<p class="kern-text kern-text--bold">Das ist ein Fetter Text.</p>

Beschreibung​

Text ist eine Komponente, die die Erstellung von Informationen als Fließtext erleichtert. Text gibt es in drei verschiedenen Größen: „small“, „default“ und „large“. Zur Hervorhebung inhaltlich wichtiger Schlagwörter können diese im Fließtext gefettet werden. Soll ein Link im Text ausgezeichnet werden, kann dieser als Inline-Link formatiert werden (Achtung, für Links außerhalb des Fließtextes gibt es die Link-Komponente). Auch nummerierte oder unnummerierte Listen können bei Bedarf erstellt werden. Eine Anleitung zum Vorgehen findest du in Figma.

Verwendungsregeln​

Verwende Text nur für Fließtext, dieser kann auch Inline-Links enthalten. Zur Erzeugung von separat stehenden Links oder anderen Texten gibt es eigene Komponenten gibt. Text folgt in der Hierarchie einer Heading und beschreibt die in der Überschrift angekündigten Inhalte.

Verwende die Textgröße „small“ nur für kurze Abschnitte. Verwende sie, wenn du zum Beispiel wenig Raum zur Verfügung hast, nicht jedoch für sehr wichtige Informationen. Sie sollte nur sparsam eingesetzt werden.
Beispiele:

  • Fußnoten
  • Legenden
  • Marginalien

Dos und Don’ts​

Abgebildet ist ein Link, der korrekt mit einer Link-Komponente erstellt werden soll. Verwende Text nicht für andere Text-Elemente, für die es eigene Komponenten gibt (z.B. Link oder Heading).

Es wird gezeigt, dass die vorgegebenen Stile genutzt werden anstelle von händischen Anpassungen. Nutze niemals händische Textformatierungen – wie Fettungen und Schriftgrößen – um Fließtexte zu erzeugen, sondern die vorgegebenen Größen und Stile.

Es wird gezeigt, dass bei einem Absatz folgend auf eine Heading die Größe „default“ richtig ist. Setze die Schriftgrößen „small“ und „large“ nur sparsam ein.

Weitere Hinweise​

  • Prüfe, ob umfangreiche Inhalte besser auf mehrere Seiten oder Abschnitte aufgeteilt werden sollten.

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

  • Achte in der Umsetzung darauf, dass Inhalte auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind. 
  • Der Text muss bei 320px Bildschirmbreite vollständig und ohne horizontales Scrollen angezeigt werden.
  • Der Text muss bis auf 200% skaliert werden können. Bei der Skalierung muss der Text vollständig sichtbar bleiben und darf nicht andere Seitenbereiche verdecken oder von diesen verdeckt werden.
    • Hinweis 1: Es ist zulässig, dass Textbereiche nach der Skalierung vertikal gescrollt werden müssen, damit sie vollständig angezeigt werden.
    • Hinweis 2: Die Anwendung kann eine eigene Zoomfunktion anbieten. Alternativ können die Einstellungen der Plattformsoftware übernommen werden.

Siehe auch: BFIT Handreichungen

Inhaltsverzeichnis