Polished tabbed content with horizontal, vertical, and pill-style tabs. Embed HubSpot forms in any tab. Auto-converts to accordion on mobile. Deep-linking, WCAG-accessible keyboard navigation, zero jQuery, 50+ style controls.
Dark luxury aesthetic with left-aligned underline tabs, gold #d4a853 accent, and editorial content. Cormorant Garamond + DM Sans. No content area background or border — content flows cleanly beneath the tab bar. Includes images, video embed, table, and blockquote.
Modern light theme with centered pill tabs, indigo accent, and a bordered content card. Inter font throughout. Features overview, step-by-step guide, and pricing comparison table with CTA button.
Warm professional aesthetic with sidebar vertical tabs, navy headings, deep burgundy left-border indicator, and ivory background. Libre Baskerville + Source Sans 3. Five practice areas with detailed descriptions, images, and blockquotes. A completely different color accent from Demo 1's gold.
Clean, refined product layout with full-width stretched tabs, deep violet accent, and a soft violet content card. Outfit + Inter fonts. Product overview with image, feature bullet list, integration grid, and 3-column pricing comparison table with CTA.
Minimal editorial aesthetic with centered tabs, warm red accent underline, and clean white background. Space Grotesk + DM Sans. Case study narrative with stats grid, video embed, and a premium styled mock contact form in the final tab.
Choose from three tab styles, each with its own character:
Each tab supports full rich text content including:
code and multi-line pre blocksEmbed HubSpot forms inside any tab using the rich text editor or the form field. Forms inherit the module's configurable form styles, so they match your design without custom CSS.
All form elements are fully configurable from the module's style panel:
This makes it easy to embed contact forms, lead gen forms, scheduling forms, or application forms in any tab — and have them match your brand perfectly without writing a single line of CSS.
When enabled, the tab bar and panels are replaced with an accordion layout below the mobile breakpoint. Each tab becomes a collapsible section with smooth height animation. Only one section is open at a time.
When enabled, switching tabs updates the URL with a ?tab=slug parameter. Share links that open directly to a specific tab. The slug is auto-generated from the tab label.
Example: yoursite.com/page?tab=pricing opens the “Pricing” tab directly.
role="tablist", role="tab", role="tabpanel" with proper linking via aria-controls / aria-labelledby.tabindex ensures only the active tab is in the tab order. focus-visible styles for keyboard users.aria-expanded and native <button> elements.#0b0b0b background. Gold #d4a853 accent with 2px underline indicator. Interior design studio theme with 4 tabs: philosophy, residential, commercial (with video embed), and process. Left-aligned tabs, no content area styling.#4f46e5 accent with pill tabs (50px radius), active bg #eef2ff. Content card with #f9fafb bg and #e5e7eb border. SaaS product theme: features, how it works, and pricing table with CTA button.#faf8f5. Navy #1e3a5f headings, deep burgundy #8b2252 left indicator. 5 practice area tabs with images, detailed bullet lists, and blockquotes. No content area background. Completely different accent from Demo 1's gold.#7c3aed accent with stretch-aligned tabs. Content card: #faf5ff bg, #e9d5ff border, 8px radius, no shadow. Product feature showcase with overview image, feature bullet list, integration grid, and 3-column pricing table with CTA.#dc2626 accent with 2px underline, centered tabs. Creative agency case study with 4 narrative tabs, video embed, 3-column stats grid, results CTA, and a 5th “Get in Touch” tab featuring a two-column layout with styled mock contact form.