Page header: Default | TubeSpanner Style Guide

<div class="ts-page-header"> <div> <div class="ts-eyebrow">Channel objectives</div> <h1 class="ts-page-header__title">What do you want to achieve?</h1> <p class="ts-page-header__sub">These priorities shape your daily task recommendations. Adjust the sliders whenever your focus changes.</p> </div> </div>

<div class="ts-page-header"> <div> {{#if eyebrow}}<div class="ts-eyebrow">{{eyebrow}}</div>{{/if}} <h1 class="ts-page-header__title">{{title}}</h1> {{#if sub}}<p class="ts-page-header__sub">{{sub}}</p>{{/if}} </div> {{#if action}} <div class="ts-page-header__actions"> {{#if secondaryAction}}<a href="#" class="button">{{secondaryAction}}</a>{{/if}} <a href="#" class="button button--primary">{{action}}</a> </div> {{/if}} </div>

{ "eyebrow": "Channel objectives", "title": "What do you want to achieve?", "sub": "These priorities shape your daily task recommendations. Adjust the sliders whenever your focus changes.", "action": null, "secondaryAction": null }

Every page opens with one of these. Three parts, always in this order:

Eyebrow — where am I. Uppercase, tracked, muted lavender. Optional but preferred, because it is what tells a user which tool they are in without reading the headline.
Headline — an h1, bold ink. One per page.
Sub — one muted sentence saying what the page does or what state it is in. Capped at 70 characters wide so it stays readable.

Actions sit on the right of the header row, primary last so it lands nearest the eye at the end of the line.

Why this is mandatory: a prior audit found the page-title block globally disabled, so no dashboard page rendered an h1 at all. Routes defined titles and threw them away. Any page shipped without this component is disorienting by construction, and it is also an accessibility failure, since a page with no heading gives screen-reader users nothing to navigate by.