# height

The markup of every demo on <https://kuiper.oeds.it/height/>, 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 `height-*` ladder over 3 rungs, `s` to `l`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><p class="background-muted text-center">s</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-m background-white-dark"><p class="background-muted text-center">m</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-l background-white-dark"><p class="background-muted text-center">l</p></div></div></div>
</div>
```

## max

Varies: the `height-max-*` ladder over 3 rungs, `s` to `l`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-max-s overflow-auto background-white-dark"><p class="height-l background-muted text-center">max-s</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-max-m overflow-auto background-white-dark"><p class="height-l background-muted text-center">max-m</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-max-l overflow-auto background-white-dark"><p class="height-l background-muted text-center">max-l</p></div></div></div>
</div>
```

## expand

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-m background-white-dark"><div class="height-1-1 background-muted text-center"><p>1-1</p></div></div></div></div>
</div>
```
