Text & Heading
@/components/ui/Text
Én kilde til all tekststil — bruker .type-*-klassene i globals.css i stedet for løse Tailwind-typografiklasser.
Når brukes den
ALL tekst i systemet — aldri en håndskrevet klynge som `text-lg font-medium tracking-tight`.
`Heading` for overskrifter: `level` (1–6) velger riktig heading-steg og rendrer semantisk `<h1>`–`<h6>`. Overstyr det VISUELLE steget med `variant` når det avviker fra dokumentnivået.
Farget SMÅTEKST under 18px skal bruke `tone` (accent/success/warning/error, som peker på -text-tokens) — ALDRI en rå semantisk farge, se regel/farget-smaatekst-bruker-text-token.
`truncate` for én linje som skal klippes med ellipsis, `balance` for en overskrift som skal fordele seg jevnt over flere linjer.
Eksempler
Heading-nivåer
Semantisk `<h1>`–`<h4>`, med riktig heading-steg per nivå.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
<Heading level={2}>Tittel</Heading>Text-varianter
copy for brødtekst, label for kompakt UI-tekst, button for knappetekst.
Text copy-16 — lengre brødtekst.
Text copy-14 — standard brødtekst.
Text label-14 — feltverdier, kompakt UI.
Text label-12 — metadata.
Toner
`tone` peker på systemets tekststeg. Bruk -text-variantene for farget småtekst.
Primary — standard tekstfarge.
Secondary — dempet, det meste av UI-tekst.
Tertiary — metadata, tidsstempler.
Accent — lenker og fremhevet tekst.
Success — bekreftelser.
Error — feilmeldinger.
Trunkering
`truncate` klipper én linje med ellipsis når teksten ikke får plass.
Et sameienavn som er altfor langt for kolonnen
Props
Sveip tabellen for å se hele innholdet