# Card

> Surface container with optional header / footer slots. Bordered by default; toggle hoverable for clickable lists and loading for in-place data refresh.

Source: https://ngwr.dev/reference/components/card  
Kind: Component, Standalone

## Installation

```angular-ts
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.

```html
<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.

```html
<!-- 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.

```html
<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` |