Stable
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.
Meter reads
12 properties due this month
Specifications
Anatomy
Meter reads
12 properties due this month
Anatomy
Meter reads
12 properties due this month
Size and spacing
Meter reads
Title and action
The usual header: what the screen is, and the main thing to do there.
Example
Inspections
Example
Inspections
Title and subtitle
Add a subtitle for a count or a short status. Leave out the action when the screen is for reading only.
Example
Energy usage
Updated 5 minutes ago
Example
Energy usage
Updated 5 minutes ago
Usage
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
Meter reads
12 properties due this month
Welcome to Meter Master Pro!
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.
Implementation
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 used
--at-border, --at-text-subtle
Accessibility
- The title is the page h1, so screen readers announce it first.