Card

Content container with header, footer, and media slots.

Overview

  • Group related information without adding interaction semantics to the container.

Aliases

surface card

When to use

  • Use Card to group related content, controls, or summaries into one readable surface.
  • Use header and footer slots when the grouped content needs explicit structure.

When not to use

  • Do not turn Card into a click-target for primary actions.
  • Do not use Card when the content already has enough structural containment from layout alone.

Structural parts

surface shell

root

Provides surface, border, radius, and spacing behavior.

optional leading block

header

Holds titles, badges, or summary metadata.

main content area

body

Holds the primary content of the card.

optional closing block

footer

Supports compact follow-up metadata or actions.

optional media slot

media

Holds an image or other visual content.

Public interface

Props
NameTypeDefaultDescription
padding'sm' | 'md' | 'lg''md'Chooses the card padding recipe.
surface'default' | 'raised' | 'outlined''default'Chooses the surface emphasis recipe.
themeThemeContract—Sets the theme used to resolve component styles.
Slots
NameDescription
defaultPrimary card body content.
headerOptional header content.
footerOptional footer content.
mediaOptional media content.

Variants, sizes, and states

Variants

  • default: Container with minimal emphasis.
  • raised: Elevated surface for stronger separation.
  • outlined: Lower-elevation surface with clearer edge definition.

Sizes

  • sm: Tighter padding for denser summary blocks.
  • md: Default content density.
  • lg: Larger padding for content and onboarding.

States

  • rest: Cards are intentionally static.

Accessibility

Semantics

  • Card is a structural surface and inherits semantics from the content placed inside it.

Keyboard

  • Card has no custom keyboard behavior because it is non-interactive.

Screen readers

  • Card structure is communicated through its child headings, text, and controls.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-card-bg
#f2f5fb
--dk-card-fg
#16181c
--dk-card-border
#95989d
--dk-card-radius
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-card-padding
clamp(1.778rem, 1.6296rem + 0.658vw, 2.222rem)
--dk-card-shadow
0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04)

media

--dk-card-media-radius
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)
--dk-card-media-min-height
140px

header

--dk-card-header-gap
clamp(0.563rem, 0.5156rem + 0.208vw, 0.703rem)
--dk-card-header-title-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-card-header-title-weight
650
--dk-card-header-meta-size
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

body

--dk-card-body-size
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)
--dk-card-body-line-height
1.6

footer

--dk-card-footer-gap
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

Implementation notes

  • Card has no built-in activation behavior.

Examples

Starter

Summary surface

A basic card with header, body, and footer content.

<Card surface="raised" padding="md"><svelte:fragment slot="header"><strong>Launch checklist</strong></svelte:fragment>Ready for review.<svelte:fragment slot="footer">3 tasks left</svelte:fragment></Card>

Common patterns

Lighter grouping

Use an outlined card when grouping matters more than hierarchy.

<Card surface="outlined" padding="sm">Compact supporting content.</Card>

Edge cases

Spacious editorial surface

Larger padding works for content-forward or onboarding surfaces.

<Card surface="default" padding="lg"><svelte:fragment slot="header"><strong>Getting started</strong></svelte:fragment>Invite the first team members and configure your workspace.</Card>

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

default

pass

padding=md|surface=default

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · single-line 0 px single-line estimate; 0 px minimum width
    280 px: pass 360 px: pass

raised

pass

padding=md|surface=raised

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · single-line 0 px single-line estimate; 0 px minimum width
    280 px: pass 360 px: pass

outlined

pass

padding=md|surface=outlined

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · single-line 0 px single-line estimate; 0 px minimum width
    280 px: pass 360 px: pass