Dokumentasjon
Alert, InfoCard og InlineMessage 🙌
24. november 2025
For å gjøre det enklere å skille mellom varsler og informasjon, er den tidligere Alert-komponenten nå delt opp i fire separate komponenter:
Dette gir et tydeligere skille mellom varsling (Alert) og informasjon (Info).
GlobalAlert og LocalAlert
Disse komponentene er rendyrket til å kun håndtere varsler. De er strengt styrt og skal kun brukes i fire definerte situasjoner:
announcementsuccesswarningerror
Begge komponentene har innebygd role="alert", slik at skjermlesere automatisk tolker dem som varsler.
Forskjell mellom variantene
- GlobalAlert: Vises øverst på siden og strekker seg ut til kantene, med innholdet sentrert. Brukes til hendelser som påvirker hele løsningen. Eksempel: Innlogging er nede for alle brukere.
- LocalAlert: Plasseres nært det området feilen eller hendelsen gjelder. Brukes til mer avgrensede varsler. Eksempel: API-kall feilet for en bestemt seksjon på siden.
InfoCard
Brukes til å fremheve statisk informasjon på en side. Dette er innhold som ikke er et varsel, men som likevel bør få ekstra oppmerksomhet.
Tidligere ble dette løst med Alert-varianten "info", men siden dette egentlig ikke er et varsel, er InfoCard nå en egen komponent.
- Fremhever informasjon med ikon og farge for å gi kontekst.
- Skal brukes med omhu, det er et sterkt visuelt virkemiddel.
- Husk: Hvis alt fremheves, fremheves ingenting. Eksempel: Tips, retningslinjer eller viktig bakgrunnsinformasjon som alltid gjelder.
InlineMessage
Tidligere kjent som <Alert inline />. InlineMessage er laget for korte statusmeldinger som vises i kontekst med annet innhold.
- Brukes til å informere brukeren om noe spesifikt de må vite eller gjøre.
- Benytter de samme status-ikonene og fargene som varsler, men i en mer nedtonet form.
- Passer godt til små meldinger som ikke krever full oppmerksomhet, men som likevel er viktige.
Sammenligning av komponentene
| Komponent | Formål | Plassering | Eksempel |
|---|---|---|---|
| GlobalAlert | Varsel som gjelder hele løsningen | Øverst på siden | Innlogging |
| LocalAlert | Varsel knyttet til et område | Nær hendelsen | API-feil i seksjon |
| InfoCard | Fremheve fast informasjon | I innholdet på siden | Tips eller retningslinjer |
| InlineMessage | Kort statusmelding i kontekst | I kontekst av innhold | Utkastet ble lagret klokken 14:35 |