Components

SectionLabel

The uppercase eyebrow that titles every page band, with optional meta.

Preview

components/core/SectionLabel.jsx

Recent work02 projects

Thoughts

Processes

Pair with the .section-eyebrow class to add the accent hairline tick before the label.

Usage

src/components/ui/SectionLabel.tsx

tsx

import { SectionLabel } from "@/components/ui/SectionLabel";

<SectionLabel meta="02 projects">Recent work</SectionLabel>

{/* Tinted with the active domain accent: */}
<SectionLabel accent>Processes</SectionLabel>

API

props

Prop	Type	Default	Description
meta	ReactNode	—	Right-aligned quiet note (counts, dates).
accent	boolean	false	Tint the label with the active --accent and step up to medium weight.
children	ReactNode	—	The label — uppercased at 0.18em tracking.

Tokens consumed

semantic only

--color-fg-muted--color-fg-subtle--accent