Om komponenten
Card (Kort) er flater som fremhever innhold som hører sammen, og gir eventuelle handlinger som hører til. Card har et kort sammendrag av innholdet, og kan gi brukeren mulighet til å navigere seg til en ny side med ytterlige detaljer med enten en knapp eller lenke. Komponenten skal ha tydelig hierarki og det skal være enkelt å finne relevant informasjon.
Varianter
Card-komponenten finnes i to varianter, Portrait eller Landscape. Variantene har forskjellig hierarki, men kan ha samme innhold. I begge variantene kan man velge om man vil ha knapp eller lenke. BÃ¥de Portrait og Landscape kommer med en bakgrunn eller en versjon med outline
Farger
Vi anbefaler å bruke fargene $neutrals-100 (#F9F9F9), $light-beige-1000 (#F8F0DD) eller $white (#FFFFFF) som bakgrunn.
Ved bruk av border anbefaler vi fargene $neutrals-100 (#F9F9F9), $light-beige-1000 (#F8F0DD) eller $gray-100 (#F2F2F2).
Tekstfarge er $dark-blue-1000 (#2A2859), text-body-default.
Bruk
Card skal brukes for å gi brukeren kort informasjon om et tema og kan gi mulighet til å utføre en handling eller trykke på en lenke for mer informasjon om teksten de leste. Bruk bilde, ikon og tilleggstekst for å utdype.
Du kan godt bruke flere cards etter hverandre. Da setter du dem opp i grupper. En linje på desktop skal kun inneholde maksimum 3 cards i bredden.
PÃ¥ mobil og tablet skal cardsene kollapse under hverandre.
Gjør dette/Ikke gjør dette
Ikke overfyll kortet med for mye tekst – da mister kortformatet sin oversiktlige funksjon
Ikke bruk mange forskjellige handlinger inne i ett og samme kort
Anatomi
- Bilde
- Badge/Tag
- Overskrift
- Undertittel
- Brødtekst
- Knapp eller lenke
