Link card

Status
Figma ✅Publisert
CSS ✅Publisert
Vue ✅Publisert
React ✅Publisert
Dokumentasjon ✅Publisert

Om komponenten

Link card er en spesialvariant av en lenke som inneholder ikon, lenketekst og mer informasjon under lenketeksten. Denne brukes som oftest som inngang til en tjeneste eller underside. Les om generelle retningslinjer for lenker her.

Varianter

Link card kommer i tre varianter: med eller uten bakgrunn (card), i tillegg til en versjon med outline. Bakgrunnen kan være enten blue-5 eller light grey, avhengig av hvilken bakgrunn du bruker komponenten på.

Farger

De ulike fargene som brukes er:

  • Beige bakgrunn: $beige-light (#F8F0DD)
  • Blå bakgrunn: $blue-5 (#F1FDFF)
  • Grå ramme: $gray (#F2F2F2)
  • Beige ramme: $beige-light (#F8F0DD)

Alle bruker blue-dark (#2A2859) som tekstfarge.

Slik bruker du komponenten

Link card skal brukes for å lede brukeren til en ny side og gi dem mer informasjon om hva de finner. Bruk ikon og tilleggstekst for å utdype. For eksempel slik:

Du kan godt bruke flere link cards etter hverandre. Da setter du dem opp i grupper. En linje på desktop skal kun inneholde max 3 cards i bredden, på mobil kollapser cardsene under hverandre.

Link card på mobil.

Det er også mulig å bruke link cards med “chevron” ikonet for å vise at det er en transportlenke. For eksempel slik:

Det skal skilles visuelt på intern og eksternt lenke. Interne lenker fører brukeren til andre steder på samme nettside, mens eksterne lenker fører brukeren til en annen nettside.

Gjør dette/ikke gjør dette

Her kommer noen eksempler på hvordan man skal bruke link card.

Bruk et beskrivende ikon som passer til innholdet

Skriv kort og konsist

Sørg for god kontrast om du endrer bakgrunnsfarge

Anatomi

  1. Ikon til venstre
  2. Lenketekst
  3. Innhold