DsHeading

Overskrift med 7 nivåer.

Bruk

Når bør du bruke DsHeading?

• For alle overskrifter i grensesnittet, fra sidetitler til seksjonsoverskrifter.
• Når du trenger konsistent typografi som følger designsystemets skala.
• For å skape visuelt hierarki som reflekterer innholdsstrukturen.

Når bør du unngå DsHeading?

• For brødtekst eller beskrivelser — bruk DsParagraph i stedet.
• For korte merkelapper på skjemaelementer — bruk DsLabel i stedet.

Eksempler

Grunnleggende bruk

DsHeading — interaktiv forhåndsvisning

Åpne i nytt vindu ↗

DsHeading(text: 'Velkommen til tjenesten', level: DsHeadingLevel.xl)

Mindre overskrift med farge

DsHeading(
  text: 'Seksjonstittel',
  level: DsHeadingLevel.sm,
  color: DsColor.accent,
)

Retningslinjer

• Bruk overskriftsnivåer i logisk rekkefølge — ikke hopp over nivåer.
• Bruk level for semantisk nivå og size kun for visuell justering der det er nødvendig.
• Ha kun én xl-overskrift (sidetittel) per side.

Tekst

• Hold overskrifter korte og beskrivende.
• Unngå å avslutte overskrifter med punktum.

Egenskaper

Egenskap	Type	Standard	Beskrivelse
text	String	påkrevd	Overskriftsteksten.
level	DsHeadingLevel	md	Nivå på overskriften.
size	DsSize?	null	Størrelse på overskriften.
color	DsColor?	null	Fargetema for overskriften.

Import

import 'package:designsystemet_flutter/components.dart';

Semantikk

• Bruker riktig heading-semantikk slik at skjermlesere annonserer overskriftsnivået.

Tastaturinteraksjon

Tast	Handling
H (i skjermleser)	Navigerer til neste overskrift.
Shift + H (i skjermleser)	Navigerer til forrige overskrift.
1-6 (i skjermleser)	Navigerer til overskrift med angitt nivå.

Fokusindikator

• Synlig fokusindikator ved tastaturnavigasjon.

Fargekontrast

• Oppfyller WCAG 2.1 AA kontrastkrav.

Har du innspill til denne komponenten? Send innspill på GitHub