Card

En ramme rundt innhold som hører sammen, som én sak i en liste over saker. Kortet er en beholder, ikke en komponent med oppførsel: det er innholdet som bestemmer hva brukeren kan gjøre.

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/card/card.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/badge/badge.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/button/button.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<div class="fs-card">
<h3 class="fs-card__title">Søknad om bostøtte</h3>
<p>Sendt 4. mars. Saksnummer 2026-0481.</p>
<span class="fs-badge" data-color="success">Innvilget</span>
</div>

<div class="fs-card" data-variant="filled">
<h3 class="fs-card__title">Søknad om barnehageplass</h3>
<p>Vi mangler fødselsattest før vi kan behandle søknaden.</p>
<button class="fs-button" data-variant="secondary">Last opp vedlegg</button>
</div>

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

<div {...fs.card({ variant: "outline" })}>
  <h3 className={fs.card.title}>Søknad 2024/1187</h3>
  <p>Under behandling.</p>
</div>

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 kort = document.createElement("a")
kort.href = `/sak/${sak.id}`

fs.setAttributes(kort, fs.card({ interactive: true }))

fs.card.title gir klassen på overskriften. Se Typesikker bruk.

`data-variant`	Brukes til
(utelatt)	Omriss på sideflaten. Standardvalget.
`filled`	Dempet flate, når kortet skal skille seg fra hvitt uten ramme

<a class="fs-card" data-interactive href="#">
<h3 class="fs-card__title">Se hele saken</h3>
<p>Alle dokumenter, meldinger og vedtak samlet.</p>
</a>

data-interactive gir hover og fokusmarkering, men gjør ingenting klikkbart av seg selv. Elementet må være en <a> eller en <button>. Et <div> med en klikklytter kan hverken nås med tastatur eller meldes som noe å trykke på.

Har kortet flere handlinger, skal ikke hele kortet være en lenke. Da havner knappene inni en lenke, og brukeren kan ikke trykke på dem uten å navigere. Lag heller én tydelig lenke i overskriften.

Klasser du kan style

Klasse	Hva det er
`.fs-card`	Selve kortet. Varianten kommer fra `data-variant`.
`.fs-card__title`	Overskriften inne i kortet

Variabel	Standard
`--fs-card-padding`	`var(--fs-spacing-4)`
`--fs-card-radius`	`var(--fs-spacing-2)`

Et eksempel. Et kort som bærer en hel seksjon tåler mer luft enn et som står i en liste:

Eksempel
Ren HTML

<div class="fs-card">
<h3 class="fs-heading" data-size="s">Standard</h3>
<p class="fs-paragraph">Luften som følger med pakken.</p>
</div>

<div class="fs-card luftig-kort">
<h3 class="fs-heading" data-size="s">Luftig</h3>
<p class="fs-paragraph">Samme markup, én klasse mer.</p>
</div>

.luftig-kort {
--fs-card-padding: var(--fs-spacing-6);
}

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

Overskriften i kortet skal være et ekte overskriftselement, og på riktig nivå for siden. Klassen setter størrelsen, vekten og linjeavstanden, ikke nivået.
Er kortene en liste, marker dem som en liste med <ul> og <li>. Da sier skjermleseren hvor mange det er og hvor i rekken brukeren er.
Ikke skjul viktig informasjon bak hover. Den finnes ikke på berøringsskjerm.
Rekkefølgen i markupen er rekkefølgen tastaturet følger. Flytter du noe visuelt med CSS, flytter du ikke fokus.