# text-hero

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

## .hero-*

Varies: the `hero-*` 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 hero hero-xs">
   <h3>hero-xs<br>Lorem ipsum</h3>
  </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 hero hero-s">
   <h3>hero-s<br>Lorem ipsum</h3>
  </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 hero hero-m">
   <h3>hero-m<br>Lorem ipsum</h3>
  </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 hero hero-l">
   <h3>hero-l<br>Lorem ipsum</h3>
  </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 hero hero-xl">
   <h3>hero-xl<br>Lorem ipsum</h3>
  </div>
 </div>
</div>
```