Pagination
The footer under a long table: how many rows are showing, rows per page, and previous, next and page numbers that collapse to "Page 3 of 49" when narrow.
Vessendon Airframes
It is live: hover, focus and its own controls respond. Actions that would change data (approve, send, delete) are for your app to wire. The width is a real 390 px, 768 px or 1280 px box, shrunk to fit your screen.
Source
<style>
.odl-page-header-tabs { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-md);
padding: var(--ds-space-inset-md) var(--ds-space-inset-lg) 0; background: var(--ds-color-surface-base); color: var(--ds-color-text-primary);
border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-page-header-tabs *, .odl-page-header-tabs *::before { box-sizing: border-box; }
.odl-page-header-tabs .odl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; font: var(--ds-text-body-sm); }
.odl-page-header-tabs .odl-crumbs li { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.odl-page-header-tabs .odl-crumbs li + li::before { content: "/"; color: var(--ds-color-text-tertiary); padding-inline: var(--ds-space-2); }
.odl-page-header-tabs .odl-crumbs a { display: inline-flex; align-items: center; min-block-size: var(--ds-size-target-min); padding-inline: var(--ds-space-4); margin-inline: calc(-1 * var(--ds-space-4));
border-radius: var(--ds-radius-control-sm); color: var(--ds-color-text-secondary); text-decoration: none; }
.odl-page-header-tabs .odl-crumbs a:hover { color: var(--ds-color-text-primary); text-decoration: underline; text-underline-offset: var(--ds-space-4); }
.odl-page-header-tabs .odl-crumbs [aria-current] { color: var(--ds-color-text-primary); }
/* One grid for identity and actions, so the title keeps one line at tablet width and the buttons move beside the summary. */
.odl-page-header-tabs .odl-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark title acts" "meta meta acts";
align-items: center; column-gap: var(--ds-space-inline-sm); row-gap: var(--ds-space-stack-xs); }
.odl-page-header-tabs .odl-id { display: contents; }
.odl-page-header-tabs .odl-mark { grid-area: mark; }
.odl-page-header-tabs .odl-title { grid-area: title; display: flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.odl-page-header-tabs .odl-mark { display: grid; place-items: center; inline-size: var(--ds-size-control-lg); block-size: var(--ds-size-control-lg); border-radius: var(--ds-radius-control);
background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); }
.odl-page-header-tabs h1 { min-inline-size: 0; margin: 0; font: var(--ds-text-headline-sm); overflow-wrap: break-word; text-wrap: balance; }
.odl-page-header-tabs .odl-title .odl-star { flex: none; }
.odl-page-header-tabs .odl-star { color: var(--ds-color-icon-subtle); }
.odl-page-header-tabs .odl-star[aria-pressed="true"] { color: var(--ds-color-text-warning); }
.odl-page-header-tabs .odl-star[aria-pressed="true"] svg { fill: currentColor; }
.odl-page-header-tabs .odl-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-xs); margin: 0; padding: 0; list-style: none; }
.odl-page-header-tabs .odl-meta li { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm);
background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-page-header-tabs .odl-meta b { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-page-header-tabs .odl-meta svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); flex: none; }
.odl-page-header-tabs .odl-acts { grid-area: acts; align-self: start; display: flex; gap: var(--ds-space-inline-sm); margin-inline-start: var(--ds-space-inline-md); }
.odl-page-header-tabs button { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover), color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-page-header-tabs .odl-icon-btn { display: inline-grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
padding: 0; border: 0; border-radius: var(--ds-radius-control); background: transparent; }
.odl-page-header-tabs .odl-icon-btn:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-page-header-tabs .odl-icon-btn svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-page-header-tabs .odl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); white-space: nowrap;
min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); }
.odl-page-header-tabs .odl-btn svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-page-header-tabs .odl-secondary { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-page-header-tabs .odl-secondary:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-page-header-tabs .odl-primary { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); border: var(--ds-border-width-default) solid transparent; }
.odl-page-header-tabs .odl-primary:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-page-header-tabs .odl-primary:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-page-header-tabs [role="tablist"] { display: flex; gap: var(--ds-space-inline-md); min-inline-size: 0; margin-inline: calc(-1 * var(--ds-space-inset-lg)); padding-inline: var(--ds-space-inset-lg);
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--ds-space-inset-lg); }
.odl-page-header-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
.odl-page-header-tabs [role="tab"] { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min));
padding: 0 var(--ds-space-2); border: 0; background: transparent; color: var(--ds-color-text-secondary); white-space: nowrap; }
.odl-page-header-tabs [role="tab"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--ds-border-width-selected); border-radius: var(--ds-radius-full); background: transparent; }
.odl-page-header-tabs [role="tab"]:hover { color: var(--ds-color-text-primary); }
.odl-page-header-tabs [role="tab"]:hover::after { background: var(--ds-color-border-default); }
.odl-page-header-tabs [role="tab"][aria-selected="true"] { color: var(--ds-color-text-primary); }
.odl-page-header-tabs [role="tab"][aria-selected="true"]::after { background: var(--ds-color-text-primary); }
.odl-page-header-tabs [role="tab"] svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-page-header-tabs [role="tab"][aria-selected="true"] svg { color: var(--ds-color-icon-default); }
.odl-page-header-tabs [role="tab"] small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-page-header-tabs button:focus-visible, .odl-page-header-tabs a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-page-header-tabs [role="tab"]:focus-visible { outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
@container (max-width: 52rem) {
.odl-page-header-tabs .odl-top { grid-template-areas: "mark title title" "meta meta acts"; }
.odl-page-header-tabs .odl-acts { align-self: end; }
}
@container (max-width: 560px) {
.odl-page-header-tabs .odl-crumbs li:last-child { display: none; }
.odl-page-header-tabs .odl-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "meta" "acts"; }
.odl-page-header-tabs .odl-acts { margin: var(--ds-space-stack-sm) 0 0; }
.odl-page-header-tabs [role="tablist"] { mask-image: linear-gradient(to left, transparent, currentColor var(--ds-space-32)); }
.odl-page-header-tabs .odl-mark { display: none; }
.odl-page-header-tabs .odl-acts { flex: 1 1 100%; flex-wrap: wrap; }
.odl-page-header-tabs .odl-acts .odl-btn { flex: 1 1 auto; }
.odl-page-header-tabs .odl-meta li:nth-child(2) { display: none; }
}
@container (max-width: 24rem) {
.odl-page-header-tabs h1 { font: var(--ds-text-title-lg); }
}
@media (prefers-reduced-motion: reduce) { .odl-page-header-tabs, .odl-page-header-tabs *, .odl-page-header-tabs *::before, .odl-page-header-tabs *::after { transition: none !important; animation: none !important; } }
</style>
<header class="odl-page-header-tabs">
<nav class="odl-crumbs" aria-label="Breadcrumb">
<ol>
<li><a href="#companies">Companies</a></li>
<li><a href="#enterprise-pipeline">Enterprise pipeline</a></li>
<li><span aria-current="page">Vessendon Airframes</span></li>
</ol>
</nav>
<div class="odl-top">
<div class="odl-id">
<span class="odl-mark" aria-hidden="true">VA</span>
<div class="odl-title">
<h1>Vessendon Airframes</h1>
<button type="button" class="odl-icon-btn odl-star" aria-pressed="false" aria-label="Add to favourites"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" aria-hidden="true"><path d="m10 2.8 2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8.1l5-.7z"/></svg></button>
</div>
<ul class="odl-meta" aria-label="Summary">
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="5.5" r="2.5"/><path d="M3.5 13.5a4.5 4.5 0 0 1 9 0"/></svg><span>Owner <b>Paloma Etxeberria</b></span></li>
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><path d="m2.5 4.5 5.5 4 5.5-4"/></svg><span>Last email <b>2 days ago</b></span></li>
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M9.8 6.2c-.3-.6-1-.9-1.8-.9-1 0-1.8.5-1.8 1.3 0 1.8 3.7.9 3.7 2.8 0 .8-.8 1.3-1.9 1.3-.9 0-1.6-.4-1.9-1M8 4.2v1.1M8 10.7v1.1"/></svg><span><b>2 open deals</b> · $81,400.00</span></li>
</ul>
</div>
<div class="odl-acts">
<button type="button" class="odl-btn odl-secondary"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M5.5 4h8M5.5 8h8M5.5 12h8M2.5 4h.5M2.5 8h.5M2.5 12h.5"/></svg>Add to list</button>
<button type="button" class="odl-btn odl-primary"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><path d="m2.5 4.5 5.5 4 5.5-4"/></svg>Compose email</button>
</div>
</div>
<div role="tablist" aria-label="Record sections">
<button type="button" role="tab" aria-selected="true" tabindex="0"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M1.5 8.5h3l2-5 3 9 2-4h3"/></svg>Activity</button>
<button type="button" role="tab" aria-selected="false" tabindex="-1"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><path d="m2.5 4.5 5.5 4 5.5-4"/></svg>Emails <small>148</small></button>
<button type="button" role="tab" aria-selected="false" tabindex="-1"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3.5 2.5h2.2l1.1 3-1.5 1a7 7 0 0 0 4.2 4.2l1-1.5 3 1.1v2.2a1 1 0 0 1-1 1A10.5 10.5 0 0 1 2.5 3.5a1 1 0 0 1 1-1z"/></svg>Calls <small>12</small></button>
<button type="button" role="tab" aria-selected="false" tabindex="-1"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M9.5 1.5H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"/><path d="M9.5 1.5V5H13M5.5 8.5h5M5.5 11h3"/></svg>Notes <small>9</small></button>
<button type="button" role="tab" aria-selected="false" tabindex="-1"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M9.8 6.2c-.3-.6-1-.9-1.8-.9-1 0-1.8.5-1.8 1.3 0 1.8 3.7.9 3.7 2.8 0 .8-.8 1.3-1.9 1.3-.9 0-1.6-.4-1.9-1M8 4.2v1.1M8 10.7v1.1"/></svg>Deals <small>2</small></button>
<button type="button" role="tab" aria-selected="false" tabindex="-1"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="6" cy="5.5" r="2.2"/><path d="M2 13a4 4 0 0 1 8 0M10.5 3.5a2.2 2.2 0 0 1 0 4.2M12 9.5a4 4 0 0 1 2 3.5"/></svg>People <small>17</small></button>
<button type="button" role="tab" aria-selected="false" tabindex="-1"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m13 7.5-5.3 5.3a3 3 0 0 1-4.3-4.3l5.6-5.6a2 2 0 0 1 2.8 2.8L6.3 11.2a1 1 0 0 1-1.4-1.4l5-5"/></svg>Files <small>6</small></button>
</div>
</header>
<script>
document.querySelectorAll(".odl-page-header-tabs").forEach((root) => {
if (root.dataset.odlReady) return; // wire once, even if the file is pasted twice
root.dataset.odlReady = "1";
const star = root.querySelector(".odl-star");
star.addEventListener("click", () => { const on = star.getAttribute("aria-pressed") !== "true"; star.setAttribute("aria-pressed", String(on)); star.setAttribute("aria-label", on ? "Remove from favourites" : "Add to favourites"); });
const tabs = [...root.querySelectorAll('[role="tab"]')];
const select = (t) => { tabs.forEach((x) => { const on = x === t; x.setAttribute("aria-selected", String(on)); x.tabIndex = on ? 0 : -1; }); t.focus({ preventScroll: true }); const bar = t.parentElement, l = t.offsetLeft - bar.offsetLeft, r = l + t.offsetWidth; if (l < bar.scrollLeft) bar.scrollLeft = l; else if (r > bar.scrollLeft + bar.clientWidth) bar.scrollLeft = r - bar.clientWidth; };
tabs.forEach((t, i) => {
t.addEventListener("click", () => select(t));
t.addEventListener("keydown", (e) => {
const k = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
if (k !== undefined) { e.preventDefault(); select(tabs[(k + tabs.length) % tabs.length]); }
});
});
});
</script>
More like this
Command menu
A search-first menu for every action and page, grouped, with keyboard shortcuts, live filtering and an empty result that says what to try.
Setup checklist
A short list of first steps with progress: what is done, the one step to do now with its time and a way to skip, and what comes next.