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. 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.