# Page header

Status: stable

The top of every app screen: the page title, an optional subtitle and the main action.

The page header sits at the top of every quick view and full app page. It says what the screen is and holds the one main action for the whole screen.

COHO draws the window frame, title bar and close control around your app. The page header is the first thing inside that frame, so do not repeat the app name or add your own close button.

## Example

```html
<header class="at-header"><div><h1 class="at-header__title">Meter reads</h1><p class="at-header__subtitle">12 properties due this month</p></div><button type="button" class="at-button at-button--primary">Request reads</button></header>
```

## Anatomy

1. **Title (h1)**: font-size: var(--at-text-xl) /* 24px */; font-weight: var(--at-weight-heavy) /* 700 */; letter-spacing: -0.01em

2. **Subtitle (optional)**: font-size: var(--at-text-sm) /* 14px */; color: var(--at-text-subtle)

3. **Main action (optional)**: one .at-button--primary; or a secondary button if the screen has no main action

4. **Divider**: border-bottom: 1px solid var(--at-border)

## Size and spacing

- **Layout**: display: flex; align-items: center; justify-content: space-between

- **Spacing**: gap: var(--at-space-4) /* 12px */; padding-bottom: var(--at-space-4) /* 12px */; margin-bottom: var(--at-space-5) /* 16px */

## Variants

### Title and action

The usual header: what the screen is, and the main thing to do there.

```html
<header class="at-header"><div><h1 class="at-header__title">Inspections</h1></div><button type="button" class="at-button at-button--primary">Book inspection</button></header>
```

### Title and subtitle

Add a subtitle for a count or a short status. Leave out the action when the screen is for reading only.

```html
<header class="at-header"><div><h1 class="at-header__title">Energy usage</h1><p class="at-header__subtitle">Updated 5 minutes ago</p></div></header>
```

## When to use

- At the top of every quick view and full app page.
- To hold the one main action for the whole screen.

## When not to use

- For section headings inside a page: use h2 or h3.
- For more than two actions: move the rest into the page.

## Content

- Name the screen, not the app: "Meter reads", not "Rent Radar".
- Keep the subtitle to one short line: a count, a date or a status.
- Use sentence case.

## Do and don't

Do: Says what the screen is, with one main action.

```html
<header class="at-header"><div><h1 class="at-header__title">Meter reads</h1><p class="at-header__subtitle">12 properties due this month</p></div><button type="button" class="at-button at-button--primary">Request reads</button></header>
```

Don't: A marketing title, two primary buttons and a home-made close button.

```html
<header class="at-header"><div><h1 class="at-header__title">Welcome to Meter Master Pro!</h1></div><div class="at-inline"><button type="button" class="at-button at-button--primary">Request</button><button type="button" class="at-button at-button--primary">Export</button><button type="button" class="at-button">Close</button></div></header>
```

## Do

- Use one h1 per screen.
- Keep the title to what the screen is, e.g. "Meter reads".

## Don't

- Add your own close button: COHO draws the frame and its close control.
- Put your logo here at full size; a small mark beside the title is fine.

## Code

```html
<header class="at-header">
  <div>
    <h1 class="at-header__title">Meter reads</h1>
    <p class="at-header__subtitle">12 properties due this month</p>
  </div>
  <button type="button" class="at-button at-button--primary">Request reads</button>
</header>
```

## Classes

| Class | What it does |

|---|---|

| `at-header` | Flex row with a bottom border |

| `at-header__title` | Page title (h1) |

| `at-header__subtitle` | Muted line under the title |

## Tokens

`--at-border`, `--at-text-subtle`

## Accessibility

- The title is the page h1, so screen readers announce it first.