Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageTransparent Header
Transparent overlay header for hero-led sites (charter, travel, hospitality, automotive), as a plain, fully editable Etch tree: header > top (surface layer; notice row with a New chip and link; bar: sail mark + letter-sp…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Transparent 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 15
Set on the section, in Etch’s attributes panel. No code needed.
data-inkidle text colour while the header is transparent
data-engagewhat makes the surface appear: pointer or keyboard focus inside the header, scrolling past data-threshold, both, always solid, or never
data-surfacethe engaged surface: solid paper, frosted paper or deep navy glass (keeps white ink)
data-wipehow the surface arrives: a clip-path wipe from the top edge or a cross-fade
data-durationms · +
data-easingtiming of the wipe and the ink flip
data-thresholdpx · scroll distance before the scroll engage kicks in
data-behaviorsticky pins the header (inside the demo stage, or to the page when the stage is off)
data-headroomhide on scroll down, reveal on scroll up
data-layoutcenter = links centred, start = links beside the brand, split = links | brand | actions
data-noticethe slim announcement row (it folds away once scrolled)
data-ctaPlan a charter button style
data-menumobile menu pattern: side drawer from the inline end, or a full-screen sheet
data-toggle-desktopkeep the Menu button on desktop so the drawer (fleet rail, contacts) is available at every width
data-stagethe demo hero photo and intro panel under the header (switch off in production)
Component props 4
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
hoverboth
easingsmooth
duration380
labelPrimary
labelFleet
url#fleet
currentFalse
showBadgeFalse
badgeNew
showHintTrue
hint42 crewed sailing and motor yachts
titleThe fleet
showLinkTrue
linkLabelAll 42 yachts
linkUrl#fleet
imagehttps://images.unsplash.com/photo-1540946485063-a40da27545f8?w=480
altA white sloop under full sail on open blue water
nameSelene 38
url#selene
showTagFalse
tagNew
showMetaTrue
kindSailing yacht
guests6 guests
Included in Pro From €39 a year, with all 469 patterns.
Get ProMore patterns
