# visibility

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

## breakpoint

Varies: 8 specimens.

```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="hidden\@s background-white-dark text-center"><p class="background-muted">hidden@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="hidden\@m background-white-dark text-center"><p class="background-muted">hidden@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="hidden\@l background-white-dark text-center"><p class="background-muted">hidden@l</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="hidden\@xl background-white-dark text-center"><p class="background-muted">hidden@xl</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="visible\@s background-white-dark text-center"><p class="background-muted">visible@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="visible\@m background-white-dark text-center"><p class="background-muted">visible@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="visible\@l background-white-dark text-center"><p class="background-muted">visible@l</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="visible\@xl background-white-dark text-center"><p class="background-muted">visible@xl</p></div></div></div>
</div>
```

## state

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-3@l width-1-4@xl"><div class="card"><div class="background-white-dark text-center"><p class="hidden background-muted">hidden</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="background-white-dark text-center"><p class="invisible background-muted">invisible</p></div></div></div>
</div>
```

## hover

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-3@l width-1-4@xl"><div class="card visible-toggle"><div class="background-white-dark text-center"><p class="background-muted">visible-toggle</p><p class="hidden-hover background-muted">hidden-hover</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 visible-toggle"><div class="background-white-dark text-center"><p class="background-muted">visible-toggle</p><p class="invisible-hover background-muted">invisible-hover</p></div></div></div>
</div>
```

## pointer

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-3@l width-1-4@xl"><div class="card"><div class="background-white-dark text-center"><p class="hidden-touch background-muted">hidden-touch</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="background-white-dark text-center"><p class="hidden-notouch background-muted">hidden-notouch</p></div></div></div>
</div>
```

## other

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-3@l width-1-4@xl"><div class="card"><div class="background-white-dark text-center"><p class="hidden-empty background-muted"></p><p class="background-muted">hidden-empty</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="background-white-dark text-center"><p class="hidden-visually background-muted">hidden-visually</p><p class="background-muted">hidden-visually</p></div></div></div>
</div>
```