Divider

Klassen settes på et vanlig <hr>. Nettleserens egen strek har både ramme og høyde, og begge må nullstilles før fargen fra tokenene er den eneste som vises.

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

<p>Saken er registrert.</p>
<hr class="fs-divider" />
<p>Du får svar innen tre uker.</p>
<hr class="fs-divider" data-variant="strong" />
<p>Kontakt oss hvis noe er uklart.</p>
<hr class="fs-divider" data-variant="subtle" />
<p>Saksnummer 2026-0481.</p>

TypeScript

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

<hr {...fs.divider({ variant: "subtle" })} />

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.

Har du elementet som en variabel, setter du dem på det med setAttributes. Det er veien uten JSX, enten du nettopp lagde elementet eller fant det i en side serveren sendte:

import { fs } from "@fristil/designsystem"

const strek = document.createElement("hr")

fs.setAttributes(strek, fs.divider({ variant: "subtle" }))

data-variant	Brukes til
(utelatt)	Vanlig skille mellom to deler
strong	Tydelig skille, for eksempel før en oppsummering
subtle	Svakt skille mellom rader i en liste

Når streken ikke skal leses opp

<hr> melder seg som et skille i innholdet. Er streken bare pynt mellom to bokser som allerede er atskilt visuelt, si fra at den ikke betyr noe:

<hr class="fs-divider" data-variant="subtle" aria-hidden="true" />

Skiller den derimot to virkelige deler av siden, skal den bli stående i tilgjengelighetstreet. Den er da den eneste måten skjermleseren får vite at et emne er slutt.

Klasser du kan style

Klasse	Hva det er
.fs-divider	Streken. Styrken kommer fra data-variant.

Variabel	Standard
--fs-divider-space	var(--fs-spacing-4)

--fs-divider-space er luften over og under streken. Se Tilpasning.

Tilgjengelighet

• Ikke bruk en strek der en overskrift hører hjemme. En overskrift sier hva som kommer; en strek sier bare at noe er slutt.
• En strek mellom hvert element i en liste er støy for den som hører siden. Bruk heller aria-hidden="true", eller la være.