Page header

Breadcrumb, title, end-aligned actions, and one line of description at the top of every console screen; on a detail screen, Back in place of the breadcrumb.

.pagehead · .pagehead__row · .pagehead__actions · .pagehead__desc · .pagehead__back · data-back

Web Mobile 375px

Transactions

Export CSV New terminal

Card and wallet payments across the terminal fleet, newest first.

Page header: breadcrumb, title, end-aligned actions, description

<div class="pagehead">
  <nav class="crumbs" aria-label="Breadcrumb"><ol><li><a href="page-header.html">Operations</a></li><li aria-current="page">Transactions</li></ol></nav>
  <div class="pagehead__row">
    <h1>Transactions</h1>
    <div class="pagehead__actions"><a class="btn btn--secondary btn--sm" href="page-header.html"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11m-4.5-4.5L12 15l4.5-4.5M5 19.5h14"/></svg> Export CSV</a><a class="btn btn--primary btn--sm" href="page-header.html"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New terminal</a></div>
  </div>
  <p class="muted pagehead__desc">Card and wallet payments across the terminal fleet, newest first.</p>
</div>

Settings

Profile, appearance, notifications, and API access for this console.

Without actions

<div class="pagehead">
  <nav class="crumbs" aria-label="Breadcrumb"><ol><li><a href="page-header.html">Configuration</a></li><li aria-current="page">Settings</li></ol></nav>
  <div class="pagehead__row"><h1>Settings</h1></div>
  <p class="muted pagehead__desc">Profile, appearance, notifications, and API access for this console.</p>
</div>

Back

TXN-241099

Refund

Settled card payment at Hillcrest Grocers Makati, 27 Aug 2026, 18:31.

Detail screen: Back returns to wherever the person came from

<div class="pagehead">
  <a class="btn btn--ghost btn--sm pagehead__back" href="page-header.html" data-back><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"/></svg> Back</a>
  <div class="pagehead__row">
    <h1>TXN-241099</h1>
    <div class="pagehead__actions"><a class="btn btn--secondary btn--sm" href="page-header.html">Refund</a></div>
  </div>
  <p class="muted pagehead__desc">Settled card payment at Hillcrest Grocers Makati, 27 Aug 2026, 18:31.</p>
</div>

Usage

Every console screen opens with a page header: the breadcrumb (area, then screen), the title, and the screen's actions aligned to the end of the title row.
Actions stay in one row. On narrow screens the whole group moves under the title; buttons never wrap one by one.
At most one primary action; the rest are secondary or ghost.
The description is one sentence about what the screen holds.
A detail screen opens with Back in place of the breadcrumb: a ghost button with the arrow icon and the word Back, never an arrow alone and never a text link. It is the only thing above the title.
Back returns to the screen the person came from, the list with its filters, the dashboard, a search, so they land where they left. Mark it data-back and the console script calls the browser's own back.
Its href is the parent screen. That is where Back goes when there is nowhere to return to: a bookmark, a shared link, an email, or JavaScript off. Back never leaves the console.
The label stays Back, not Back to Transactions, because the destination depends on where the person entered from.

CSS

These rules ship in the console pattern layer, admin-kits/shared/novus-admin.css, which this site and every Admin Kit flavor load after tokens.css. Copy the whole layer, or only the sections below; every value is a token.

@pattern page-header

.pagehead { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.pagehead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.pagehead h1 { margin: 0; font-size: var(--text-xl); line-height: var(--lh-xl); }
.adminmain h2 { font-size: var(--text-lg); line-height: var(--lh-lg); }
.adminmain h3 { font-size: var(--text-md); line-height: var(--lh-md); }
.pagehead__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pagehead__desc { margin: 0; }
/* Back opens a detail screen, above the title: a ghost button with the arrow, pulled
   left by its own padding so the arrow lines up with the title's first letter. */
.pagehead__back { align-self: flex-start; min-height: 2.75rem; margin-inline-start: calc(var(--space-3) * -1); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; font-size: var(--text-sm); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.crumbs li + li::before { content: "/"; color: var(--text-muted); }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: var(--weight-medium); }

‹ App shell