Promo tiles
Promo tiles: a mosaic of image tiles in four sizes (small, wide, tall, large). A spread: optional intro on the recto page, tiles on the verso page; stacked in Full width.
This section also has the base settings every section shares: color scheme, layout, running head, page number, padding, divider and reveal on scroll.
Settings
| Setting | What it does |
|---|---|
| Space between tiles | From 0 to 48 px. Default: 16. |
| Tile height | Options: Small, Medium, Large. Default: medium. |
| Layout | Options: Mosaic, Carousel, Swipe on mobile. Default: grid. |
| Columns | From 2 to 4. Default: 3. |
| Columns on mobile | Options: 1, 2. Default: 2. |
| Order on mobile | Options: As on desktop, Second page first. Default: same. |
| Content width | Options: Narrow, Normal, Wide. Default: normal. |
| Minimum height | Options: Automatic, Small, Medium, Large, Full screen. Default: none. |
| Background image | |
| Overlay opacity | A layer in the color scheme’s background color keeps text readable over the image. From 0 to 90 %. Default: 60. |
| Padding on mobile | Options: Same as desktop, Smaller, None. Default: same. |
| Visibility | Options: Show on all devices, Hide on mobile, Hide on desktop. Default: all. |
Blocks
Promo tile
A promo tile: image with heading, text and a link, in one of four sizes. Used in the Promo tiles section and inside the collection grid.
| Setting | What it does |
|---|---|
| Image | |
| Mobile image | Shown on screens narrower than 750 pixels. |
| Video | Plays muted on a loop while on screen, instead of the image. Not played for visitors who reduce motion. |
| Heading | Default: New season. |
| Text | |
| Link | |
| Label | Default: Shop now. |
| Button style | Options: Text link, Primary, Secondary. Default: link. |
| Size | Applies in the Promo tiles section. In the product grid, tiles take one cell, or two when set to wide. Options: Small, Wide, Tall, Large. Default: small. |
| Content position | Options: Top start, Top center, Top end, Middle start, Middle center, Middle end, Bottom start, Bottom center, Bottom end. Default: bottom-start. |
| Overlay color | Default: #000000. |
| Image overlay opacity | From 0 to 80 %. Default: 25. |
| Color scheme | Colors for the text and buttons on this slide. Check contrast against the image and overlay. Default: scheme-2. |