<div class="ts-page-header">
<div>
<h1 class="ts-page-header__title">Dashboard</h1>
<p class="ts-page-header__sub">Everything that needs your attention today.</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": null,
"title": "Dashboard",
"sub": "Everything that needs your attention today.",
"action": null,
"secondaryAction": null
}
Acceptable where the page is a top-level destination and the headline alone is unambiguous.