Card

A content tile with optional media, header, body, and actions. One pattern, four honest slots.

Example

Cover art

Field guide

Twelve chapters on building interfaces that earn trust.

<Card>
  <div slot="media">...</div>
  <h3 slot="header">Field guide</h3>
  <p>Twelve chapters...</p>
  <Button slot="actions" href="/guides/theming">Read chapter</Button>
</Card>

Orientation

Cover

Side by side

Media docks left on desktop, stacks on narrow screens.

Read chapter

<Card orientation="horizontal">
  <div slot="media">...</div>
  <h3 slot="header">Side by side</h3>
</Card>

Props

Prop	Type	Default	Description
`elevation`	`0 \| 1 \| 2`	`1`	Shadow level.
`orientation`	`vertical \| horizontal`	`vertical`	Media placement. Horizontal stacks under 28rem.
`padding`	`sm \| md \| lg`	`md`	Body density.

Accessibility

Card is an article; headers inside keep real heading levels.
Media slot shows labeled blocks in docs, your photos in production (with alt text).