Explore Cards
Three (or more) tall image cards that scroll horizontally on mobile and lock into a three-column grid on desktop. Each card is a single link wrapping an image, a title with a circle-arrow icon, and a short description. Hovering a card zooms the image slightly and shifts the title and arrow to kale, giving the whole card a clear interactive feel.
The section uses a left-aligned title block above the cards. Cards are fixed-width (292px) on mobile with snap scrolling; on desktop they fill equal grid columns.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Section ID | Optional anchor for jump links. |
| Padding top / bottom | Default 48/64/80px each. |
Blocks
Section titled “Blocks”Static blocks:
- Title — left-aligned section heading above the card row
Repeatable:
- Explore Card — image, title, rich text description, and link URL. The entire card is clickable when a URL is set; without a URL it renders as a static div.
Where it’s used
Section titled “Where it’s used”Homepage and landing pages for navigation-style content — linking out to collections, blog categories, or brand story pages.
- Three cards is the design intention. The preset ships with three, and the desktop grid is three columns. You can add more but they’ll wrap to a new row.
- Use 5:6 portrait images. The card renders at a 5:6 aspect ratio, so plan crops accordingly.
- Always set the link URL. Without it the hover effects still work visually but the card isn’t clickable, which feels broken. If there’s no destination, it probably shouldn’t be an explore card.
- Keep descriptions to one or two lines. The description sits below the title at body-md size; anything longer pushes the grid out of alignment across cards.