Docs Block Reference Text

Text

A text block holds body copy — paragraphs, lists, the prose between headings. The content field is a rich-text editor with built-in formatting: bold, italic, links, lists, and basic inline styles.

Use Text for everything that isn't a heading or button. It's the workhorse content block.

When to use it

  • Paragraphs of body copy
  • Lists (bullet or numbered) — formatted via the rich-text toolbar
  • Lead paragraphs and pull quotes
  • Inline formatted content (bold, italic, links)

When not to use it

  • Page titles or section headings — use Animator instead
  • Anything that needs the 3D text engine — use Animator
  • A list of cards / features — use Rows with one Text per cell
  • Single short label that should stand out — use Animator with tag
  • DIV or P


Settings

Content — rich-text editor (6 rows)

The body copy. The editor toolbar handles bold, italic, links, lists, and basic formatting. Type plain text and apply formatting inline.

Alignment — button group: Left · Center · Right · Justify (default: Center)

Horizontal alignment within the block.

Columns — button group: 1 · 2 · 3 · 4 (default: 1)

Splits the content into newspaper-style columns. The Height slider only takes effect in multi-column mode (it sets the fixed column-flow height). The Column Gap slider only appears when columns is > 1.

Font family — autocomplete

Override the global page font for this text block. Google Fonts auto-loaded.

Colour — colour swatch

Text colour. Default #666. Single swatch — there's no separate background colour on the Text block; for a callout-style background, nest the Text inside a Section (which has Background controls) or a Rows cell.

Font Size — slider, 8–32px (default: 16)

Body copy typically sits at 14–18.

Line Height — slider, 100–250% (default: 160)

Vertical spacing between lines. Body copy reads best at 150–180.

Halo — slider, 0–100% (default: 0)

Soft layered glow behind every glyph, for legibility on busy backgrounds. Works without adding any container — pure text-shadow, three blur stops scaled by the slider. The halo colour is auto-picked from the text colour's luminance: light text gets a dark halo, dark text gets a light halo. Change the text colour and the halo follows.

This is the cinema-grade alternative to "wrap the text in a card with a tinted background" — text stays text, no rectangle around it, but reads cleanly over any background no matter how busy.

Set to 0 to disable. 30 = subtle. 70 = strong (use over 3D / video backgrounds). At 100 the halo is a 60px-wide soft pool around each character.

Spacing (letter spacing) — slider, −1 to 5px (default: 0)

Inter-letter spacing. Body copy is almost always 0.

Width — slider, 10–100% (default: 100)

Block width as a percentage of the parent.

Height (min_height) — slider, 0–500px (default: 0)

Minimum vertical height. Active only when Columns > 1 — sets a fixed column-flow height so the columns balance. In single-column mode the control is visible but inert.

Margin Top — slider, 0–100px (default: 0)

Vertical space above the block.

Padding Left / Right — sliders, 0–60px (default: 0)

Inner padding on the sides. (No Top/Bottom padding on Text — wrap in a Section if you need it.)

Column Gap — slider, 10–60px (default: 30)

Gutter width when Columns > 1.

Entrance animation + Text reveal

The Text block also includes the shared entrance animation and text reveal widgets at the bottom of the panel. These let you animate the block on scroll-into-view (preset, duration, delay) and optionally reveal the text character-by-character.


Per-device overrides

Every setting (size, columns, alignment, padding, line height) has separate Tablet and Mobile values. Switch to the Tablet or Mobile device tab and edit the rich-text editor (or type directly in the canvas) — the new content is saved as content_tablet / content_mobile. Empty override = inherit Desktop. See concepts/responsive-overrides.

Common overrides:

  • Columns — drop from 2–3 on desktop to 1 on mobile (always)
  • Font Size — usually 1–2px smaller on mobile
  • Width — sometimes narrower on desktop, 100 on mobile

Common patterns

Body copy

Width 100 · Size 16 · Line Height 170 · Columns 1 · Alignment Left.

Lead paragraph

Larger than body. Size 22 · weight via the rich-text editor (bold) · Color #555 · Width 80 · Alignment Left.

Newspaper columns

Long copy split into columns. Columns 2 desktop · 1 tablet · 1 mobile · Column Gap 32 · Height 320 (so columns balance evenly).


Don't

  • Don't paste long headings into Text — they won't get the 3D engine.
  • Use Heading.

  • Don't use 4 columns at small font sizes — unreadable.
  • Don't expect Padding Top / Bottom — it's not a Text setting. Wrap
  • in a Section or use Margin Top + add space below in the next block.

  • Don't override Line Height to under 130% on long copy — eye strain.

Related

  • blocks/heading — for titles and display text
  • blocks/button — for click actions
  • blocks/section — wrap a Text in a Section to get Background and
  • full Padding controls

  • concepts/responsive-overrides — per-device layering