Orbit Pill Header
Floating glass-pill SaaS header as a plain, fully editable Bricks tree over an optional demo hero: header > head > pill bar (brand with an animated orbit mark and a wordmark that folds away when the pill detaches; menu hol…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Orbit Pill Header reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Layout
- Category
- Footers and headers
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 8
Set on the section, in Bricks’ attributes panel. No code needed.
data-themedata-accentACSS colour for the CTA, indicator, icon tiles and orbit mark
data-positionwith the demo stage on, the pill sticks while the stage scrolls
data-detachdetach into a compact lifted pill after scrolling
data-glassfrosted or solid pill
data-orbitsatellite motion around the mark
data-revealmobile menu entrance
data-stagethe demo hero behind the pill
Component props 5
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
indicatorpill
triggerclick
easingspring
duration560
labelPrimary
labelPricing
url#pricing
currentFalse
showBadgeFalse
badgeNew
iconcalendar
titleScheduling
descDrag work onto a shared weekly board.
url#scheduling
showDescTrue
showBadgeFalse
badgeNew
previewhttps://images.unsplash.com/photo-1522071820081-009f0129c71c?w=720
previewAltA product team planning around a laptop
previewTextOne board for people, projects and hours.
titleDocs
url#docs
showMetaTrue
metaGuides and API reference
liveFalse
externalFalse
value4,000+
labelteams plan their week here
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro

Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 page






