Rubric Documentation

Search Styles

Fields to render styling on a search input.

  • Type _[Choice]
    _Choices: Bar, Toggle, Box
  • Submit Icon [Group]
  • Placeholder Text [Group]
  • Input Text [Group]
  • Box Styles [Common Module Fields]

How to Use Search Styles

The Search Styles field group gives you complete control over the appearance and behavior of search inputs throughout your Rubric theme. These styling options ensure your search functionality integrates seamlessly with your site’s design while maintaining optimal usability for visitors.

When customizing search elements, start by selecting the appropriate Type for your layout needs. The Bar option works best in headers or narrow spaces, while Toggle is ideal when you want to save space and reveal search on demand. The Box style creates a more prominent search experience, perfect for dedicated search pages or resource centers common in educational sites.

The Submit Icon configuration allows you to replace the default search button with custom iconography that matches your institution’s branding. You can adjust the icon’s size, color, and hover states to create a cohesive visual experience. Consider using recognizable search symbols or your organization’s custom icons for better brand consistency.

Placeholder and Input Text styling work together to create clear visual hierarchy. Use the Placeholder Text group to set lighter, helper text that guides users, while Input Text controls the appearance of actual typed content. For accessibility and usability, ensure sufficient color contrast between these elements and the background.

The Box Styles integration provides comprehensive control over the search container’s appearance, including borders, shadows, and background colors. This is particularly valuable when embedding search functionality within content sections or creating dedicated search experiences.

When implementing these styles across your HubSpot pages, test the search functionality on different devices to ensure the styling maintains usability across desktop and mobile viewports. The drag-and-drop editor makes it easy to preview these changes in real-time as you adjust the styling parameters.