# height-viewport

The markup of every demo on <https://kuiper.oeds.it/height-viewport/>, 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-`.

## class

Varies: 2 specimens.

```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-2@xl"><div class="card"><div class="height-viewport background-white-dark"><p class="background-muted text-center">height-viewport</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div class="height-viewport-2 background-white-dark"><p class="background-muted text-center">height-viewport-2</p></div></div></div>
</div>
```

## attribute

Varies: 6 specimens.

```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-2@xl"><div class="card"><div data-height-viewport="" class="background-white-dark"><p class="background-muted text-center">height-viewport</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-height-viewport="expand: true;" class="background-white-dark"><p class="background-muted text-center">expand</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-height-viewport="offset-top: true;" class="background-white-dark"><p class="background-muted text-center">offset-top</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-height-viewport="offset-bottom: true;" class="background-white-dark"><p class="background-muted text-center">offset-bottom</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-height-viewport="offset-bottom: 50;" class="background-white-dark"><p class="background-muted text-center">offset-bottom 50</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-height-viewport="min: 200;" class="background-white-dark"><p class="background-muted text-center">min</p></div></div></div>
</div>
```