Rubric Documentation

Social Link Styles

Fields to style social icon links.

  • Enclose Icons? [Boolean]
    Add a background, border, and/or padding to the icons.
  • Size [Number]
  • Color [Color]
    Only effects non-custom, SVG icons.
  • Color (Hover) [Color]
    Only effects non-custom, SVG icons.
  • Box Styles [Common Module Fields]
    If Enclose Icons? is checked.

Usage Guide

The Social Link Styles field group appears in modules throughout the Rubric theme wherever social media icons are displayed, providing consistent styling controls across your entire site. You’ll commonly encounter these settings in footer modules, author bio sections, team member profiles, and dedicated social media modules.

When working in HubSpot’s page editor, these styling options give you flexibility to match social icons to your institution’s brand guidelines. The Enclose Icons toggle is particularly useful for creating professional, uniform appearances—when enabled, it reveals the full Box Styles field group, allowing you to add backgrounds, borders, and padding that transform simple icons into styled buttons.

The size control uses pixel values, making it easy to maintain consistency across different modules. For educational institutions using the Rubric theme, consider using larger sizes (32-48px) in main navigation areas and smaller sizes (24-32px) in footer or sidebar locations.

Color customization only applies to the theme’s built-in SVG social icons, not custom uploaded images. This means platforms like Facebook, Twitter, LinkedIn, and Instagram that use the theme’s default icon set will inherit your chosen colors, while any custom social platform icons you upload will retain their original colors.

The hover color feature enhances user experience by providing visual feedback when visitors interact with your social links. Choose hover colors that complement your primary brand colors while ensuring sufficient contrast for accessibility.

When setting up social links across multiple page types in your HubSpot CMS, use the same styling configuration to maintain brand consistency. The Rubric theme’s structured approach means these settings will render identically whether you’re editing a blog post, landing page, or website page, streamlining your content management workflow.