Features¶
A responsive grid of feature items, each with an optional icon, a title, a rich-text description, and an optional link. Best for: "why us" and benefits grids, product feature highlights, service lists, "what's included" sections.
📷 Hero image
Target file: assets/img/features/hero.webp
A three-column grid of feature cards on a Light background, each card holding an icon in a circular Primary background badge, a bold title, a short description, and a link with a trailing arrow. Show bordered, softly shadowed, rounded cards of equal height aligned across the row. Captured at desktop width.
At a glance¶
Benefits Feature grid Cards
- What it does: renders a column grid (set per breakpoint) of feature items. Each feature shows an optional icon, a title, a rich-text description, and an optional link that can carry an icon and underline. Features can be wrapped in styled cards, with an optional equal-height mode that pins links to the bottom and aligns them across the row.
- Best used for: a clean grid of selling points or included features, with or without icons.
- Not the right fit if: the items form an ordered sequence (use Steps) or need selectable panels (use Tab).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Features.
- Drag it into your page.
- Open Click to update content › Features and set each item's Choose icon, Title, and Description.
- To add a link, turn on Add link and set the Link + Link title.
- Duplicate the item to add more features.
- On the Style tab, set Columns per breakpoint and (optionally) turn on Make a card and Make card same height.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
No card - just icon, title, and description.
📷 Result
Target file: recipe-simple-grid-default.webp
A flat three-up grid of features, each with an icon, title, and description and no card chrome, on a plain background.
| Field | Set to |
|---|---|
| Card › Make a card | off |
| Layout settings › Columns | 3 / 2 / 1 |
| Feature › Choose icon | hubspot_icon_library |
Bordered, shadowed cards with a background-shaped icon.
📷 Result
Target file: recipe-icon-led-cards.webp
Bordered, softly shadowed cards, each led by an icon inside a circular Primary background badge above the title and description.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Shadow › Card shadow | light-shadow |
| Icon › Icon background | bg-primary |
| Icon › Roundness of background | round-100 |
Links pinned to the bottom, aligned across the row.
📷 Result
Target file: recipe-equal-height-cards-with-links.webp
Three cards of equal height despite different description lengths, with an arrow link pinned to the bottom of each and aligned across the row.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Make card same height | on |
| Feature › Add link | on |
| Link › Add Icon | on |
Title and description only.
📷 Result
Target file: recipe-no-icon-list.webp
A clean grid of features showing only a bold title and description, with no icons and no cards, on a plain background.
| Field | Set to |
|---|---|
| Feature › Choose icon | no_icon |
| Title › Show title as | h5 |
| Description › Description style | default |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| 3-up / 2-up / 1-up | Layout › Columns = 3 / 2 / 1 |
| Cards with shadow | Card › Make a card + Shadow |
| Equal-height cards, aligned links | Card › Make card same height |
| Drop the icon entirely | Feature › Choose icon = No icon |
| Use a custom SVG icon | Feature › Choose icon = Add SVG code |
| Upload a PNG/JPG icon | Feature › Choose icon = Upload icon |
| Background shape behind the icon | Icon › Icon background (+ padding) |
| Circular icon background | Icon › Roundness of background = round-100 |
| Add a link to each feature | Feature › Add link (+ Link title) |
| Arrow icon next to the link | Link › Add Icon |
| Underlined link | Link › Add underline (+ offset) |
| Center-aligned card content | Card › Alignment › Content alignment = center |
| Glass-effect cards | Card › Background › Add blur in background |
Field reference¶
The editor is split into a Content tab and a Style tab. Groups below match the HubSpot editor. (165 fields total - expand each group as needed.)
Content tab¶
Click to update content - Features (repeater)
| Field | Type | Default |
|---|---|---|
| Choose icon | choice (none / library / upload / svg) | no_icon |
| Library icon / Upload icon / Svg code | icon / image / text | Bahai (SOLID) |
| Title | text | Title |
| Description | richtext | short sample text |
| Add link / Link / Link title | boolean / link / text | off |
Section background settings / Drag to section name / Developer use only
Standard section background Type, an anchor Section name, and a per-module Add custom css here field.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings (Style)
Color (bg-* tokens), gradient, image/video overlay + position, blur, parallax, and dual radial glow (color / position / size / opacity).
Section divider + spacing settings
- Divider type:
none/shape(25 shapes) /border/shadow. - Spacing: Top (
top-l), Bottom (bottom-l), Left (left-m), Right (right-m). Top and Bottom also acceptcustom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Columns: per breakpoint (default 3 / 2 / 1).
- Gap between column: per breakpoint (default 24).
- Section wrapper container + Inner content container: independent width + alignment.
Card
| Field | Type | Default |
|---|---|---|
| Content alignment | choice (left / right / center) | left |
| Make a card | boolean | off |
| Make card same height | boolean | off |
| Background (+ glass blur) | color / gradient / custom | none |
| Border | toggle + width + color | off |
| Card padding | spacing (desktop/tablet/mobile) | 24px all |
| Card shadow | choice | shadow-none |
| Card round corner | choice (round-0 to round-xxl) | round-s |
Preset Settings - Icon
| Field | Type | Default |
|---|---|---|
| Icon size (desktop/mobile) | number | 34 / 28 |
| Icon color | choice (none / text tokens) | none |
| Padding around icon (desktop/mobile) | number | 0 |
| Icon background (+ glass blur) | choice (bg-* / gradient / custom) | none |
| Spacing under element | choice (sb-*) | sb-m |
| Roundness of background | choice | round-100 |
Preset Settings - Title, Description, Link
- Title: heading tag (h1 to h6, default h5), transform, color, spacing.
- Description: typo preset, color, spacing.
- Link: color (default
text-black), font family, bold, optional Add Icon (with gap + size), and Add underline (with offset).
Tips & gotchas¶
Equal-height keeps links tidy
When cards have different-length descriptions, turn on Make card same height so every card matches the tallest and the links line up neatly across the row.
Icon background needs padding
The icon's background shape only shows once you add Padding around icon. Pair it with round-100 for a circular badge.
Icon color is source-dependent
Icon color only applies to a HubSpot library icon or an Iconoir SVG. Uploaded PNG/JPG icons keep their original colors.
Related modules¶
- Steps: a numbered process grid when order matters.
- Tab: switchable panels for grouped content.
- Content Card: a richer single card with image and buttons.
- Section Title: a heading + intro to sit above your feature grid.