Paragraph
Brødtekst med lesbar linjelengde. Bredden er begrenset til 70 tegn, fordi lengre linjer gjør det vanskelig å finne tilbake til starten av neste. Det er den vanligste grunnen til at en tekst er tung å lese selv når skriften er stor nok.
Slik tar du den i bruk
Section titled “Slik tar du den i bruk”Bostøtte
En støtteordning for deg som har lave inntekter og høye boutgifter.
Du kan søke hver måned. Fristen er den 25., og svaret kommer rundt den 20. måneden etter. Har du fått bostøtte før, blir søknaden fornyet automatisk.
Sist oppdatert 4. mars 2026.
<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/paragraph/paragraph.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/heading/heading.css"><!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css --><h2 class="fs-heading">Bostøtte</h2>
<p class="fs-paragraph" data-variant="lead">En støtteordning for deg som har lave inntekter og høye boutgifter.</p>
<p class="fs-paragraph">Du kan søke hver måned. Fristen er den 25., og svaret kommer rundt den 20. måneden etter. Har du fått bostøtte før, blir søknaden fornyet automatisk.</p>
<p class="fs-paragraph" data-size="small">Sist oppdatert 4. mars 2026.</p>import "@fristil/designsystem/tokens.css"import "@fristil/designsystem/paragraph.css"import "@fristil/designsystem/heading.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"
<p {...fs.paragraph({ variant: "lead" })}> Bostøtte er en behovsprøvd støtte til deg som har lave inntekter.</p>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 ingress = document.querySelector<HTMLParagraphElement>("#ingress")
fs.setAttributes(ingress, fs.paragraph({ variant: "lead" }))| Attributt | Brukes til |
|---|---|
| (utelatt) | Brødtekst |
data-variant="lead" | Ingressen rett under overskriften |
data-size="large" | Tekst som skal løftes fram |
data-size="small" | Bisetninger, datoer, kildehenvisninger |
Avsnitt som følger hverandre får luft mellom seg av seg selv.
Klasser du kan style
Section titled “Klasser du kan style”| Klasse | Hva det er |
|---|---|
.fs-paragraph | Avsnittet. Størrelsen kommer fra data-size, ingressen fra data-variant. |
| Variabel | Standard |
|---|---|
--fs-paragraph-width | 70ch |
--fs-paragraph-gap | var(--fs-spacing-3) |
--fs-paragraph-line-height | var(--fs-line-height-article) |
Står avsnittet i en spalte som allerede er smal nok, kan grensen fjernes:
.fs-card .fs-paragraph { --fs-paragraph-width: none;}Se Tilpasning for hvordan variablene og laget virker.
Tilgjengelighet
Section titled “Tilgjengelighet”- Ikke bruk
<br>for å lage avsnitt. Et nytt<p>er det skjermlesere kan hoppe mellom. data-size="small"skal ikke brukes på noe brukeren må lese. Vilkår i liten skrift er like vanskelige på skjerm som på papir.- La linjelengden stå. Den er den enkleste forskjellen mellom en tekst som leses og en som skummes.