● Patterns / MetadataLabel
MetadataLabel.
MetadataLabel is the system's lightweight section marker. It introduces a page or block with a label, optional number, and optional supporting metadata before the main heading takes over.
How the pattern behaves
This pattern creates orientation before emphasis. It appears above a heading, uses the shared label styling, and stays quiet enough that the main title remains the focal point.
Across the codebase it shows up in hero sections, error states, and the composed SectionHeader pattern. That makes it less of a decorative flourish and more of a structural signal for how content is organized.
Source of truth
The component is intentionally small: one required label, one optional number, and one optional meta snippet. Most of its value comes from consistent placement and composition.
Pattern roles
MetadataLabel does a small amount of work, but it does it consistently. These are the jobs it handles in the system.
Section marker
Introduces a page or block with a compact label, optional number, and a clear visual anchor.
Context carrier
Holds lightweight metadata such as dates, status, or supporting detail without competing with the heading.
Compositional building block
Sits above larger patterns like SectionHeader and AccentBlock to establish hierarchy before the main content starts.
Anatomy
The component is built from a few small parts. Keeping each part narrow prevents the pattern from turning into a second headline.
● 01 —Portfolio
● 02 —Work
● Foundations / Colors
Accent dot
A small primary-colored mark that gives the label a consistent entry point.
Optional number
Used on top-level pages to sequence sections like 01, 02, or 03.
Label text
The required descriptor that identifies the page, section, or pattern.
Meta content
Optional supporting text rendered on the right side on larger screens.
Divider rule
A horizontal connector that visually separates the primary label from the supporting meta.
Guidelines
- Use MetadataLabel to introduce content, not to label arbitrary inline elements inside a paragraph or card body.
- Include the number only for top-level page sections or clearly sequenced content.
- Keep the label short and structural: section name, page name, or system category.
- Use meta for lightweight context such as dates, status, or short descriptors, not full sentences of body copy.
- Let the pattern stay visually quiet so the heading below remains the focal point.
In practice
Is this introducing a page or major block?
Use MetadataLabel.
Does the content need a visible sequence number?
Pass the optional number prop.
Is there supporting context like a date or status?
Provide it through the meta snippet.
Is this the main headline?
No. MetadataLabel should sit above the headline, not replace it.
Is the supporting text getting long?
Move that content into body copy below the heading instead.