Text and headings
Style a single heading or text element with precise size, weight, alignment and colour.
Code name: Typography · Category: Text
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use Typography for a standalone title, subtitle, caption or short paragraph. Use Rich text when you need several paragraphs or lists in one block.
In the editor
- Select the text and update its words.
- Choose a heading or body variant that matches its place in the page.
- Adjust size, weight and alignment without skipping heading levels just for appearance.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Typography variant="h2" align="left">
Advice you can act on
</Typography>Behaviour and limitations
- The visible words are children of the element, not a text property.
- variant chooses the text style. Keep a meaningful heading hierarchy for readers and assistive technology.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
variant | "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption" | "h6" (renderer) | Variant. See the usage notes for this block. |
children | See guidance | Not declared here | Nested content between the opening and closing tags. Follow the block-specific example. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
color | string | Not declared here | Color. See the usage notes for this block. |
align | "left", "center", "right" | "center" (renderer) | Align. See the usage notes for this block. |
alignVertical | See guidance | Not declared here | Vertical alignment within the surrounding layout. |
fontSize | See guidance | Not declared here | Font Size. See the usage notes for this block. |
fontWeight | "auto", 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | "auto" (renderer) | Font Weight. See the usage notes for this block. |
lineHeight | "initial", "12px", "14px", "16px", "20px", "24px", "32px", "48px", "64px", "72px" | "initial" (renderer) | Line Height. See the usage notes for this block. |
marginBottom | boolean | true (renderer) | Margin bottom. See the usage notes for this block. |
paragraph | boolean | false (renderer) | Paragraph. See the usage notes for this block. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
