Page Header
The masthead of an app page: optional breadcrumbs, the title and its description, and a right-aligned slot for the page's actions.
import from ~/components/ui/page-header
Full masthead
Endeavors
Every body of work in the studio, with its brief, its status and who is holding it.
breadcrumbs + description + actions
Every slot filled. The actions sit right on wide screens and wrap below the title on narrow ones.
Title and description
Practice notes
Working notes from the studio, oldest first. Read only.
no actions
A read-only page has nothing to do at the top, so it carries no action slot.
Title only
Archive
no description
Drop the description when the title already says it. A restatement is worse than nothing.
Rules
Do
One per page, at the top, above the content it introduces.
Keep to one primary action. Everything else stays quieter as outline or ghost.
Let the description earn its place. Cut it when it only restates the title.
Pass breadcrumbs through the breadcrumbs slot so the trail sits above the title with the right spacing.
Don't
Do not add another h1 to the page. The header already owns the top-level heading.
Do not stack two page headers, or nest one inside a card or a panel.
Do not reach for it on a marketing page. Those use the hero patterns instead.
Do not pass font, color or border classes. The bottom rule and the title voice are the component.