Installation
import { WrCard, WrCardHeader, WrCardFooter } from 'ngwr/card';
@Component({ imports: [WrCard, WrCardHeader, WrCardFooter] })
export class MyComponent {}Basic usage
Compose with <wr-card-header>, body content, and <wr-card-footer>. Both slots are optional.
<wr-card>
<wr-card-header>
<h3>Settings</h3>
</wr-card-header>
<p>Body content.</p>
<wr-card-footer>
<button wr-btn color="primary">Save</button>
</wr-card-footer>
</wr-card>Without header / footer
Drop the slots to get a plain padded surface.
<!-- Header / footer slots are optional. -->
<wr-card>
<p>Just a surface around content.</p>
</wr-card>Variants
Hoverable for clickable cards, no-border for embedded layouts, compact for dense tables. Loading overlays a spinner without unmounting the body.
<wr-card hoverable>Click me</wr-card>
<wr-card [bordered]="false">No border</wr-card>
<wr-card compact>Tighter paddings</wr-card>
<wr-card [loading]="reloading()">
<p>Spinner overlay while data loads.</p>
</wr-card>API
| Name | Description | Type | Default |
|---|---|---|---|
bordered | 1px border around the surface. | boolean | true |
hoverable | Lift + drop-shadow on hover. Also sets cursor: pointer. | boolean | false |
loading | Overlay with a centred spinner + dim body. Sets aria-busy. | boolean | false |
compact | Half-paddings for tight layouts. | boolean | false |
<wr-card-header> | Header slot. Projected content gets the wr-card__header BEM class. | directive | — |
<wr-card-footer> | Footer slot. Projected content gets the wr-card__footer BEM class. | directive | — |
CSS variables
Custom properties ngwr/card publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-card-bg | var(--wr-color-surface) | .wr-card |
--wr-card-border | var(--wr-color-outline) | .wr-card |
--wr-card-color | var(--wr-color-on-surface) | .wr-card |
--wr-card-padding-x | 1.25rem | .wr-card +1 variant override |
--wr-card-padding-y | 1rem | .wr-card +1 variant override |
--wr-card-radius | var(--wr-border-radius-base) | .wr-card |
--wr-card-shadow | var(--wr-shadow-xs) | .wr-card |
--wr-card-shadow-hover | var(--wr-shadow-overlay) | .wr-card |