Card

Use for structured information blocks, settings panels, and content containers

Card is the main structured container component family.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@downcity/ui";

Basic Example

Loading preview…

Subcomponents

  • Card
  • CardHeader
  • CardTitle
  • CardDescription
  • CardAction
  • CardContent
  • CardFooter

Sizes

  • size="default"
  • size="sm"

Usage Notes

  • Prefer the full composition instead of dumping everything into CardContent
  • Use CardAction for top-right auxiliary actions
  • Use CardFooter for the bottom action row