Content Cards

A set of cards that scroll horizontally on mobile and tablet, then snap into a two-column grid on desktop. Each card pairs an image with a title, body text, and an optional arrow link. On extra-large screens the cards offset into asymmetric 5/12 columns for a more editorial feel.

The section opens with a centered tag and title above the cards. On mobile, cards are fixed-width (296px) and snap into place; on desktop they fill the grid columns naturally.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Padding top / bottom	Default 48/64/80px each.

Blocks

Static blocks:

• Tag — small label centered above the title
• Title — the section heading, centered

Repeatable:

• Content Card — image, title, rich text body, and an optional link (label + URL). The link renders as an inline text arrow, not a button.

Four cards fill the grid cleanly

The preset ships with four cards, which produces a balanced 2x2 grid on desktop. You can add more, but odd numbers leave a gap in the bottom row.

Where it’s used

Homepage and landing pages for editorial content grids — product benefits, brand story highlights, or category teasers.

Tips

• Use 3:4 portrait images. The card image renders at a 3:4 aspect ratio; landscape or square images will be cropped to fit.
• Keep body text brief. On mobile, long text pushes the link off-screen since cards have a fixed width.
• The link is optional. Cards without a URL still render cleanly — they just skip the arrow link at the bottom.
• Four is the sweet spot. The 2x2 desktop grid looks intentional. Two cards work for a simpler row; six or more start to feel like a blog feed.