Docs / Content Layouts / Image & Text Tabs

Image & Text Tabs

A multi-tab interface where each tab swaps in its own image and rich text content panel. Use it for product feature walkthroughs, "how it works" sections, comparison tabs, and persona-based content where one page needs to present several parallel stories without scrolling.

View live preview → Jump to settings ↓

→ Start Here

The most-used controls live here so editors can rebuild the section's basic shape without scrolling. Pick which tab opens by default, toggle the section heading, set heading alignment + width, and choose which side of each tab panel the image lives on.

Default Active Tab

Select Default: 1

Which tab is open when the page loads. 1 is the first tab in the repeater. If you add or reorder tabs, double-check this still points at the tab you want to lead with.

  • 1 First tab (default)
  • 2 Second tab
  • 3 Third tab
  • 4 Fourth tab
  • 5 Fifth tab
  • 6 Sixth tab

Show Section Heading

Toggle Default: On

Controls whether the section heading area (badge h6, title h2, description p) appears above the tabs. Turn it off when the section follows a stronger heading from the row above and you want the tabs to read as a continuation.

Heading Alignment (Desktop)

Select Default: Center Shown when: Show Section Heading is on

Horizontal alignment of the section heading on desktop (993px and above). Mobile is controlled separately.

  • left Left-aligned
  • center Centered (default)
  • right Right-aligned

Heading Alignment (Tablet/Mobile)

Select Default: Center Shown when: Show Section Heading is on

Horizontal alignment of the section heading on tablet and mobile (below 768px). Set independently from desktop so you can center on phones while keeping desktop left-aligned.

  • left Left-aligned
  • center Centered (default)
  • right Right-aligned

Heading Max Width (Desktop, px)

Number (0-1920px) Default: 900px Shown when: Show Section Heading is on

Caps the width of the heading area on desktop so long titles wrap cleanly instead of stretching the full row. Set to 0 for full width. Mobile always uses full width.

Image Position

Select Default: Right

Which side of each tab content panel the image sits on. Applies uniformly across every tab in the module - all tabs share the same image side. The rich text content occupies the opposite column.

  • right Image right, text left (default)
  • left Image left, text right

/// Content

The section heading and the tabs repeater. Each tab is a fully self-contained content panel with its own label, icon, badge, title, description, CTA button, and image.

Section Heading

Rich text Default: blox Theme / Image & Text Tabs / one-line description Shown when: Show Section Heading is on

The badge + title + description block above the tabs. Default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.

Tabs

Repeater (min 2, max 6, default 3)

The repeater that drives the tab triggers and their content panels. Every tab carries its own label, icon, badge, title, description, CTA, and image. The Default Active Tab control in Start Here determines which one opens first.

Tab Label

Text Default: Boost Revenue

The text on the tab trigger button. Keep it short (1-3 words) so the row of triggers stays readable on tablet/desktop without wrapping.

Tab Icon

Icon (FontAwesome 6.4.2) Default: bolt (solid)

FontAwesome icon shown next to the tab label on the trigger. Clear the field for no icon. Pick icons from the same family (all solid, all outline) for visual consistency across tabs.

Content Badge

Text Default: Modern Tactics

Small badge text shown above the content title inside the tab panel (e.g. "Modern Tactics"). Leave blank to hide the badge on a per-tab basis.

Badge Style

Select Default: Primary

Picks the badge tier for this tab's content badge. Each tab can use a different tier. Colors are configured in Theme Settings > Badge.

  • badge-primary Primary (default)
  • badge-secondary Secondary
  • badge-three Three
  • badge-four Four
  • badge-five Five
  • badge-six Six

Content Title

Text Default: Make your site a true standout.

The large heading inside the tab content panel. Rendered as an h3 in the panel so it doesn't compete with the section h2 heading above.

Content Description

Rich text

The rich text body shown in the tab content panel. Supports paragraphs, lists, links, and inline formatting. Keep it tight (1-3 short paragraphs) so the panel doesn't dwarf the image column.

Button Text

Text Default: See Plans

Label for the CTA button at the bottom of the tab panel. Leave blank to hide the button entirely on that tab.

Button URL

Link Default: #0

Destination for the CTA button. Supports external URLs, HubSpot content pages, files, email addresses, and blog posts. The button style itself is set globally in Style Settings > Button Style.

Content Image

Image Default: accordion-1.png placeholder

The image shown in the tab content panel. Recommended 800×600px landscape. Responsive sizing is on by default. Always set descriptive alt text on each tab's image - it changes per panel.

Tip: Use a unique filename when you replace this image; HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.

Fade-In Animation

Select Default: None

Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.

  • none No animation (default)
  • bottom Fade Up (slides up from below)
  • top Fade Down (slides down from above)
  • left Fade from Left
  • right Fade from Right
  • fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #about) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Everything visual: tab trigger colors, badge styling for the section heading, content image styling, the CTA button tier, section dividers, and the row's background/width/spacing.

/// Tab Style

Colors for the tab trigger row (active and inactive states) and the content panel behind each tab.

Tab Text Color

Color Default: #6b7280 (slate-500)

Color of inactive tab labels in the trigger row. Should be muted enough that the active tab stands out at a glance.

Active Tab Text Color

Color Default: #1a1a1a

Color of the currently active tab's label. Make this clearly darker (or a brand accent) so the active state reads.

Active Tab Background

Color Default: #f3f4f6 (gray-100)

Background color of the active tab trigger pill. Pairs with the panel background to make the active tab visually connect to its content panel.

Content Panel Background

Color Default: #fafafa

Background color of the tab content area (the panel that holds the image + rich text for the active tab).

Content Title Color

Color Default: #1a1a1a

Color of the title heading inside each tab content panel.

Content Description Color

Color Default: #6b7280 (slate-500)

Color of the description rich text inside each tab content panel. Inline links inherit the theme's link color, not this.

/// Badge Style

Controls the pill/badge styling on the H6 in the section heading only. Each tab item has its own per-tab Badge Style dropdown under Content > Tabs.

Show Badge Styling

Toggle Default: On

Styles the <h6> in the section heading as a pill badge instead of a plain heading. Does not affect the per-tab content badges.

Heading Badge Style

Select Default: Primary Shown when: Show Badge Styling is on

Picks the badge tier for the section heading H6 only. Tab item badges are configured individually under Content. Colors are configured in Theme Settings > Badge.

  • badge-primary Primary (default)
  • badge-secondary Secondary
  • badge-three Three
  • badge-four Four
  • badge-five Five
  • badge-six Six

/// Image Style

Visual treatment for every tab's content image (border radius + optional drop shadow). Applies uniformly across all tabs.

Border Radius

Slider (0-40px, step 2) Default: 12px

Roundness of the content image corners. 12px matches the theme's default tile rounding; 0 for hard corners, 24+ for very soft edges.

Add Shadow

Toggle Default: Off

Adds a soft drop shadow under the content image. Useful when the image sits flush against a light panel background and needs some lift.

Shadow Color

Color Default: #000000 @ 5% opacity Shown when: Add Shadow is on

Color + opacity of the image shadow. Stay under 15% opacity for a tasteful shadow; above that the panel starts to feel heavy.

/// Button Style

Button Style

Select Default: Primary

Picks which CTA tier the tab content buttons use. Applies to every tab's button. Styles are defined in Theme Settings > CTAs.

  • cta-primary Primary (default)
  • cta-secondary Secondary
  • cta-tertiary Tertiary
  • cta-four Four
  • cta-five Five
  • cta-six Six

/// Section Dividers

Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.

Top Divider / Bottom Divider

Select Default: None

Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.

  • none No divider (default)
  • wave-1 Wave 1 (Gentle)
  • wave-2 Wave 2 (Sharp)
  • wave-3 Wave 3 (Multi)
  • wave-4 Wave 4 (Smooth)
  • wave-5 Wave 5 (Layered)
  • tilt Tilt (Angled)
  • curve Curve (Arc)
  • triangle Triangle

Each divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px), Flip Divider (mirror horizontally), and for the bottom divider: Divider Under Content (puts the divider behind content so buttons stay clickable).

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

  • none No background (default; section inherits the page bg)
  • color Solid Color - reveals Background Color picker
  • gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
  • image Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Group Default: Standard
  • standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
  • slim Slim (narrower variant, also set in Theme Settings)
  • custom Custom - reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

  • desktop 100px top, 100px bottom, 0 left, 0 right
  • tablet 60px top, 60px bottom, 0 left, 0 right
  • mobile 40px top, 40px bottom, 15px left, 15px right