Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageHeader Classic Overlay
Classic overlay header for hotels, villas and destination brands, as a plain, fully editable Etch tree: header > top (utility row: place, live local clock, phone, language links; bar: sail mark + serif wordmark, "Nav Lin…
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.
Header Classic Overlay 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 11
Set on the section, in Etch’s attributes panel. No code needed.
data-inktext colour
data-behaviorsticky pins the header (inside the demo, or to the page when the demo stage is off)
data-headroomhide on scroll down, reveal on scroll up
data-surfacethe backdrop the bar gains once the page scrolls
data-layoutclassic = links beside the actions, centered = links centred between brand and actions
data-indicatorthe shape that slides between links on hover and rests on the current page
data-ctaReserve button style
data-utilitythe top utility row (collapses away once scrolled)
data-offsetUTC offset of the place · +
data-clockfor the live local time
data-stagethe demo hero photo and cream intro panel under the header
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelRooms
url#rooms
currentFalse
showBadgeFalse
badgeNew
showSubTrue
sub32 rooms and suites over the bay
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
