--- title: Flexible Tabs Module Documentation --- [![681b0d97a2aa6735a63327b8\_brand-white-logo](https://hsmarketplace.shunyavkash.com/hubfs/Imported%20images/681b0d97a2aa6735a63327b8_brand-white-logo.svg "681b0d97a2aa6735a63327b8_brand-white-logo")](https://hsmarketplace.shunyavkash.com/home-1?hsLang=en) - [Examples](https://hsmarketplace.shunyavkash.com/modules/flexible-tabs?hsLang=en) - [How to use](https://hsmarketplace.shunyavkash.com/modules/flexible-tabs/how-to-use) [Install Now](https://ecosystem.hubspot.com/marketplace/modules/flexible-tab-module-module-by-shunyavkash) # Flexible Tab Module Documentation - [How to Use](https://hsmarketplace.shunyavkash.com/modules/flexible-tabs/how-to-use#how_to_use) - [Content Customization](https://hsmarketplace.shunyavkash.com/modules/flexible-tabs/how-to-use#content_customization) - [Style Customization](https://hsmarketplace.shunyavkash.com/modules/flexible-tabs/how-to-use#style_customization) ##### Supported Browsers Overview | ![safari-icon](https://hsmarketplace.shunyavkash.com/hubfs/safari-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 15.5 and above | ![chrome-img](https://hsmarketplace.shunyavkash.com/hubfs/chrome-img.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 87 and above | ![edge-icon](https://hsmarketplace.shunyavkash.com/hubfs/edge-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 79 and above | ![firefox-icon](https://hsmarketplace.shunyavkash.com/hubfs/firefox-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 100 and above | ![brew](https://hsmarketplace.shunyavkash.com/hubfs/brew.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 1.48 and above | ![opera\_6124994](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/opera_6124994.png?width=512&height=512&name=opera_6124994.png) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 73 and above | | --- | --- | --- | --- | --- | --- | ### How to Use **Installation**: Navigate to Marketing \> File & Templates \> Design Tools \> @marketplace \> Shunyavkash folder to find the  Flexible Tab . Install it. ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-09-2025-12-10-09-7953-PM.png?width=431&height=374&name=image-png-Jul-09-2025-12-10-09-7953-PM.png) **Integration**: In the Marketing section, choose Website Menu \> Website Pages and add the "Flexible Tab" module to the page you want. ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-09-2025-12-14-16-4792-PM.png?width=254&height=98&name=image-png-Jul-09-2025-12-14-16-4792-PM.png) ### 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 & Video Options - Choose whether to display an image or a video. If you select Image, upload the desired image. If you select Video, you can use either a HubSpot Video or a custom iframe embed. 5. ##### Button - Configure CTA label, link, and behavior. - Supports URL, Email, Phone, and open-in-new-tab functionality. ![Group 108](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Group%20108.png?width=287&height=1254&name=Group%20108.png) ### 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 ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-09-2025-01-06-52-8769-PM.png?width=365&height=422&name=image-png-Jul-09-2025-01-06-52-8769-PM.png) ### We’re Not Here to Sell, We’re Here to Solve Talk with strategic minds and developers, not just salespeople. Whether it’s your website, product, platform, or automation flow, let’s sketch the blueprint together. No fluff. Just meaningful collaboration. We reply same day. [Explore Together](https://www.shunyavkash.com/) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/brand-white-logo.svg) ![copyrights-logo](https://cdn.prod.website-files.com/67a2f77206cba07f5946da3d/6811cc6a38d66ca841fca6d9_copyrights-logo.svg) 2026 Shunyavkash — All rights reserved | [Privacy Policy](https://www.shunyavkash.com/privacy-policy) | [Cookie Policy](https://www.shunyavkash.com/cookie-policy) | Designed by [Shunyavkash](https://www.shunyavkash.com/) - - -