Typography Block
The Typography block (shown as Text in the block picker) displays a piece of text in one of four content types with full typographic control: color, size, weight, alignment, font, style, casing, line height, and letter spacing. Its value is bindable, rendering anything from a static label to a formatted document from your data. For Plain Text and Markdown, it offers a Truncation add-on that clips long content.
Content Types
| Type Label | Internal Value | Description |
| Plain Text | PLAIN_TEXT | Renders as plain text. Line breaks are preserved. Default for new blocks |
| Markdown | MARKDOWN | Parses markdown syntax (links, bold, lists, headings) |
| Rich Text | HTML | Renders through the rich-text pipeline (editor-style formatting). Used by blocks created before the raw HTML option |
| HTML | PLAIN_HTML | Renders your markup as-is (raw HTML) |
Warning: Two "HTML-looking" types exist for historical reasons: If pasted HTML looks re-styled, check that Type is set to HTML (PLAIN_HTML), not Rich Text (HTML). Rich Text applies editor-style formatting classes; HTML renders as-is.
Typography — Content Properties
| Property | Type | Default | Description |
| value | string (bindable, translatable) | Hello {{ userContext.name || 'world' }}! | The text to display. Supports expressions and bindings |
| type | PLAIN_TEXT | MARKDOWN | HTML | PLAIN_HTML | PLAIN_TEXT | How the value is interpreted and rendered |
| permissions | permission rules | — | Restrict who can see the block |
Truncation Add-on
Available only when Type is Plain Text or Markdown:
| Property | Type | Default | Description |
| enableTruncation | boolean | false | Turn truncation on |
| maxNumberOfLines | number (min 1) | — | Number of lines to show before clipping |
| truncateWith | "ellipsis" | "label" | ellipsis | End clipped text with … or with a Show more / Show less expand label |
| showTooltipOnTextOverflow | boolean | false | Show full text in a tooltip when clipped. Only available with Ellipsis mode |
| tooltipPlacement | placement | top | Where the overflow tooltip opens |
Note: "Show more" label truncation is web-only. In a mobile app, the label variant is not applied — text clips at the line limit without an expand control. Ellipsis truncation works on both platforms.
Typography — Appearance Properties
| Property | Type | Default | Description |
| color | theme color or custom hex | text-primary | Text color. Custom hex colors (including opacity) are allowed here |
| variant (size) | size token (e.g. text-md) | text-md | Text size token |
| weight | weight token | regular | Font weight |
| align | left | center | right | justify | left | Text alignment |
| fontFamily | font name | theme font | Font family. Leave unset to inherit the theme font |
| fontStyle | style token | — | Font style (e.g., italic) |
| textDecoration | underline | line-through | — | Text decoration |
| textTransform | uppercase | capitalize | lowercase | — | Letter casing |
| lineHeight | token or custom CSS value | — | Line height |
| letterSpacing | token or custom CSS value | — | Letter spacing |
| visibility | conditions | — | Show/hide the block |
| styles | style set | — | Width, padding, margin, height, flex layout, overflow, background, radius, rotation |
Typography — Exposed State
| Binding | Type | Description |
{{ id.content.value }} | string | The text currently configured (after bindings resolve) |
{{ id.content.type }} | string | The active content type (PLAIN_TEXT, MARKDOWN, HTML, PLAIN_HTML) |
{{ id.content.addOns.truncation }} | object | The truncation configuration |
{{ id.appearance.* }} | object | The block's appearance settings (color, size, weight, alignment, …) |
Typography Behaviors & Gotchas
Warning: Binding a non-string value prints it as JSON: Bind an object or array to Text and the block renders it as pretty-printed JSON. A date value renders as its full date string.
Note: Empty value takes up one line: When the bound value is empty or missing, the block renders a blank space instead of collapsing to zero height. Use a visibility condition if you want it gone entirely.
Note: Line breaks are always preserved: Newlines in the value render as real line breaks. Exception: when truncation is on with maxNumberOfLines = 1, wrapping is suppressed.
Note: Truncation not available for Rich Text or HTML: The Truncation add-on only appears for Plain Text or Markdown. Control Rich Text/HTML size via Styles height + overflow.
Typography — Examples
Link Block
The Link block is a clickable hyperlink in two flavors: Inline — a piece of styled text — or Block — a body slot you fill with any content, making the whole area one link. It navigates to a URL, optionally in a new tab, with brand/neutral/error coloring, underline control, optional icons, and an On Click event that fires alongside navigation.
Link Types
| Type | Shows | Use case |
| Inline | A Text property for the link label | Standard text hyperlinks ("View documentation", "Click here") |
| Block | A Body slot where you compose any blocks | Making a composed area (icon + title + description) fully clickable as one link |
Link — Content Properties
| Property | Type | Default | Appears When | Description |
| type | "inline" | "block" | inline | Always | Inline shows a text label; Block shows a composed Body slot |
| url | string (bindable) | — | Always | Where the link navigates on click |
| label | string | Click here | type = inline | The link's visible text |
| openInNewTab | true | false | conditions | false | Always | Open the target in a new browser tab. Accepts runtime conditions |
| slots.body | block slot | Column with "Click here" text | type = block | Composable content that becomes the clickable area |
| interactions | event list | — | Always | On Click event handler — fires in addition to navigation |
| permissions | permission rule | — | Always | Restrict who sees the block |
Link — Appearance Properties
| Property | Type | Default | Description |
| color | "brand" | "neutral" | "error" | brand | The link's color scheme |
| typography | size + weight | text-sm, regular | Text size and weight |
| underline | "none" | "hover" | "always" | hover | When the underline is shown |
| startDecorator | icon (conditional) | — | Icon placed before the link text |
| endDecorator | icon (conditional) | — | Icon placed after the link text |
| disabled | condition | false | Disables the link — no navigation, no click event |
| visibility | conditions | — | Show/hide the block |
| styles | style set | — | Flex layout, visibility, rotation, plus custom CSS and HTML attributes when enabled |
Link Events
| Event | Trigger | Notes |
| On Click | User clicks the link; fires in addition to the navigation itself | Always available |
Link Behaviors & Gotchas
Note: Empty Text shows the URL instead: For an inline link with no Text, the raw URL becomes the visible label. The link never renders blank as long as a URL is set.
Note: Missing URL still renders a clickable link: With no URL set, the link displays and fires On Click. Inside a published app its target falls back to #, so clicking may scroll to the top of the page rather than navigating.
Note: Clicks don't leak to clickable parents: A click on a Link inside a clickable container (e.g., a card header) triggers only the link, not the container's own click behavior.
Note: New-tab links are opened safely: Links opened in a new tab include browser protections (noopener noreferrer) automatically.
Note: Private platform file links resolve at click time: URLs pointing at platform-protected file downloads are exchanged for a real temporary download address when the user clicks. If the exchange fails, the original URL is used.
Link — Examples
Frequently Asked Questions
Which content type should I use for my Text block — PLAIN_TEXT, MARKDOWN, HTML, or PLAIN_HTML?
Use PLAIN_TEXT for simple, unformatted labels and values. Use MARKDOWN when the text comes from a data source that uses Markdown syntax (bold, headings, lists) — the block renders it properly. Use HTML to render full HTML markup including inline styles; this sanitizes the input so scripts are stripped. Use PLAIN_HTML only when you need to embed arbitrary HTML without sanitization (advanced use; avoid with user-supplied content).
Can I bind the content of a Text block to a variable?
Yes. Set the content field to any expression, for example {{ myDataSource.data.title }}. If you pick the MARKDOWN or HTML type, the expression result is parsed as that format. PLAIN_TEXT is the safest choice for bound values because it never interprets markup.
My truncated text shows an ellipsis but the tooltip does not appear on hover. Why?
The tooltip is only shown when the text is actually clamped (overflowing its container). If the container is wide enough to show the full text, no truncation occurs and no tooltip appears. Reduce the container width or shorten the text to trigger clamping.
What is the difference between the Link block and a Typography block with a URL binding?
The Link block renders a semantic <a> element with correct keyboard focus, accessible roles, and a built-in Open in New Tab toggle. It also supports Start and End decorators (icons) and a disabled state. A Text block cannot navigate — it only displays text. Use Link whenever you need an actual navigable hyperlink.
Related Blocks
| Block | Relationship |
| Button | Runs actions on click without a navigation target; use instead of Link when no URL is needed |
| Link Preview | Renders a URL as a rich preview card rather than a hyperlink |
| Typography | Plain text without navigation; use Link when the text must navigate somewhere |
| Tag | Clickable label chips; use instead of Link when you need a colored chip rather than styled text |