Skip to content
NOEMATA

Content & media

These blocks add the connective tissue around your data: a heading, a sentence of explanation, a status badge, a link to somewhere else. They render presentation, not query results. Most accept a bare string as shorthand, so they’re cheap to drop in. See the block reference for every option.

@block/text and @block/md

For words. Use @block/text for a single styled run — a label, a heading, a caption — sized and coloured with tokens. Use @block/md when you want a block of prose with real Markdown: headings, lists, emphasis, GFM tables, and embedded live blocks via ```block fences (see Notebooks). Reach for md to narrate a dashboard or write a runbook alongside the data.

{ "@block/text": { "text": "Title", "size": "xl", "color": "muted" } }

When text resolves to a number, add a format to render it as bytes, a duration, a percent, and so on — the same formats used by @block/stat and @block/table columns. String values pass through unchanged.

{ "@block/text": { "text": { "@expr/get_context": "bytes_used" }, "format": "bytes" } }

@block/md takes a bare Markdown string, or an object when you want to set its size — the base text size, on the same token scale as @block/text. Headings, inline code, code blocks, and paragraph leading are all relative to it, so one size moves the whole document together. It defaults to md, the reading size; drop to sm for prose that sits beside dense UI and shouldn’t compete with it.

{ "@block/md": { "text": "Rolled back at **09:20**.", "size": "sm" } }

@block/code

A syntax-highlighted code block — show a query, a config snippet, an example payload. Give it the source and a language.

{ "@block/code": { "code": "select 1", "language": "sql" } }

@block/icon and @block/badge

Small status affordances. An @block/icon (any Lucide name) marks or decorates; a @block/badge is a coloured pill for a short status — healthy, degraded, 3 open. Both take colour tokens, so drive the colour from data to turn them into at-a-glance signals.

{ "@block/badge": { "title": "Healthy", "color": "success" } }

Wraps a text child in a link — to a URL, or to another frame with params. Use it to connect dashboards: a service name that jumps to that service’s detail frame.

{
  "@block/link": {
    "to": { "id": "services/{ServiceName}", "params": { "ServiceName": "checkout" } },
    "@block/text": "checkout"
  }
}