# section

The markup of every demo on <https://kuiper.oeds.it/section/>, 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-4@xl"><div class="card"><div class="section section-muted text-center"><p>section</p></div></div></div>
</div>
```

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `section-*` ladder over 13 rungs, `5xs` to `5xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-0 section-muted text-center"><p class="text-truncate">0</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-1 section-muted text-center"><p class="text-truncate">1</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-2 section-muted text-center"><p class="text-truncate">2</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-3 section-muted text-center"><p class="text-truncate">3</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-5xs section-muted text-center"><p class="text-truncate">5xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-4xs section-muted text-center"><p class="text-truncate">4xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-3xs section-muted text-center"><p class="text-truncate">3xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-2xs section-muted text-center"><p class="text-truncate">2xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-xs section-muted text-center"><p class="text-truncate">xs</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-s section-muted text-center"><p class="text-truncate">s</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-m section-muted text-center"><p class="text-truncate">m</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-l section-muted text-center"><p class="text-truncate">l</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-xl section-muted text-center"><p class="text-truncate">xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-2xl section-muted text-center"><p class="text-truncate">2xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-3xl section-muted text-center"><p class="text-truncate">3xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-4xl section-muted text-center"><p class="text-truncate">4xl</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-4@l width-expand@xl"><div class="card"><div class="section section-5xl section-muted text-center"><p class="text-truncate">5xl</p></div></div></div>
</div>
```

## collapse

Varies: 3 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-4@xl"><div class="card"><div class="section section-collapse section-muted text-center"><p>collapse</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="section section-collapse-top section-muted text-center"><p>collapse-top</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="section section-collapse-bottom section-muted text-center"><p>collapse-bottom</p></div></div></div>
</div>
```

## monochrome

Varies: 18 specimens.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around 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-3@xl"><div class="card"><div class="text-center section section-black"><p class="text-truncate">black</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-medium"><p class="text-truncate">black-medium</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-light"><p class="text-truncate">black-light</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-xlight"><p class="text-truncate">black-xlight</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-2xlight"><p class="text-truncate">black-2xlight</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-3xlight"><p class="text-truncate">black-3xlight</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-4xlight"><p class="text-truncate">black-4xlight</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-5xlight"><p class="text-truncate">black-5xlight</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-black-6xlight"><p class="text-truncate">black-6xlight</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-6xdark"><p class="text-truncate">white-6xdark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-5xdark"><p class="text-truncate">white-5xdark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-4xdark"><p class="text-truncate">white-4xdark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-3xdark"><p class="text-truncate">white-3xdark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-2xdark"><p class="text-truncate">white-2xdark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-xdark"><p class="text-truncate">white-xdark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-dark"><p class="text-truncate">white-dark</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white-medium"><p class="text-truncate">white-medium</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="text-center section section-white"><p class="text-truncate">white</p></div></div></div>
</div>
```

## chrome

Varies: `section-*` over 12 color roles.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around 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-5@xl"><div class="card"><div class="text-center section section-muted"><p class="text-truncate">muted</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-primary"><p class="text-truncate">primary</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-secondary"><p class="text-truncate">secondary</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-tertiary"><p class="text-truncate">tertiary</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-danger"><p class="text-truncate">danger</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-warning"><p class="text-truncate">warning</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-accent"><p class="text-truncate">accent</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-success"><p class="text-truncate">success</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-info"><p class="text-truncate">info</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-action"><p class="text-truncate">action</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-urgent"><p class="text-truncate">urgent</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-emphasis"><p class="text-truncate">emphasis</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-5@xl"><div class="card"><div class="text-center section section-emphasis disabled"><p class="text-truncate">disabled</p></div></div></div>
</div>
```