Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageColorway Shop Card
Single-item shop card with four colourway dots (real radio buttons, works without JavaScript). Choosing a dot cross-fades the product photo, recolours the price and the outlined Add to cart button (which fills with a gr…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Colorway Shop Card 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
- Element
- Category
- Cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 3
Set on the section, in Etch’s attributes panel. No code needed.
data-themesurface behind the cards
data-animentrance
data-bgwhether the section background follows the colourway
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
titleMetcon Runner
descMen's training shoe
price$130
buttonLabelAdd to cart
url#
image1https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800
name1Red
image2https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=800
name2Green
image3https://images.unsplash.com/photo-1549298916-b41d501d3772?w=800
name3Tan
image4https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=800
name4Graphite
groupLabelColour
Included in Pro From €39 a year, with all 469 patterns.
Get Pro
