Slider Styles

• Arrows [Group]
  • Remove Displayed Arrows [Boolean]
    Arrows become disabled when there is no previous/next slide to navigate to.
  • Position _[Choice] [Required]
    _Choices: Outside, Inside
  • Size [Number]
  • Size (Mobile) [Number]
  • Color [Color]
  • Color (Hover) [Color]
  • Box Styles [Common Module Fields]
• Pagination [Group]
  • Space between dots [Number]
  • Dot Size [Group]
    • Height [Number]
    • Width [Number]
  • Dot Size (Active) [Group]
    • Height [Number]
    • Width [Number]
  • Background [Group]
    • Color [Color]
    • Color (Active) [Color]
  • Border [Group]
    • Border _[Border]
      _Set style, width, and color
    • Color (Active) [Color]
    • Radius [Number]
• Slides [Group]
  • Dark Mode _[Boolean]
    _Check to use dark mode colors set in the Theme Settings.
  • Box Styles [Common Module Fields]

---

Overview

The Slider Styles module group provides comprehensive styling controls for all slider components within the Rubric theme, ensuring your educational content and resource galleries maintain consistent visual presentation across your HubSpot site. These shared style fields are automatically available in modules like image carousels, testimonial sliders, and content showcases, streamlining your design workflow in the page editor.

When customizing sliders through the HubSpot drag-and-drop editor, you’ll find these styling options organized into three main categories. The Arrows section gives you complete control over navigation elements, including the strategic choice between inside and outside positioning—particularly important for education sites where clear navigation enhances user experience during course previews or campus photo tours.

The Pagination controls allow you to create distinctive dot indicators that align with your institution’s brand guidelines. You can adjust spacing and sizing to accommodate different content densities, which proves especially valuable when showcasing event highlights or faculty spotlights where users need clear progress indicators.

The Slides section includes a powerful Dark Mode toggle that automatically applies the dark color scheme you’ve configured in your theme settings. This feature ensures your sliders maintain visual consistency with your site’s overall design, whether you’re displaying research publications in a light academic layout or evening event photos that benefit from darker backgrounds.

Pro tip: When setting up sliders for mobile-responsive education sites, use the separate mobile size controls for arrows to ensure touch targets meet accessibility standards. The combination of Box Styles integration and responsive sizing options makes it easy to create sliders that perform well across all devices, from desktop research stations to student mobile devices.