Link card

BeskrivelseKodeUniversell utforming

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.

Responsivitet

PĂ„ mobil skal lenketeksten justeres fra 24px til 20px.

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