Page header

Updated 2026-05-19

Confidence anatomy low variants medium motion medium a11y high content low

Overview

The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.

1
Container
the bounding surface — frames the data presentation
2
Title or heading (optional)
identifies what the data represents
3
Primary content
the data itself — text, value, chart, table cells, badge label
4
Supporting metadata (optional)
timestamps, units, counts, attribution
5
Visual indicator (optional)
color dot, icon, badge, or status pill
6
Action affordance (optional)
expand, drill-in, dismiss, or copy

rows/cards reveal with skeleton placeholders during load

lists, tables, search-result-cards enter with staggered fades

collapsible cards/sections expand at the accordion pace