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