Rubric Documentation

Module Styles

A field group to style the entire module.

  • Max Width _[Number]
    _Change the max width of the module
  • Animation _[Choice]
    _Add a load in animation to the module
    — Choices: None, Fade In, Fade In Up, Fade In Right, Fade In Down, Fade In Left
  • Alignment [Group]
    Change the alignment of the module on desktop, tablet, and mobile
    • Desktop [Alignment]
    • Tablet [Alignment]
    • Mobile [Alignment]
  • Background [Group]
    • Color _[Color]
      _Add a background color to the module
  • Border _[Group]
    _Add a border and border radius to the module
    • Border [Border]
    • Radius [Number]
  • Box Shadow _[Group]_Add a box shadow to the module
    • Color [Color]
    • Offset X [Number]
    • Offset Y [Number]
    • Blur [Number]
    • Spread [Number]
  • Spacing [Group]
    Add margin and padding to the module
    • Desktop [Spacing]
    • Tablet [Spacing]
    • Mobile [Spacing]

How to Use Module Styles

The Module Styles field group provides consistent design controls across all Rubric theme modules, ensuring your educational content maintains visual cohesion throughout your HubSpot site. These styling options are particularly valuable for education institutions that need to present information with clear hierarchy and professional appearance.

Setting Up Your Module Design

When editing any page in HubSpot’s page editor, you’ll find these Module Styles options in the right sidebar after selecting a module. The settings work together to create sophisticated layouts without requiring custom CSS. For education sites, consider using subtle animations like “Fade In Up” for content modules to create engaging user experiences as visitors scroll through course information or event details.

Responsive Design Best Practices

The alignment and spacing controls include separate settings for desktop, tablet, and mobile devices, which is crucial for education sites where users access content from various devices. Start by configuring your desktop layout, then adjust tablet and mobile settings to ensure readability on smaller screens. The max width setting is particularly useful for text-heavy modules common in educational content—limiting width to 800-1000 pixels improves readability.

Visual Hierarchy for Educational Content

Use the background color and border options strategically to create visual separation between different types of content. For example, apply subtle background colors to highlight important announcements or course prerequisites. The box shadow feature works well for creating card-like layouts that showcase programs, faculty profiles, or upcoming events.

These styling options are applied at the module level, meaning you can create varied layouts within a single page while maintaining your site’s overall design consistency through the theme’s global styles.