Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageMaterial Swatch Dial
Semicircular photo-wheel gallery built as a plain, fully editable Bricks tree: section > corner arrow keys (glassy outer pad + white key cap) > a Dial whose disc is centred on the bottom edge so only its upper half shows,…
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.
Material Swatch Dial 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
- Galleries
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 10
Set on the section, in Bricks’ attributes panel. No code needed.
data-loopwrap around past the last/first wedge
data-dragpointer/touch drag-to-spin with snap to the nearest wedge, default true
data-sensitivitydegrees rotated per 100px of drag
data-durationms per 90° step · ·
data-easingor any cubic-bezier( · )
data-arrowsshow the corner arrow keys
data-labelsshow the left/right wedge names (desktop only, like the source)
data-ctashow the "See all" button in the hub
data-sizewheel scale, default m (836px desktop / 544px phone)
data-themesection surface, default dark
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
index0
nameEmber Rose
imagehttps://images.unsplash.com/photo-1496062031456-07b8f162a322?w=1200
altA deep red rose against a dark, blurred garden
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
