Rubric Documentation

Box Styles

Group of style fields providing options to add a background, border, box shadow, and/or padding to an element.

  • Background [Group]

    • Color [Color]
    • Color (Hover) [Color] (Not available in all instances of this group)
    • Color (Focus) [Color] (Not available in all instances of this group)

  • Border [Group]

    • Border _[Border]
      _Select style, width, and color of border
    • Color (Hover) [Color] (Not available in all instances of this group)
    • Color (Focus) [Color] (Not available in all instances of this group)
    • Radius [Number]

  • Box Shadow [Group] (Not available in all instances of this group)

    • Animate [Choice] (Not available in all instances of this group)
      Choices: None, Animate In, Animate Out
    • Color [Color]
    • Offset X [Number]
    • Offset Y [Number]
    • Blur [Number]
    • Spread [Number]

  • Padding [Spacing]

Usage Guide

The Box Styles field group is a core styling component in the Rubric theme that appears across most modules, giving you consistent control over the visual presentation of content blocks throughout your HubSpot site. When editing pages in the HubSpot page editor, you’ll find these options in the module inspector panel on the right side of your screen.

This styling group is particularly powerful for educational institutions and resource-heavy sites because it allows you to create visual hierarchy and organization without requiring custom CSS. For example, you can use background colors to highlight important announcements, add subtle box shadows to create depth for feature callouts, or apply consistent padding to ensure text doesn’t sit directly against module edges.

Interactive states make this field group especially valuable for user experience. The hover and focus color options for backgrounds and borders allow you to create engaging button-like effects or subtle feedback when visitors interact with your content. This is particularly useful for card-based layouts common in educational resource sections or event listings.

The animation options for box shadows can help draw attention to key content areas or create polished micro-interactions that enhance your site’s professional appearance. Consider using “Animate In” for important calls-to-action or “Animate Out” for secondary content that should recede when users hover away.

When working with the Rubric theme’s structured approach, remember that these box styles are designed to complement your content strategy rather than overshadow it. Start with subtle styling choices and build up visual emphasis only where needed. The theme’s content-first philosophy means these decorative elements should enhance readability and user navigation rather than compete with your educational or event content for attention.