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 Bricks 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
All photos and visual assets used in this preview are sourced from Unsplash.
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
- Bricks, ACSS, plain CSS
Options 15
Set on the section, in Bricks’ 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 €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
