Tabbed content is one of those things every website needs and HubSpot does not have a good solution for. The default options are a basic accordion module with no tab layout, or a rich text module where you build fake tabs with anchor links and hope the formatting holds together. Neither gives you horizontal tabs, vertical sidebar navigation, pill-style buttons, or mobile accordion conversion.
Content Tabs Pro is a HubSpot CMS module that gives you three tab styles, rich content areas with images and videos and embedded HubSpot forms, mobile accordion with smooth animation, URL deep linking, and 60+ style controls. No code. No jQuery. Works on any template.
Three tab styles for different page layouts
The module ships with three distinct tab styles, each built for a different use case.
Horizontal tabs with animated underline. The most common pattern. Tab labels sit in a row above the content area. An animated indicator bar slides under the active tab as visitors click between sections. You control the alignment (left, center, or stretch to fill the width), the indicator height and color, the gap between tabs, and the typography for both active and inactive states. This is what you use for product features, service descriptions, and most general purpose tabbed content.
Vertical sidebar tabs. Tab labels stack in a column on the left with the content area on the right. This layout works for documentation pages, knowledge bases, and any content where you have more than 6 or 7 tabs. A horizontal row becomes unusable past that count because the labels wrap or overflow. Vertical tabs solve this by giving each label its own line with room for longer text. On tablet screens, vertical tabs collapse to horizontal. On mobile, they convert to accordion.
Pill tabs with rounded capsule buttons. Each tab label renders as a rounded button with a configurable border radius. The active tab gets a filled background color. The inactive tabs show text only or a subtle border. Pills work well for filter-style interfaces where visitors are choosing between categories or content types rather than navigating sequential sections.
All three styles share the same content system, the same settings, and the same style controls. You pick the layout that fits your page and configure everything else from the editor.
Rich content inside every tab
Each tab holds a full rich text content area. This is not a plain text field or a single paragraph. It is a complete content editor that supports headings (h2 through h6), paragraphs, bold, italic, links, ordered and unordered lists, blockquotes, code blocks, preformatted text, tables, horizontal rules, and images. The module scopes all of this content with its own CSS so the typography matches your style settings regardless of what your theme does.
You can build multi-column layouts inside a tab using HTML tables or inline styles. Product comparison grids, pricing breakdowns, feature matrices. The content area handles it because it renders full HTML, not a sanitized subset.
Videos work inside tabs. Embed a YouTube or Vimeo iframe, or use an HTML5 video tag with your own hosted file. The video respects the tab width and scales responsively.
Each tab also has an optional HubSpot form field. Paste a form ID and the form renders below the rich text content inside that tab. This is useful for contact sections where each tab represents a different inquiry type (sales, support, partnerships) and each has its own form with different fields. The form styling is controlled from the module Style tab with 19 dedicated fields covering input backgrounds, borders, focus states, radius, padding, font size, and submit button styling.
Mobile accordion that works automatically
Tabs are a desktop pattern. On a 375px screen, a row of six tab labels is unreadable and untappable. Most tab implementations either squeeze the labels until they overflow or force horizontal scrolling, both of which are poor mobile experiences.
Content Tabs Pro converts to an accordion on mobile. Each tab label becomes a collapsible header with a chevron indicator. Tap to expand, tap again to collapse. The transition uses smooth height animation so the content does not snap open. The accordion respects the active tab state from the URL, so deep linked tabs open correctly on mobile too.
The mobile breakpoint is configurable. The default is 768px, but you can set it to any value that matches your layout. Vertical tabs get an intermediate state: they collapse to horizontal on tablet, then to accordion on mobile. Two configurable breakpoints control exactly when each transition happens.
Deep linking that survives page reloads
Every tab section gets a configurable URL parameter ID. When a visitor clicks a tab, the URL updates with the active tab index. If they copy that URL and share it, the recipient lands on the page with the same tab already open. If they refresh the page, the active tab persists.
This matters more than it sounds. Support teams link directly to specific tabs in help articles. Sales reps share product pages with the relevant feature tab pre-selected. Marketing teams track which tabs get the most views by watching URL parameters in analytics.
The parameter ID is per-instance, so multiple tab sections on the same page each get their own namespace. Tab section A uses parameter "features" while tab section B uses parameter "specs". No collisions. No confusion.
HubSpot forms with 19 style controls
Embedding a HubSpot form inside a tab is a one-field configuration. Paste the form ID and it renders. But the real value is in the styling.
HubSpot forms inherit whatever CSS your page or theme provides. Inside a tab module, that inheritance often breaks because the form sits inside a scoped container. Content Tabs Pro solves this by giving you 19 dedicated form style controls: input background color, input border color, input focus border color, input border radius, input padding, input font size, submit button background, submit button text color, submit button hover background, submit button border radius, submit button padding, submit button font weight, submit button font size, and a full-width toggle. Every form inside every tab on every page looks consistent because you control the styling at the module level, not the theme level.
What you can build with Content Tabs Pro
Service detail pages. One tab per service with a description, key benefits, deliverables, and a CTA. Horizontal tabs for 3 to 5 services. Visitors compare your offerings without scrolling through a 3,000 word page.
Product feature sections. Each tab covers a feature area with screenshots, bullet points, and a video walkthrough. Pill tabs for a clean, modern look. The active pill fills with your brand color. Deep link to the most relevant feature when sending the page to prospects.
Documentation and knowledge bases. Vertical sidebar tabs with 10 to 15 categories. Each tab holds a full article with headings, code blocks, and tables. The sidebar stays visible as visitors browse between topics. On mobile, it collapses to a searchable accordion.
Contact sections with routed forms. Three tabs: Sales, Support, Partnerships. Each tab has a different HubSpot form with different fields. Sales gets company size and budget. Support gets ticket type and priority. Partnerships gets agency name and portfolio link. One section, three forms, zero page redirects.
Case study showcases. Each tab is a different case study with a client logo, stats grid, project description, and a results video. Pill tabs with client names as labels. Visitors browse case studies without navigating to separate pages.
Property or listing details. Tabs for Photos, Floor Plan, Neighborhood, Schools, Pricing. The photos tab holds an image gallery. The floor plan tab holds a zoomable image. The neighborhood tab holds an embedded map and description. Everything stays on one page.
60+ style controls for any brand
The Style tab organizes controls into clear groups. Tab container styling covers background, border, radius, shadow, and padding. Tab label styling covers font family, size, weight, color, active color, hover color, indicator color, indicator height, gap, padding, and alignment. Content area styling covers background, padding, text color, link color, heading colors, and code block styling. Form styling covers the 19 fields described above. Responsive settings cover tablet and mobile breakpoints.
The module inherits your theme fonts by default. If you want a different font for the tab labels, enable the custom font toggle and pick from Google Fonts. Content typography follows the module settings, not your theme, so the tabs look consistent regardless of what template you drop them on.
Three content animation modes: fade (opacity transition), slide up (translate + opacity), or instant (no animation). The animation duration is not configurable because it is set to 200ms, which is fast enough to feel responsive and slow enough to be perceptible. Anything longer feels sluggish. Anything shorter is invisible.
Get Content Tabs Pro
Content Tabs Pro is available on the HubSpot Marketplace for $14.99. One purchase, no monthly fees, no jQuery, no external dependencies. Works on any HubSpot CMS template including website pages, landing pages, and blog posts.
If your HubSpot site needs tabbed content and you do not want to build it from scratch or settle for a basic accordion, this is the module. Full details on the Content Tabs Pro blog post.