Card

Card

A composable container with optional header, body, and footer slots.

Usage

typescript
1import { Card } from '@flint-ui/core'
2

3<Card>
4  <Card.Header>
5    <h3>Project Update</h3>
6  </Card.Header>
7  <Card.Body>
8    <p>Sprint velocity increased 23% this quarter.</p>
9  </Card.Body>
10  <Card.Footer>
11    <Button variant="ghost">View Details</Button>
12  </Card.Footer>
13</Card>

Variants

Cards support elevated, outlined, and flat variants. Combine with design tokens for custom surface colors.

Card accepts a className prop for custom styling. Use design tokens for surface colors to maintain consistency across themes.

Advanced Usage