Designsystemoversikt

Card

Card samler beslektet innhold i en tydelig container som kan fungere både som informasjonsflate og som samlet navigasjonsmål.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Card er nyttig når du trenger en tydelig innholdsenhet som kan stå i lister, dashboards eller oppsummeringsflater uten å bli like tung som en full tabell.

I Jøkul styres kortet i hovedsak av variant, padding og om det skal fremstå klikkbart. `CardImage` håndterer samtidig bildeplasseringen uten lokale margin-hacks.

Playgrounden under viser hele den lokale kontrakten som er dokumentert her, inkludert bildeplassering fra `CardImage`.

Eksempel

Props

    • variant="high" · padding="m" · clickable=false · image="top"

    Status for vårslipp

    Tre mønstre er klare for gjennomgang, og to komponenter mangler fortsatt innholdsdokumentasjon.

    Oppdatert i dag · 3 åpne avklaringer

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/card/card.min.css";
import { Card, CardImage } from "@fremtind/jokul/card";

export function Example() {
    return (
        <Card
            padding="m"
        >

            <CardImage
                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23dbe7f2'/%3E%3Ccircle cx='72' cy='58' r='20' fill='%23aec5dc'/%3E%3Crect x='24' y='104' width='272' height='18' rx='9' fill='%23bfd1e2'/%3E%3Crect x='24' y='132' width='176' height='12' rx='6' fill='%23bfd1e2'/%3E%3C/svg%3E"
                alt=""
                placement="top"
            />
            <h2>Status for vårslipp</h2>
            <p>Tre mønstre er klare for gjennomgang.</p>
        </Card>
    );
}

    Props

    Disse prop-tabellene gjelder rotelementet Card.

    Jøkul-props

    Kortets egne props som styrer uttrykk, luft og interaktiv affordance.

    Prop Type Standard Beskrivelse
    clickable boolean false Gir kortet klikkbar affordance. Du må fortsatt rendre et faktisk interaktivt element selv.
    padding "s" | "m" | "l" | "xl" "s" Styrer luft rundt innholdet og matcher Jøkul sin Figma-kontrakt for kortpadding.
    variant "outlined" | "high" | "low" "high" Velg bakgrunns- eller outline-variant ut fra hvor mye separasjon kortet trenger fra omgivelsene.

    React-props

    Rotelement-props når Card må rendres som et annet element eller kobles til lokal layout.

    Prop Type Standard Beskrivelse
    as React.ElementType "div" Lar kortet rendres som et annet element, for eksempel `a`, når hele kortet er en navigasjonsflate.
    className string ingen Ekstra klasse på rotelementet når kortet må kobles til lokal layout eller sporing.

    Delkomponenter

    CardImage

    API: CardImage · Selektor: img.jkl-card-image

    Bilde-wrapperen sørger for at bilder kan blø ut i kortkanten uten at du må regne ut padding og negativ margin selv.

    Jøkul-props

    Kortets egne props som styrer uttrykk, luft og interaktiv affordance.

    Prop Type Standard Beskrivelse
    placement "top" | "middle" | "bottom" | "full" "top" Justerer negativ margin slik at bildet blør riktig mot kortets kanter ut fra plasseringen i kortet.

    React-props

    Rotelement-props når Card må rendres som et annet element eller kobles til lokal layout.

    Prop Type Standard Beskrivelse
    as React.ElementType "img" Lar `CardImage` rendres som et annet bildeelement når prosjektet bruker en wrapper for responsive bilder.

    Når du skal bruke Card

    Bruk Card når innhold, status og eventuelle handlinger hører tett sammen og bør kunne skannes som en egen enhet.

    Hvis brukeren trenger å sammenligne flere faste felter radvis er tabell eller beskrivelsesliste ofte tydeligere enn mange korte kort.

    Tilgjengelighet

    Klikkbare kort må rendres som ekte interaktive elementer. Visuell klikkbarhet alene er ikke nok for tastaturbrukere og hjelpemidler.

    Kort med bilde trenger fortsatt tydelig tekstlig identitet. Bildet kan gi kontekst, men bør sjelden være eneste bærer av meningen.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Ingen
    Dekket API-props
    6
    Playground-kontroller
    4
    Delkomponenter
    1
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/card/card.min.css

    Ikonkontrakt

    Bruk: Ingen

    Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Card · CardProps · @fremtind/jokul/card · 5 props
    • CardImage · CardImageProps · @fremtind/jokul/card · 2 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Card følger tastaturstøtten til elementet du rendre den som. Klikkbare kort må derfor rendres som ekte lenker eller knapper.

    Semantikk som kreves

    • Bruk Card når flere biter innhold hører tett sammen og bør leses eller aktiveres som én samlet enhet.
    • Hvis hele kortet er klikkbart må det ha et tydelig tilgjengelig navn og ikke inneholde konkurrerende interaktive kontroller.
    • Velg variant ut fra kontrasten i omgivelsene, ikke bare ut fra visuell smak.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at hele kortet bare er klikkbart når dette faktisk gjør oppgaven enklere enn en tydelig sekundær lenke eller knapp.
    • Bekreft at bildeplasseringen fortsatt fungerer når kortet brukes med lengre tekst eller smalere bredder.

    Ytelse

    • Card er ren HTML og CSS uten egen klientruntime.
    • Bruk lette bilder eller reserver riktig plass for dem for å unngå layoutskift når kortene lastes inn i lister.

    Relatert