List Styles
Field group for styling text lists.
- Font [Flattened Group]
Change the font styling of the list. - Custom Bullet Icon _[Image]
_If the list is an icon list, replace the default checklist icon with an image. - Bullet Size _[Number]
_Change the size of bullets. - Bullet Offset _[Number]
_Bullets not the same size as the text often won’t be center with the first line, use this offset to adjust the alignment of the bullets. - Bullet Color _[Color]
_Change the color of the bullets (not applicable to image icons). - Bullet Number Font _[Font]
_Change the font family and style of numbers.
Using List Styles in the Rubric Theme
The List Styles field group appears in various modules throughout the Rubric theme, allowing you to create visually compelling lists that align with your educational institution’s branding and design standards. This shared styling system ensures consistency across your site while giving you flexibility to customize lists for different contexts.
When working with modules that include list styling options, you’ll find these controls particularly useful for course listings, faculty directories, event schedules, and resource pages where information hierarchy is crucial. The structured nature of the Rubric theme makes well-formatted lists essential for user experience and content scanability.
Custom bullet icons work especially well for educational content where you want to reinforce branding or create visual associations. For example, you might use graduation cap icons for degree program lists or calendar icons for important date listings. Remember that image icons should be simple, high-contrast designs that remain readable at small sizes.
The bullet offset feature becomes particularly important when you’re using larger custom icons or different font sizes. Educational sites often need to accommodate various text hierarchies, and proper bullet alignment ensures your content maintains a professional appearance across different devices.
For numbered lists, the separate font controls allow you to create emphasis on sequential content like course prerequisites, application steps, or event timelines. You can make numbers bold or use a different font family to help users navigate multi-step processes more easily.
When customizing these settings in the HubSpot page editor, preview your changes across desktop and mobile views to ensure readability. Educational audiences often access content on various devices, so consistent list formatting helps maintain engagement regardless of screen size.