Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageArc Frame Hero
Landing hero built as a plain, fully editable Etch tree: section > container > an Arc wrapper holding six "Arc Photo Card" component instances positioned along a symmetric arc (three each side, CSS-only via nth-of-type,…
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.
Arc Frame Hero 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
- Hero
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 5
Set on the section, in Etch’s attributes panel. No code needed.
data-themere-themes the whole hero
data-archow far the cards spread from the centre, default normal
data-parallaxcards wobble toward the pointer as it moves over the hero (no-op on touch)
data-revealcards assemble into place, staggered, the first time the hero scrolls into view
data-radiuscard corner radius from the ACSS radius tokens
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
imagehttps://images.unsplash.com/photo-1500534623283-312aade485b7?w=480
altWinding road through a canyon at golden hour
toneneutral
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
