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.
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å.
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:
Anatomi
- Ikon til venstre
- Lenketekst
- Innhold
Gjør dette/ikke gjør dette
Her kommer noen eksempler på hvordan man skal bruke link card.
