Card

Surface container with white background and subtle border. Compose with sub-components or use as a bare wrapper.

Anatomy

<Card>
  <CardImage position="top" />       {/* optional */}
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardDivider />                    {/* optional */}
  <CardFooter />
</Card>

Examples

Project Phoenix

A redesign of the core platform.

Last updated 2 hours ago by Haydn.

Image — top

Discover the Alps

A four-day guided hiking experience through the Swiss Alps.

Image — left

Horizon Valley

Rolling hills and golden light, captured at dusk.

LandscapeFeatured

Image — right

Horizon Valley

Rolling hills and golden light, captured at dusk.

Image — bottom

Discover the Alps

A four-day guided hiking experience through the Swiss Alps.

Overlay

Adventure

Discover the Alps

A four-day guided hiking experience through the Swiss Alps.

Pricing

Starter

£0/month

For individuals and small projects.

5 projects

1 workspace

2GB storage

Community support

Pro

Popular

£29/month

For growing teams who need more power.

Unlimited projects

5 workspaces

50GB storage

Priority support

Advanced analytics

Activity feed

Recent activity

HW
Haydn merged feat/dark-mode
2m ago
Merged
JD
Jamie opened Toggle animation lag
18m ago
Open
SR
Sara deployed v1.4.0
1h ago
Deploy
MK
Mark closed Checkbox contrast bug
3h ago
Closed

Card props

noPadding= false

boolean

Removes default padding — useful for full-bleed images or tables.

children

ReactNode

Card content.

Prop	Type	Default	Description
noPadding	boolean	false	Removes default padding — useful for full-bleed images or tables.
children	ReactNode	—	Card content.

CardTitle props

as= 'h3'

'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

HTML heading element to render.

Prop	Type	Default	Description
as	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h3'	HTML heading element to render.

CardImage props

src*

string

Image URL.

alt= ''

string

Alt text for the image.

position= 'top'

'top' | 'bottom' | 'left' | 'right'

Controls rounding and layout. Use left/right with flex flex-row on the Card.

Prop	Type	Default	Description
src*	string	—	Image URL.
alt	string	''	Alt text for the image.
position	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Controls rounding and layout. Use left/right with flex flex-row on the Card.

PreviousAccordion NextCollapsible