# drop

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

## mode

Varies: 2 specimens.

```html
<div class="grid-2xl" data-grid>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl">
  <div class="card text-center">
   <button class="button button-s button-action" type="button">click</button>
   <div class="drop" data-drop="mode:click;">
    <div class="card background-muted padding-2xs">
     <p>Lorem ipsum</p>
    </div>
   </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 text-center">
   <button class="button button-s button-action" type="button">hover</button>
   <div class="drop" data-drop="mode: hover;">
    <div class="card background-muted padding-2xs">
     <p>Lorem ipsum</p>
    </div>
   </div>
  </div>
 </div>
</div>
```

## position

Varies: 9 specimens.

```html
<div class="grid-2xl" data-grid>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-center">
   <button class="button button-s button-action" type="button">default</button>
   <div class="drop" data-drop="mode:click;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-center">
   <button class="button button-s button-action" type="button">top-left</button>
   <div class="drop" data-drop="mode:click; pos: top-left;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-center">
   <button class="button button-s button-action" type="button">top-center</button>
   <div class="drop" data-drop="mode:click; pos: top-center;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-center">
   <button class="button button-s button-action" type="button">top-right</button>
   <div class="drop" data-drop="mode:click; pos: top-right;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-right">
   <button class="button button-s button-action" type="button">left-center</button>
   <div class="drop" data-drop="mode:click; pos: left-center;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-left">
   <button class="button button-s button-action" type="button">right-center</button>
   <div class="drop" data-drop="mode:click; pos: right-center;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-center">
   <button class="button button-s button-action" type="button">bottom-left</button>
   <div class="drop" data-drop="mode:click; pos: bottom-left;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-center">
   <button class="button button-s button-action" type="button">bottom-center</button>
   <div class="drop" data-drop="mode:click; pos: bottom-center;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </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 text-center">
   <button class="button button-s button-action" type="button">bottom-right</button>
   <div class="drop" data-drop="mode:click; pos: bottom-right;">
    <div class="card background-muted padding-2xs"><p>Lorem ipsum</p></div>
   </div>
  </div>
 </div>
</div>
```

## dropbar

Varies: 2 specimens.

```html
<div class="grid-2xl" data-grid>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-center">
   <button class="button button-s button-action" type="button">stretch x</button>
   <div class="dropbar" data-drop="mode:click; stretch:x;">
    <div class="card background-muted padding-2xs">
     <p>Lorem ipsum</p>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-center">
   <button class="button button-s button-action" type="button">stretch y</button>
   <div class="dropbar" data-drop="mode:click; stretch:y;">
    <div class="card background-muted padding-2xs">
     <p>Lorem ipsum</p>
    </div>
   </div>
  </div>
 </div>
</div>
```