Components / Sticky Section Header

Sticky Section Header

The header for each section of a long scrolling list — a day of scheduled posts, a bucket of content. Title left, count right, sticky at the top of the scroll region so the reader always knows which section they are in.

import { StickySectionHeader } from '@layers/ui/sticky-section-header'

Rendered stock

House rules

• The header owns the space above itself (pt-4) and the container has NO top padding, so the fill reaches the region's top edge — otherwise content scrolling underneath peeks through the gap.
• The fill paints edge-to-edge (a ±100vw pseudo bleed): the header is usually narrower than the scroll viewport, and hover glows scrolling under it peek out in the uncovered gutters otherwise. The bounding container clips the bleed — `overflow-x-hidden` on the scroll region, `overflow-clip` (BOTH axes) on a non-scrolling band so rounded corners clip too. Never `hidden` on a band: it becomes a scroll container and captures the sticky.
• Pick `surface` by the surface the list scrolls on: `canvas` (default) on the page background, `surface="secondary"` inside a data-surface="secondary" band. A mismatched fill shows content through the header.
• z-[1] is deliberate: sticky headers are body-tier. Page chrome keeps z-10+ (docs/strata/rules.md, canvas z).
• Meta is a fact about the section ("5 Posts"), never an action — actions live in the toolbar.