PageHeader
The heading row of a screen: an eyebrow, the title, a description and actions. Use one per screen, at the top of MainContent.
- PageHeader
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, PageHeader
Projects
Website relaunch
Issues grouped by status, newest first.
A very long title that needs more than one line on a narrow screen and still reads well
Dark theme, PageHeader
Projects
Website relaunch
Issues grouped by status, newest first.
A very long title that needs more than one line on a narrow screen and still reads well
High contrast theme, PageHeader
Projects
Website relaunch
Issues grouped by status, newest first.
A very long title that needs more than one line on a narrow screen and still reads well
UsageLink to the section Usage
import { PageHeader } from '@skribly/ui/shell'<PageHeader eyebrow="Projects" title="Website relaunch" description="Issues grouped by status." actions={<Button>New issue</Button>} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The eyebrow and the title form an hgroup, and the title is a level 1 heading unless level says otherwise.
- Long titles wrap, and the actions move under the title when space runs out.
This demo runs through axe in all three themes on every test run. See what the tests check.