Skip to content
UI Kit
Accent color

Page headers

The heads of inner pages and sections. Titles with actions, tabs, figures and search.

2 components · 12 variants
Switch category

page-header

Page header

The head of an inner page. Where you are, what the page is and what you can do here, for list pages, records, profiles and the inner pages of a website. App headers hand over to a compact bar once they scroll away.

Props and details · Page header

With actions

For list pages. Breadcrumbs, the title with a count and the actions on the right. On phones the main action takes the full row.

Open in Studio

Record detail

For a single record. Back link, status, the key facts, copy link with a check and more actions in a menu.

Open in Studio

With tabs

The sections of a record as tabs with counts. The marker glides, the row sticks to the top and casts a shadow once it does.

Open in Studio

With key figures

A title over four figures that count up as they scroll in. The period switch glides and recounts every figure.

Open in Studio

Cover

For profiles and project pages. A picture band that moves slower than the page, an avatar over its edge, a follow toggle and tabs.

Open in Studio

Centered with search

For the inner pages of a website. Kicker, title and lead in the middle, a search with suggestions and a light that drifts while you scroll.

Open in Studio

section-header

Section header

Heads for sections that carry more than a title. A view all link on the baseline, filters that drive the grid, a chapter mark with a drawing rule, a big figure, a side column that stays while the content scrolls and a statement that lights up as you read.

Props and details · Section header

With filters

Filter chips beside the title. The dark marker glides to the choice, arrow keys move it and the grid below rises in anew.

Open in Studio

Chapter

For long pages in parts. The chapter mark drifts, a rule draws across while you scroll, title and text sit in two columns.

Open in Studio

With figure

Title and text with one big figure on the right that counts up as it scrolls in. On phones the figure sits under the text.

Open in Studio

Sticky side

On desktops the head stands in its column while the content scrolls past, a line under it fills with the reading. Phones stack head and content.

Open in Studio

Statement

One large sentence whose words light up one after another as you read, a phrase in the accent. Use it once per page.

Open in Studio

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to Page headers on a page.

Often searched

Jump to

Copied to the clipboard