Card Component
Capsule-styled cards with rounded corners, solid ink borders, and orbit hover effects.
Product Cards
New
Best Seller
LimitedUser Profile Cards
Passionate about creating intuitive user experiences. Previously at Google and Airbnb. Always exploring new design trends.
Building the future of design tools. Featured in Forbes 30 Under 30.
Without Hover Effect
Use CSS variables to disable orbit hover: [--orbit-hover-outline-offset:0] [--orbit-hover-outline-color:transparent] [--orbit-hover-deco-opacity:0]
This card has a clean, static appearance without the orbit expansion on hover. Useful when cards are densely packed.
The button inside becomes the primary interactive element.
Clean card style for list items where individual hover effects would be too noisy.
Project Progress
Event Cards
Join 2,000+ designers and developers for three days of talks, workshops, and networking.
Learn best practices for building inclusive web experiences with our accessibility experts.
API Reference
Card
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||
CardHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||
CardTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||
CardDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||
CardContent
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||
CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||
CardAction
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Accepts standard HTML div props | |||