How to Use

Installation: Navigate to Marketing > File & Templates > Design Tools > @marketplace > Shunyavkash folder to find the  Flexible Tab . Install it.

Integration: In the Marketing section, choose Website Menu > Website Pages and add the "Flexible Tab" module to the page you want.

Content Customization

You can dynamically manage the content of each tab using HubSpot’s module editor:

1. Tab Label

   • Sets the visible label in the top navigation.
   • Recommended: Keep labels concise (1–3 words).

2. Heading

   • This appears prominently inside the content area.
   • Use it to summarize the tab’s focus.

3. Rich Text Content

   • Supports paragraphs, lists, and basic formatting.
   • Ideal for descriptions, bullet points, or short explanations.

4. Image

   • Add an image relevant to the content.
   • Supports automatic layout handling

5. Button

   • Configure CTA label, link, and behavior.
   • Supports URL, Email, Phone, and open-in-new-tab functionality.

Style Customization

The module offers full control over visual presentation through these settings:

1.  Background & Container
   

   • Set the background color of the section.
   • Define maximum content width and padding (top/bottom/left/right).

2. Tab Appearance
   

   • Tab label padding Customize
   • Define maximum content width and padding (top/bottom/left/right) Customize.
   • Active tab bottom border color Customize

3. Typography
   

   • Configure font styles separately for Headings & Content text

4. Spacing Controls
   

   • Fine-tune vertical spacing Heading bottom margin & Content bottom margin

5. Button Styling
   

   • Background color Adjust
   • Border radius Adjust
   • Padding Adjust
   • Typography Adjust (label font, weight, size)
   • Hover effects (color, border) Adjust