# text

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

## 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 `text-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card">
   <p>html<br>Base Text</p>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-xs">
   <p>text-xs<br>Lorem ipsum</p>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-s">
   <p>text-s<br>Lorem ipsum</p>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-m">
   <p>text-m<br>Lorem ipsum</p>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-l">
   <p>text-l<br>Lorem ipsum</p>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card text-xl">
   <h3>text-xl<br>Lorem ipsum</h3>
  </div>
 </div>
</div>
```

## color .text-*

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

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span>black</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-muted">muted</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span>white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-primary">primary</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-secondary">secondary</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-tertiary">tertiary</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-danger">danger</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-warning">warning</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-accent">accent</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-success">success</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-info">info</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-action">action</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-urgent">urgent</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-2xdark"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-xdark"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-dark"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white-medium"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-white"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-medium"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-light"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-xlight"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-2xs text-center text-truncate text-xs background-black-2xlight"><span class="text-emphasis">emphasis</span></div></div>
   </div>
  </div>
 </div>
</div>
```
