Zum Inhalt springen
NativeCSS
Handbuch-Inhalt

Typografie

Ergänzt base.css um Klassen für Fälle, in denen ein Tag allein nicht reicht - helpers/typography.css.

Größe & Farbe

KlasseZweck
.ncss-text-sm/base/md/lg/xlSchriftgröße
.ncss-text-muted/brand/brand-2/neutral/success/warning/dangerTextfarbe
.ncss-text-inheritcolor: 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/justifyTextausrichtung
.ncss-text-balance / .ncss-text-prettytext-wrap: balance/pretty
.ncss-truncateEinzeiliges Abschneiden mit Ellipsis
.ncss-clamp-lines (+ --ncss-clamp-lines)Mehrzeiliges Abschneiden, modernes CSS statt JS
.ncss-hyphenatehyphens: 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-quoteHervorgehobenes 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.