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:

Skin Beskrivelse
Transparent Transparent bakgrunn og ingen padding
Grey outline Kantlinje i lys grÄ
Beige outline Kantlinje i lys beige
Blue BlÄ helfarget bakgrunn
Beige Beige helfarget bakgrunn
Green GrĂžnn helfarget bakgrunn
Grey GrÄ helfarget bakgrunn
Eksempel pÄ de ulike varianter av linkcard

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

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

UnngÄ

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

Velg et ikon som representerer temaet

UnngÄ

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

Skriv alltid hvis lenken Ă„pner i ny fane og hvor den fĂžrer hen

UnngÄ

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.

Link card

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

Element Beskrivelse
1. Ikon Klikkbar tekst som forteller brukeren hva linken fĂžrer til
2. Lenketekst Ikon til venstre som viser at teksten er klikkbar (valgfritt)
3. Tilleggstekst Ikon til hĂžyre som viser at teksten er klikkbar (valgfritt)
4. Bakgrunn eller kantlinje Dato eller tidsperiode (valgfritt)
Anatomi av link card.

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: 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");

Egenskaper

PktLinkCard

Props

Prop:
title?
Type:
string
Beskrivelse:
Tittelen til lenkekortet
Prop:
href?
Type:
string
Beskrivelse:
URL til siden lenken skal peke til
Prop:
skin?
Type:
"normal" | "no-padding" | "blue" | "beige" | "green" | "gray" | "beige-outline" | "gray-outline"
Beskrivelse:
Velg utseende pÄ lenkekortet
Prop:
iconName?
Type:
icon
Beskrivelse:
Navn pÄ ikonet som skal vises
Prop:
openInNewTab?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Åpne lenken i ny fane
Prop:
external?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Lenken gÄr til en ekstern side

Slots

Slot:
default
Beskrivelse:
Innholdet i lenkekortet