# Heading

Printed headings in a fixed scale, four steps from the page title down, with an eyebrow label above and nothing stacked over them.

Foundation · Free · https://tactileui.dev/docs/foundations/heading

## Four steps

Less, but better.

Output stage

Battery and reserve

Charging from the mains

```
<h1 class="tui-h1">Less, but better.</h1>
<h2 class="tui-h2">Output stage</h2>
<h3 class="tui-h3">Battery and reserve</h3>
<h4 class="tui-h4">Charging from the mains</h4>
```

The class sets the size; the element sets the outline. Choose the element for the page's order (one `h1`, then `h2` under it, never skipping a level) and the class for how loud it should look.

## With an eyebrow

Northwind · Billing

## Invoices you can read

```
<hgroup class="tui-heading">
  <p class="tui-label">Northwind · Billing</p>
  <h2 class="tui-h2">Invoices you can read</h2>
</hgroup>
```

The eyebrow is a printed label, upper case and tracked, the voice of a front panel. An `hgroup` keeps it with its heading for a screen reader without making it a heading of its own.

## Rules

- Sentence case, never title case and never upper case.
- No icon, badge or ornament stacked above a heading.
- One `tui-h1` a page. A section under it starts at `tui-h2`.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `printing.md`, written for an agent to follow. It ships with the Kit.