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