Card

• Layer: Component
• Base: Custom

Elevation expressed through background tone against --bg. No shadows.

Full Example

Card with header, body, tags, and footer

Vault Item

Captured from Confluence 2 hours ago

Sprint retro notes from Q1 planning. Contains action items for the platform team.

confluenceretro

Open SourceArchive

Sub-Components

Component	Purpose
CardRoot	Outer container — bg.default background, border, rounded corners
CardHeader	Flex column with tight gap for title + description
CardTitle	<h3> in Space Grotesk, lg font size, medium weight
CardDescription	<p> in sm font size, muted text colour
CardBody	Content area with vertical gap
CardFooter	Bottom section with top border separator

Props

All sub-components accept the standard class prop and spread native HTML attributes.

Component	Element	Notes
CardRoot	<div>	Accepts any HTMLAttributes<HTMLDivElement>
CardHeader	<div>
CardTitle	<h3>
CardDescription	<p>
CardBody	<div>
CardFooter	<div>

The compound Card export is also available for namespace-style usage:

import { Card } from "@risingswamp/design-system";

<Card.Root>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Body>...</Card.Body>
</Card.Root>;

Plane 1 Constraints

• No drop shadows — elevation is background tone only
• No gradients
• Single fixed border radius (--radius-lg)

Accessibility

• Non-interactive by default — plain <div> containers
• For interactive cards, add role="button" and tabIndex={0} to CardRoot manually

Token Dependencies

Token	Source
--card-bg	--color-background-default
--card-border	--color-border-default
--card-radius	--radius-lg
--card-title-color	--color-text-default
--card-description-color	--color-text-muted