Typografie
Ergänzt base.css um Klassen für Fälle, in denen ein Tag allein nicht reicht - helpers/typography.css.
Größe & Farbe
| Klasse | Zweck |
|---|---|
.ncss-text-sm/base/md/lg/xl | Schriftgröße |
.ncss-text-muted/brand/brand-2/neutral/success/warning/danger | Textfarbe |
.ncss-text-inherit | color: inherit - für Text auf einer farbigen Fläche |
.ncss-text-light/-dark (+ -100/-300/-700/-900) | Erzwungener heller/dunkler Text, theme-unabhängig - siehe Farben |
<p class="ncss-text-lg ncss-text-muted">Größerer, gedämpfter Text</p>
Ausrichtung & Umbruch
.ncss-text-center/start/end/justify | Textausrichtung |
.ncss-text-balance / .ncss-text-pretty | text-wrap: balance/pretty |
.ncss-truncate | Einzeiliges Abschneiden mit Ellipsis |
.ncss-clamp-lines (+ --ncss-clamp-lines) | Mehrzeiliges Abschneiden, modernes CSS statt JS |
.ncss-hyphenate | hyphens: auto (braucht korrektes lang-Attribut) |
<h2 class="ncss-text-balance">Überschrift, die ausgewogen umbricht</h2>
<p class="ncss-truncate">Sehr langer Text, der in einer Zeile abgeschnitten wird…</p>
Drop Cap & Mehrspaltentext
.ncss-drop-cap (+ --sm/--lg/--light/--brand) | Initiale via initial-letter (+ -webkit--Präfix für Safari) |
.ncss-columns (+ --ncss-columns-width) | Mehrspaltiger Fließtext, column-width-basiert |
.ncss-pull-quote | Hervorgehobenes Zitat, column-span: all innerhalb .ncss-columns |
.ncss-text-boxed | "Textmarker"-Optik über mehrere Zeilen (box-decoration-break: clone) - braucht display:inline, nie direkt in .ncss-stack/-cluster/-grid verschachteln |
<p class="ncss-drop-cap ncss-columns" style="--ncss-columns-width: 18rem;">
Langer Fließtext, der sich automatisch in mehrere Spalten aufteilt…
</p>
Sonstiges
.ncss-eyebrow (Kicker über einer Überschrift), .ncss-lead-quote (linker Akzent-Rahmen), .ncss-tracking-tight/normal/wide/wider/widest (Laufweite), .ncss-nums-tabular/-oldstyle (font-variant-numeric). Aufzählungs-/Definitionslisten (.ncss-list--*, .ncss-dl--*) sind eine eigene Komponente: Listen.