Text Block
Use Text for headings, body copy, captions, editorial notes, product storytelling, and short support copy inside sections, templates, and containers.
Setup Order
- Write the contentAdd the rich text first so layout and typography decisions are based on the real copy length.
- Choose the text roleUse the default heading and text styles when they match the page hierarchy, or choose a specific H1-H6 style when the block needs a clear semantic role.
- Set width and alignmentUse fill width for normal text groups, fit-content for short labels, and max width when long copy needs a comfortable reading line.
- Review wrappingUse wrapping controls to avoid lonely last words, balance short lines, or keep compact labels on one line when there is enough space.
Key Settings
| Setting group | What it controls |
|---|---|
| Rich text | The visible copy, inline links, emphasis, and line breaks. |
| Width | Fit or fill behavior, optional width limit, and maximum width. |
| Alignment | Text alignment when the block fills the available width. |
| Typography style | Default styles, H1-H6 styles, or custom typography controls. |
| Custom typography | Font, size, line height, and letter spacing for intentional local treatment. |
| Wrapping | Orphan prevention, equal lines, no-wrap behavior, or automatic wrapping. |
| Text color and shadow | Local color and optional text shadow for contrast. |
| Padding | Space around the text block. |
Writing Guidance
Keep text blocks focused on one idea. If a section needs a heading, body copy, and caption, use separate Text blocks inside a Container so each part can keep the right hierarchy and spacing.
Avoid using custom typography for every block. Start with global typography and use custom controls when a campaign, hero, or compact label needs a deliberate exception.
QA Checklist
| State | What to confirm |
|---|---|
| Long copy | Lines remain readable and do not stretch too wide on desktop. |
| Mobile | Text wraps cleanly without overlapping nearby blocks or controls. |
| No-wrap labels | The label still fits in the available space in the longest expected language. |
| Custom color | Contrast remains readable on the section or container background. |
| Inline links | Links are visible, descriptive, and lead to the expected destination. |