Card

The Card component is a surface container with optional Header, Body, and Footer sub-components. Supports four variants plus hoverable and clickable modes.

Preview

Variants

Basic card

This is a default card with a title and some description text inside the body.

Card with footer

A card with a header, body content, and a footer containing actions.

Elevated card

Adds a stronger shadow and a lift effect on hover.

Clickable card

The entire card surface is interactive — useful for navigation or selection.

Example: Product card

Product Card

🪨

Pebble ProNew

The complete design system starter kit for your next project.

Import


import { Card } from '@chloe0592/pebble'

Usage


<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content goes here.</Card.Body>
  <Card.Footer>Footer actions</Card.Footer>
</Card>
 
<Card variant="elevated" hoverable>
  <Card.Body>Elevated card with hover effect.</Card.Body>
</Card>
 
<Card variant="bordered" clickable onClick={() => {}}>
  <Card.Body>Clickable card.</Card.Body>
</Card>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'elevated' \| 'bordered' \| 'flat'`	`'default'`	Visual style
`hoverable`	`boolean`	`false`	Adds a lift effect on hover
`clickable`	`boolean`	`false`	Makes the whole card interactive

Card.Header, Card.Body, and Card.Footer accept any children and standard div props.