Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageCompare Reveal Slider
Plain, fully editable Etch tree: section > container > stage > frame (after image full-bleed, before image clipped by a draggable divider) > Before/After label chips > divider handle > hint chip, with an editable caption…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Compare Reveal Slider 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
- Component
- Category
- Interactive
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 7
Set on the section, in Etch’s attributes panel. No code needed.
data-orientationwhich way the divider runs, default horizontal
data-start0-100 · initial divider position as a percent, default 50
data-modedrag requires press + move, hover follows the pointer over the frame without pressing (ignored on touch, which always drags)
data-labelsshow the Before/After chips, default true
data-hintshow the "Drag to compare" hint that fades after first interaction, default true
data-radiusframe corner radius from the ACSS radius tokens, default l
data-steppercent per keyboard arrow press on the focused handle
Included in Pro From €39 a year, with all 469 patterns.
Get Pro
