Card

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

Bruker man landscape-versjonen av kortene med mye innhold, og opplever at innholdet med f.eks. bilde blir veldig trangt - vurder å bytte over til portrait-versjonen.

Anatomi

1. Bilde
2. Badge/Tag
3. Overskrift
4. Undertittel
5. Hovedtekst/oppsummering/brødtekst?
6. Knapp/Lenke