Sticky CTA Bar
A bottom call-to-action bar that slides up after scrolling past a hero, with a summary on the left and a lit primary plus secondary on the right, hiding near the footer, with stacked mobile and row desktop layouts.
Preview
Desktop
New season
Ridge Shell Jacket
$248
Made for wet weekends
A three-layer shell that breathes on the climb and keeps the rain out on the ridge. Taped seams, a stiff brim, pockets above the hip belt.
Fit
Cut with room for a fleece underneath. Arms are long enough to reach overhead without the hem riding up.
Care
Wash cold, tumble low to refresh the coating. Repair kit and spare toggles in the inside pocket.
Delivery
Ships in two days. Free returns for 60 days, even if it's been out on a hill.
Mobile
New season
Ridge Shell Jacket
$248
Made for wet weekends
A three-layer shell that breathes on the climb and keeps the rain out on the ridge. Taped seams, a stiff brim, pockets above the hip belt.
Fit
Cut with room for a fleece underneath. Arms are long enough to reach overhead without the hem riding up.
Care
Wash cold, tumble low to refresh the coating. Repair kit and spare toggles in the inside pocket.
Delivery
Ships in two days. Free returns for 60 days, even if it's been out on a hill.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| target | RefObject<HTMLElement | null> | — (window) | Scroll container; with one the bar is absolute in a relative wrapper. |
| revealAfter | RefObject<HTMLElement | null> | number | 320 | Show once this hero has scrolled out the top, or after this many px. |
| hideNear | RefObject<HTMLElement | null> | — | Slide away while this footer is in view. |
| title | ReactNode | — | Summary title. Required. |
| detail | ReactNode | — | Price or a short summary line. |
| media | ReactNode | — | Small decorative thumbnail (wide layout). |
| primary / secondary | { label, onClick?, href? } | — / — | Lit primary key (required) and an optional secondary. |
| label | string | "Purchase" | Names the bar's region. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.