Expandable Card
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { ExpandableCard } from "@corew500/ui/expandable-card"
<ExpandableCard>Content</ExpandableCard>Variants
expandableCardVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultoutline | default |
| size | smdefaultlg | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| expanded | enum | — | Controlled expanded state |
| onExpandedChange | (expanded: boolean) => void | — | Callback when expanded state changes |
| defaultExpanded | enum | false | Default expanded state for uncontrolled usage |
| variant | enum | default | — |
| size | enum | default | — |
Accessibility
Keyboard Navigation
- Escape key closes the expanded view.
- Trigger is keyboard accessible (Enter/Space).
Focus Management
- Focus is trapped within expanded content.
- Focus returns to trigger on close.
Screen Readers
- - Expanded content has `role="dialog"` and `aria-modal="true"`.
Localization
Translatable Content
- - All card content (title, description, body) should be translated.
- Close button has `aria-label="Close"` which should be localized.