Components / Card

Card

Grouped content that stands on its own: settings sections, digests, summaries. The default surface for a standalone block with an optional header and footer.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@layers/ui/card'

Rendered stock

House rules

• Sub-components own all spacing, driven by the --card-spacing variable (24px, 16px at size="sm"). No custom className on CardHeader, CardContent, or CardFooter.
• A form goes inside CardContent; the submit button lives in CardFooter as a sibling, linked via form={FORM_ID}. A form wrapping the Card children collapses the gap layout.
• Settings cards are stock Card: CardContent holds the FieldSet, CardFooter holds the Save button.
• size="sm" tightens padding for dense contexts like chart cards.
• Cards are borderless; on a secondary plane the container declares data-surface="secondary", which remaps --card to --background for its subtree. Never restyle a card background at the call site (see the Surfaces section of the tokens doc).
• divided draws a full-bleed hairline between adjacent CardContent blocks. Reach for it ONLY when the card carries distinct concerns (plan vs. credits, connect vs. connected list). For progressive disclosure or a breakdown OF the block above it, leave it borderless — the card gap is the correct separation. Never hand-roll the line with a border-t utility or a stray Separator; the prop owns it.