Heading

Størrelsen og nivået er to forskjellige ting. Nivået er <h1> til <h6> og bestemmer strukturen skjermlesere navigerer etter. data-size bestemmer bare hvor stor teksten ser ut.

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

<h1 class="fs-heading" data-size="mega">Søknad om bostøtte</h1>
<h2 class="fs-heading" data-size="xl">Om søkeren</h2>
<h2 class="fs-heading">Boforhold</h2>
<h3 class="fs-heading" data-size="m">Vedlegg</h3>
<h4 class="fs-heading" data-size="s">Fødselsattest</h4>
<h5 class="fs-heading" data-size="xs">Sist endret</h5>

TypeScript

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

<h1 {...fs.heading({ size: "mega" })}>Søknad om bostøtte</h1>

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 tittel = document.querySelector<HTMLHeadingElement>("#seksjon")

fs.setAttributes(tittel, fs.heading({ size: "m" }))

Kommer størrelsen fra innhold utenfra, valider den med fs.heading.isSize(x). Se Typesikker bruk.

data-size	Font
mega	--font-size-mega
xl	--font-size-xxl
(utelatt)	--font-size-xl
m	--font-size-l
s	--font-size-m
xs	--font-size-s, i versaler

Nivå følger strukturen, ikke utseendet

En <h2> som skal se liten ut er riktig. En <h4> valgt fordi den var liten nok, hopper over et nivå, og da blir innholdsfortegnelsen skjermleseren bygger feil:

<h2 class="fs-heading" data-size="s">Vedlegg</h2>

Siden skal ha én <h1>, og nivåene under skal følge hverandre uten hopp.

Klasser du kan style

Klasse	Hva det er
.fs-heading	Overskriften. Størrelsen kommer fra data-size.

Størrelsene er --font-size-tokenene direkte, så en endring i skalaen slår gjennom overalt på én gang. Vekten og linjeavstanden er egne variabler, fordi en organisasjon som tar systemet i bruk gjerne har sin egen typografi:

Variabel	Standard
--fs-heading-font-weight	var(--font-weight-bold)
--fs-heading-line-height	var(--fs-line-height-heading)

Overskriftene bruker text-wrap: balance, så en overskrift over to linjer ikke ender med ett ord alene på den siste.

Se Tilpasning for hvordan laget virker.

Tilgjengelighet

• Skjermlesere kan liste opp alle overskrifter og hoppe mellom dem. Det er den vanligste måten å finne fram på en lang side.
• Ikke bruk en overskrift for å gjøre tekst stor. Bruk Paragraph med data-size="large".
• En overskrift uten innhold under seg er ikke en overskrift.