133Page head

Every admin screen opens with one: code-comment kicker, the h1, a meta line, and the screen's actions on the trailing edge. The one primary button per screen lives here.

Use it for

The top of every screen inside the admin shell

Not for

Marketing pages — bands have their own head grammar

With actions

// Courses

All courses

12 published · 3 drafts

New lesson New course

markup

<div class="ns-pagehead" style="inline-size:100%">
  <div>
    <span class="ns-pagehead__kicker">// Courses</span>
    <h1>All courses</h1>
    <p class="ns-pagehead__meta">12 published · 3 drafts</p>
  </div>
  <div class="ns-pagehead__actions">
    <a class="ns-btn ns-btn--outline" href="#">New lesson</a>
    <a class="ns-btn ns-btn--primary" href="#">New course</a>
  </div>
</div>