Section Title¶
A reusable section header block: optional top icon, subtitle pill, heading, caption title, description, buttons, and a decorative line. Best for: section intros above any content block ("Our Features", "Why choose us"), centered or left-aligned headers, hero-lite intros.
📷 Hero image
Target file: assets/img/section-title/hero.webp
A centered section header block on a Light background: a subtitle pill, a bold heading with one word highlighted in the Secondary color, a short description below, and a small decorative accent line. Keep it narrow and centered like an intro above a content section. Captured at desktop width.
At a glance¶
Header Intro Reusable
- What it does: renders a vertically stacked header: an optional top icon, a subtitle pill, a main title, an optional caption title, a rich-text description, an optional button row, and a decorative line placed above / below the title or below the description. The title supports highlight, stroke, and image-fill treatments.
- Best used for: the intro above a Features / Testimonials / Pricing section, a centered or left-aligned header, or a taller hero-lite header with a minimum height.
- Not the right fit if: you need columns of body copy (use Content), or a full page hero with a background image and CTA (use Single Column Banner - Simple).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Section Title.
- Drag it directly above the content block you want to introduce.
- Open Click to update content and fill in the Tag, Title, Caption title, and Description.
- Turn on Add line as a decorative to place an accent bar, and Add button for a CTA row.
- Use Layout to set the overall Alignment (left / center / right).
- Switch to the Style tab to size the title, style the subtitle pill, and cap element widths.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Subtitle pill, title, and description, centered.
📷 Result
Target file: recipe-centered-intro.webp
A centered header with a Light subtitle pill, a title, and a width-capped description below. Capture the block at desktop width so the centered stack reads clearly.
| Field | Set to |
|---|---|
| Layout › Alignment | center |
| Content › Show tag | on |
| Style › Tag › Make a tag | on |
| Style › Tag › Background | default (scheme surface) |
| Layout › Max content width › Description | custom (e.g. 700) |
One word styled to draw the eye.
📷 Result
Target file: recipe-highlighted-word-title.webp
The header title with one word standing out - filled with the Gradient 1 color or underlined - while the rest stays plain. 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 | custom_gradient or line_under_word |
A top icon on a circle background above the subtitle.
📷 Result
Target file: recipe-icon-topped-header.webp
The centered header led by an icon sitting on a round circle background above the subtitle, with the title and description below. Capture at desktop width so the circle icon reads clearly.
| Field | Set to |
|---|---|
| Content › Icon above tag | hubspot_icon_library |
| Style › Top icon › Background | on |
| Style › Top icon › Roundness of background | round-100 |
A taller header with vertically centered content.
📷 Result
Target file: recipe-tall-hero-style-header.webp
A tall header section with generous vertical space and the content vertically centered within it. Capture at desktop width so the extra height and centering are clear.
| Field | Set to |
|---|---|
| Layout › Enable minimum section height | on |
| Layout › Minimum height | e.g. 500 |
| Layout › Vertical content alignment | center |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Add an eyebrow label | Content › Show tag + Tag (+ icon) |
| Style the eyebrow as a pill | Subtitle › Make a tag = on (padding, background, corners, border) |
| Keep the eyebrow as plain text | Subtitle › Make a tag = off |
| Tighten or open up the eyebrow tracking | Subtitle › Letter spacing |
| Highlight a word in the title | Wrap it in <span> + Title › Highlight style |
| Outline / stroke the title | Title › Text style = stroke |
| Fill title letters with an image | Title › Text style = image_text (+ image) |
| Gradient title text | Title › Color = custom_gradient |
| Add a decorative bar | Content › Add line as a decorative (above / below title or below description) |
| Add buttons | Content › Add button + configure Buttons group |
| Scroll-to-section button | Buttons › Type = drag_to_section (+ Section name) |
| Make it a tall hero header | Layout › Enable minimum section height + vertical alignment |
| Cap the description width | Layout › Max content width › Description = custom |
| Top icon with a circle background | Content › Icon above subtitle + Top icon › Background (round-100) |
| Custom overlay over the image | Section background › Overlay color type + color |
Field reference¶
The editor has a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (205 fields total - expand each group as needed.)
Content tab¶
Click to update content
| Field | Type | Default |
|---|---|---|
| Icon above subtitle | choice (no_icon / hubspot / upload / svg) | no_icon |
| Add line as a decorative | choice (none / below_title / above_title / below_description) | none |
| Show tag / Tag | boolean / text | off / New |
| Add icon to tag + position | boolean / choice (before / after) | off / before |
| Show title / Title | boolean / text | on / Title |
| Show caption title / Caption title | boolean / text | off |
| Show description / Description | boolean / richtext | on |
| Add button | boolean | off |
Buttons (repeater): Type (link / drag_to_section / cta), Style (btn-1 to btn-8), Link / Section name / CTA, Title, optional Icon.
Drag to section name
Section name: sets this section's ID so scroll-to-section buttons elsewhere can link to it.
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 / gradient / image / video (overlay + position), blur, parallax, dual radial glows, plus a Overlay color type toggle with its own overlay color. - Background pattern: toggle Add pattern, then choose a style (Grid, Dots, Diagonal lines, Diagonal cross, Circuit board), its colour and opacity, a tile size, and a fade (none / top / bottom / left / right / edges) with a fade amount. Hidden when Type is Image or Video, because a pattern needs a flat surface to read against.
Section divider settings
Divider type: none / shape / border / shadow, with border, shadow, and 25-shape options (flip / invert, color / 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 to left-xl | left-m |
| Right | right-x-0 to 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
- Alignment: left / center / right for the whole block (buttons set to Inherit follow this).
- Section wrapper container and Inner content container: width + alignment.
- Enable minimum section height: unlocks Minimum height and Vertical content alignment (top / center / bottom).
- Maximum content width per element: independent width cap + alignment for subtitle, title, caption, description, and buttons.
Preset Settings - Title
| Field | Type | Default |
|---|---|---|
| Show title as | choice (h1-h6, Custom font size) | h2 |
| Font size [desktop / tablet / mobile] | number | 38 / 32 / 28 (shown when Show title as is Custom font size) |
| Color | choice (default / custom_color / custom_gradient) | default |
| Custom text color | color | - |
| Custom text gradient color | gradient | - |
| Highlight style | i_don_t_want_to_highlight_any_word / line_under_word / custom_color / custom_gradient | no highlight |
| Thickness of line | number | - |
| Distance between line and text | number | - |
| Custom highlight word text color | color | - |
| Custom highlight word gradient color | gradient | - |
| Spacing below element | default / 0 / s to 4xl | default |
The title has no per-screen font size, no text transform, and no Text style (stroke / image fill) field. Highlighting offers four options, and "different font" is not among them.
Other element groups: Top icon (icon size, spacing, colour, background, border radius, border), Tag (Make a tag master toggle for the pill, then background, padding, round corner, border, font sizes, letter spacing, icon size, text transform, bold), Caption title (show as, transform, colour, letter spacing, bold), Description (description style, colour, bold), Buttons (button gap applies to every button; any button set to the Simple Link style switches to its own colour, underline, bold and icon controls, the other seven skins share a size, an icon-text gap and a full-width-on-mobile toggle), Decorative line (width, height, colour / gradient, spacing above and below).
Developer use only
Add custom css here: per-module CSS injection field.
Tips & gotchas¶
Buttons can inherit alignment
Set Buttons › Button alignment to inherit and the button row follows the section's overall Alignment. Override it only when you want the buttons to sit differently from the text.
Minimum height unlocks vertical alignment
Vertical content alignment only takes effect once Enable minimum section height is on and a Minimum height is set. Without a minimum height there is no extra space to align within.
One title treatment at a time
Highlighting a <span> word, Stroke, and Image text are separate treatments. Stroke and image-fill apply when no word is highlighted, so choose one look per title.
Frequently asked questions¶
How do I highlight one word in the title?
Wrap that word in <span>...</span> inside Content › Title, then set Style › Title › Highlight style to line_under_word, custom_color, or custom_gradient. Only the wrapped word takes the treatment; the rest of the title stays plain.
Can the highlighted word use a different font from the rest of the title?
No. Highlight style only changes the word's color, gradient, or underline. The title has no per-word font field, and there is no Text style (stroke / image fill) field either, only the whole-title Color options and the four highlight choices.
Why isn't Vertical content alignment doing anything?
It only takes effect once Enable minimum section height is on and a Minimum height is set. Without that extra height there's no space to center or bottom-align the content within, so the toggle sits inactive until both are set.
How do I turn this into a taller, hero-style header?
Turn on Layout › Enable minimum section height, set a Minimum height (for example 500), then set Vertical content alignment to center so the stack sits centered in that taller space.
How do I make a button scroll to another section on the page instead of linking out?
Add a button, set its Type to drag_to_section, and pick the target section. That target section needs its own Section name field set (found under Content › Drag to section name on the section you're scrolling to) so the button has an ID to scroll to.
Can I use Section Title for body copy, not just a header?
It's built for a short header stack (tag, title, caption, one description block, buttons), not columns of copy. For a fuller text block use Content, and for a full-page hero with a background image use Single Column Banner - Simple.
Why didn't my button row follow the heading's alignment?
Each button's Button alignment defaults to its own setting rather than following the block. Set it to inherit and the row follows the section's overall Alignment instead; leave it as-is only when you want the buttons positioned differently from the text.
Related modules¶
- Content: a fuller text block in one or two columns with buttons.
- Single Column Banner - Simple: a full page hero with background, tag, and CTAs.
- Call to Action: a focused conversion block built around one message.
- Features: the feature grid this header often introduces.