A header card that pins to the top of a scroll body and masks the content
scrolling beneath it with its own opaque, rounded, shadowed body — so the
rows disappear behind the card's ROUNDED shape, not a full-width rectangle.
The side gutters and corner notches fall on the page background.
Two things the host must arrange for "nothing peeks":
The card and the scrolling content share the same horizontal bounds
(e.g. both inside one mx-auto max-w-2xl px-6 column), and the scrolling
rows are themselves rounded + spaced — so their corners align with the
card's corner notches on page background.
The scroll body reserves its header height as padding (not a spacer):
that padding clamps the sticky stick-point to the content-start line, so
the default top (HEADER_STICKY_TOP = top-0) lands the card
exactly where it rests. Give the content below the card whatever top
offset you want as the visual gap — keep it off this card so a row never
shows through an un-masked strip beneath it.
Pins at z-10 (below a z-20 frosted overlay header). Pass extra
wrapper classes (e.g. a full-bleed -mx-6) via className, and override the
pin offset via top for hosts that use a spacer instead of scroll padding.
A header card that pins to the top of a scroll body and masks the content scrolling beneath it with its own opaque, rounded, shadowed body — so the rows disappear behind the card's ROUNDED shape, not a full-width rectangle. The side gutters and corner notches fall on the page background.
Two things the host must arrange for "nothing peeks":
mx-auto max-w-2xl px-6column), and the scrolling rows are themselves rounded + spaced — so their corners align with the card's corner notches on page background.top(HEADER_STICKY_TOP =top-0) lands the card exactly where it rests. Give the content below the card whatever top offset you want as the visual gap — keep it off this card so a row never shows through an un-masked strip beneath it.