# text-heading

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

## .h*

Varies: 6 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1">
  <div class="card h1">
   <h3>h1<br>Lorem ipsum</h3>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h2">
   <h3>h2<br>Lorem ipsum</h3>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h3">
   <h3>h3<br>Lorem ipsum</h3>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h4">
   <p>h4<br>Lorem ipsum</p>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h5">
   <p>h5<br>Lorem ipsum</p>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h6">
   <p>h6<br>Lorem ipsum</p>
  </div>
 </div>
</div>
```

## :where(article) h*

Varies: 6 specimens.

```html
<article headingoffset="2">
 <div class="grid-3xs" data-grid>
  <div class="width-1-1">
   <div class="card">
    <h1>heading1<br>Lorem ipsum</h1>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h2>heading2<br>Lorem ipsum</h2>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h3>heading3<br>Lorem ipsum</h3>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h4>heading4<br>Lorem ipsum</h4>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h5>heading5<br>Lorem ipsum</h5>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h6>heading6<br>Lorem ipsum</h6>
   </div>
  </div>
 </div>
</article>
```

## .h*

Varies: 6 specimens.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1">
  <div class="card h1">
   <h3><i data-icon="star"></i>h1</h3>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h2">
   <h3><i data-icon="star"></i>h2</h3>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h3">
   <h3><i data-icon="star"></i>h3</h3>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h4">
   <p><i data-icon="star"></i>h4</p>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h5">
   <p><i data-icon="star"></i>h5</p>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card h6">
   <p><i data-icon="star"></i>h6</p>
  </div>
 </div>
</div>
```

## :where(article) h*

Varies: 6 specimens.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<article headingoffset="2">
 <div class="grid-3xs" data-grid>
  <div class="width-1-1">
   <div class="card">
    <h1><i data-icon="star"></i>heading1</h1>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h2><i data-icon="star"></i>heading2</h2>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h3><i data-icon="star"></i>heading3</h3>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h4><i data-icon="star"></i>heading4</h4>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h5><i data-icon="star"></i>heading5</h5>
   </div>
  </div>
  <div class="width-1-1">
   <div class="card">
    <h6><i data-icon="star"></i>heading6</h6>
   </div>
  </div>
 </div>
</article>
```