C
Storybook
03Shipped

Card

Composable surface primitive. Only use elevation when it communicates hierarchy.

Import

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@charply/design"

Variants

Default card

Context-aware replies
Generate replies from visible post context, then save or insert.

With header + footer

Generate
3 reply options ready
Pick one, save it, or insert it into the active composer.

Guidelines

docs/design/components/card.md

Do

  • ✓Use `CardContent` as the default wrapper for card body content.
  • ✓Compose `CardTitle` and `CardDescription` for accessible heading structure.
  • ✓Apply custom `className` on `Card` for width constraints (`max-w-md`, etc.).

Don't

  • ✗Nest cards inside cards (creates excessive elevation layering).
  • ✗Use cards for simple list rows — use plain bordered divs or a table pattern instead.
  • ✗Override `bg-card` with a hardcoded color.

See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.