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.
Live demo
Relaterte komponenter
Ikoner brukes ofte i knapper for å understøtte handlinger.
Ikoner kan benyttes for å understreke menyelementer.
Når brukeren kan åpne og lukke innhold for å få mer informasjon.
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 |
Retningslinjer for bruk
Bruk link card når
- 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)
Unngå link card når
- é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
Unngå
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
Unngå
Ikke bruk ekstern link-ikon
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
Unngå
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
Hele link card må fungere som en lenke
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:
Hvordan oppfylle WCAG krav til lenker forklart av UUtilsynet
Beste praksis for å skrive linktekst
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) |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-linkcard.js;import { PktLinkCard } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-linkcard.js" type="module"></script>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
| Prop | Type | Beskrivelse |
|---|---|---|
title | string | Tittelen til lenkekortet |
href | string | URL til siden lenken skal peke til |
skin | normalno-paddingbluebeigegreengraybeige-outlinegray-outline | Velg utseende på lenkekortet |
iconName | icon | Navn på ikonet som skal vises |
openInNewTab | boolean | Åpne lenken i ny fane |
external | boolean | Lenken går til en ekstern side |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i lenkekortet |
Farger
| Skin | CSS Variabel |
|---|---|
| Transparent | |
| Grey outline | |
| Beige outline | |
| Blue | |
| Beige | |
| Green | |
| Grey | |