Rubric Documentation

Image Styles

Fields for styling an image.

  • Animation _[Choice]
    _Choices: None, Fade In, Fade In Up, Fade In Right, Fade In Down, Fade In Left
  • Box Styles [Common Module Fields]

How to Configure Image Styles

The Image Styles field group gives you granular control over how images appear across your Rubric theme modules. These styling options are particularly valuable for education institutions and resource-heavy sites where visual consistency and professional presentation are essential.

When working in the HubSpot page editor, you’ll find these Image Styles fields in modules like featured content blocks, testimonials, team member profiles, and course listings. The Animation dropdown lets you add subtle motion effects that trigger when visitors scroll to your images, creating a more engaging user experience without overwhelming your content-first approach.

For educational sites, the “Fade In Up” animation works exceptionally well for course thumbnails and faculty photos, while “Fade In Right” creates an elegant reveal effect for hero images on landing pages. Event websites benefit from the “Fade In” option for speaker headshots and venue photos, as it draws attention without being distracting.

The Box Styles integration allows you to combine image animations with borders, shadows, and spacing configurations. This is particularly useful when displaying galleries of student work, event photos, or institutional imagery where you want visual cohesion across your site.

Pro tip: When using animations on resource-heavy pages, consider limiting animated images to key focal points rather than applying effects to every image. This maintains performance while highlighting your most important visual content.

These styling options automatically inherit your theme’s responsive behavior, so images will maintain their professional appearance across desktop, tablet, and mobile devices. You can preview different animation combinations directly in the page editor before publishing, ensuring your images align with your institution’s brand standards and accessibility requirements.