Card

A surface component with an optional title, caption, and variant-based visual treatment.

A surface component with an optional title, caption, and variant-based visual treatment. Extends Paper - all Paper, Flex, and space/layout props pass through.

Theme-customizable via theme.components.Card - slots root / title / caption for styleOverrides, plus defaultProps.titleProps/.captionProps (token-typed) to restyle the title/caption Typography app-wide; per-instance titleProps/captionProps always win. See docs/customization.md.

Examples

Default

ComponentA flexible card surface with paper and bracketBox variants.

<Card
  title="Component"
  caption="A flexible card surface with paper and bracketBox variants."
  p={3}
/>

Paper

PaperDefault surface with elevation shadow.

<Card variant="paper" p={3} title="Paper" caption="Default surface with elevation shadow." />

Bracket Box

BracketBoxFlat surface with corner bracket accents.

<Card
  variant="bracketBox"
  p={3}
  elevation={0}
  title="BracketBox"
  caption="Flat surface with corner bracket accents."
/>

With Icon

System ScalabilityPass an icon name and the card renders it.

<Card
  variant="interactive"
  icon="account_tree"
  iconProps={{ color: 'primary', size: '2.25rem' }}
  p={4}
  bg="paper"
  title="System Scalability"
  caption="Pass an icon name and the card renders it."
/>

Interactive

InteractiveHover to fill with the secondary background.

<Card
  variant="interactive"
  p={3}
  bg="paper"
  title="Interactive"
  caption="Hover to fill with the secondary background."
/>

Variants

paperDefault card variant.

bracketBoxCorner bracket variant.

interactiveHover-fill variant.

<Flex flexDirection="row" gap={3} flexWrap="wrap">
  <Card variant="paper" p={3} title="paper" caption="Default card variant." />
  <Card
    variant="bracketBox"
    p={3}
    elevation={0}
    title="bracketBox"
    caption="Corner bracket variant."
  />
  <Card
    variant="interactive"
    p={3}
    bg="paper"
    title="interactive"
    caption="Hover-fill variant."
  />
</Flex>

Title Only

<Card p={3} title="Title Only" />

Subtitle Only

Subtitle only - no title above it.

<Card p={3} caption="Subtitle only - no title above it." />

With Children

StackTech in use.

React

TypeScript

Vite

<Card variant="bracketBox" p={3} elevation={0} title="Stack" caption="Tech in use.">
  <View mt={2}>
    {['React', 'TypeScript', 'Vite'].map((item) => (
      <View key={item} p={0.5}>
        {item}
      </View>
    ))}
  </View>
</Card>