Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageOrbit Pill Header
Floating glass-pill SaaS header as a plain, fully editable Etch 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
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
- Etch, ACSS, plain CSS
Options 8
Set on the section, in Etch’s 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 From €39 a year, with all 469 patterns.
Get ProMore patterns
