Komponenter
Heading
Heading brukes til å strukturere innhold og skape hierarki på siden.
React
const Preview = () => { return <Heading>Dette er en overskrift</Heading>; }; render(<Preview />)
Heading er en typografikomponent som brukes til å vise tekst i ulike størrelser og formater. Bruk komponenten når du skal vise sidetitler, seksjonstitler eller undertitler. Headingene er utformet for å skille seg tydelig fra brødtekst, skape visuell hierarki og hjelpe leserne med å forstå strukturen i innholdet.
Eksempel
Størrelser
React
const Sizes = () => ( <> <Heading data-size='2xl' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a 2xl heading </Heading> <Heading data-size='xl' style={{ marginBottom: 'var(--ds-size-4)' }}> This is an xl heading </Heading> <Heading data-size='lg' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a lg heading </Heading> <Heading data-size='md' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a md heading </Heading> <Heading data-size='sm' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a sm heading </Heading> <Heading data-size='xs' style={{ marginBottom: 'var(--ds-size-4)' }}> This is an xs heading </Heading> <Heading data-size='2xs' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a 2xs heading </Heading> </> ); render(<Sizes />)
Retningslinjer
Heading brukes til å skape struktur og hierarki i innholdet. Bruk overskrifter for å dele opp innholdet i logiske seksjoner. Pass på at du bruker riktige overskriftsnivåer (h1-h6) for å sikre god semantisk struktur.
Tekst
Overskrifter og mellomtitler bør være korte og tydelige, og gi et godt bilde av innholdet de introduserer. Det er en fordel å starte både overskrifter og mellomtitler med nøkkelord. Da blir det enklere for alle å skumlese og finne relevant informasjon.
Sidens hovedoverskrift, altså <h1> elementet, skal beskrive hele sidens innhold, mens hver mellomtittel skal være unik og presist fortelle hva teksten under handler om.