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 Subtitle, 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 subtitle | on |
| Style › Subtitle › Subtitle background | bg-light (pill) |
| 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 subtitle | hubspot_icon_library |
| Style › Top icon › Add 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 subtitle + Subtitle (+ icon) |
| 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 › Add background (round-100) |
| Custom overlay over the image | Section background › Use custom overlay + color |
Field reference¶
The editor has a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (202 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 subtitle / Subtitle | boolean / text | on / New |
| Add icon to subtitle + position | boolean / choice (before / after) | off / before |
| Show title / Title | boolean / text | on / Title |
| Show caption title / Caption title | boolean / text | on |
| 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 Use custom overlay toggle with its own overlay color.
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-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| 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) | h2 |
| 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), Subtitle (pill background, padding, round corner, border, font sizes, icon size, text transform, bold), Caption title (show as, transform, colour, letter spacing, bold), Description (description style, colour, bold), Buttons (icon-text gap, button gap, button size), 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.
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.