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.
Overskrift her
Tekst som går over flere linjer og som forklarer innholdet på den siden man kommer.
Tekst som går over flere linjer og som forklarer innholdet på den siden man kommer.
Tekst som går over flere linjer og som forklarer innholdet på den siden man kommer.
Tekst som går over flere linjer og som forklarer innholdet på den siden man kommer.
Tekst som går over flere linjer og som forklarer innholdet på den siden man kommer.
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.
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
- Ikon til venstre
- Lenketekst
- Innhold