# link

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

## link-*

Varies: `link-*` over 13 color roles.

```html
<div class="grid-2xs" data-grid>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="">base</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-black">black</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-muted">muted</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-primary">primary</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-secondary">secondary</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-tertiary">tertiary</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-danger">danger</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-warning">warning</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-accent">accent</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-success">success</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-info">info</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-action">action</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-urgent">urgent</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-emphasis">emphasis</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-emphasis disabled">disabled</a></p></div></div>
</div>
```

## link-*

Varies: `link-*` over 13 color roles.

```html
<div class="grid-2xs" data-grid>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="">base</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-muted">muted</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-white">white</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-primary">primary</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-secondary">secondary</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-tertiary">tertiary</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-danger">danger</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-warning">warning</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-accent">accent</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-success">success</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-info">info</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-action">action</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-urgent">urgent</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-emphasis">emphasis</a></p></div></div>
 <div class="width-1-2 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><p><a href="" class="text-truncate link-emphasis disabled">disabled</a></p></div></div>
</div>
```