Opening soon Every piece runs live on its page. Checkout opens at launch.
maisonblock

Docs · No. 04

Cadence

Cadence is a section: a row of cards that each cycle their own photos.

Set it up

  1. Upload sections/mb-cadence.liquid and assets/mb-cadence.js.
  2. Add Maisonblock Cadence and add up to 8 Card blocks.
  3. For each card: a title, a link, a link label and two to four images.
  4. Choose the animation (fade, dissolve, slide left, slide right), how often images change and the transition speed.

Behaviour

Cards start a beat apart so the row ripples. Cycling pauses on hover, while the section is off screen and in hidden tabs, and stops entirely for shoppers who prefer reduced motion.

All settings

Read directly from the file you download (version 1.0.0).

SettingTypeDefault
Cards per row (desktop)range4
Animationselectdissolve
Change image everyrange2.4
Transition speedrange800
Backgroundcolor#f1f1f1
Section paddingrange40
Each “Card” block
Titletext—
Image 1image_picker—
Image 2image_picker—
Image 3image_picker—
Image 4image_picker—
Link labeltextShop now
Linkurl—