Status |
|
|---|---|
| Figma | ✅Publisert |
| CSS | ✅Publisert |
| Vue | ✅Publisert |
| React | ✅Publisert |
| Dokumentasjon | ✅Publisert |
Om komponenten
En meldingsboks er en komponent som kan brukes fritt til å gi opplysninger og tilleggsinformasjon til brukeren. Du kan selv velge om du ønsker at den skal inneholde kun tekst eller lenker, bilder, punktlister m.m.
Varianter
Meldingsboksen kan brukes i to ulike størrelser: Default og Compact. Bruk den som passer best til ditt formål.
Hvis meldingsboksen ikke er knyttet til en spesifikk tilstand, bør brukeren kunne lukke den. Om man lar brukeren lukke meldingsboksen burde man ta stilling til om siden skal huske at den ble lukket.
Farger
Meldingsboksen kommer i fire varianter (skins) som har forskjellige farger: beige, grønn, blå og rød. Bruk de fargene som harmonerer best med din løsning eller innholdet i komponenten.
De ulike fargene som brukes er:
- Beige: bg $beige-light (#F8F0DD), linje $beige-dark (#D0BFAE)
- Blå: bg $blue-60 (#D1F9FF), linje $blue (#6FE9FF)
- Rød: bg $red-30 (#FFDFDC), linje $red (#FF8274)
- Grønn: bg $green-30 (#C7FDE9), linje $green (#43F8B6)
- Alle bruker blue-dark (#2A2859) som tekstfarge.
Slik bruker du komponenten
Komponenten har ingen bestemte retningslinjer for bruk, den kan fritt brukes til innhold du ønsker å gruppere. Ved å bruke komponenten kan du hjelpe brukerne med å visuelt skille mellom det som er relatert og det som ikke er det.
Unngå å bruke flere i forskjellige farger i samme løsning, da dette kan være forvirrende.
Viktig: Skal du gi brukeren et varsel om at noe er feil, informasjon om at noe mangler i et skjema eller gi dem en bekreftelse på at noe har blitt oppdatert, så skal du bruke Alert-komponenten.
Anatomi
- Bakgrunn
- Tittel
- Innhold
