Link card

Release dato: 24.04.2023

Sist oppdatert: 20.12.2024

Link card (lenkekort) er en utvidet lenke med ikon, tittel og beskrivende tilleggstekst. Du bruker link card nÄr du vil lede brukeren videre, for eksempel inn til en ny tjeneste eller underside, og samtidig gi litt mer informasjon om hva de finner der.

Test komponenten

Relaterte komponenter

Varianter

Skins

Link card kommer i flere ulike stiler, du kan selv vurdere hvilken som ser best ut i din lÞsning og til ditt formÄl:

SkinBeskrivelse
TransparentTransparent bakgrunn og ingen padding
Grey outlineKantlinje i lys grÄ
Beige outlineKantlinje i lys beige
BlueBlÄ helfarget bakgrunn
BeigeBeige helfarget bakgrunn
GreenGrĂžnn helfarget bakgrunn
GreyGrÄ helfarget bakgrunn

Retningslinjer for bruk

  • du vil lede brukeren videre til en ny side
  • du har behov for Ă„ gi mer informasjon enn en vanlig lenke gir
  • du skal presentere flere likeverdige innganger (for eksempel pĂ„ en forside eller oversiktsside)
  • Ă©n lenke alene er nok (bruk da vanlig link)
  • kortet inneholder mange visuelle elementer, f.eks. bilder, knapper (bruk card)

Skriv tydelig og konkret tekst

Tittelen og brĂždteksten skal sammen forklare hva brukeren finner, og hvorfor det er relevant.

GjĂžr slik

Eksempel pÄ klare og direkte tekster som gir brukeren indikasjon pÄ hva som skjer etter klikk
Skriv klare og direkte tekster som gir brukeren indikasjon pÄ hva som skjer etter klikk

UnngÄ

Eksempel pÄ utydelige og generiske tekster
UnngÄ utydelige og generiske tekster

Bruk ikon som gir mening

Ikoner skal understĂžtte innholdet. Ikke bruk dekorative ikoner uten funksjon.

Chevron (pil) brukes for Ă„ indikere transportlenke i lenkelister.

GjĂžr slik

Eksempel pÄ ikon som representerer temaet
Velg et ikon som representerer temaet

UnngÄ

Eksempel pÄ ikoner som ikke har noen tydelig tilknytning til innholde
UnngÄ ikoner som ikke har noen tydelig tilknytning til innholdet

Ikonet kan misforstÄs og gi dÄrlig brukeropplevelse. Mange tror det betyr «Äpnes i ny fane», andre tror det betyr «ekstern side». Vi anbefaler Ä alltid bruke tekst for Ä forklare hva linken leder til.

Du kan dypdykke i begrunnelsen for denne avgjĂžrelsen i artikkelen hos Designsystemet som vi har vĂŠrt med som bidragsytere i.

Åpne i ny fane kun nĂ„r det er nĂždvendig

Som hovedregel Ă„pnes links i samme fane. Åpning i ny fane bĂžr kun brukes:

  • Hvis brukeren risikerer Ă„ bli logget ut
  • Hvis brukeren er midt i en prosess der data kan gĂ„ tapt

GjĂžr slik

Eksempel pÄ card som viser at lenken Äpner i ny fane og hvor den fÞrer hen
Skriv alltid i linken hvis lenken Ă„pner i ny fane og hvor den fĂžrer hen

UnngÄ

Eksempel pÄ ikke anbefalt bruk av ekstern link-ikon og mangel pÄ Ä skrive hvor linken fÞrer
UnngÄ Ä bruke ekstern link-ikon og unnlate Ä skrive hvor linken fÞrer

Gi beskjed ved filer og nedlasting

GjĂžr det tydelig hvis linken fĂžrer til en fil. Oppgi:

  • Filtype (for eksempel PDF, DOCX)
  • Eventuelt filstĂžrrelse, sĂŠrlig for store filer
  • Hvis filen skal lastes ned, bruk download-attributt og informer i teksten.

Responsivitet

Link card tilpasser seg automatisk skjermbredden. PÄ store skjermer plasseres kortene ved siden av hverandre, vanligvis i rader med opptil tre i bredden. PÄ mobil og smÄ skjermer brytes layouten slik at hvert kort vises i full bredde under hverandre.

TekststÞrrelsen skaleres ned pÄ mobil (fra 24px til 20px).

Husk Ä sjekke at kontrastforholdet mellom tekst og bakgrunn holder WCAG-nivÄ, sÊrlig hvis du endrer skin-varianten eller kombinerer cards med mÞrkere bakgrunner. Det er ogsÄ viktig Ä kontrollere at det er nok luft mellom kortene, slik at de ikke glir visuelt sammen.

Universell utforming

Link card er satt opp slik at hele kortet er klikkbart, ikke bare teksten eller ikonet. NĂ„r du bruker tastatur eller skjermleser, skal det vĂŠre enkelt Ă„ navigere til kortet og aktivere det.

Teksten mÄ forklare hvor brukeren havner

Bruk alltid en konkret og beskrivende tittel, og suppler gjerne med en forklarende tillegstekst. «Les mer» eller «Trykk her» sier ingenting om hva brukeren fÄr. En god link card gir bÄde retning og forventning, ogsÄ nÄr den leses isolert med skjermleser.

Skjermleser mÄ fÄ med seg hele innholdet

En skjermleser skal kunne lese opp bÄde tittel og tilleggstekst slik at brukeren fÄr nok informasjon til Ä vurdere om de vil klikke. SÞrg for at all tekst ligger riktig strukturert i koden, og at rekkefÞlgen gir mening. Dekorative ikoner mÄ merkes med aria-hidden="true", slik at de ikke forstyrrer opplesningen.

Ikke bruk like linktekster med ulik funksjon

Linkteksten mĂ„ vĂŠre unik for hvert kort – med mindre de faktisk leder til det samme. Flere like tekster pĂ„ samme side skaper forvirring, spesielt for skjermleserbrukere. Skriv sĂ„ konkret og presist du kan.

Mer om universell utforming av link card:

Anatomi

ElementBeskrivelse
1. IkonKlikkbar tekst som forteller brukeren hva linken fĂžrer til
2. LenketekstIkon til venstre som viser at teksten er klikkbar (valgfritt)
3. TilleggstekstIkon til hĂžyre som viser at teksten er klikkbar (valgfritt)
4. Bakgrunn eller kantlinjeDato eller tidsperiode (valgfritt)

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-linkcard");

Dersom du bruker verktÞyene i punkt-testing-utils sÄ kan dette bli gjort automatisk for deg.

Props og tokens

PropTypeBeskrivelse
titlestringTittelen til lenkekortet
hrefstringURL til siden lenken skal peke til
skinnormal
no-padding
blue
beige
green
gray
beige-outline
gray-outline		Velg utseende pÄ lenkekortet
iconNameiconNavn pÄ ikonet som skal vises
openInNewTabbooleanÅpne lenken i ny fane
externalbooleanLenken gÄr til en ekstern side
Slot (children)Beskrivelse
defaultInnholdet i lenkekortet