Card
Flexible content containers for dashboards, previews, settings panels, and modular content blocks.
Card body content.
API
All inputs and configuration options for zyra-card.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'outlined' | 'elevated' | 'ghost' | 'default' | Visual style of the card surface |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Internal padding scale |
clickable | boolean | false | Adds hover animation and pointer cursor |
hasHeader | boolean | false | Enables the named header slot |
hasFooter | boolean | false | Enables the named footer slot |
clicked (output) | void | - | Emits when a clickable card is pressed |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- When clickable, wrap content in a <button> or <a> rather than relying on the card click alone
- Use semantic headings inside the header slot for proper document outline
- Avoid placing interactive elements inside a clickable card — creates nested interactives