● Patterns / SectionHeader
SectionHeader.
SectionHeader is the system’s composed page-introduction pattern. It combines MetadataLabel, AccentBlock, a heading, and flexible supporting content into one reusable structure.
How the pattern behaves
SectionHeader is the default way pages in this project open. It establishes context first, then delivers the headline, then supports it with body content inside a consistent visual frame.
The component exists to remove repeated composition work. Instead of rebuilding MetadataLabel plus AccentBlock on every page, it packages that pattern into a single API.
Source of truth
SectionHeader is a composition pattern, not a heavy abstraction. Its value comes from making a common layout repeatable without hiding how the underlying parts work.
Pattern roles
This pattern is more about consistency than complexity. These are the jobs it performs across the system.
Page introduction
Combines orientation, hierarchy, and body content into a single reusable opening pattern.
Composed primitive
Packages MetadataLabel and AccentBlock together so common page headers do not need to be rebuilt by hand.
Documentation frame
Works especially well for system pages, case studies, and content pages that need a clear top section.
Anatomy
SectionHeader is a composition of existing patterns. Understanding those layers makes it clear when to use the full pattern and when to drop down to the lower-level parts.
● 02 —Work
Top-level page
Uses the full composed pattern: sequence number, label, heading, and supporting copy.
● Foundations / Colors
Sub-page
Omits the number and relies on the label path to communicate hierarchy.
MetadataLabel layer
Handles the optional number, label, and optional meta snippet above the heading.
AccentBlock layer
Provides the left-hand rule and inset for the main content block.
Heading slot
Renders the required heading in the system’s primary display style.
Body content
Accepts flexible child content such as a short description, multiple paragraphs, or supporting actions.
Guidelines
- Use SectionHeader when a page needs both orientation and a prominent heading, not just one or the other.
- Use the lower-level MetadataLabel or AccentBlock directly when you only need part of the full pattern.
- Keep the heading concise and let the body carry the supporting explanation.
- Use the meta snippet for short context such as date, status, or descriptor, not full body copy.
- Let body spacing be controlled by the children, especially for longer content stacks.
In practice
Does this page need a label plus a heading plus body copy?
Use SectionHeader.
Do you only need the label row?
Use MetadataLabel instead.
Do you only need the accented content block?
Use AccentBlock instead.
Is there supporting context like a date or status?
Pass it through the meta snippet.
Does the body need custom rhythm?
Handle that in the child content, not in SectionHeader itself.