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.
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
