# align

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

## align

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-2@xl"><div class="card"><div class="background-white-dark padding-4xs"><div class="align-left width-1-3"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="" loading="lazy"></div><p>Kuiper is an overarching HTML, CSS and JavaScript framework. It drives four bundled engines from one vocabulary and rebuilds every form control, so a project writes one class name and gets the same answer everywhere it is used.</p></div><p class="background-muted text-center">left</p></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"><div class="background-white-dark padding-4xs"><div class="align-right width-1-3"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="" loading="lazy"></div><p>Kuiper is an overarching HTML, CSS and JavaScript framework. It drives four bundled engines from one vocabulary and rebuilds every form control, so a project writes one class name and gets the same answer everywhere it is used.</p></div><p class="background-muted text-center">right</p></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"><div class="background-white-dark padding-4xs"><div class="align-center width-1-3"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="" loading="lazy"></div><p>Kuiper is an overarching HTML, CSS and JavaScript framework. It drives four bundled engines from one vocabulary and rebuilds every form control, so a project writes one class name and gets the same answer everywhere it is used.</p></div><p class="background-muted text-center">center</p></div></div>
</div>
```