Card
Moleculebeta@macaw-ds/ui · since 0.1.0A bordered surface that groups related content: a KPI, a form section, a record summary. Not a page, not a modal.
A compound component. `Card` is the surface; `Card.Header`, `Card.Title`, `Card.Description`, `Card.Body` and `Card.Footer` lay out its parts with the padding the Card sets. Structure comes from a 1 px border; elevation is optional and subtle. `interactive` with `asChild` turns the whole card into a link or button with the shared focus ring. Padding follows the density mode.
Playground
Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.
Focus applies when interactive is on. Motion is visible when interactive is on.
What moves: An interactive card eases its border colour on hover. Hover transitions are 100 ms, so the difference is subtle by design.
Gross volume
Last 30 days
$128,430.00
+12.4% vs previous period
import { Card } from '@macaw-ds/ui';
<Card />
Examples
The named exports of the examples file, rendered as they ship.
- DefaultLive
Gross volume
Last 30 days
$128,430.00
+12.4% vs previous period
- Edge to edge
Invoice Amount INV-0041 $4,200.00 INV-0040 $1,180.00 - Interactive
- Kpi row
Gross volume
$128,430.00
+12.4% vs previous period
Net revenue
$96,210.55
+8.1% vs previous period
Refunds
$2,118.00
-0.6% vs previous period
- Raised
A raised card sits on the canvas with a subtle shadow.
Payout schedule
Funds arrive two business days after each payout.
Payouts run every weekday at 05:00 UTC to the account ending 4421.