# border

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

## border-*

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

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

## border-remove-*

Varies: 8 specimens.

```html
<div class="grid-xs" data-grid>
 <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="border padding-xs text-center"><p class="text-truncate">border</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="border border-remove padding-xs text-center"><p class="text-truncate">remove</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="border border-remove-top padding-xs text-center"><p class="text-truncate">remove-top</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="border border-remove-bottom padding-xs text-center"><p class="text-truncate">remove-bottom</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="border border-remove-left padding-xs text-center"><p class="text-truncate">remove-left</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="border border-remove-right padding-xs text-center"><p class="text-truncate">remove-right</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="border border-remove-vertical padding-xs text-center"><p class="text-truncate">remove-vertical</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="border border-remove-horizontal padding-xs text-center"><p class="text-truncate">remove-horizontal</p></div></div></div>
</div>
```

## data-border

Varies: 11 specimens.

```html
<div class="grid-xs" data-grid>
 <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="padding-xs text-center" data-border><p class="text-truncate">data-border</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="padding-xs text-center" data-border="size:l;"><p class="text-truncate">size:l;</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="padding-xs text-center" data-border="color:primary;"><p class="text-truncate">color:primary;</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="padding-xs text-center" data-border="size:l; color:primary;"><p class="text-truncate">size:l; color:primary;</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="border-remove-top padding-xs text-center" data-border="size:l; color:danger;"><p class="text-truncate">+ border-remove-top</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="padding-xs text-center" data-border="size:l; color:action; remove:top;"><p class="text-truncate">remove:top;</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="padding-xs text-center" data-border="size:l; color:action; remove:bottom;"><p class="text-truncate">remove:bottom;</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="padding-xs text-center" data-border="size:l; color:action; remove:left;"><p class="text-truncate">remove:left;</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="padding-xs text-center" data-border="size:l; color:action; remove:right;"><p class="text-truncate">remove:right;</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="padding-xs text-center" data-border="size:l; color:action; remove:vertical;"><p class="text-truncate">remove:vertical;</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="padding-xs text-center" data-border="size:l; color:action; remove:horizontal;"><p class="text-truncate">remove:horizontal;</p></div></div></div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: `border-*` over 14 color roles.

Shown 3 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-4@xl"><div class="card"><div class="card border border-black padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border padding-2xs text-center"><p class="text-truncate">border</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="card border border-muted padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-white padding-2xs text-center"><p class="text-truncate">white</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="card border border-primary padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-secondary padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-tertiary padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-danger padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-warning padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-accent padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-success padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-info padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-action padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-urgent padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-emphasis padding-2xs text-center"><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-4@xl"><div class="card"><div class="card border border-emphasis padding-2xs text-center disabled"><p class="text-truncate">emphasis</p></div></div></div>
</div>
```