Section header
Heading row above any major page section. Bridges page hierarchy with the block of content that follows. Optional eyebrow label, description, and right-aligned link. Same component used on the homepage, PDP related-items rows, and account dashboards.
Title only
The minimum.
Recently viewed
<div class="section-header">
<h2 class="section-header__title">Recently viewed</h2>
</div>With description
For sections that need a one-line clarifier — what's in this block, who it's for.
Alternative items
Other brushes that may work for your machines.
<div class="section-header">
<div>
<h2 class="section-header__title">Alternative items</h2>
<p class="section-header__desc">Other brushes that may work for your machines.</p>
</div>
</div>With trailing link
Common pattern for category previews and "See all" jumps. The link justifies right of the title block.
Floor scrubber parts
Most-ordered brushes, pads, and squeegees for your fleet.
<div class="section-header">
<div>
<h2 class="section-header__title">Floor scrubber parts</h2>
<p class="section-header__desc">Most-ordered brushes...</p>
</div>
<a href="..." class="section-header__link">
See all 240+
<svg width="14" height="14">...</svg>
</a>
</div>With eyebrow label
Adds a small uppercase label above the title — categorical context (e.g. "FOR YOUR FLEET" before "Replacement parts"). Use sparingly; eyebrows on every section read as marketing chrome.
Replacement parts
Compatible parts based on the four machines you've registered.
<div class="section-header">
<div>
<span class="section-header__label">For your fleet</span>
<h2 class="section-header__title">Replacement parts</h2>
<p class="section-header__desc">...</p>
</div>
<a href="..." class="section-header__link">View all</a>
</div>Anatomy
| Slot | Class | Required | Notes |
|---|---|---|---|
| Container | .section-header | Yes | Flex row, justify-between, wraps on narrow viewports |
| Eyebrow | .section-header__label | No | Uppercase, muted color |
| Title | .section-header__title | Yes | Use semantic h-tag (<h2>, <h3>) for the page hierarchy you're in |
| Description | .section-header__desc | No | One-line max — break into prose blocks if longer |
| Link | .section-header__link | No | Right-aligned, brand color, optional chevron icon |
Tokens consumed
| Slot | Token |
|---|---|
| Eyebrow font size | --caster-font-size-3xs (10px) |
| Eyebrow color | --caster-section-header-label-color → text.muted |
| Title font size | --caster-font-size-xl (24px) |
| Title color | --caster-section-header-title-color → text.default |
| Description color | --caster-section-header-desc-color → text.subtle |
| Link color | --caster-section-header-link-color → brand.default |
| Bottom margin | --caster-spacing-6 (24px) |
<h-tag> you use — the visual weight doesn't change with semantic level. Pick the heading level that matches your page outline (an <h2> on the homepage; an <h3> inside a PDP section that's already nested under an <h2>).