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¶
- In the HubSpot page editor, click Add and search for Content.
- Drag it onto your page where you want the copy to sit.
- Open Click to update content and choose How many column do you want? (1 or 2).
- Fill in the Tag, Title, and Description for each column.
- Turn on Add button if you need a CTA, then set its type, style, and link.
- 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 › Tag › 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 |
| Show the tag | Content › column › Show tag (off by default) |
| Hide the title or description | Content › column › Show title / Show description = off |
| Add an icon above the subtitle | Content › column › Top icon (pick a source) |
| Turn the subtitle into a pill | Style › Tag › 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 [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. (340 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: Primary, Secondary, Tertiary, Light, Dark, White, Black, White transparent, or a custom color or custom gradient (default bg-light). Image / video overlay (none / solid / gradient, plus a custom overlay color or gradient) + 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-xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-xl |
| 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 / 8 presets 384px to 1152px / 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 | Default / 0 / S / M / L / XL / 2XL / 3XL / 4XL | Default |
| 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), Tag (pill background, padding, round corner, border, font size, letter spacing, bold), Content alignment (text-left / text-center / text-right), Description (typo style, color, spacing), Button (full-width on mobile).
Common button settings
Shared across every column's buttons. Any button set to the Simple Link style (btn-7) switches to its own color, underline + offset, bold and icon size/gap controls; the other seven skins share a size, an icon-to-text gap, and their own full-width-on-mobile toggle (separate from the per-column one above).
- Gap between buttons:
gap-0togap-4xl(defaultgap-m).
Developer use only
Add custom css here: per-module CSS injection field.
Tips & gotchas¶
Toggles also hide the styling
Each element has a Show tag, Show title or Show description checkbox on the Content tab, per column. Turning one off hides the element and its whole styling group on the Style tab, so you are never looking at options for something that is not on the page. The text is kept, so turning it back on restores what you wrote.
Show tag is off by default.
Subtitle background makes the pill
The subtitle is plain text until you give it a 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.
Frequently asked questions¶
Can the left and right columns look completely different in 2-column mode?
Yes. Left column and Right column each get their own full Style group (Top icon, Tag, Title, Description, Button), completely independent of each other, so the left title can be a bold h2 while the right one is a smaller custom size in a different color.
Where did the content width-cap field go after switching to 2 columns?
Style › Layout settings › One column maximum content width only shows up in 1-column mode. In 2-column mode, each column's width already comes from Layout › Width › Content x content, so there's no separate per-element cap.
If I switch between 1 and 2 columns, do I lose my styling?
No, but only one set applies at a time. One column style settings apply while How many column do you want? is 1_column; switch to 2_column and Left column / Right column take over instead. Each group keeps its own values, so switching back and forth doesn't erase anything.
Can I set a different button gap for the left column than the right?
No. Common button settings › Gap between buttons is one shared value applied to both columns' button rows. Individual button colors, icons and styles can still differ per column and per button.
Related modules¶
- 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.