Card

Element for å gruppere innhold.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Varianter

<Stack gap="lg">
  <Card variant="outline">
    <Typography as="span" variant="text-light">Outline</Typography>
  </Card>
  <Card variant="elevated">
    <Typography as="span" variant="text-light">Elevated</Typography>
  </Card>
  <Card variant="dimmed">
    <Typography as="span" variant="text-light">Dimmed</Typography>
  </Card>
  <Card variant="accent">
    <Typography as="span" variant="text-light">Accent</Typography>
  </Card>
</Stack>

Med tittel

Ved bruk av komponenten <CardHeader /> kan man også gi kortene tittel

<Stack gap="lg">
  <Card variant="outline">
    <CardHeader
      title="Outline"
    />
    <Typography as="span" variant="text-light">Test</Typography>
  </Card>
  <Card variant="elevated">
    <CardHeader
      title="Elevated"
    />
    <Typography as="span" variant="text-light">Test</Typography>
  </Card>
  <Card variant="dimmed">
    <CardHeader
      title="Dimmed"
    />
    <Typography as="span" variant="text-light">Test</Typography>
  </Card>
  <Card variant="accent">
    <CardHeader
      title="Accent"
    />
    <Typography as="span" variant="text-light">Test</Typography>
  </Card>
</Stack>

Interaktive kort

Kort kan være klikkbare. For å gjøre et kort klikkbart kan man bruke interactive-prop'en på CardTitle sammen med as

<Stack gap="lg">
  <Card variant="outline">
    <CardHeader
      title="Interaktivt kort"
      interactive
      as="a"
      href="#"
    />
    <Typography as="span" variant="text-light">Outline</Typography>
  </Card>
  <Card variant="elevated">
    <CardHeader
      title="Interaktivt kort"
      interactive
      as="a"
      href="#"
    />
    <Typography as="span" variant="text-light">Elevated</Typography>
  </Card>
  <Card variant="dimmed">
    <CardHeader
      title="Interaktivt kort"
      interactive
      as="a"
      href="#"
    />
    <Typography as="span" variant="text-light">Dimmed</Typography>
  </Card>
  <Card variant="accent">
    <CardHeader
      title="Interaktivt kort"
      interactive
      as="a"
      href="#"
    />
    <Typography as="span" variant="text-light">Accent</Typography>
  </Card>
  <Card variant="accent">
    <CardHeader
      title="Interaktivt kort som knapp"
      interactive
      as="button"
      onClick={() => console.log("klikk.")}
    />
    <Typography as="span" variant="text-light">Accent</Typography>
  </Card>
</Stack>

Interaktive kort fungerer ved at tittelen får en lenke som kan klikkes på over hele kortet. Stiler for fokus og hover blir også satt på hele kortet og ikke bare headeren. Andre lenker og knapper inne i et kort vil bli fremhevet slik at de fortsatt er klikkbare.

<Stack gap={16}>
  <Card variant="outline">
    <CardHeader
      title="Interaktivt kort med link inni"
      interactive
      as="a"
      href="#"
    />
    <Typography as="span" variant="text-light">Test <a href="#link-inni">link inni</a></Typography>
  </Card>
</Stack>

Retningslinjer

Bruk når du vil gruppere innhold sammen i en boks.

Kode

<Card />

import { Card } from "@aneo-org/design-react/serverComponents";

Prop	Type	Beskrivelse
variant	`"outline" \| "elevated" \| "dimmed" \| "accent"`	Hva slags kortvariant som skal vises.
className	`string`	Klassenavn som skal legges til kortet

<CardHeader />

import { CardHeader } from "@aneo-org/design-react/serverComponents";

Prop	Type	Beskrivelse
title	`string`	Tittelen som vises i headeren.
headingLevel?	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	Hvilket header-nivå som skal brukes for tittelen. "h2" settes dersom ingen verdi angis.
interactive?	`boolean`	Legges på dersom du ønsker at hele kortet skal være klikkbart. Hvis den legges på kreves 'as' som prop.
className?	`string`	Klassenavn som skal legges til headeren
as?	`React.ElementType`	Hvilket element som skal wrappe tittelen dersom kortet skal være interaktivt. Påkrevd ved bruk av "interactive". Her kan man sende inn "a" eller f.eks Link fra "react-router-dom". Props til CardTitle vil variere avhengig av hvilket element som sendes inn som "as".