List

Klassen settes på <ul> eller <ol> og gir listen riktig luft og innrykk. Variantene fjerner punktene visuelt uten å fjerne selve listen, så skjermleseren fortsatt sier hvor mange elementer den har.

Slik tar du den i bruk

<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/list/list.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<ul class="fs-list">
<li>Fødselsattest</li>
<li>Bekreftelse fra arbeidsgiver</li>
<li>Kopi av leiekontrakt</li>
</ul>

<ol class="fs-list">
<li>Fyll ut skjemaet</li>
<li>Last opp vedlegg</li>
<li>Send søknaden</li>
</ol>

<ul class="fs-list" data-variant="divided">
<li>Faktura 2026-0481, forfaller 4. mars</li>
<li>Faktura 2026-0482, forfaller 4. april</li>
</ul>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/list.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"

<ul {...fs.list({ variant: "divided" })}>
  <li>Søknad om bostøtte</li>
  <li>Søknad om startlån</li>
</ul>

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 liste = document.querySelector<HTMLUListElement>("#vedlegg")

fs.setAttributes(liste, fs.list({ variant: "divided" }))

`data-variant`	Brukes til
(utelatt)	Punkter eller tall, med innrykk
`plain`	Uten punkter, for lister som bærer sin egen struktur
`divided`	Uten punkter, med strek mellom radene

Hvorfor varianten finnes

Uten plain ville folk skrevet <div> for å bli kvitt punktene, og da forsvinner opplysningen om at dette er en liste med fire elementer. Varianten fjerner utseendet, ikke betydningen.

Eksempel
Ren HTML

<ul class="fs-list" data-variant="plain">
<li>
  <div class="fs-card">
    <h3 class="fs-card__title">Søknad om bostøtte</h3>
    <p>Sendt 4. mars.</p>
  </div>
</li>
<li>
  <div class="fs-card">
    <h3 class="fs-card__title">Søknad om barnehageplass</h3>
    <p>Under behandling.</p>
  </div>
</li>
</ul>

Klasser du kan style

Klasse	Hva det er
`.fs-list`	Listen. Varianten kommer fra `data-variant`.

Variabel	Standard
`--fs-list-gap`	`var(--fs-spacing-1)`, og `var(--fs-spacing-2)` i `divided`

--fs-list-gap er avstanden mellom elementene, og blir til luft over og under hver rad i divided. De to har ulik standardverdi, så setter du variabelen gjelder tallet ditt begge steder. Se Tilpasning.

Tilgjengelighet

Bruk <ol> når rekkefølgen betyr noe, som i en oppskrift eller en saksgang. Bruk <ul> ellers.
Ikke legg annet enn <li> rett inni listen. Et <div> mellom bryter koblingen mellom listen og elementene.
Lister av lenker bør ligge i en liste også når de ser ut som en meny. Da sier skjermleseren hvor mange valg det er.