Typografie

text() rendert ein Stück Text in einer der Größen dieser Bibliothek. Die Variante wählt ein sinnvolles Element — variant: 'h2' rendert ein echtes <h2> —, sodass Überschriften in der Dokumentgliederung landen, ohne dass jemand darüber nachdenken muss.

Varianten

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

Lead — eine Stufe über dem Fließtext, für den Satz unter einem Titel.

Body — der Standard.

Small — Bildunterschriften, die noch Sätze sind.

Caption — das Kleingedruckte.Overline

stack({ gap: 'sm' },
  text({ variant: 'h1' }, 'Überschrift 1'),
  text({ variant: 'h2' }, 'Überschrift 2'),
  text({ variant: 'h3' }, 'Überschrift 3'),
  text({ variant: 'h4' }, 'Überschrift 4'),
  text({ variant: 'h5' }, 'Überschrift 5'),
  text({ variant: 'h6' }, 'Überschrift 6'),
  text({ variant: 'lead' }, 'Lead — eine Stufe über dem Fließtext, für den Satz unter einem Titel.'),
  text({ variant: 'body' }, 'Body — der Standard.'),
  text({ variant: 'small' }, 'Small — Bildunterschriften, die noch Sätze sind.'),
  text({ variant: 'caption' }, 'Caption — das Kleingedruckte.'),
  text({ variant: 'overline' }, 'Overline'),
)

Überschriften

heading() nimmt eine Gliederungs-level und bemisst sich passend dazu. size entkoppelt beides: ein <h1>, das wie ein h3 aussieht, bleibt für einen Screenreader ein h1.

Eine Überschrift der Ebene 2, passend bemessen

Eine Überschrift der Ebene 2, bemessen wie ein h5

stack({ gap: 'sm' },
  heading({ level: 2 }, 'Eine Überschrift der Ebene 2, passend bemessen'),
  heading({ level: 2, size: 'h5' }, 'Eine Überschrift der Ebene 2, bemessen wie ein h5'),
)

Tonwert

Drei Stufen der Betonung, vom vollen Kontrast bis zum leisesten noch lesbaren Grau.

Standard — die Farbe, in der Fließtext gesetzt ist.

Gedämpft — Nebentext, weiterhin bequem lesbar.

Zurückhaltend — Beschriftungen und Metadaten.

stack({ gap: 'xs' },
  text('Standard — die Farbe, in der Fließtext gesetzt ist.'),
  text({ tone: 'muted' }, 'Gedämpft — Nebentext, weiterhin bequem lesbar.'),
  text({ tone: 'subtle' }, 'Zurückhaltend — Beschriftungen und Metadaten.'),
)

Ausrichtung

Anfang

Mitte

Ende

stack({ gap: 'xs' },
  text({ align: 'start' }, 'Anfang'),
  text({ align: 'center' }, 'Mitte'),
  text({ align: 'end' }, 'Ende'),
)

Kürzen und Zeilen begrenzen

truncate schneidet eine einzelne Zeile mit Auslassungspunkten ab. lines begrenzt stattdessen auf eine Anzahl Zeilen — was eine Kartenzusammenfassung meist will.

Eine einzelne Zeile, die weit über die Breite ihres Containers hinausläuft und mit Auslassungspunkten abgeschnitten wird, statt umzubrechen.

Auf zwei Zeilen begrenzt. Dieser Absatz läuft eine Weile weiter, damit die Begrenzung überhaupt etwas zu schneiden hat, und dann noch ein Stück, über den Punkt hinaus, an dem die dritte Zeile begonnen hätte.

stack({ gap: 'md' },
  card({ variant: 'flat' }, cardBody(
    text({ truncate: true }, 'Eine einzelne Zeile, die weit über die Breite ihres Containers hinausläuft und mit Auslassungspunkten abgeschnitten wird, statt umzubrechen.'),
  )),
  card({ variant: 'flat' }, cardBody(
    text({ lines: 2, tone: 'muted' }, 'Auf zwei Zeilen begrenzt. Dieser Absatz läuft eine Weile weiter, damit die Begrenzung überhaupt etwas zu schneiden hat, und dann noch ein Stück, über den Punkt hinaus, an dem die dritte Zeile begonnen hätte.'),
  )),
)

Inline-Code und Tasten

Führe sitelo build aus oder drücke ⌘ K zum Suchen.

text(
  'Führe ', code('sitelo build'), ' aus oder drücke ', kbd('⌘'), ' ', kbd('K'), ' zum Suchen.',
)

Kinder werden als HTML gerendert — genau das lässt Verschachtelung in dieser Bibliothek überall funktionieren, und code() ist keine Ausnahme. Ein Beispiel mit Tags braucht deshalb die Prop text, die sie escaped:

<em>Hallo</em> — text: wird gezeigt, wie geschrieben

Hallo — Kinder: werden als Markup geparst

stack({ gap: 'sm' },
  text(code({ text: '<em>Hallo</em>' }), ' — text: wird gezeigt, wie geschrieben'),
  text(code('<em>Hallo</em>'), ' — Kinder: werden als Markup geparst'),
)

Beides ist nützlich. text ist für ein Codebeispiel, in dem ein Tag gelesen und nicht gebaut werden soll. Kinder sind für bereits hervorgehobene Ausgabe, bei der das Markup der Punkt ist — ein Ergebnis von Prism oder Shiki geht direkt hinein.

sitelo build --root docs

sitelo build

stack({ gap: 'sm' },
  text(code({ text: 'sitelo build --root docs' })),
  text(code('<span style="color: var(--su-primary-soft-fg)">sitelo</span> build')),
)

Zusammensetzen

Text nimmt Kinder, nicht bloß einen String — Links, Code und Hervorhebungen verschachteln sich darin genauso wie in HTML.

Seiten sind Funktionen, die HTML zurückgeben. Siehe die Anleitung Seiten schreiben.

text({ variant: 'lead' },
  'Seiten sind Funktionen, die ',
  code('HTML'),
  ' zurückgeben. Siehe die Anleitung ',
  link({ href: '/de/docs/pages' }, 'Seiten schreiben'),
  '.',
)

Das Element wechseln

as überschreibt das Element, ohne das Aussehen zu ändern — für eine visuelle Überschrift, die nicht in der Gliederung auftauchen darf, oder ein <span> mitten in einer Textzeile.

Sieht aus wie eine Überschrift, ist ein div

Caption-Gestaltung auf einem Absatz

stack({ gap: 'xs' },
  text({ variant: 'h4', as: 'div' }, 'Sieht aus wie eine Überschrift, ist ein div'),
  text({ variant: 'caption', as: 'p' }, 'Caption-Gestaltung auf einem Absatz'),
)

Visuell versteckt

visuallyHidden() hält Inhalt im Accessibility-Baum, aber vom Bildschirm fern — die Beschriftung, die ein Screenreader braucht, dort, wo sehende Leserinnen sie aus dem Zusammenhang nehmen.

Build-Status: bestanden — der letzte Build war vor 4 Minuten erfolgreich

text(
  'Build-Status: ',
  chip({ color: 'success', dot: true }, 'bestanden'),
  visuallyHidden(' — der letzte Build war vor 4 Minuten erfolgreich'),
)

Props

Prop	Typ	Standard	Beschreibung
`variant`	`'h1'…'h6' \| 'lead' \| 'body' \| 'small' \| 'caption' \| 'overline'`	`'body'`	Größe, Gewicht und Standardelement.
`tone`	`'default' \| 'muted' \| 'subtle'`	`'default'`	Wie viel Kontrast der Text trägt.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Textausrichtung.
`truncate`	`boolean`	`false`	Eine Zeile, mit Auslassungspunkten abgeschnitten.
`lines`	`number`	—	Auf so viele Zeilen begrenzen.
`as`	`string`	—	Überschreibt das Element, das die Variante wählen würde.

heading() nimmt level (1–6) und ein optionales size; alles andere ist gleich.