# card

The markup of every demo on <https://kuiper.oeds.it/card/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `card-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card card-muted"><div class="card-header"><h3 class="card-title">card-header</h3></div><div class="card-body"><p>card-body</p></div><div class="card-footer"><p>card-footer</p></div></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card card-muted card-xs"><div class="card-header"><h3 class="card-title">card-xs</h3></div><div class="card-body"><p>card-body</p></div><div class="card-footer"><p>card-footer</p></div></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card card-muted card-s"><div class="card-header"><h3 class="card-title">card-s</h3></div><div class="card-body"><p>card-body</p></div><div class="card-footer"><p>card-footer</p></div></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card card-muted card-m"><div class="card-header"><h3 class="card-title">card-m</h3></div><div class="card-body"><p>card-body</p></div><div class="card-footer"><p>card-footer</p></div></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card card-muted card-l"><div class="card-header"><h3 class="card-title">card-l</h3></div><div class="card-body"><p>card-body</p></div><div class="card-footer"><p>card-footer</p></div></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card card-muted card-xl"><div class="card-header"><h3 class="card-title">card-xl</h3></div><div class="card-body"><p>card-body</p></div><div class="card-footer"><p>card-footer</p></div></div></div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: `card-*` over 14 color roles.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-black"><div class="card-header"><h3 class="card-title">black</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-muted"><div class="card-header"><h3 class="card-title">muted</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-white"><div class="card-header"><h3 class="card-title">white</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-primary"><div class="card-header"><h3 class="card-title">primary</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-secondary"><div class="card-header"><h3 class="card-title">secondary</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-tertiary"><div class="card-header"><h3 class="card-title">tertiary</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-danger"><div class="card-header"><h3 class="card-title">danger</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-warning"><div class="card-header"><h3 class="card-title">warning</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-accent"><div class="card-header"><h3 class="card-title">accent</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-success"><div class="card-header"><h3 class="card-title">success</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-info"><div class="card-header"><h3 class="card-title">info</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-action"><div class="card-header"><h3 class="card-title">action</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-urgent"><div class="card-header"><h3 class="card-title">urgent</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-emphasis"><div class="card-header"><h3 class="card-title">emphasis</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card card-emphasis disabled"><div class="card-header"><h3 class="card-title">disabled</h3></div><div class="card-body"><p>body</p></div><div class="card-footer"><p>footer</p></div></div></div>
</div>
```
