Link

Status

Figma Publisert
CSS Publisert
Vue Publisert
React Publisert
Dokumentasjon Publisert

Om komponenten

Lenker er et vanlig element på nettsider som brukes til å navigere til andre sider på nettstedet eller til eksterne nettsider. Lenker må være visuelt identifiserbare og lenkens mål må fremgå tydelig. Det skal skilles visuelt på intern og ekstern lenke.

Varianter

Det er to typer lenker: interne lenker og eksterne lenker. Interne lenker fører brukeren til andre steder på samme nettside, mens eksterne lenker fører brukeren til en annen nettside.

For å gjøre det tydelig for brukeren at lenken fører til en ekstern nettside, markeres våre eksterne lenker med et ikon til høyre etter lenketeksten.

Det er viktig at lenkene kan identifiseres uavhengig av situasjon, evner og innstillinger på utstyret som benyttes. Dette betyr at lenker må være markert med mer enn bare farge. I Punkt gjør vi det ved å enten ha understrek eller å bruke “chevron”-ikonet foran eller bak teksten.

Dersom lenken din skal brukes i løpende tekst, og er en intern lenke, anbefaler vi å unngå å bruke ikon. Lenke med chevron-ikonet brukes oftest i brødsmuler og lenkelister.

Slik bruker du komponenten

Generelt sett er det viktig å bruke lenker på en gjennomtenkt måte for å gi en best mulig brukeropplevelse. Det kan være lurt å plassere lenker der brukerne forventer å finne dem, og å sørge for at lenketeksten er beskrivende og gir en klar indikasjon på hvor lenken fører.

Lenker kan plasseres på ulike steder, for eksempel i løpende tekst, på slutten av teksten eller i relatert informasjon. Før du velger plassering av lenkene, bør du derfor vurdere hvem som er målgruppe for teksten, hvilken kontekst brukeren befinner seg i og hva som er formålet med lenken.

Dette er et eksempel på en løpende tekst med lenker.

Gjør dette/ikke gjør dette

Her kommer noen eksempler på hvordan man skal bruke linkstyling.

Bruk enten ikon eller understrek

Unngå å bruke ikoner for å merke lenker i løpende tekst

Bruk ikoner med omhu

Gå for én styling av lenker

Ikke bruk bare store bokstaver

Anatomi

  1. Ikon venstre
  2. Lenketekst
  3. Ikon høyre