# shadow

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

## box-shadow

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

```html
<div class="grid-s" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card padding-xs background-white text-center box-shadow"><p>box-shadow</p></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 padding-xs background-white text-center box-shadow box-shadow-xs"><p>xs</p></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 padding-xs background-white text-center box-shadow box-shadow-s"><p>s</p></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 padding-xs background-white text-center box-shadow box-shadow-m"><p>m</p></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 padding-xs background-white text-center box-shadow box-shadow-l"><p>l</p></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 padding-xs background-white text-center box-shadow box-shadow-xl"><p>xl</p></div></div>
</div>
```

## box-shadow-hover

Varies: the `box-shadow-hover-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div class="grid-s" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card padding-xs background-white text-center box-shadow-hover"><p>box-shadow-hover</p></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 padding-xs background-white text-center box-shadow-hover-xs"><p>xs</p></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 padding-xs background-white text-center box-shadow-hover-s"><p>s</p></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 padding-xs background-white text-center box-shadow-hover-m"><p>m</p></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 padding-xs background-white text-center box-shadow-hover-l"><p>l</p></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 padding-xs background-white text-center box-shadow-hover-xl"><p>xl</p></div></div>
</div>
```