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 |
Tokens
CSS custom properties zyra-card reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Border--zyra-color-card-border | var(--zyra-color-border-color) | Border color for the default, outlined, and elevated variants. Falls back to this Tier 2 token, but every theme redeclares it with a tuned value that wins in practice — your own override still applies normally since it loads after the theme. |
Radius--zyra-card-radius | 20px | Corner radius of the card surface. Same across all themes. |
Focus ring--zyra-card-focus-ring | var(--zyra-ring) | Focus-visible ring shadow shown when a clickable card is keyboard-focused. |
Inset highlight--zyra-card-inset-highlight | color-mix(in srgb, var(--zyra-color-foreground-inverse) 5%, transparent) | Subtle 1px top-edge highlight line in the resting state. |
Inset highlight (hover)--zyra-card-inset-highlight-hover | color-mix(in srgb, var(--zyra-color-foreground-inverse) 8%, transparent) | Top-edge highlight line on hover and keyboard focus — slightly brighter. |
Inset highlight (active)--zyra-card-inset-highlight-active | color-mix(in srgb, var(--zyra-color-foreground-inverse) 4%, transparent) | Top-edge highlight line while a clickable card is being pressed — slightly dimmer. |
Shadow--zyra-card-shadow | var(--zyra-shadow-sm) | Resting drop shadow. Tuned per theme; falls back to the generic small shadow if unset. |
Elevated shadow--zyra-card-elevated-shadow | var(--zyra-shadow-md) | Drop shadow on hover, keyboard focus, and the elevated variant. Tuned per theme. |
Glow border--zyra-color-glow-border | rgba(var(--zyra-color-glow), 0.46) | Border color on hover and keyboard focus. |
Glow shadow--zyra-color-glow-shadow | 0 24px 70px rgba(var(--zyra-color-glow), 0.18) | Extra ambient glow shadow shown on keyboard focus. |
Glow surface--zyra-color-glow-surface | rgba(var(--zyra-color-glow), 0.1) | Radial gradient tint that fades in behind the card on hover/focus. |
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