×

HubSpot CSS List Style Guide

/ CRM, Hubspot / By

HubSpot CSS List Style Guide

Designing clean, readable lists in HubSpot requires understanding how CSS list-style properties work and how to apply them consistently across your pages and templates. This guide explains the core CSS rules for customizing bullets, numbers, and positioning so your lists match your brand and layout.

Whether you manage a full HubSpot website or individual landing pages, mastering list styles helps you improve readability, hierarchy, and user experience without cluttered code.

How CSS Lists Work in HubSpot Layouts

In any web page, including HubSpot content, HTML lists come in three main types:

  • Unordered lists (<ul>) – default bullets.
  • Ordered lists (<ol>) – numbered or lettered items.
  • Description lists (<dl>) – terms and descriptions.

CSS lets you control how these lists look with the list-style shorthand property and its longhand options:

  • list-style-type – bullet or numbering style.
  • list-style-position – where bullets appear relative to the text.
  • list-style-image – a custom image as the bullet.

Inside HubSpot, you can apply these rules in theme stylesheets, module CSS, or custom HTML modules.

Core list-style properties for HubSpot pages

The list-style property is a shorthand that can set type, position, and image at once. Its syntax is:

selector {
  list-style: <list-style-type> | <list-style-position> | <list-style-image>;
}

HubSpot templates and modules can reference these selectors via classes, for example .hs-content ul or a custom class applied in the page editor.

HubSpot list-style-type options

The list-style-type property controls the marker design. Common values include:

  • disc – solid circle (default for <ul>).
  • circle – hollow circle.
  • square – solid square.
  • decimal – 1, 2, 3, 4… (default for <ol>).
  • lower-alpha – a, b, c…
  • upper-alpha – A, B, C…
  • lower-roman – i, ii, iii…
  • upper-roman – I, II, III…
  • none – removes the marker.

Example for a HubSpot page section:

.features-list {
  list-style-type: square;
}

Apply the features-list class to your list via the HubSpot editor to get square bullets across that block.

HubSpot list-style-position options

The list-style-position property defines where bullets sit relative to the text block:

  • outside – bullet is outside the content box; text wraps under the bullet (default).
  • inside – bullet is inside the content box; text aligns with the bullet.
.faq-list {
  list-style-position: inside;
}

Use this on tight layout areas in HubSpot, such as sidebars or narrow columns, to keep bullets aligned with the first line of text.

HubSpot list-style-image for custom bullets

To replace standard bullets with brand icons on a HubSpot page, use list-style-image:

.checklist {
  list-style-image: url("/path/to/check-icon.png");
}

Important considerations:

  • Use optimized, small images (SVG or compressed PNG) to protect performance.
  • Ensure high contrast so bullets are visible on your chosen background.
  • Host assets in HubSpot file manager or your preferred CDN.

Practical list-style examples for HubSpot content

Here are common patterns you can adapt for HubSpot blog posts, landing pages, and knowledge base articles.

1. Clean bullet removal in HubSpot modules

Sometimes you want a list structure for semantics but no visible bullets, for example in a navigation or feature grid:

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.nav-list li {
  margin-bottom: 0.5rem;
}

Apply nav-list to your <ul> in a custom module or HTML block in HubSpot. This keeps screen readers aware of the list while visually removing bullets.

2. Numbered HubSpot steps with clear hierarchy

For tutorials and onboarding, numbered lists guide users smoothly:

.steps-list {
  list-style-type: decimal;
  list-style-position: outside;
  margin-left: 1.5rem;
}
  1. Outline the goal.
  2. List clear, actionable steps.
  3. Provide supporting links or visuals.

Use this class on <ol> elements inside HubSpot rich text modules to create consistent step styling across your site.

3. Accessible custom bullets in HubSpot

While list-style-image is straightforward, a more flexible technique uses pseudo-elements for custom bullets, often preferred in advanced HubSpot themes:

.icon-list {
  list-style-type: none;
  padding-left: 0;
}
.icon-list li {
  position: relative;
  padding-left: 1.75rem;
}
.icon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.75rem;
  height: 0.75rem;
  background: url("/path/to/icon.svg") no-repeat center center / contain;
}

This method gives you better control over size, alignment, and responsive behavior while still working well with HubSpot templates.

Best practices for CSS lists in HubSpot

To keep your styles scalable and consistent, follow these guidelines.

Use classes instead of targeting all lists

In a large HubSpot site, avoid global rules like ul { list-style-type: none; }. Instead:

  • Define named classes for specific list roles, such as .pricing-list, .feature-list, or .footer-links.
  • Apply those classes within the HubSpot editor, theme fields, or custom modules.

Respect alignment and spacing in HubSpot templates

Markers and indentation can clash with tight layouts. For better alignment:

  • Use margin-left or padding-left to fine-tune indentation.
  • Pair list-style-position: inside with careful padding to keep edges clean in columns.
  • Test on mobile views in the HubSpot design manager or page preview.

Keep list styles consistent across HubSpot content

Define a small set of standard list styles that match your brand:

  • A primary bullet style for article content.
  • A numbered list style for tutorials or onboarding pages.
  • A minimalist style for footers, navigation, or inline lists.

Centralize these rules in your HubSpot theme CSS or global styles so editors can reuse them sitewide.

Where to place CSS for lists in HubSpot

There are several ways to add CSS in the HubSpot ecosystem:

  • Theme stylesheet – best for global list rules used across many pages.
  • Module CSS – scope custom list styles to a specific module, such as a pricing module.
  • Page-level header HTML – use sparingly for one-off experiments or landing pages.

For larger sites, use theme or module styles so marketing teams can manage content in HubSpot without touching code on each page.

Further learning and resources

To dive deeper into CSS list-style options and examples, review the original reference article on CSS list-style on HubSpot’s blog. You can also explore optimization resources at Consultevo for guidance on performance, SEO, and structured content strategies.

By combining flexible CSS list styling with HubSpot’s content tools, you can deliver clear, well-structured lists that enhance readability, brand consistency, and overall user experience across your entire site.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights