Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageHeader CTA Overlay
Studio header whose call to action opens an enquiry overlay, as a plain, fully editable Etch tree: header > bar (square mark + wordmark, "Nav Link" instances with optional counts, availability note, Start a project pill,…
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 CTA 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 13
Set on the section, in Etch’s attributes panel. No code needed.
data-inkbar text colour
data-panelcolour scheme of the enquiry overlay and the mobile drawer
data-cta-stylethe Start a project pill
data-accentACSS colour for selected chips, the availability dot and focus details
data-positionsticky pins the bar (over the demo stage, or to the page when the stage is off)
data-morphgrow the overlay out of the button, or simply fade it in
data-durationms · +
data-easingof the morph
data-scrimhow much the page dims behind the overlay
data-sidethe partner card with call openings
data-availabilitythe availability note beside the button
data-openopen the overlay on load (useful while editing)
data-stagethe demo hero photo under the bar
Component props 3
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelWork
url#work
currentFalse
showCountFalse
count24
grouptype
labelResidential
valueresidential
checkedFalse
dayTue 3 Feb
time10:00
url#book
showTagFalse
tagSoonest
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
