# corner

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

## corner-*

Varies: 4 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-4@xl"><div class="card"><div class="border padding-xs text-center corner-squared"><p class="text-truncate">squared</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="border padding-xs text-center corner-pilled"><p class="text-truncate">pilled</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="border padding-xs text-center corner-circled"><p class="text-truncate">circled</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="border padding-xs text-center corner-rounded"><p class="text-truncate">rounded</p></div></div></div>
</div>
```

## corner-rounded-*

Varies: the `corner-rounded-*` 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-4@xl"><div class="card"><div class="border padding-xs text-center corner-rounded"><p class="text-truncate">default</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="border padding-xs text-center corner-rounded-xs"><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-4@xl"><div class="card"><div class="border padding-xs text-center corner-rounded-s"><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-4@xl"><div class="card"><div class="border padding-xs text-center corner-rounded-m"><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-4@xl"><div class="card"><div class="border padding-xs text-center corner-rounded-l"><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-4@xl"><div class="card"><div class="border padding-xs text-center corner-rounded-xl"><p class="text-truncate">xl</p></div></div></div>
</div>
```