Skip to content

Content

A flexible text block in one or two columns: optional top icon, subtitle pill, title (with highlight / stroke / image-text treatments), rich description, and a button group. Best for: section intros, about / value-prop blocks, side-by-side text comparisons, lead-in copy with a CTA.

📷 Hero image

Target file: assets/img/content/hero.webp

A centered single-column text block: a subtitle pill with a Light background, a bold heading with one word filled in the Gradient 1 color, a short rich-text paragraph, and one Primary button below. Sit it over a plain Light background so the copy is the focus. Captured at desktop width.

At a glance

Text 1-2 columns Rich copy

  • What it does: renders a single content column or two side-by-side columns. Each column can carry a top icon, a subtitle (plain or pill), a title, a rich-text description, and a button group. The title supports heading levels or a custom size plus highlight, stroke, and image-fill treatments.
  • Best used for: a section intro, an about / value-prop block, two columns of comparison copy, or a lead-in paragraph with a call-to-action button.
  • Not the right fit if: you need text beside an image or video (use Content and Media), or a repeating grid of cards (use Content Card).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. In the HubSpot page editor, click Add and search for Content.
  2. Drag it onto your page where you want the copy to sit.
  3. Open Click to update content and choose How many column do you want? (1 or 2).
  4. Fill in the Subtitle, Title, and Description for each column.
  5. Turn on Add button if you need a CTA, then set its type, style, and link.
  6. Switch to the Style tab to align text, size the title, and turn the subtitle into a pill.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

A simple lead-in: pill subtitle, title, description, one button.

📷 Result

Target file: recipe-single-column-intro.webp

A single centered column with a subtitle pill, a title, a paragraph, and one Primary button stacked below. Capture the whole block at desktop width.

Field Set to
Content › How many column do you want? 1 column
Style › One column › Content alignment text-center
Style › Subtitle › Subtitle background any token (turns it into a pill)
Content › One column › Add button on

Balanced side-by-side text blocks.

📷 Result

Target file: recipe-two-equal-columns.webp

Two equal-width text columns side by side, each with its own subtitle, title, and paragraph, tops aligned. Capture at desktop width so the even split is clear.

Field Set to
Content › How many column do you want? 2 column
Layout › Width › Content x Content 1fr 1fr
Layout › Vertical alignment › Alignment start

A wide lead column beside a narrower support column.

📷 Result

Target file: recipe-asymmetric-split.webp

A wide lead text column beside a clearly narrower support column. Capture at desktop width so the uneven ratio reads clearly.

Field Set to
Layout › Width › Content x Content 7fr 3fr (or 3fr 2fr)
Layout › Width › Responsive breakpoint for stacking tablet_max

Draw the eye to one word in the heading.

📷 Result

Target file: recipe-highlighted-title.webp

The heading with one word standing out from the rest - underlined or filled with the Gradient 1 color. Frame tight on the title so the highlighted word is obvious.

Field Set to
Content › Title wrap a word in <span>...</span>
Style › Title › Highlight style line_under_word or custom_gradient
Style › Title › Color custom_gradient for gradient-filled letters

"I want to..." quick reference

Goal Setting
Two columns of text Content › How many column do you want? = 2 column
Make columns unequal width Layout › Width › Content x Content (e.g. 3fr 2fr)
Stack columns later (on tablet) Layout › Width › Responsive breakpoint for stacking = tablet_max
Add an icon above the subtitle Content › column › Icon above subtitle (pick a source)
Turn the subtitle into a pill Style › Subtitle › Subtitle background (any value but None)
Highlight a word in the title Wrap it in <span> then Title › Highlight style
Outlined title text Title › Text style = stroke
Fill title letters with an image Title › Text style = image_text (+ Image / Image position)
Gradient-filled title Title › Color = custom gradient
Add a button / CTA Content › column › Add button (+ Type: link / cta / drag_to_section)
Full-width buttons on mobile Style › column › Button › Show button in a full width in mobile
Center all text + buttons Style › column › Content alignment = text-center
Set a scroll-to anchor Content › Drag to section name › Section name

Field reference

The editor has a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (341 fields total - expand each group as needed.)

Content tab

Click to update content
Field Type Default
How many column do you want? choice (1_column / 2_column) 1_column
Icon above subtitle (per column) choice (no_icon / hubspot / upload / svg) no_icon
Subtitle (per column) text New
Title (per column) text Build something great with confidence
Description (per column) richtext short default paragraph
Add button (per column) boolean off

Each column (One / Left / Right) shares the same fields. Button (per column): Type (link / cta / drag_to_section), Style (btn-1 to btn-8, default btn-1), Link / CTA / Section name, Title, optional Icon.

Drag to section name

Section name: sets this section's ID so scroll-to-section buttons elsewhere can link to it. Lowercase letters and underscores only.

Style tab

Color scheme
Field Options Default
Color scheme light / dark light

Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.

Section background settings

Color (bg-primary ... bg-color-3), gradient (bg-gradient-1 to 3), image / video overlay + position, blur (toggle + amount), parallax (scale / speed), and dual radial glows (color, position, size, opacity).

Section divider settings

Divider type: none / shape / border / shadow.

  • Border divider: from top / bottom / both, width, color (default --tertiary).
  • Shadow divider: regular / light / dark / custom with x / y / blur / spread / color.
  • Shape divider: 25 shapes, top / bottom / both, flip / invert, color or gradient, responsive heights.
Section spacing settings
Field Options Default
Top top-y-0 to top-4xl top-l
Bottom bottom-y-0 to bottom-4xl bottom-l
Left left-x-0 / left-m / left-l / left-xl left-m
Right right-x-0 / right-m / right-l / right-xl right-m

Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).

Layout settings
  • Width: Content x Content ratio (1fr 1fr / 2fr 3fr / 3fr 2fr / 3fr 7fr / 7fr 3fr) plus stacking breakpoint (tablet_mini / tablet_max).
  • Vertical alignment: center / start / end between the two columns.
  • Gap between column: independent values for large / medium / small screens.
  • Section wrapper container and Inner content container: width control (default / full-width / custom per breakpoint) plus alignment.
Preset Settings - Title (key fields)
Field Type Default
Show title as choice (custom / h1-h6) h2
Font size [desktop / tablet / mobile] number 72 / 52 / 36
Text transform choice as_it_is
Color choice (tokens / custom / gradient) default
Spacing under element sb-0 to sb-4xl sb-l
Highlight style none / underline / custom color / gradient / different font none
Text style none / stroke / image_text none

Other per-column element groups: Top icon (size, color, background, border, round corner), Subtitle (pill background, padding, round corner, border, font size, bold), Content alignment (text-left / text-center / text-right), Description (typo style, color, spacing), Button (full-width on mobile).

Common button settings
  • Gap between icon and text: gap-0 to gap-4xl (default gap-m).
  • Gap between buttons: gap-0 to gap-4xl (default gap-m).
Developer use only

Add custom css here: per-module CSS injection field.

Tips & gotchas

Subtitle background makes the pill

The subtitle is plain text until you give it a Subtitle background. Any value other than None turns it into a padded pill with a round corner.

Highlight and text style don't stack

Stroke and Image text treatments only apply when no word is highlighted. Pick one approach per title: a highlighted <span> word, or a stroke / image-fill style.

Custom font size unlocks weight

The Font weight override only takes effect when Show title as is set to custom_font_size. Heading levels (h1-h6) use the theme's built-in weights.

  • Content and Media: the same content column, placed beside an image or video.
  • Content Card: when the copy should repeat as a grid or slider of cards.
  • Section Title: a lighter header block for intros above other sections.
  • Call to Action: a focused conversion block built around one message and button.