Content Display
Heading
Semantic heading block for builder canvas and app player. Supports levels h1 to h6, centered alignment by default, optional subtitle text, and configurable heading color and font family.
Component picker → Content Display → Heading, then set text, level, and alignment.
h1 to h6Legacy numeric values 1 to 6 are still accepted and normalized.
Resolves alignment with textAlign ?? align ?? ‘center’ for backward compatibility.
Four things worth knowing
Semantic heading levels with legacy support
Supports h1 to h6 for semantic structure. Older saved data using numeric levels 1 to 6 still works and is normalized internally.
Centered by default, with fallback alignment
Alignment resolves from textAlign first, then legacy align, then center. This keeps old apps compatible while using current registry props.
Optional subtitle with visibility guard
Subtitle renders only when showSubtitle is truthy and subtitle has content, so empty subtitles do not reserve extra vertical space.
Configurable typography and style tuning
Heading color, font family, level sizing, and level weights are adjustable. The title also uses slight negative letter spacing for tighter visual rhythm.
Find it, drop it, and configure text
Where to find itAdd it to any screen
- Component picker → Content Display → Heading.
- Drop it anywhere you need section hierarchy or page title context.
- Configure text, level, alignment, and style in the property editor.
Before you publishThree things to check
- Use semantic level order (
h1toh6) to keep hierarchy readable. - Confirm alignment and font family match the surrounding layout.
- If subtitle is enabled, verify copy and contrast before publishing.
Primary and optional fields
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | ’Heading’ | Main heading text. |
level | select | ’h2’ | Heading level h1 to h6; legacy numeric 1 to 6 supported. |
textAlign | select | ’center’ | Current alignment prop: left, center, right. |
align | select (legacy) | fallback only | Backward compatibility fallback when textAlign is not present. |
color | string | ’#333333’ | Heading text color. |
fontFamily | string | theme default | Heading font family. |
subtitle | string | ” | Optional supporting subtitle text. |
subtitleColor | string | ’#666666’ | Subtitle text color. |
showSubtitle | boolean | false | Controls subtitle visibility with content guard. |
Make it yours
Use the builder property editor to tune visibility, alignment, typography, and hierarchy while keeping semantic heading order intact.
| Prop | Typical value | What it controls |
|---|---|---|
showSubtitle | true / false | Shows or hides subtitle rendering. |
color | #333333 | Heading text color. |
subtitleColor | #666666 | Subtitle text color. |
fontFamily | Theme font | Heading visual style and weight perception. |
textAlign | left, center, right | Aligns heading and subtitle block. |
level | h1 … h6 | Semantic importance and default heading size mapping. |
Common mistakes to avoid
Keep level order logical
Avoid jumping from h1 straight to h4 unless structure truly requires it. Consistent hierarchy improves readability and accessibility.
Use textAlign as the active prop
align is legacy fallback only. Set alignment with textAlign in new content so registry defaults stay predictable.
Subtitle needs both flag and content
Subtitle appears only when showSubtitle is enabled and subtitle is non-empty. Configure both if you expect visible subtitle text.
Sync visual changes across three places
If you alter sizes, weights, or supported props, update BuilderHeading.tsx, builderComponentRegistry.ts, and componentDimensions.ts together.