Use Case Tabs

Showcase different use cases in a clean, engaging way with the “Use Case Tabs” module for HubSpot. Highlight benefits across multiple tabs — each with customizable titles, icons, heading and description . Built for responsiveness and brand flexibility, this module lets you manage tab layouts (horizontal or vertical), colors, and spacing without any code. Ideal for presenting solutions by industry, department, or product use case — all in one interactive section.

Key Features of a Use Case Tabs Module :

✅ Custom Tab Titles – Easily add and label multiple tabs.

✅ Flexible Content Types – Supports images, CTAs, and even embedded forms or videos inside each tab for maximum versatility.

✅ Icon/Image Support – Add icons or images to visually represent each tab and improve at-a-glance understanding.

✅ Fully Responsive Design – Optimized for all devices (desktop, tablet, mobile).

✅ Extensive Style Customization – Tab background (solid or gradient), Border styles, Padding/margins, Active/inactive states

✅ Easy to Use with Drag & Drop – Built for HubSpot’s drag-and-drop page editor. No coding required to configure or style tabs

✅ Reusable and Scalable – Add multiple tab sections to a page or reuse across templates.

How to Set Up the Use Case Tabs in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Use Case Tabs" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options : 

• Layout 1 : The layout features a  included Heading, description, Tabs with Image format.
• Layout 2 & 3 : The layout features a  included Heading, description, Tabs with two column content.

• All Layouts are ideal for building a clean and organized knowledge base. Both layouts allow you to customize headings and descriptions for each tab, helping you clearly label articles, topics, or help sections.
• You can also enable a show/hide feature, giving users the option to expand or collapse content as needed—keeping the interface neat and user-friendly.
  
  

All Tabbing & Content Customizable : 

Create an organized, interactive experience with customizable tabs that allow users to add and manage rich content with ease. Each tab includes:

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Tabbing & Content Column Setting :

You have full control over customizing the tabbing & content box to align with your design preferences. Adjust the background, spacing, border, corners and to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Tabbing & Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, tabbing, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Tabbing 
  Customize the Tabbing background, corner, border, active effect, hover and typography.
• Image
  Customize the image size and corner to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA background color, text color, spacing, border, corner and typography.
  

We hope you enjoy using our use case tabs module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.