Eksempler
Heading kommer i 6 ulike varianter av synkende font-size. Første variant er også italic-30, og brukes som hovedoverskrift.
<> <Heading as="h1" variant="heading1"> Hovedoverskrift </Heading> <Heading as="h2" variant="heading2"> Her er en overskrift </Heading> <Heading as="h3" variant="heading3"> Her er en overskrift </Heading> <Heading as="h4" variant="heading4"> Her er en overskrift </Heading> <Heading as="h5" variant="heading5"> Her er en overskrift </Heading> <Heading as="h6" variant="heading6"> Her er en overskrift </Heading> </>
Varianten er for styling. Du må sette riktig as-verdi i henhold til tittelhierarkiet på siden din.
<> <Heading as="h1" variant="heading2"> (h1) Her er en overskrift </Heading> <Heading as="h2" variant="heading2"> (h2) Her er en overskrift </Heading> <Heading as="h3" variant="heading2"> (h3) Her er en overskrift </Heading> <Heading as="h4" variant="heading2"> (h4) Her er en overskrift </Heading> <Heading as="h5" variant="heading2"> (h5) Her er en overskrift </Heading> <Heading as="h6" variant="heading2"> (h6) Her er en overskrift </Heading> </>
Retningslinjer
H1-nivået i overskrifter representerer den viktigste tittelen på en side, og for god semantisk HTML bør det bare være én h1 per side. Deretter bør man bruke h2, h3 osv. for underoverskrifter i synkende rekkefølge av betydning.
Størrelse er uavhengig av semantisk betydning, selv om de ofte henger sammen.
Kode
<Heading />
import { Heading } from "@aneo-org/design-react/serverComponents";
Tittel-komponent.
Heading har minkende font-størrelser for variantene.
Heading har økende størrelse på breakpoint medium.
| Prop | Type | Beskrivelse |
|---|---|---|
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | Semantisk nivå på tittel. |
| variant | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading1" har også italic. Ellers er font-sizes minskende. |