Custom Bullet Points¶
A responsive grid of titled bullet blocks, rendered as a plain rich-text list or a fully custom list with per-item icons, one shared icon, or auto-numbered markers. Best for: feature lists, "why choose us" sections, plan comparison lists, numbered how-it-works grids.
📷 Hero image
Target file: assets/img/custom-bullet-points/hero.webp
A three-column grid of bulleted feature lists on a Light background, each column a bordered card with a bold title and three to four bullet rows below it, each row showing a small circular Primary-colored icon badge beside the text. Captured at desktop width.
At a glance¶
List Repeater Grid Icons
- What it does: renders a repeater of "Bullet points" blocks, one per grid column. Each block has its own title and list. The list style is set once for the whole module — Default renders the block's rich-text field as a plain paragraph list, Custom renders a structured list where every row can show a marker: one shared icon, a per-row icon, or an auto-incrementing number.
- Best used for: any bulleted content that needs its own heading per group — feature/benefit columns, "what's included" plan comparisons, or a numbered how-it-works grid.
- Not the right fit if: you need dated milestones on a connected line (use Timeline), a single flat feature grid with no per-column heading (use Features), or a sequence with a CTA link on every step (use Steps).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Custom Bullet Points.
- Drag it into your page.
- Open Click to update content › Bullet points and add a block: set its Title and either fill in the Bullet points rich-text field (Default style) or add rows to Bullet point list (Custom style).
- Set Bullet points style to
Customto unlock per-row markers. - Choose Custom icon style:
Single Icon(one icon for every bullet),Icon per List(each row picks its own), orNumbered. - For any icon field, pick an Icon source — HubSpot icon library, an uploaded image, or pasted SVG code.
- On the Style tab, set Columns per breakpoint, turn Card UI on or off, and style the Title, Icon, Number, and List preset groups.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A single plain bullet list, no icons, no card.
📷 Result
Target file: recipe-default-richtext-list.webp
One column with a bold title above a plain paragraph bullet list using the theme's default marker, on a plain background, no card.
| Field | Set to |
|---|---|
| Content › Bullet points style | default |
| Layout settings › Columns | 1 / 1 / 1 |
| Style › Card UI | off |
Each bullet picks its own icon, two columns of cards.
📷 Result
Target file: recipe-icon-per-list-cards.webp
Two side-by-side cards, each with a title and a short bullet list, every row showing a different small icon to its left.
| Field | Set to |
|---|---|
| Content › Bullet points style | custom |
| Content › Custom icon style | icon_per_list |
| Content › Bullet point list › Add icon | on (per row) |
| Layout settings › Columns | 2 / 2 / 1 |
| Style › Card UI | on |
One icon (e.g. a checkmark) reused on every row, in a badge.
📷 Result
Target file: recipe-single-shared-icon.webp
Three plan-style cards, each listing a few bullet rows, every row marked with the same green checkmark icon sitting in a soft circular badge.
| Field | Set to |
|---|---|
| Content › Custom icon style | single_icon |
| Content › Icon | a checkmark |
| Style › Preset settings › Icon › Background | default (badge on) |
| Layout settings › Columns | 3 / 2 / 1 |
Auto-numbered steps in a shared-border grid, no card fill.
📷 Result
Target file: recipe-numbered-connected-grid.webp
Three columns divided by thin shared border lines (no gap between them, no individual card background), each with a title and a short list where every row shows a small numbered circle instead of an icon.
| Field | Set to |
|---|---|
| Content › Custom icon style | numbered |
| Style › Card UI | off |
| Layout settings › Gap between column | 0 |
| Layout settings › Separator borders between blocks | on |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Switch between a plain paragraph list and a custom icon list | Content › Bullet points style |
| Reuse one icon on every bullet across every block | Content › Custom icon style = single_icon |
| Let each bullet pick its own icon | Content › Custom icon style = icon_per_list |
| Show a sequential number instead of an icon | Content › Custom icon style = numbered |
| Use an uploaded image or pasted SVG instead of a library icon | The Icon source choice beside any icon field |
| Change how many columns show per breakpoint | Layout settings › Columns |
| Remove the gap for a connected border look | Layout settings › Gap between column = 0, then Separator borders between blocks |
| Wrap each block in a card | Style › Card UI |
| Hide every block's title without deleting the text | Content › Show title |
| Style the icon badge (size, color, background, border) | Preset settings › Icon |
| Style the number badge separately from the icon | Preset settings › Number |
| Use a theme typography preset for bullet text | Preset settings › List › Text font size = typo-1 / typo-2 |
| Set an exact custom pixel size for bullet text | Preset settings › List › Text font size = custom_font_size |
Field reference¶
The editor is split into a Content tab and a Style tab. Groups below match the HubSpot editor. (173 fields total - expand each group as needed.)
Content tab¶
Click to update content
| Field | Type | Default |
|---|---|---|
| Bullet points style | choice (default / custom) | default |
| Custom icon style | choice (single_icon / icon_per_list / numbered) | icon_per_list |
| Icon source / Icon / Upload icon image / SVG code (shared icon) | choice / icon / image / text | hubspot_icon_library |
| Show title | boolean | on |
Bullet points (repeater)
| Field | Type | Default |
|---|---|---|
| Title | text | — |
| Bullet points (rich text) | richtext | — shown in Default style |
| Bullet point list (nested repeater) | group | — shown in Custom style |
Each Bullet point list row has: Text, Add icon, and (when Add icon is on) its own Icon source / Icon / Upload icon image / SVG code.
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 |
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-xl), Bottom (bottom-xl), Left (left-m), Right (right-m).
Layout settings
| Field | Type | Default |
|---|---|---|
| Columns (desktop/tablet/mobile) | number | 3 / 2 / 1 |
| Gap between column (desktop/tablet/mobile) | number, px | 24 / 24 / 24 |
| Section wrapper container / Inner content container | width + alignment | default / none |
| Separator borders between blocks | boolean | off |
| Border style (width / color / custom color) | number / choice / color | 1px / default |
Preset Settings - Title
| Field | Type | Default |
|---|---|---|
| Show title as | choice (h2-h6) | h2 |
| Color | choice (default / custom color / custom gradient) | default |
| Text transform | choice | as_it_is |
| Spacing below element | choice (sb-*) | default |
Preset Settings - Icon
| Field | Type | Default |
|---|---|---|
| Icon width & height | number, px | 20 |
| Icon color | choice (default / custom) | default |
| Background (+ custom color/gradient) | choice | none |
| Border radius | choice (round-* / custom) | round-100 |
| Spacing around icon | choice (ipad-*) | ipad-0 |
| Show border / Border width / Border color | boolean / number / choice | off / 1px / default |
Preset Settings - Number
Same shape as Icon above, kept independent so Numbered mode never inherits Icon-mode styling: Number badge size (default 24), Number color, Background, Border radius, Spacing around number, Show border + width + color.
Preset Settings - List
| Field | Type | Default |
|---|---|---|
| Text color | choice (default / custom) | default |
| Text font size | choice (typo-1 / typo-2 / default / custom_font_size) | default |
| Custom font size | number, px | 16 |
| Spacing between icon and text | choice (gap-*) | gap-s |
| Gap between list items | choice (sb-*) | default |
Card UI + Card UI settings
| Field | Type | Default |
|---|---|---|
| Card UI | boolean | on |
| Background | choice (theme color / custom color / custom gradient) | default |
| Border | toggle + width + color | off |
| Round corner | choice (default = theme card radius, or round-* / custom) | default |
| Shadow | choice (default = theme card shadow, or preset / none) | default |
| Card padding | spacing (desktop/tablet/mobile), overridable | 24px all |
Tips & gotchas¶
One style choice governs every block
Bullet points style and Custom icon style are module-level — they apply to every block in the repeater at once, so all your columns stay visually consistent.
Set the column gap to 0 for a connected border
Separator borders between blocks draws one continuous line between columns. It only looks right with Gap between column set to 0 — leaving a gap breaks the connected-line effect.
Pasted SVG icons need a stroke, not a fill
When Icon source is add_svg_code, use stroke-based icon code (e.g. from Iconoir). The module recolors it via stroke, so a filled icon will not pick up the theme's icon color.
Related modules¶
- Steps: a numbered sequence with a per-step icon, description, and CTA link.
- Features: a flat benefits/feature grid with no per-column title.
- Content Card: a card grid built for image + title + description + button, not bullet lists.
- Section Title: a heading + intro to sit above your bullet grid.