Status |
|
---|---|
Figma | ✅Publisert |
CSS | ✅Publisert |
Vue | 🗄Backlog |
React | 🗄Backlog |
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.
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
- Ikon venstre
- Lenketekst
- Ikon høyre