Modules
Feature cards grid
A heading above two to four columns of cards. Each card can show an icon, an image or a large number, plus a tag, title, text and a link.
On this page
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, SVG (own size), Video (a file or an embed with a poster and a play button), Number or None.
- Pick a Link type: Text link, HubSpot CTA, Whole card clickable or None. A clickable card with video media can open the link or play the video in a lightbox (When the card is clicked). With Text link the whole card is clickable as well. The link text stays the one link a screen reader announces, and links inside the card text still work on their own.
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, link hover color, grow the play button on hover |
| Styles → Play button | Solid, outline or glass; size; button and triangle colours (video cards) |
| Styles → Layout → SVG size | Width of an SVG in the media area |
| 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).
- Outlined cards draw their frame from the theme's text and border colours, so it stays clear on white, on a tinted section and in dark mode. A clickable outlined card darkens its frame on hover.
- 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.
More in this category
Keep reading
Support
Did this answer your question?
If not, write to us and say which page you were on.