Link Search Menu Expand Document

Rich Text Block

Use Rich Text when one text block needs varied typography, inline styling, or Handlebars composition.


Add a Rich Text block from the left sidebar by choosing Rich Text Box. Double-click the block on the canvas to edit the text directly.

Rich Text block selected in the template editor with typography controls open

Select a word, line, letter, or any range of text and use the inline toolbar to change font size, color, underline, and other text styling for only that selection.

Use the right sidebar when you want one value across the whole block. Changing a text styling property there applies that value across the block for that property, replacing per-selection differences.

Some inline toolbar controls can show mixed when the current selection already contains more than one value. Choosing a new value applies it to the current selection.

Common Properties

Most blocks share a core set of properties. The right sidebar shows the properties available for the current selection, including controls added by the parent panel.

PropertyDetails
Templatable Size Control how much space the block takes up
Width

Controls the block's horizontal space. Use a fixed value for a predictable footprint, `%` when the width should respond to the canvas or parent panel, or auto sizing when content or layout should decide the width.

Height

Controls the block's vertical space. Height can be fixed, flexible, or constrained with minimum and maximum values when a block needs room to grow without getting too large or too small.

Aspect Ratio

Keeps width and height connected so a block can scale without stretching. This is useful for images, shapes, and blocks that need to preserve a specific proportion.

For units, auto sizing modes, min/max values, and responsive sizing patterns, see the Sizing and Positioning guide.

Arrange Place and manage the block in its layout
X and Y

Set the block's position on the canvas or inside a Free Panel. X controls horizontal placement; Y controls vertical placement. Positions can use fixed units or `%` values with anchors.

Alignment

Move a block to common canvas positions, or use anchors to decide how the block lines up to a percent-based X or Y value.

Rotation and Flip

Rotate the block or flip it horizontally or vertically without changing the block's content.

Lock and Layer Order

Lock a block to avoid accidental edits, or move it forward and backward when blocks overlap.

For anchoring, percent positions, panel behavior, and layer order, see the Sizing and Positioning guide.

Templatable Background Style the surface behind the block’s content
Solid

Assign a single color as the background of the block.

Can be templated
  • Color
Gradient

Use a linear, radial, or conic gradient. Gradients are built from stops, and each stop has a color and a position. Stops are ordered by position, so moving a stop changes how the colors blend across the block.

Can be templated
  • Stop colors
  • Stop positions

Linear and conic gradients also include an angle control.

Pattern

Choose a pattern, then customize the colors it exposes. Some patterns also include a size control. Different patterns use different numbers of colors, so the available controls change after you choose a pattern.

Can be templated
  • Pattern colors
  • Pattern size

Patterns are sourced from css-pattern.com.

Canvas backgrounds

Canvas and block backgrounds are separate. A transparent block can show the canvas background or the parent panel behind it.

Border Define the block’s edge and corners

Border controls are split into simple and advanced modes.

Simple

Use simple border controls when the same color, thickness, line style, and corner radius should apply everywhere.

Advanced

Open Advanced Border to edit sides and corners separately. Sides can have their own color, thickness, and line style. Corners can have their own radius.

Shadow Layer shadows to add depth to your blocks

Shadows can be layered. Use a regular shadow for depth, an inner shadow for inset effects, or a glow when the shadow should spread evenly around the block.

Text block shadows

Rich Text blocks support drop shadows and glows. Inner shadows and spread are not available for text blocks.

Block Specific Properties

PropertyDetails
Templatable Opacity Transparency for the block

Opacity controls transparency for the whole block, including its content and styling. Lower opacity makes the block more transparent.

Can be templated
  • Opacity
Font Font family, weight, and italic style
Templatable Font size Text size for the selected text or block

Select text on the canvas to apply this property to only that selection. Use the right sidebar to set one value across the whole block for this property.

Templatable Font color Text color

Select text on the canvas to apply this property to only that selection. Use the right sidebar to set one value across the whole block for this property.

Templatable Line height Space between lines
Templatable Letter spacing Space between letters
Horizontal align How lines align inside the block
Vertical align How text sits inside the block
Wrap How text wraps across lines
Overflow What happens when text is larger than the block
Templatable Underline Underline style and color

Select text on the canvas to apply this property to only that selection. Use the right sidebar to set one value across the whole block for this property.

Templatable Text outline Stroke around text
Transform Text casing
Padding Space between the block edge and the text

Padding creates space inside the block’s edge before content is laid out.

Simple

Use one value when every side should have the same inset.

Advanced

Open Advanced Padding to set top, right, bottom, and left independently.

Templated Content

Rich Text supports Handlebars inside the text content. Use it for variables, loops, conditionals, and repeated content inside one text block.

Many properties can use Variables to assign their value when each image is created.

Variables can be required, ignored, or given a fallback value. When you render the template, pass values with template_values.


Back to top

Built with extensive integration tests and serious care for developer happiness.
© 2018-2026 Code Happy, LLC.

Page last modified: Jun 24 2026 at 10:03 PM.

Edit this page on GitHub.