Feature cards grid

Set up the content

Content → Heading: Eyebrow, heading and lead text. Heading position centers or left-aligns the block.
Content → Cards: Choose Media per card – Icon, Image, Number or None.
Pick a Link type: Text link, HubSpot CTA, Whole card clickable or None.

Choose the look

Setting	Options
Columns (desktop) / Columns (tablet)	2–4 / 1–3
Card style	Elevated, Tinted, Outlined, Flat
Icon position	Above or beside the title
Image aspect ratio	16:10, 4:3, 1:1, 4:5, 3:4 or the original ratio
Image shape	Rounded, Circle (a centered round image, for example a portrait or a logo) or Square
Equal card heights	Keeps rows even
Styles → Hover	Lift on hover and link hover color
Styles → Layout → Grid max width	Narrows and centres the card grid while the module keeps its full background
Content → Text under the cards	A small footnote under the grid, with links if you like

Good to know

Use Number media for simple numbered steps (01, 02, 03).
For customer stories with a person photo, use Image media with Image shape → Circle, or a 4:5 portrait ratio.
For people with contact details, use Team members grid: It has the same card styles.
Background, module width, spacing and alignment work the same in every module – see Backgrounds and Module width and inset panels.

Heading beside the cards

Content → Heading → Heading position can place the heading block Beside the grid, left or right: The heading, lead and up to two Heading buttons (Content → Heading buttons) sit in a column of about a third of the width, and with Keep the heading in view the column stays on screen below the site header while the cards scroll past it (desktop only). Two columns of cards suit this layout.

On this page

Set up the content

Choose the look

Good to know

Heading beside the cards

Keep reading

Did this answer your question?