Card

Kildekode på GitHub · Les som Markdown

Card er en container-komponent som grupperer relatert innhold med en tydelig visuell avgrensning. Brukes for å vise features, eksempler, profiler og annet innhold som hører sammen.

Importering

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@kilden/designsystem";

Grunnleggende bruk

<Card className="w-[350px]">
<CardHeader>
  <CardTitle>Opprett prosjekt</CardTitle>
  <CardDescription>Lag et nytt prosjekt med et par klikk.</CardDescription>
</CardHeader>
<CardContent>
  <div style={{ display: "grid", gap: "1rem" }}>
    <div style={{ display: "grid", gap: "0.25rem" }}>
      <Label htmlFor="project-name">Prosjektnavn</Label>
      <Input id="project-name" placeholder="Mitt prosjekt" />
    </div>
  </div>
</CardContent>
<CardFooter style={{ justifyContent: "space-between" }}>
  <Button variant="outline">Avbryt</Button>
  <Button>Opprett</Button>
</CardFooter>
</Card>

Kun innhold

Card kan brukes uten header og footer for enklere bruk.

<Card className="w-[350px]">
<CardContent style={{ paddingTop: "1.5rem" }}>
  <p style={{ margin: 0, fontSize: "0.875rem" }}>
    Dette er et enkelt kort med kun innhold. Nyttig for korte meldinger eller
    informasjonsbokser.
  </p>
</CardContent>
</Card>

Komponent-showcase

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "1rem" }}>
<Card>
  <CardHeader>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <CardTitle style={{ fontSize: "1.125rem" }}>Button</CardTitle>
      <Badge variant="success">Stabil</Badge>
    </div>
    <CardDescription>Allsidig knapp med varianter og størrelser.</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button variant="outline" size="sm">Dokumentasjon</Button>
  </CardFooter>
</Card>
<Card>
  <CardHeader>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <CardTitle style={{ fontSize: "1.125rem" }}>Dialog</CardTitle>
      <Badge variant="success">Stabil</Badge>
    </div>
    <CardDescription>Modal-vindu for viktige handlinger.</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button variant="outline" size="sm">Dokumentasjon</Button>
  </CardFooter>
</Card>
<Card>
  <CardHeader>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <CardTitle style={{ fontSize: "1.125rem" }}>Select</CardTitle>
      <Badge variant="warning">Beta</Badge>
    </div>
    <CardDescription>Nedtrekksmeny for valg mellom alternativer.</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button variant="outline" size="sm">Dokumentasjon</Button>
  </CardFooter>
</Card>
</div>

Med skillelinje

<Card className="w-[350px]">
<CardHeader>
  <CardTitle>Ola Nordmann</CardTitle>
  <CardDescription>Utvikler hos Bekk</CardDescription>
</CardHeader>
<CardContent>
  <Separator />
  <div style={{ display: "grid", gap: "0.5rem", marginTop: "1rem", fontSize: "0.875rem" }}>
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <span style={{ opacity: 0.7 }}>E-post</span>
      <span>ola@bekk.no</span>
    </div>
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <span style={{ opacity: 0.7 }}>Team</span>
      <span>Designsystem</span>
    </div>
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <span style={{ opacity: 0.7 }}>Rolle</span>
      <span>Tech lead</span>
    </div>
  </div>
</CardContent>
</Card>

Bruksanbefalinger

Feature

En beskrivelse av featuren.

Bruk for å gruppere relatert innhold

Card gir visuell avgrensning og struktur. Bruk det for innhold som henger sammen — som en feature, en profil eller et skjema.

Bare en linje tekst.

Ikke bruk for enkeltlinjer

Card med lite innhold føles overdrevet. Bruk det bare når innholdet har nok substans til å trenge visuell gruppering.

Tilgjengelighet

Card bruker standard HTML-elementer (<div>, <h3>, <p>) med riktig semantikk
CardTitle rendres som <h3> for overskriftshierarki
Legg til role="region" og aria-label om kortet representerer en selvstendig seksjon

Props

Alle delkomponenter arver standard <div>-props (unntatt CardTitle som arver <h3> og CardDescription som arver <p>). De mest relevante:

Card

Arver alle props fra <div>. Ingen ekstra props.

CardHeader / CardContent / CardFooter

Arver alle props fra <div>. Gir konsistent padding og layout.

CardTitle

Arver alle props fra <h3>.

CardDescription

Arver alle props fra <p>. Rendres med dempet farge.