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.
Typography Block
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 |
|---|---|---|---|
Text | string (bindable, translatable) |
| The text to display. Supports expressions and bindings |
Type | Plain Text, Markdown, Rich Text or HTML | Plain Text | How the value is interpreted and rendered |
Add-ons → Truncation | add-on | off | Clips long content. Plain Text and Markdown only |
Add-ons → Tooltip | add-on | off | Shows a tooltip on the block. Plain Text and Markdown only |
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 |
|---|---|---|---|
Enable Truncation | on/off | off | Turn truncation on |
Maximum number of Lines | number (min 1) | — | Number of lines to show before clipping |
Truncate With | Ellipsis or Label | Ellipsis | End clipped text with … or with a Show more / Show less expand label |
Show Tooltip on Text Overflow | on/off | off | Show the full text in a tooltip when clipped. Only available with Ellipsis |
Tooltip Placement | 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 |
Note: fontFamily, fontStyle, textDecoration, textTransform, lineHeight and letterSpacing apply to web apps only. They do nothing in a mobile app. With Type set to Markdown, the size token (variant) reaches paragraph text only for text-md, text-xs, para-md, para-xmd, para-sm and para-xs; other sizes leave paragraphs at small.
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 Example: Markdown Description from a Data Source
Add a Text block and set Type to Markdown.
Bind Text to the field that holds the description, for example
{{ ds_product.data.description }}. The path depends on your data source's response.Under Add-ons, turn on Truncation, set Maximum number of Lines to 3 and Truncate With to Label so users can expand the text on the web.
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 |
Warning: Changing Type from Block back to Inline removes the Body slot and every block inside it. There is no confirmation and no undo. Move or copy the content you want to keep first.
Link — Content Properties
Property | Type | Default | Appears When | Description |
|---|---|---|---|---|
Type | Inline or Block | Inline | Always | Inline shows a text label; Block shows a composed Body slot |
URL | string (bindable) | — | Always | Where the link navigates on click |
Text | string | Click here | Type = Inline | The link's visible text |
Open in new tab | True, False or Conditions | False | Not on the mobile layout | 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 or Error | Brand | The link's color scheme |
Typography | size + weight | text-sm, regular | Text size and weight |
Underline | None, Hover or Always | Hover | When the underline is shown |
Start Icon | icon (conditional) | — | Icon placed before the link text |
End Icon | icon (conditional) | — | Icon placed after the link text |
Disabled | condition | off | Disables the link — no navigation, no click event |
Visibility | conditions | — | Show or 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: In mobile apps, 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. Web apps navigate to the URL as written.
Link Example: Make a Whole Card Clickable
Add a Link block and set Type to Block.
In Slots → Body, add the card's content, for example an Icon, a title Text block and a description Text block.
Set URL to the destination. It can be a binding, such as a record's detail URL from your data source.
Turn on Open in new tab for links that leave your app.
Optional: add actions under Interactions → On Click. They run in addition to the navigation.
Related Blocks
Block | Relationship |
|---|---|
Runs actions on click without a navigation target; use instead of Link when no URL is needed | |
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 |
Clickable label chips; use instead of Link when you need a colored chip rather than styled text |
This page is the full reference for the Typography (Text) and Link blocks. Icon Button & Link also describes the Link block, and Tag & Text has a short Typography quick reference.