Explore the available states and the real library behavior for this component.
Control every input live and see the result instantly
This is a simple card body with just text content inside it.
<zyr-card
>
<!-- body content -->
</zyr-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.
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 {}