Media & Text

A streamlined two-column layout that pairs a single media image with a rich text block. Lighter than Image & Text - no per-image transforms, no section dividers - so it shines when you just need a clean image-plus-copy row.

View live preview → Jump to settings ↓

→ Start Here

The four most-used layout controls live here so editors can shape the row in seconds: which side the image sits on, the column ratio, how the text aligns vertically, and the stack order on mobile.

Media Placement

Type: choice (select) Default: left

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

left Left (default; image on the left, text on the right)
right Right (image on the right, text on the left)

Column Ratio

Type: choice (select) Default: 6-6 (Equal)

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

6-6 6 | 6 (Equal) - default
4-8 4 | 8 (narrow media, wide text)
8-4 8 | 4 (wide media, narrow text)
5-7 5 | 7 (slightly narrow media)
7-5 7 | 5 (slightly wide media)

Text Vertical Alignment

Type: choice (select) Default: center

Where the text column sits vertically inside its grid cell relative to the media. Use Top when the text is much shorter than the image and you want them to share a top edge; use Center for the most common balanced look.

top Top-aligned
center Center-aligned (default)
bottom Bottom-aligned

Mobile Order

Type: choice (select) Default: media-first

Stack order when the two columns collapse on mobile. Defaults to media-first because the image is usually the visual hook; flip to text-first when the headline matters more than the image.

media-first Media on Top (default)
text-first Text on Top

/// Content

The fields visitors actually see: scroll animation, the media image, the rich-text block, and per-breakpoint text alignment.

Fade-In Animation

Type: choice (select) Default: none

Entrance animation triggered by an IntersectionObserver when the row scrolls into view. The fade pairs opacity with a short slide from the chosen direction.

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

Reduced motion: visitors with prefers-reduced-motion: reduce see the row fully visible with no animation.

Media Image

Type: image (responsive, resizable) Default: tile-1.png placeholder

The image that fills the media column. Responsive sizing is on by default; lazy-loading is on; HubSpot's file manager handles SRC and alt text. Upload a 1200x800 (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.

Text Content

Type: richtext Default: H3 + paragraph placeholder copy

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

Text Alignment (Desktop)

Type: choice (select) Default: left

Horizontal text alignment for the text column on desktop (993px and above).

left Left (default)
center Center
right Right

Text Alignment (Mobile)

Type: choice (select) Default: left

Horizontal text alignment for the text column on tablet and mobile (below 993px). Set independently from desktop so you can left-align on desktop while centering on phones.

left Left (default)
center Center
right Right

Custom ID & Classes (code)

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

CSS ID

Type: 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. Only use one ID.

CSS Class

Type: text Default: empty

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

Style Settings

The visual controls, all under HubSpot's Style tab: badge styling for the H6, and the row settings (background, content width, per-breakpoint padding).

/// Badge Style

Optional pill-badge styling for the H6 inside the text column. If you do not use an H6, this group has no visible effect.

Show Badge Styling

Type: boolean (toggle) Default: true

Styles every <h6> inside the text column as a pill badge instead of a plain heading. Colors and shape come from the chosen badge tier plus the theme's badge settings.

Badge Style

Type: choice (select) Default: badge-primary Shown when: Show Badge Styling is on

Picks the badge tier. Per-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

/// Row Settings

The row wrapper's background, content width, and per-breakpoint padding.

Background (Image, Video, Color, Etc.)

Type: group Default: none

The Background Type select drives which sub-controls appear inside this group.

none No background (default; the row inherits the page background)
color Solid Color - reveals Select Background Color
gradient Gradient - reveals Gradient Top Color, Gradient Bottom Color, and Gradient Direction (8 directions)
image Background Image - reveals Background Image, Background Size, Background Position, Enable Overlay (and color), Enable Blur (and amount)

Note: the group label says "Image, Video, Color, Etc." but the current build does not include a video option - the Background Type select only exposes none / color / gradient / image.

Select Background Color

Type: color Default: #ffffff @ 100% Shown when: Background Type is color

Solid background color (and opacity) for the row.

Gradient Top Color

Type: color Default: #ffffff @ 0% Shown when: Background Type is gradient

Start color of the gradient. Note the default is transparent white, so you will need to set both stops before the gradient is visible.

Gradient Bottom Color

Type: color Default: #ffffff @ 0% Shown when: Background Type is gradient

End color of the gradient.

Gradient Direction

Type: choice (select) Default: to bottom Shown when: Background Type is gradient

Direction the gradient travels.

to bottom Top to Bottom (default)
to top Bottom to Top
to right Left to Right
to left Right to Left
to bottom right Top-Left to Bottom-Right
to bottom left Top-Right to Bottom-Left
to top right Bottom-Left to Top-Right
to top left Bottom-Right to Top-Left

Background Image

Type: image (responsive, lazy-loaded) Default: empty Shown when: Background Type is image

Image file used as the row background. Stays in the document only when Background Type is image.

Background Size

Type: choice (select) Default: cover Shown when: Background Type is image

cover Cover - fills the area and may crop (default)
contain Contain - fits inside without cropping
initial Original Size

Background Position

Type: choice (select) Default: center center Shown when: Background Type is image

center center Center Center (default)
center top Center Top
center bottom Center Bottom
left center Left Center
right center Right Center

Enable Overlay

Type: boolean (toggle) Default: false Shown when: Background Type is image

Adds a flat color layer between the background image and the row content. Useful for darkening busy photos so text stays readable.

Overlay Color

Type: color Default: #869BAC @ 10% Shown when: Enable Overlay is on

Color (and opacity) of the overlay layer.

Enable Blur

Type: boolean (toggle) Default: false Shown when: Enable Overlay is on

Applies a backdrop blur to whatever sits behind the overlay (the background image). Pairs with the overlay color for a frosted-glass effect.

Blur Amount

Type: number (slider, 0-20px) Default: 5px Shown when: Enable Blur is on

Pixel radius of the backdrop blur.

Size (Content Width)

Type: group

Constrains the row's content width.

Full Width (Edge to Edge)

Type: boolean (toggle) Default: true

When on, the row's content fills the entire section width with no container padding. Turn it off when you want the row to inherit a constrained width.

Content Width

Type: choice (select) Default: standard Shown when: Full Width is off

Standard and Slim widths are set in Theme Settings > Layout.

standard Standard (default)
slim Slim (narrower)
custom Custom - reveals the Custom Width input

Custom Width

Type: number (600-1920px, step 10) Default: 1200px Shown when: Content Width is custom

One-off container width when neither Standard nor Slim fit the design.

Module Padding

Type: group (per breakpoint)

Padding around the text column on each breakpoint. Every value is a slider in pixels.

padding_top_desktop Desktop Top - slider 0-200px, default 0
padding_bottom_desktop Desktop Bottom - slider 0-200px, default 0
desktop_sides Desktop Sides - slider 0-200px, default 80
tablet_top Tablet Top - slider 0-200px, default 50
tablet_bottom Tablet Bottom - slider 0-200px, default 50
tablet_sides Tablet Sides - slider 0-100px, default 25
mobile_top Mobile Top - slider 0-200px, default 25
mobile_bottom Mobile Bottom - slider 0-200px, default 25
mobile_sides Mobile Sides - slider 0-100px, default 25