Text Block

Write for people first

A useful Text block combines a clear idea with meaningful emphasis and a concise next step.

Continue with the Luna documentation.

The Text block creates headings, paragraphs, emphasis, links, lists, and other rich editorial content within Luna pages.

Use it to establish hierarchy, explain ideas, and connect visitors to the next useful destination without turning one block into an entire page.

Properties

Edit the rich text itself first, then use Text Settings for block-level display and quote treatments.

The Properties capture above shows the block-level Text Settings that complement the rich-text editor.

Oversized Text

Oversized Text is available in grid context and is intended for short, bold titles or a few words. Keep the frame compact and verify wrapping at every breakpoint.

Drop Cap

Drop Cap styles the first letter of the first paragraph. Drop Cap Color uses Default, theme colors such as Background, Light 1, Light 2, Accent, Primary, Dark 1, and Dark 2, or a supported custom color.

Quoted Text

Quoted Text applies a quote treatment to the complete Text block. Quote Style offers Classic or Pull Quote.

For Pull Quote, choose Small, Medium, or Large and set Quote Align to position the treatment. Quote Color uses the same theme-aware color choices and may accept a supported custom color.

Site Design typography

Text hierarchy is controlled in Site Design, not in the Text block’s Style Panel. Open Site Design → Typography to manage the shared fonts, font sizes, line heights, letter spacing, and reusable Substyles used by rich text across the site.

Font sizes

Base-size scope controls how rem-based typography resolves across the site. Global is the fallback for content types without an override and currently uses 16 px on Desktop, 15 px on Tablet, and 14 px on Mobile.

Heading Font Sizes defines H1–H6 and Paragraph Font Sizes defines P1–P3. The rich-text format selected in the editor uses one of these named slots rather than creating a one-off Text block size. Content Type Base Font Sizes can override Global for an exact, case-sensitive content type; this Docs page uses 16 px on Desktop and 15 px on Tablet and Mobile.

Substyles

Substyles are reusable rich-text treatments selected inside the editor. The current custom Substyle is Custom 1: the theme Heading font, font size 2.7 rem, Regular weight, line height 1, and letter spacing 0. Use a Substyle for a repeated editorial treatment that does not deserve a new heading level, and edit the shared Substyle in Site Design when every occurrence should change together.

Style Panel

Block is the Text block’s only Style Panel area. Use it for the supported surface, spacing, alignment, color, border, and effect controls shown by the current panel, while keeping the rich-text hierarchy in the editor.

The Block target intentionally hides Style Panel controls for font size, line height, letter spacing, and text transform. Set heading and paragraph hierarchy through the rich-text content and the site typography system instead of inventing per-block controls.

Responsive behavior

Text is content-driven. In a section grid it starts at 5 columns by 3 rows, but the final height must follow real copy, typography, padding, and borders.

Recheck heading and paragraph wrapping on tablet and mobile. A short desktop block may need more height when the content column narrows.

Accessibility

Use one logical heading hierarchy and write descriptive link text that explains the destination outside its surrounding sentence.

Keep contrast readable, avoid using emphasis or color as the only signal, and preserve visible keyboard focus for links.

Use lists for real groups and paragraphs for complete thoughts so assistive technology receives meaningful structure.

Tips & tricks

1. Build a clear reading hierarchy before refining decorative details.

2. Keep each Text block focused on one idea and make scanning easy.

3. Let the rendered copy determine height instead of adding empty grid rows.

4. Test the shortest, longest, empty, and most complex realistic content.

Common mistakes

• Using visual size alone instead of a logical heading level.

• Turning long paragraphs into oversized text or pull quotes.

• Writing vague links such as “click here” or removing visible focus.

Quick recipe

Write the final heading and paragraphs, add emphasis and descriptive links where they improve meaning, enable Drop Cap or Quoted Text only for a deliberate editorial treatment, then verify hierarchy, wrapping, contrast, and focus at all breakpoints.