Design systemPage header and tabs
Every page starts with the same header row, and splits into tabs when it holds several lists.
<header className="page__header">
<h1 className="page__title">Library</h1>
<Button variant="secondary" label="Import from website" />
</header>
<nav className="page__tabs" role="tablist">
{TABS.map((t) => (
<button key={t} role="tab" aria-selected={tab === t} onClick={() => setTab(t)}>{t}</button>
))}
</nav>Header
| Part | Spec |
|---|---|
| Height | 56px, with a grey-100 bottom border |
| Title | 16px medium, the section name only |
| Actions | Right-aligned. At most one primary and one secondary action |
The page title is the name from the navigation. Do not add a subtitle that explains the page.
Tabs
| Part | Spec |
|---|---|
| Height | 48px, with a grey-100 bottom border |
| Tab text | 14px, grey-600, primary-500 when selected |
| Selected marker | A 2px primary-500 line under the tab |
- Use tabs to switch between lists of the same area, such as Components, Templates and Pages.
- Keep the selected tab when people return to the page.
- More than six tabs means the page needs restructuring, not a scrolling tab bar.