Link

Lenkestil med tydelig understrek, hover og fokusmarkering. Skal lenken se ut som en knapp, bruk Button på <a>-elementet i stedet.

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/link/link.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<p>
Søknaden er sendt. Du finner den igjen under
<a class="fs-link" href="#">Mine søknader</a>, og vi sender deg en
e-post når den er behandlet.
</p>

TypeScript

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/link.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<a {...fs.link()} href="/kvittering">Se kvittering</a>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const lenke = document.querySelector<HTMLAnchorElement>("#arsoppgave")

fs.setAttributes(lenke, fs.link({ disabled: !klar }))

Blir årsoppgaven klar senere, kaller du den på nytt med disabled: false. Da fjernes aria-disabled, og lenken virker igjen.

Deaktivert lenke

Eksempel

Ren HTML

<a class="fs-link" href="#">Se kvittering</a>
<a class="fs-link" aria-disabled="true" href="#">Se årsoppgave</a>

aria-disabled="true" demper fargen og slår av klikk med pointer-events: none. Lenken blir liggende i tabrekkefølgen, så skjermlesere kan lese den og si at den er utilgjengelig. Det er forskjellen fra å fjerne href.

Merk at pointer-events: none stopper musa, ikke tastaturet. Skal lenken ikke kunne følges i det hele tatt, må du også fjerne href.

Klasser du kan style

Klasse	Hva det er
.fs-link	Lenken. Besøkt og deaktivert skiller seg med :visited og aria-disabled.

Se Tilpasning for hvordan laget virker.

Tilgjengelighet

• Lenketeksten skal gi mening lest alene. Skjermlesere kan liste opp alle lenker på siden, og der hjelper «Se faktura for mars» der «Klikk her» ikke sier noe.
• Ikke fjern outline på :focus-visible. Den er det eneste tastaturbrukere navigerer etter.
• Åpner lenken i ny fane, si det i teksten eller med aria-label.