Docs / Content Layouts / Image & Text

Image & Text

A flexible two-column section that pairs a single image with a rich text block. Use it for product callouts, founder bios, mission statements, or any moment a page needs a clear visual paired with a focused message.

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. Heading toggle, alignment, image side, and column ratio.

Show Section Heading

Toggle Default: On

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

Heading Alignment (Desktop)

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

Text alignment for the heading area on desktop (993px and above).

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

Heading Alignment (Tablet/Mobile)

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

Text alignment for the heading area on tablet and mobile (below 992px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.

Image Position

Select Default: Right

Which side of the two-column grid the image appears on. The text column takes the other side. Alternate this between sections on the same page for a zig-zag reading rhythm.

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

Column Ratio

Select Default: 6 | 6 (Equal)

Sets the grid ratio between the two columns on a 12-column grid. Pick a wider image (8 | 4) for visual-led sections, wider text (4 | 8) for long-form copy, or equal (6 | 6) for a balanced layout.

  • 6-6 Equal split (default)
  • 4-8 Narrow image, wide text
  • 8-4 Wide image, narrow text
  • 5-7 Slightly narrow image
  • 7-5 Slightly wide image

/// Content

Everything visitors actually read or look at: the section heading, the rich-text column, the image, alignment + link options, and the scroll-in animation.

Section Heading

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

The badge + title + description block above the two-column layout. The 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.

Text Content

Rich text

The rich text body of the text column. Supports headings, paragraphs, bullet/numbered lists, links, and CTA buttons. Use the theme's CTA classes (cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-six) on inline links to render them as styled buttons.

Text Alignment (Desktop)

Select Default: Left

Alignment for the text column on desktop. Independent from the heading alignment.

Text Alignment (Mobile)

Select Default: Center

Alignment for the text column on mobile. Defaults to center because centered short paragraphs read better in a single-column stack.

Image

Image Default: card-4.png placeholder

The image for the image column. Responsive sizing is on by default; the HubSpot file manager handles SRC + alt text. Upload a 1200×800 (or larger) image so the column has room to scale without softness.

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.

Vertical Align Content to Center

Checkbox Default: On

Vertically centers both columns to each other. Turn off if you want the columns to top-align (useful when the text column is much taller than the image and you want the image to sit at the top).

Make Image Size Fluid

Checkbox Default: On

When on, the image stretches to 100% of its column width (height auto). Turn off if you want the image to render at its native size and align inside the column.

Show Text First on Mobile & Tablet

Checkbox Default: Off

Reverses the stack order on mobile/tablet so the text column appears above the image. Default stacking on small screens is image-first because images are usually the visual hook.

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: image styling, image scale + position, badge, section dividers, and the row's background/width/spacing.

/// Image Style

Border Radius

Slider (0-50px) Default: 12px

Rounded corners on the image. 12px matches the theme's default tile rounding; 0 for hard corners, 24+ for very soft, pill-like edges.

Image Shadow

Toggle Default: Off

Adds a soft drop shadow under the image. Render is box-shadow: 0 8px 30px shadow_color.

Shadow Color

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

The color + opacity of the drop shadow. Stay under 15% opacity for tasteful shadow; above that the section starts to feel heavy.

/// Image Scale & Position

Optional transforms that scale and shift the image away from its grid cell. Useful for creating overlap or bleed effects.

Activate Scale & Position

Toggle Default: Off

Master switch for the scale + shift controls below. The desktop/tablet/mobile groups only render when this is on.

Desktop / Tablet / Mobile Settings

Group (per breakpoint) Shown when: Activate Scale & Position is on

Each breakpoint group exposes the same four controls so editors can fine-tune the transform per screen size:

  • scale Image Scale (0.5-5, default 1). Use sparingly - 0.1 increments are usually enough.
  • shift_left_right Horizontal shift in px (0-1000).
  • shift_left Checkbox to flip the horizontal shift direction (default shifts right).
  • shift_up_down Vertical shift in px (0-1000).
  • shift_up Checkbox to flip the vertical shift direction (default shifts down).

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color/border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

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

Picks the badge tier. Colors are configured in Theme Settings > Badge.

  • badge-primary White pill, dark text, light border
  • badge-secondary Transparent, black border, black text
  • badge-three Black fill, white text
  • badge-four Semi-transparent white with white border (works on dark hero)
  • badge-five Indigo-to-purple gradient, white text
  • badge-six Emerald-to-teal gradient, white text

/// 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