# leader

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

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

```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"><dl class="background-white-dark padding-4xs"><dt class="leader" data-leader><span>Kuiper</span></dt><dd>one vocabulary</dd><dt class="leader" data-leader><span>UIkit</span></dt><dd>behaviour</dd><dt class="leader" data-leader><span>DataTables</span></dt><dd>tables</dd><dt class="leader" data-leader><span>ECharts</span></dt><dd>charts</dd><dt class="leader" data-leader><span>TinyMCE</span></dt><dd>rich text</dd></dl></div></div>
</div>
```

## fill

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"><dl class="background-white-dark padding-4xs"><dt class="leader leader-fill" data-fill="." data-leader><span>Kuiper</span></dt><dd>one vocabulary</dd><dt class="leader leader-fill" data-fill="." data-leader><span>UIkit</span></dt><dd>behaviour</dd><dt class="leader leader-fill" data-fill="." data-leader><span>DataTables</span></dt><dd>tables</dd><dt class="leader leader-fill" data-fill="." data-leader><span>ECharts</span></dt><dd>charts</dd><dt class="leader leader-fill" data-fill="." data-leader><span>TinyMCE</span></dt><dd>rich text</dd></dl></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"><dl class="background-white-dark padding-4xs"><dt class="leader leader-fill" data-fill="-" data-leader><span>Kuiper</span></dt><dd>one vocabulary</dd><dt class="leader leader-fill" data-fill="-" data-leader><span>UIkit</span></dt><dd>behaviour</dd><dt class="leader leader-fill" data-fill="-" data-leader><span>DataTables</span></dt><dd>tables</dd><dt class="leader leader-fill" data-fill="-" data-leader><span>ECharts</span></dt><dd>charts</dd><dt class="leader leader-fill" data-fill="-" data-leader><span>TinyMCE</span></dt><dd>rich text</dd></dl></div></div>
</div>
```

## hide

```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"><dl class="background-white-dark padding-4xs"><dt class="leader leader-fill leader-hide" data-fill="." data-leader><span>Kuiper</span></dt><dd>one vocabulary</dd><dt class="leader leader-fill leader-hide" data-fill="." data-leader><span>UIkit</span></dt><dd>behaviour</dd><dt class="leader leader-fill leader-hide" data-fill="." data-leader><span>DataTables</span></dt><dd>tables</dd><dt class="leader leader-fill leader-hide" data-fill="." data-leader><span>ECharts</span></dt><dd>charts</dd><dt class="leader leader-fill leader-hide" data-fill="." data-leader><span>TinyMCE</span></dt><dd>rich text</dd></dl></div></div>
</div>
```