# overlay

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

## overlay

Varies: `overlay-*` over 3 color roles.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-expand">
  <div class="card background-muted">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black"><span>overlay-black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-100"><span>100</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-95"><span>95</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-90"><span>90</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-85"><span>85</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-80"><span>80</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-75"><span>75</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-70"><span>70</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-65"><span>65</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-60"><span>60</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-55"><span>55</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-50"><span>50</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-45"><span>45</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-40"><span>40</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-35"><span>35</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-30"><span>30</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-25"><span>25</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-20"><span>20</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-15"><span>15</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-10"><span>10</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-5"><span>5</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-black-0"><span>0</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card background-muted">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray"><span>overlay-gray</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-100"><span>100</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-95"><span>95</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-90"><span>90</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-85"><span>85</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-80"><span>80</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-75"><span>75</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-70"><span>70</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-65"><span>65</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-60"><span>60</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-55"><span>55</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-50"><span>50</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-45"><span>45</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-40"><span>40</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-35"><span>35</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-30"><span>30</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-25"><span>25</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-20"><span>20</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-15"><span>15</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-10"><span>10</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-5"><span>5</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-gray-0"><span>0</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card background-muted">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white"><span>overlay-white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-100"><span>100</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-95"><span>95</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-90"><span>90</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-85"><span>85</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-80"><span>80</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-75"><span>75</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-70"><span>70</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-65"><span>65</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-60"><span>60</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-55"><span>55</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-50"><span>50</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-45"><span>45</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-40"><span>40</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-35"><span>35</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-30"><span>30</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-25"><span>25</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-20"><span>20</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-15"><span>15</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-10"><span>10</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-5"><span>5</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs overlay-white-0"><span>0</span></div></div>
   </div>
  </div>
 </div>
</div>
```

## usage

Varies: 6 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl">
  <div class="card position-relative">
   <img src="/images/thumbnail-1.jpg" width="480" height="270" alt="" class="width-1-1">
   <div class="position-cover flex flex-center flex-middle overlay-black-75"><p class="text-l text-center">overlay-black-75</p></div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl">
  <div class="card position-relative">
   <img src="/images/thumbnail-2.jpg" width="480" height="270" alt="" class="width-1-1">
   <div class="position-cover flex flex-center flex-middle overlay-gray-50"><p class="text-l text-center">overlay-gray-50</p></div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl">
  <div class="card position-relative">
   <img src="/images/thumbnail-3.jpg" width="480" height="270" alt="" class="width-1-1">
   <div class="position-cover flex flex-center flex-middle overlay-white-75"><p class="text-l text-center">overlay-white-75</p></div>
  </div>
 </div>
</div>
```
