Card
Flexible content containers for dashboards, previews, settings panels, and modular content blocks.
Component preview
Explore the available states and the real library behavior for this component.
zyra-card Playground
Control every input live and see the result instantly
This is a simple card body with just text content inside it.
<zyra-card>
<!-- body content -->
</zyra-card>This is the default variant with header, footer and clickable enabled.
This is the outlined variant with header, footer and clickable enabled.
This is the elevated variant with header, footer and clickable enabled.
This is the ghost variant with header, footer and clickable enabled.
padding="none" â€" no padding at all
padding="sm" â€" 12px
padding="md" â€" 20px
padding="lg" â€" 28px
This action is permanent and cannot be undone. All data associated with this project will be deleted.
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraButton, ZyraCard } from 'zyra-ng-ui';
@Component({
selector: 'app-demo-card',
standalone: true,
imports: [ZyraButton, ZyraCard],
template: `
<zyra-card [hasHeader]="true" [hasFooter]="true" padding="lg">
<div slot="header">Project summary</div>
<p>Track progress, approvals, and quick actions inside a clean card layout.</p>
<div slot="footer">
<zyra-button variant="ghost" size="sm">Cancel</zyra-button>
<zyra-button variant="primary" size="sm">Open</zyra-button>
</div>
</zyra-card>
`,
})
export class DemoCardComponent {}
Variants
All the visual modes and states available for this component.
defaultStandard surface card with optional header and footer slots
clickableInteractive card with hover state and pointer cursor
API
All inputs and configuration options for zyra-card.
| Prop | Type | Default | Description |
|---|---|---|---|
hasHeader | boolean | false | Enables the named header slot |
hasFooter | boolean | false | Enables the named footer slot |
padding | 'sm' | 'md' | 'lg' | 'none' | 'md' | Internal padding scale |
clickable | boolean | false | Adds hover animation and pointer cursor |
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