Layout

Card

Surface container for grouping related content. flat is the standard bordered surface; stamp adds the characteristic hard-offset shadow. Use the header slot for section labels and marginalia to place a decorative botanical glyph in the corner.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Container surface for grouping content.

<Card
  variant="stamp"    // 'flat' (default) | 'stamp' (hard shadow)
  padding="md"       // 'none' | 'sm' | 'md' (default) | 'lg'
  header={<Node />}  // ReactNode — rendered above content with border
  marginalia="fern"  // GlyphName — decorative corner glyph
  marginaliaSize={80}// number px (default 80)
>
  content
</Card>