Komponenter
Typografi (Work in Progress...)
Heading
Bruk h1–h5 for dokumentstruktur. Nivået setter element, størrelse og vekt. Bruk as for å skille semantikk fra visuell størrelse.
<Heading h1>
Defaults: text-2xl md:text-3xl, semibold · mobil 24px · desktop 30px
<Heading h2>
Defaults: text-xl md:text-2xl, semibold · mobil 20px · desktop 24px
<Heading h3>
Defaults: text-lg md:text-xl, semibold · mobil 18px · desktop 20px
<Heading h4>
Defaults: text-base md:text-lg, semibold · mobil 16px · desktop 18px
<Heading h5> (eyebrow)
Defaults: text-sm, semibold, uppercase, tracking-wide · 14px
<Heading h3 weight="normal" className="italic">
Overstyring: weight="normal" + italic via className
Text
16px er gulvet. Ingen 14px – sekundær tekst uttrykkes med farge, ikke ved å krympe. Vekt gir utheving uten å lage en falsk overskrift.
<Text>
Defaults: text-base, normal · 16px
<Text medium>
Defaults: text-base, medium · 16px
<Text semibold>
Defaults: text-base, semibold · 16px
Eksempel
Sidetittel
Undertittel
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Framhevet tekst med viktig info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum