Cards

Surface containers. Combine variant (card/well), optional header/footer slots, gray body/footer tints, and edge-to-edge for the 10 source variants.

Preview

Basic card

Body content goes here.

Edge-to-edge on mobile

Drops the rounded corners until sm; pair with a full-width-on-mobile container.

Card with header

Card title

Body content goes here.

Card with footer

Body content goes here.

Footer line.

Card with header and footer

Card title

Body content goes here.

Footer line.

Card with gray footer

Body content goes here.

Footer line.

Card with gray body

Card title

Body content goes here.

Well

Body content goes here.

Well on gray

Body content goes here.

Well, edge-to-edge on mobile

Body content goes here.

React preview

LiveView (HEEx)

alias DesignSystem.UI.Cards

<!-- Basic -->
<Cards.card>Body</Cards.card>

<!-- Edge-to-edge on mobile (pair with full-width-on-mobile container) -->
<Cards.card edge_to_edge>Body</Cards.card>

<!-- Header + footer -->
<Cards.card>
  <:header><h3>Title</h3></:header>
  Body
  <:footer>Footer</:footer>
</Cards.card>

<!-- Gray footer or gray body -->
<Cards.card>
  Body
  <:footer tone="gray">Footer</:footer>
</Cards.card>

<Cards.card body_tone="gray">
  <:header><h3>Title</h3></:header>
  Body
</Cards.card>

<!-- Wells: variant="well", tone="default" | "gray", optional edge_to_edge -->
<Cards.card variant="well">Body</Cards.card>
<Cards.card variant="well" tone="gray">Body</Cards.card>
<Cards.card variant="well" edge_to_edge>Body</Cards.card>

React (JSX)

import { Card } from "../ui/index.mjs"

// Basic
<Card>Body</Card>

// Edge-to-edge on mobile
<Card edgeToEdge>Body</Card>

// Header + footer
<Card header={<h3>Title</h3>} footer={<span>Footer</span>}>Body</Card>

// Gray footer or gray body
<Card footer={<span>Footer</span>} footerTone="gray">Body</Card>
<Card header={<h3>Title</h3>} bodyTone="gray">Body</Card>

// Wells
<Card variant="well">Body</Card>
<Card variant="well" tone="gray">Body</Card>
<Card variant="well" edgeToEdge>Body</Card>