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. (182 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 |
Animation settings
Shown when Add animation to module is ticked. See Add animation to a module.
| Field | Options | Default |
|---|---|---|
| Add animation to module | on / off | off |
| Block effect | Fade up / Fade in / Zoom in / Blur reveal / Slide in from the left / Slide in from the right | Fade up |
| Bullet effect | None / Fade up / Fade in / Blur reveal / Zoom in / Slide in from the left / Slide in from the right | Fade up |
| Delay between blocks | 0 to 1s | 0.12s |
| Delay between bullets | 0 to 1s | 0.08s |
| Duration | 0.2 to 2s | 0.8s |
| Distance | 0 to 120px | 40px |
| Motion feel | Smooth / Soft / Snappy / Bounce | Smooth |
| Play only once | on / off | on |
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.
Frequently asked questions¶
Does the Default style list use the theme's global bullet markers?
Yes. Default style renders inside the same rich-text wrapper class used everywhere else in the theme, so it inherits whatever marker style, size, and spacing you've set in Theme settings › Elements › List items — the same controls that shape bullets in a description field or a blog post. Switch to Custom style if you want per-block icon or number control instead of that global marker.
Is there a limit on how many blocks or bullet rows I can add?
No. Both the Bullet points repeater (blocks/columns) and the nested Bullet point list (rows within a block) have no maximum occurrence, so you can add as many as your layout needs.
If Custom icon style is set to Single Icon or Numbered, does each row's own 'Add icon' toggle still do anything?
No. A row's own Add icon switch (and the icon it points to) only takes effect when Custom icon style is Icon per List. Switch to Single Icon or Numbered and every row uses the shared icon or its auto-number instead, ignoring whatever each row's Add icon was set to.
Animation¶
Tick Style > Add animation to module to play an entrance animation as this module scrolls into view. It is off by default.
- Block effect: Fade up, Fade in, Zoom in, Blur reveal, Slide in from the left, Slide in from the right
- Bullet effect: None, Fade up, Fade in, Blur reveal, Zoom in, Slide in from the left, Slide in from the right
- Also: Delay between blocks, Delay between bullets, Duration, Distance, Motion feel, Play only once.
See Add animation to a module for what each effect looks like and when to use it.
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.