Rubric Documentation

Divider Line

Add a horizontal or vertical divider.

divider

View a live demo of this module.

The following is a detailed listing of all the Content and Style fields available in this module.

Content

  • Direction _[Choice]
    _Choices: Horizontal, Vertical
  • Size [Group]
    • Width [Number]
    • Height [Number]
    • Width Unit _[Choice]
      _If Direction is Horizontal.
      Choices: %, px

Styles

  • Dark Mode _[Boolean]
    _Check this to use Dark Mode colors set in the Theme Settings.
  • Module [Group]
  • Style _[Choice]
    _Choices: Solid, Dotted, Dashed, Doubled, Groove, Ridge, Inset, Outset
  • Color [Color]

Usage Guide

The Divider Line module serves as a visual separator to organize content sections and improve your page’s readability. This versatile module works particularly well on educational resource pages, event schedules, and content-heavy layouts where you need to create clear visual breaks between different topics or sections.

You can drag and drop this module anywhere in the HubSpot page editor to create either horizontal or vertical dividers. Horizontal dividers are ideal for separating content blocks vertically on your page, such as between different course offerings, event sessions, or resource categories. Vertical dividers work well when you have side-by-side content columns and need a visual separator between them.

The module’s sizing flexibility allows you to create subtle accent lines or bold section breaks depending on your design needs. When setting the width and height, consider your page’s overall spacing and typography scale to maintain visual harmony. For horizontal dividers, you can specify width in either pixels for precise control or percentages for responsive behavior that adapts to different screen sizes.

The Style field offers eight different line treatments, from clean solid lines to decorative options like groove or ridge effects. Solid lines provide the most professional appearance for academic and institutional content, while dotted or dashed styles can add visual interest to event pages or informal content sections.

Take advantage of the Dark Mode integration to ensure your dividers maintain proper contrast when visitors toggle your site’s dark mode setting through the theme options. The color picker lets you match dividers to your brand palette or create subtle separators using lighter tones from your theme’s color scheme.

This module pairs effectively with the Rubric theme’s other content modules, helping you create well-structured pages that guide visitors through complex information hierarchies.