Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageTilt Product Cards
Row of product cards built as a plain, fully editable Etch tree: section > container > header (h2, intro, live bag counter) > grid of "Tilt Product Card" component instances (duplicate, reorder or delete in Layers). Card…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Tilt Product Cards 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
- Cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 15
Set on the section, in Etch’s attributes panel. No code needed.
data-themedata-surfacecard surface
data-radiuscorner radius from ACSS radius tokens
data-columnscards per row at wide container widths (1 column on phones, 2 on tablets)
data-ratiophoto aspect ratio
data-tiltpointer-driven 3D tilt, fine pointers only
data-intensitymax tilt in degrees
data-glarespecular glare that follows the pointer
data-swaphow the photo changes when a colour is chosen: an iris opening from the swatch or a crossfade
data-durationms of the colour swap
data-easingtilt return and swap easing
data-animentrance when the row scrolls into view
data-staggerms between cards on entrance
data-onceplay the entrance only the first time
data-show-bagthe bag counter in the header
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
nameStride Knit Runner
categoryFootwear
showCategoryTrue
url#
price$148
compareAtempty
onSaleFalse
saleLabelSale
isNewTrue
showSwatchesTrue
swatch1NameEmber
swatch1Color#c8261f
swatch1Imagehttps://images.unsplash.com/photo-1542291026-7eec264c27ff?w=900
swatch2NameVolt
swatch2Color#b8e03a
swatch2Imagehttps://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=900
swatch3NameChalk
swatch3Color#e4e1dc
swatch3Imagehttps://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=900
buttonLabelAdd to bag
Included in Pro From €39 a year, with all 469 patterns.
Get Pro
