Card
displayContainer component with default, elevated, bordered, and interactive hover variants.
import { Card } from '@/components/forge'Preview
Card
Default Card
Structured content container.
Interactive
Hover and tap feedback.
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'default' | 'elevated' | 'bordered' | 'interactive' | 'default' | No | Visual style variant |
padding | 'sm' | 'md' | 'lg' | 'md' | No | Internal padding |
children | React.ReactNode | - | Yes | Card content |
Variants
defaultelevatedborderedinteractive
Accessibility
- Interactive variant uses role="button" and keyboard handlers when onClick is provided
- Focus ring applied via focus-visible