@docs
components
components
@docs
components
componen
Public

flows.md · documentação

Referência#

Toda cerca que uma página pode chamar, com seus argumentos, seu corpo e um exemplo. Nada aqui é escrito à mão: a lista abaixo é uma cerca — @components — e sai da declaração dos próprios componentes. Uma referência com a lista de argumentos copiada é uma página que envelhece na semana seguinte.

Componentes de página

Um bloco de código cercado cuja linguagem começa com @ é uma chamada de componente. Tudo abaixo é gerado pelos próprios componentes, então não envelhece.

@audio renderiza: servidor

An audio player over a file uploaded to this site. Controls on, nothing autoplays.

Renderizado no servidor.

Exemplo

```@audio src:/f/k3Fq9ZrX2mB7vT1wLp8sYa/episodio.mp3 title:"Episódio 1"
```

Argumentos

src path Obrigatório
Path of the file on this site, usually an upload of the page. Starts with a single / — "//host/x" is another site, not a path.
title string
A short title shown under the player.
preload enum Padrão: metadata
How much the browser fetches before play: none, metadata or auto. Valores aceitos: none, metadata, auto
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@auth renderiza: servidor

An app's own sign-in, on its own page: the reader types an e-mail, gets a six-digit code by mail, types it in the same block and is in — no password, and never the product's own sign-in screens. A new address becomes an account when the code proves it. With group: the person also joins that group (or asks to, when its door is by request); with next: they go on to that page. Signed in, it says who they are and offers Sign out. A bare ```@auth is a complete sign-in that returns to the same page.

Renderizado no servidor.

Exemplo

```@auth
```

An app's way in, with its own words, its group and where to go on:

```@auth group:"Passada · atletas" next:./app/perfil title:"Entre na Passada" submit:"Receber o código"
Use o e-mail. Enviamos um código de entrada, sem senha.
```

What only the group sees stays behind members_of:, on that page:

```@data collection:treinos members_of:"Passada · atletas"
```

Argumentos

group string
A group, by name or id, as members_of: names one: signing in also joins it when its door is open, or asks to join when it is by request. An invite-only group, or a door with questions, is never joined from here: the block shows the way to the group's own page. It hides nothing: gate the app's own blocks with members_of:.
next string
Where a signed-in person goes on: a page of THIS page's space, written as a page link is (/@space/app, ./app, ../app, :/app). Anything else (another space, a full address) is refused. Without it they stay on this page.
title string
The line above the form. Defaults to "Sign in", in the page's language.
submit string
The words on the button that asks for the code. Defaults to "Get the code", in the page's language.
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Texto livre. The line or lines of help under the title. Left out, one line says a code is sent and no password is asked.

@button renderiza: servidor

A link drawn as a button: what the reader should do next. Works in pages and in e-mails.

Renderizado no servidor.

Exemplo

```@button to:/pricing
See the plans
```

Argumentos

to string Obrigatório
Where it goes: a path of this site (/@ana/menu) or a web address starting with https://.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Texto livre. The label on the button.

@comments renderiza: servidor

Readers' comments on the page: a signed-in reader posts and replies, oldest first, with the author's name and time; the author edits and removes their own, the page's editors hide any. A visitor reads them on a page they may read, with a link to sign in. A reply tells the thread and the page's editors. In a route's layout, each row's page has its own comments, read and written only by whoever may read that row (a list's page has none). Annotations are reviewed by the people who run the site first: until they are open to someone, the block draws nothing for them.

Renderizado no servidor.

Exemplo

```@comments label:"What did you think?"
```

Argumentos

label string
The heading above the comments. Defaults to Comments.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@components renderiza: servidor

The reference for every fence a page may call, generated from the components' own declarations.

Renderizado no servidor.

Exemplo

```@components
```

Argumentos

only enum Padrão: all
Which half to list: `server`, `client`, or `all` (the default). Valores aceitos: all, server, client
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@contact renderiza: servidor

A person or a place to reach: call, WhatsApp with a written message, e-mail, map — and a button that saves the contact to the phone.

Renderizado no servidor.

Exemplo

```@contact name:"Vitória Imóveis" role:"Corretora" whatsapp:"+55 11 95550-0134" message:"Olá! Vi sua página." email:[email protected]
```

O que ele desenha

Vitória Imóveis

Corretora

WhatsApp E-mail Salvar contato

Argumentos

name string Obrigatório
Who this is.
role string
What they do, under the name.
org string
The company or the place.
phone string
A telephone number, with the country code: "+55 11 5550-0134".
whatsapp string
The WhatsApp number, with the country code. It opens a conversation.
message string
What the WhatsApp conversation starts with, already written for the person.
email string
An e-mail address.
site string
A web address, starting with https://.
address string
Where it is. It opens the map.
save boolean Padrão: true
Whether the "Save contact" button is shown.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@copy renderiza: servidor

A value to take away — a Pix key, a coupon, a wifi password, a command — printed, with a button that copies it. Not for an API key, a token or a password of an account: a @copy prints its value for every reader, its history and every AI tool that reads the page — use ```@secret, which keeps it encrypted and masked.

Renderizado no servidor.

Exemplo

```@copy label:"Chave Pix" value:[email protected] note:"Any amount helps"
```

O que ele desenha

Chave Pix

[email protected]

Any amount helps

Argumentos

value string
What is copied, up to 2,000 characters. Write it here when it is short, or in the body when it is long or has spaces and quotes.
label string
What the value is, printed above it.
note string
One line under the value: until when it is valid, where to paste it.
kind enum Padrão: text
text for a key or a code a person reads; code for something pasted into a terminal, kept on its own lines. Valores aceitos: text, code
button enum Padrão: icon
icon (the default): the copy button is its icon alone, named by its title; word: the icon and the word Copy beside it, in the reader's language, which reads "Copied" for a moment after a copy. Valores aceitos: icon, word
style string
Wears a named style of the page's theme declared for:copy (```style name:<name> for:copy on a page under the theme's styles; manual styles): CSS scoped to this block's root and kept from reaching outside it. It reaches the published hooks — .nt-copy-label, .nt-copy-row, .nt-copy-value, .nt-copy-button, .nt-copy-icon, .nt-copy-word, .nt-copy-note — a terminal window, say: the label as a centred title bar (three dots drawn with radial-gradient backgrounds), the value on a dark body, the button at the top right with `button:word`. Staff preview.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Texto livre. The value, when it does not fit on the fence line: up to 2,000 characters. The body wins over `value`.

@countdown renderiza: servidor

Counts down to a date and time, and says something else once it has come. A launch, a drop, doors opening, enrolment closing.

Renderizado no servidor.

Exemplo

```@countdown to:2026-11-20T19:00-03:00 label:"Doors open" done:"We are open"
```

O que ele desenha

Doors open

Argumentos

to string Obrigatório
The moment, as 2026-11-20 or 2026-11-20T19:00-03:00. With no offset it is read as UTC; a date alone is its first minute.
label string
What is being waited for, printed above the clock.
done string
What the block says once the moment has passed. Without it the block says the moment has come.
show enum Padrão: full
full counts days, hours, minutes and seconds; days counts only days, for something weeks away. Valores aceitos: full, days
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@data renderiza: servidor

Reads a collection of this space and renders it as a table, with filters, columns, metrics and pagination; filter_by and search give the reader tabs, menus and a search box that narrow it. view:board group:<select field> shows the same rows as a board, one column per option, and lets the space's writers move a card to another column. view:calendar date:<date or datetime field> places the rows on a month or a week, and lets the writers move an item to another day. view:checklist done:<boolean field> gives each row a checkbox the writers tick. view:timeline lays the rows out as the steps of a :::timeline, state:<field> giving each its marker and item:<component> drawing each with a component of the theme. view:field field:<field> (or fields:a,b,c) shows that field of the rows the @filter lines select — meant for one row, like a post's own page — as a control the writers change in place: a select, a checkbox, a date, a number, a text box. view:sheet draws the rows as a spreadsheet — the @column lines (or every field) as columns, the header row and the first column frozen, a computed column's formula in its header to the collection's writers (readers see that it is computed), the metric lines as its last row (totals) — that the writers edit in place (a click or Enter, Escape cancels, Tab and the arrows move) and paste a block copied from Excel or Google Sheets into, as rows, after a preview of what changes; readers move through it read-only; it offers the shown rows as CSV. A filter may name the page the table is shown on — in a layout, the page wearing it: `@filter pr eq page.slug` (the last step of its address), `page.name`, `page.parent` (the last step of the page above); in the layout a ```route draws its rows with, `params.<segment>` (what the address gave) and `row.<field>` (a field of the row the route found: `@filter categoria eq row.categoria` + `@filter slug ne row.slug`, the other rows of its category; a tags or multi_select field gives its values to in, nin and contains_any). A filter may name the person reading: `@filter atleta eq viewer.username` (their space's name; `viewer.name`, the name they gave) lists the rows that name whoever is signed in, a visitor none — never the e-mail, which is no word of a page. A date filter may count from today, in the reader's time zone: `@filter due lte today`, `@filter updated_at lt -14d` (today, today+3d, -2w; on a datetime, the whole of that day: `lte today` runs to midnight tonight). A ```@period on the page (`name:janela options:7,14,30 default:7`) lets the reader pick the period for every block at once: `{janela}` in a filter's value is the number chosen (`@filter dia gt -{janela}d`), and in a metric line's label or the title it is printed (`label:"Últimos {janela} dias"`); `delta:previous` on a metric line over a window counted from today (`@sum alcance delta:previous`) says beside the number how it moved against the period of the same length just before: ▲ 1.3% up, ▼ 2.3% down, as a pill (.nt-data-delta--up, --down), with the sentence for a screen reader. `@count by:<select field>` counts the rows per option; `@sum field by:<select field>` and `@avg field by:` sum or average per option, the rows counted beside each, in one query. `label:"…"` on a metric line names it. `@ratio gasto / teto` is arithmetic between the block's own metric lines named with `as:` (`@sum gasto_mes as:gasto`), and `totals:true` puts the metric lines in a last row of the table, under their columns. view:metric draws only the metric lines, each a stat (the number large, its label under it) — a dashboard tile, and the stat of a `:::grid items:stat` item. view:index field:<field> lists the values of a field with how many rows hold each, every value a link with `link:` (`{value}` in it), so counts by tag or category come from the rows and are never typed. `@column created_at format:age` prints how long ago ("3d", "2w"); `updated_at`, the last time the row changed, is a column, a sort (`sort:-updated_at`) and an age the same way. Over a collection that holds rows for approval (`hold:anyone` on its @schema), a row waiting is drawn only for the collection's writers, marked, with Approve and Decline on it, and `@filter _held eq true` keeps only the waiting ones: a moderation queue (to anybody else it is empty). A field the schema marks `private` is no column for a reader who does not write the collection, and a block that filters, sorts or counts by one answers those readers with an error (validate says so). `@column title link:pr,ticket` links the text to the first of those url or computed fields that holds an address, `link:route` to the row's own page under its ```route, and `label:` on a link column is the link's text. `group:<select field>` on a table or view:cards draws the rows in a section per option that has rows, its head the option and its count, `collapsed:"A,B"` starting some closed, one search and one set of filters over every section. A public collection is public inside a space its reader may see; in a private space, a page published on its own (public, cut from the space's settings) shows a table of it to whoever opens that page, when everyone who may edit the page already writes the collection — the export and every other page stay private.

Renderizado no servidor.

Exemplo

```@data collection:inscricoes sort:-created_at limit:10
@filter status eq aberto
@count
@column nome label:"Quem"
@column status format:badge
```

Argumentos

collection string Obrigatório
The name of the collection inside this space: lowercase letters, digits and hyphens, 2 to 40 characters (coord-agents, never coord_agents — field names take underscores, collection names do not). Under a template's use, the bare name is the use's own collection; @space/name (this page's space) is always the space's own, shared.
limit integer Padrão: 25
How many rows per page (1–100). Defaults to 25. A board, a checklist and a calendar's period are one page: they show at most this many rows in all, and say how many more there are. Valores aceitos: de 1 a 100
offset integer Padrão: 0
How many rows to skip before the first page. Valores aceitos: de 0 a 100000
sort string
A field to sort by; a leading minus reverses it (`-created_at`, `-updated_at` for the rows changed last).
distinct string
One row per value of this field: the first in the sort order, so `distinct:pr sort:-created_at` shows each pull request's latest review. The limit, the counts and the pages are over the rows kept; rows with no value are one value.
include list
Reference fields to resolve, comma separated. Shown references are resolved anyway.
fields list
Which fields to show, comma separated. Defaults to every stored field plus created_at; updated_at only when named. With view:field, the fields shown as controls (`fields:status,due,done`), in that order.
scope enum
viewer: each person sees only the rows they created. Valores aceitos: viewer
empty string
What to say when there is no row to show.
export boolean
Adds CSV and JSON links for the whole filtered collection — the fence's filters, sort, scope and columns, but not its limit or offset. Unwritten (no default): on for view:sheet, off for every other view; export:false turns a sheet's off, export:true turns any view's on.
updated boolean Padrão: false
Prints, under the table, when a row of the collection was last added, changed or deleted, in the reader's clock and language.
page_param string Padrão: page
The query parameter this table pages on. Only for two tables on one page that both page (more rows than limit:): give them different ones. A table that never pages needs none.
filter_by list
Fields the reader may filter by, comma separated: select or multi_select fields this table shows, offering their options, or text and tags fields, offering the values the rows hold (filter_by:project, filter_by:destino) — of the rows the fence's own @filter lets through, the 30 most frequent, in alphabetical order; a row is in when its tags hold the one chosen. Five options or fewer render as tabs, more as a menu. Not a long_text, a file, a number or a date. It only narrows what the fence's own @filter lets through.
search list
Fields the reader may search, comma separated: text, long_text, email, url, select, multi_select or tags fields of the collection, or a computed field whose formula answers text (a key such as concat(sigla, "-", numero), searched for ADV-12), shown on the table or not (search:titulo,texto): one box searches them all, and a field the table does not show is searched without being shown. A reader who sees the table only through a view link or a page published on its own may not read the collection, so for them the box searches the shown fields alone (validate says which fields that leaves out). A search is not cached.
title string
A line above the rows, {count} replaced by how many rows the reader's filters leave: title:"{count} imóveis disponíveis".
filter_counts boolean Padrão: false
true: each filter_by tab and menu option says how many rows hold it (A fazer 20), and All how many there are — counted over the rows the fence's own @filter lines let through, never narrowed by the reader's choices, so the numbers stay put as the reader moves between tabs; one grouped statement per field.
sorts string
Orders the reader may choose, label:field pairs, comma separated, `-` before a field for descending (sorts:"Padrão:ordem,Valor maior:-valor,Valor menor:valor"): a menu above the rows; the fence's own sort: stays the order until the reader picks one.
sorts_menu enum Padrão: always
How sorts: is offered: always (a menu, the default) or auto (five orders or fewer as a row of tabs, the same links and look as filter_by's tabs, the chosen one marked; more as a menu). Beside the rows (controls:side) it stays a menu. Valores aceitos: always, auto
aside string
A short line under the reader's filters, in their column when controls:side (aside:"Não encontrou o imóvel desejado?"), with an optional button: aside_button: its words, aside_href: where it goes (an http(s) address or a /path).
aside_button string
The button's words: under aside:'s line, or — without aside:, with the controls on top — a button at the end of the controls' row (aside_button:Sugerir aside_href:/@ana/sugerir), as a catalogue's filter bar ends in "+ Suggest".
aside_href string
Where aside_button: goes: an http(s) address or a /path of this site.
aside_icon string
An icon of the set drawn before aside_button:'s words (aside_icon:plus-circle); `manual icons` lists them.
filter_min list
Number fields the reader may ask a minimum of, shown on the table or not, comma separated (filter_min:quartos,vagas): each is a row of buttons 1+ to 5+, and the chosen one leaves the rows with at least that many; choosing it again clears it.
filter_include list
Exactly the select, text or tags fields whose values readers may pick — filter_by's tabs and menus, filter_checks' boxes — shown on the table or not, comma separated (filter_include:tipo,cidade,bairro). Without filter_include or filter_except, those take only the fields the table shows. filter_text and filter_min name their own fields, shown or not, numbers included.
filter_except list
Readers may filter by every select field of the collection, shown or not, and every text or tags field the table shows, except these, comma separated (filter_except:nota,salario); no filter_text or filter_min may name them either. Not together with filter_include.
controls enum Padrão: top
Where the reader's filters and search stand: top (a row above the rows), end (the same row, at the end of the line: on the right of a left-to-right page), side (a column beside them, every filter a menu, the button the column's width; above them on a phone), or only (the menus and the button and no rows: a search bar whose button opens to:, where a table with the same id: lists them). Valores aceitos: top, end, side, only
apply string
The label of the button that applies the reader's menus and search (default: Apply). Like every word the table writes itself (Search, All, the pages), the default is in the page's language. apply:none leaves the button out: a menu applies as soon as it is chosen and the search when Enter is pressed (a search bar, controls:only, keeps its button).
labels enum Padrão: above
Where each menu's name stands: above it, or inside (its first option says it, "Tipo de imóvel" for all of them, as a home's search bar draws them; the name above stays for a screen reader). inside also takes the word Search off the search box, whose placeholder says it. Valores aceitos: above, inside
menus enum Padrão: auto
How a filter_by field is offered: auto (five options or fewer as tabs, more as a menu) or always (every one a menu, however few its options: an "All Teams" menu beside a search box). Valores aceitos: auto, always
id string
The table's own name, lowercase letters, digits and dashes, starting with a letter (id:imoveis): its reader's choices travel under it in the address (?data-imoveis_filter_tipo=Casa), so a link, or a search bar on another page with the same id:, opens it filtered. One per page.
style string
Wears a named style of the page's theme declared for:data (```style name:<name> for:data on a page under the theme's styles; manual styles): CSS scoped to this block's root and kept from reaching outside it. It reaches the published hooks — .nt-data-stats, .nt-data-stat, .nt-data-stat-value, .nt-data-stat-label, .nt-data-cards-kicker, .nt-data-cards-title, .nt-data-cards-line, .nt-data-cards-facts, .nt-data-table, .nt-data-chart, .nt-chart-bar, .nt-chart-line, .nt-chart-area, .nt-chart-marker, .nt-chart-focal, .nt-data-metric-value, .nt-data-delta, .nt-data-delta--up, .nt-data-delta--down, .nt-data-delta--flat, .nt-data-cards, .nt-data-empty, .nt-board-columns, .nt-data-tabs, .nt-data-tab, .nt-calendar-title, .nt-calendar-weekdays, .nt-calendar-weekday, .nt-calendar-days, .nt-calendar-day, .nt-calendar-day-number, .nt-calendar-item, .nt-calendar-item-title, .nt-calendar-item-name, .nt-calendar-item-time, .nt-calendar-item-line, .is-today, .is-outside, .has-color — and the block's reader controls (a form) stay out of its reach. Staff preview.
to string
With controls:only, where the search bar's button goes (an http(s) address or a /path): the page whose table has the same id:.
paging enum Padrão: simple
How the pages are offered when the rows run past limit:: simple (previous, page 2 of 9, next), numbers (the pages near this one as numbered boxes, and arrows), or more (one button under the rows, "Load more" in the page's language, that adds the next page's rows under them in place, on a table, view:cards or view:timeline; it is a link to the next page, so without a script the reader goes to that page, and every page stays reachable), or none (no pages at all: the first limit: rows and nothing under them, whatever page the address asks for — a dashboard's tile, `view:cards item:post limit:1 paging:none`). Valores aceitos: simple, numbers, more, none
more enum Padrão: default
With paging:more (or phone_limit:), how the "Load more" button is drawn: default (outlined in the page's ink, in the theme's button shape) or muted (a pill outlined in the secondary ink of the ground it stands on, a band's or the page's, its words bold in that ink, on no fill; under the pointer, and always on a phone, it fills with the theme's button, eased). Valores aceitos: default, muted
controls_fill enum Padrão: default
How the reader's search box, menus, text boxes, checkbox group and buttons are filled, as a @form's fill: does its fields: default (as they are drawn today), surface (the theme's surface colour), shade (black at 10% over whatever ground they stand on, no hairline: livros.design's pills on its green page) or deep (black at 15%, no hairline). Valores aceitos: default, surface, shade, deep
controls_radius enum Padrão: auto
The corners of the reader's controls in px (controls_radius:10), or pill (fully rounded), as a @form's radius:; auto keeps the theme's. Valores aceitos: auto, 0, 4, 8, 10, 12, 16, 20, 24, pill
controls_height enum Padrão: auto
The height in px of the reader's controls (controls_height:56) — the search box, a menu, a text box, the checkbox group and the buttons — as a @form's field_height:; auto keeps their own. Valores aceitos: auto, 40, 44, 48, 50, 56
controls_layout enum Padrão: wrap
How the reader's controls sit in their row: wrap (each its own width, wrapping as they fill the line) or bar (a filter bar: on a wide screen one row with the search box growing to fill what the others leave; under the theme's wide_from, in its medium range, the search box alone on a row and the others on the next; on a phone each takes the row). Valores aceitos: wrap, bar
phone_controls enum Padrão: all
Which of the reader's controls a phone shows: all, or search (the search box alone: a phone reader then has only the search, and the menus, text boxes and checkboxes are there from a wider screen on). search needs search:. Valores aceitos: all, search
search_icon boolean Padrão: false
true draws a magnifier at the start of the search box.
search_placeholder string
What the empty search box says (search_placeholder:"Pesquisar livro"); without it, Search and the names of the fields it searches, in the page's language.
filter_text list
Fields the reader may type a value for, one box each, comma separated (filter_text:autor,nota): a text, long_text, email or url field keeps the rows that contain what was typed, whatever its case, as search: matches; a number field keeps the rows with at least the number typed. Shown on the table or not, for every reader: naming a field here is the author choosing to let readers filter by it, as filter_include does, and the box prints none of its values. With labels:inside each box's name is its placeholder. The box applies with Enter or the button, without a script too.
filter_checks list
Fields the reader may tick several options of, comma separated (filter_checks:formatos): a select or multi_select field's options, or a text or tags field's values (as filter_by: offers them), as checkboxes in one group; a row is in when it holds ANY of the boxes ticked, and nothing ticked is every row. The same fields as filter_by: (the fields the table shows, unless filter_include or filter_except says which).
filter_dates list
Date or datetime fields the table shows, comma separated (filter_dates:quando), each a pair of boxes, from and to, that keep the rows between those two days, both included; either box alone leaves that end open, and a row with no date is left out once a box is filled. A datetime's days are the reader's clock. Only a field the table shows: not one view:metric, view:index or a whole row's component may leave out, and filter_include does not open one. Choosing days is not cached and spends the search budget.
view enum Padrão: table
table: rows and columns (the default). board: one column per option of the `group` field, in the order the schema lists them, each row a card; the first @column is the card's title and the others are small lines under it. The space's writers can drag a card, or use its "Move to" menu, to set the field to another option; everybody else sees the board read-only. calendar: the rows on the days of a month (or a week, `period:week`) by their `date` field, in the viewer's time zone; writers drag an item to another day or use its "Move to date" form. checklist: each row a checkbox bound to the `done` field, labelled by the first @column, with a count; writers tick and untick, everybody else sees the boxes disabled. field: one field (`field:status`) or a few (`fields:status,due,done`) of each row the filters select, as controls the space's writers change in place — a select, checkboxes, tag chips, a checkbox, a date, a number, a text box, each saved at once; everybody else sees the values. Meant for a filter that selects one row (`@filter slug eq x-launch`); several rows are one line each, up to `limit`, titled by the first @column or the row's own name. cards: a grid of cards — the first `format:image` @column is each card's picture, run to the card's edges (a further `format:image` column sits on it, above the tags); the title is the @column with `link:` (else the first other one), on one line (`title_lines:2` or `3` for more, cut with an ellipsis); @columns written before it are small lines above it (a code), the ones after it lines under it, cut at three; @columns with `icon:` share one line with their icons (`@column quartos icon:bed`); `format:badge` columns are small tags stacked on the picture, a `format:ribbon` column a band across its corner (sold); `over:` names the column written across its bottom (a price) — with no picture column these three are lines where they are written, like any other @column (a select is a badge by default); `button:` adds a small button to the title's link; `layout:carousel` lays them in one row that scrolls sideways, with Previous/Next, holding the first `limit:` rows of the sort with no pages; the reader's filters, search, `sorts:` and pages are the table's; `item:<component>` draws each card with a component of the theme, filled as view:item fills a row, each card opening the row's page under a ```route of the space (or `link:"/@ana/livros/{slug}"`). item: each row the filters select drawn whole by a component of the theme the page wears (`item:imovel`), its fields in the slots of the same names — the page of one row; in a layout, `@filter codigo eq page.slug` makes one layout the page of every row. metric: the @count, @sum, @avg, @min, @max and @ratio lines and nothing else — no rows, no table — each a stat, the number large and its `label:` (or what it computes) under it; a line with `by:` is a stat per option under its label. index: the values of one field (`field:destino`: a select, multi_select, tags or text field) among the rows the filters select, each with how many rows hold them (a tags row counts under each of its tags), the most frequent first, `limit:` of them; `link:"/@ana/saidas?data-saidas_filter_destino={value}"` makes each value a link — to a table filtered by it — and `count:false` leaves the numbers out. chart: the rows drawn as a chart by the ```@chart's drawing — the first @column the categories, the next ones (number fields) the series — `type:bar|line|area`, `look:spark` for a dashboard tile (no axes, grid, legend or title), `focal:last` (or a category, or a series) in the accent; the numbers stay a table for a screen reader and a reader without a script. action: one button (`label:"Arquivar time"`) that sets `set:` (`set:arquivado=true`: a select's option, a boolean's true or false) on the one row the filters select — a team's Archive, a task's Mark done — through the door every view writes through, drawn only to a writer of the collection who may write that row (where the staff try it); with no row it says `empty:`, with more than one it draws no button and tells the writer to name one. Valores aceitos: table, board, calendar, checklist, timeline, field, cards, item, metric, index, sheet, chart, action
group string
With a table, a select field whose options become sections (`group:status`): a head per option that has rows, in the schema's order, saying the option and how many rows the block's filters and the reader's search and choices let through under it, then any value no option holds, then "No value" when some row has none; the reader's search box and filters narrow every section at once. A grouped table is one page: up to limit: rows in all, and how many more there are. collapsed: starts some sections closed. With view:board, the select field whose options become the columns (`group:status`). Required for a board and refused without one. Rows with no value go to a last "No value" column, shown only when some row has none. The space's writers can drag a card (or use its "Move to" menu) to another column; a card dropped on another board of the same collection — on this page, in a side-by-side view, or in another window — takes the group field of the board it lands on. Everybody else sees the board read-only. With view:checklist, a select field whose options become sections (`group:room`), each with its own count; only sections with rows are shown. With view:timeline, a select field whose value heads each run of steps with the same one (`group:kind`), in the order the rows come. With view:cards (with item: or without), a select field whose options become sections (`group:status`), as on a table: a head per option that has rows with its count, one search and one set of filters over every section, one page of up to limit: cards; a section's cards keep the grid or layout:rows. Not with layout:carousel.
order string
With view:board, a number field that keeps the order of the cards inside each column (`order:rank`): writers can drag a card above or below another, or use Move up and Move down, and one move writes one row. A card dropped into another column takes a number halfway between its new neighbours there (a fraction; when there is no room the column is numbered again); Move to puts it last among that column's numbered cards. The numbers are compared only inside a column, so the same number in two columns means nothing. Cards with no number yet come last, in the fence's sort. Without order the columns keep the fence's sort and cannot be reordered. With view:checklist, a number field that keeps the order of the rows (inside each section): writers drag a row by its grip, or use Move up and Move down.
date string
With view:calendar, the date or datetime field each row is placed by (`date:due`). Required for a calendar. A datetime is placed on the day it falls on in the viewer's time zone (the one in their Settings, else the space owner's, else UTC), and shows its time. The space's writers can drag an item to another day, or use its "Move to date" form; a datetime keeps its time of day, unless dropped on an hour of a week (`period:week`), which sets that time (on the half hour). Everybody else sees the calendar read-only. With view:timeline, a date or datetime field printed under each step's title (`date:at`). The order is the fence's sort.
end string
With view:calendar, the field each row ends at, of the same kind as `date` (`end:until`). A row with an end lasts: on a datetime it shows its time range, over several days it is drawn on each of them, and one that began before the period shown is shown from its first day. A writer's move changes both fields by the same amount, keeping the item's length; on a week's hours (`period:week` on a datetime) a writer also drags an item's bottom edge to change its end (never shorter than half an hour), and drags down an empty slot to add a row from there to there. The end is never written before the start.
rows string
With view:calendar, lays the period out as a rota: one row per value of this field (a select's options in their order, or a text field's values), the days as columns, and a last row for the rows that have none. Moving items is not offered on a rota.
mark string
With view:calendar rows:, a row this field is set on (true, or any option) is drawn as a label on its cell's ground — OFF, Sick — instead of as an item.
state string
With view:calendar, a select field whose value draws each item as one of three looks: suggested (a dashed border), removed (struck through on a hatched ground) or moved (faded) — options of those names, or values mapped to them with states:. Any other value, and none, keep the calendar's look (`state:status`). With view:timeline, the field each step's marker shows: a select whose options are done, current, upcoming, error and skipped, or one mapped to them with states:; or a boolean, done when true.
color string
With view:calendar, the field whose value gives each item its colour (`color:goal`): a value that names a colour (`green`, `#36884d`) is that colour; otherwise a select's option takes the hue of its place in the schema, from the theme's palette for labels (the first option blue, then violet, amber, rose, teal, green, orange and slate, then again). A row with no value keeps the calendar's own look. With view:cards, the field whose value paints each card's panel (`color:cor`): a hex the row holds (#c42562), a colour word (green, verde), a select's option by its place in the schema, or one of the theme's own colours by name (accent, accent-2, accent-3, inverse); the card's words, secondary lines and links are picked to read on it. A row with none of these keeps the card's own look.
done string
With view:checklist, the boolean field each row's checkbox shows and sets (`done:packed`). Required for a checklist. The space's writers tick and untick the boxes, which saves the field at once; everybody else sees them disabled. Not the @checklist block, which keeps ticks in the reader's browser.
tags string
With view:checklist, an open tags field: writers search existing tags or create one while working, with automatic colors. Several tags can describe each row without marking it done.
phone_limit integer
On a phone, this many rows instead of limit:, on a table or view:cards (grid or rows, not a carousel). Fewer (phone_limit:6 beside limit:24): the rest hidden on a phone under a "Load more" button that shows phone_limit more at each press, then, with paging:more, brings in the next page's rows; wider than a phone every row of the page shows. More (phone_limit:4 beside limit:3): a page reads phone_limit rows, a phone shows them all, and a wider screen shows limit: of them — when the table pages, the rest under its own "Load more", limit more at each press, so no row is skipped. One read either way. Without a script the button shows the rest of the page at once. Valores aceitos: de 1 a 99
open enum
Where a row's link opens, on a table or view:cards: page (the default) goes to it; drawer draws that page — the row's page under a ```route, or link:'s address — in a panel beside the list, without leaving it, with Previous and Next through the rows of the list and a link to open it as a page; the page's own controls (`@data view:field`) work in it. A link to another site, a file or this page itself goes as it always does, and so does a click with ⌘, Ctrl or Shift held. Without a script, every link goes to its page. Valores aceitos: page, drawer
bulk list
On a table or view:cards, the fields a writer of the space may set on several rows at once (`bulk:status,arquivado`): every row gets a box to tick (and the table's head one for all of its page), and once one is ticked a bar says how many and offers, for each field, the values it may take — a select's options, yes or no for a boolean (an `arquivado` boolean is how a row is archived). Choosing one writes it on every row ticked, as a change in place does, and the list is drawn again. A select or a boolean field of this collection, stored (not computed). Readers and visitors see the list as it is, with no box.
collapsed list
With group: on a table or view:cards, the sections that start closed, by their option, comma separated (collapsed:"Concluído,Cancelado"); "No value" (in the page's language) names the section of rows with none. The reader opens and closes any section, without a script too.
totals boolean
On a table, totals:true adds a last row of the block's metric lines, each under a column: the column its as: names, else the column of its field (@sum gasto under @column gasto). A @ratio named like a column (@ratio gasto / teto as:uso) is that column's total: the ratio of the sums. The numbers are over every row the filters keep, not only the page shown, and a line the row draws is not drawn again above the table. A line by a field stays above; a table with no line under a column refuses totals. On view:sheet the block's metric lines are the sheet's last row unless totals:false: each under the column its as: names, else the column of its field, as on a table with totals:true.
height enum
With view:board or view:calendar, how tall a column (or a week's day) may grow before its cards scroll inside it: short, medium (the default, about two thirds of the screen), tall, screen, or auto (no bound: the column grows the page). A theme or a page changes the default with --nt-board-height. Valores aceitos: auto, short, medium, tall, screen
columns list
With view:board, which options of the `group` field become columns, in this order, comma separated (`columns:"todo,doing,review"`). Rows holding any other option, or none, are not on the board and take none of its `limit`. `columns:used`: only the options some row the board's filters let through holds, in the schema's order (a board in a layout shared by teams whose rows use different options). Without it, every option is a column, in the schema's order.
wip string
With view:board, work-in-progress limits per column, as option=limit pairs separated by commas (`wip:"doing=3,review=2"`). The column's count shows as "n/limit", counted over every row the board's filters let through (not only the cards shown), and its header is marked when the count is over the limit. Moves are not refused.
item string
With view:board, a component of the theme the page wears that draws each card (`item:tarefa-cartao`), filled with the row as view:cards fills its cards: the row's fields in the slots of the same names, a list of the component one entry per value. The board keeps its columns, counts, wip and moves (the grip and the Move to menu stay the board's); each card opens the row's own page under a ```route of this space, or link:, or nothing with link:none. With view:timeline, a component of the theme the page wears that draws each step (`item:passo`): the row's fields fill the component's slots of the same names, as text, and a list of the component (`list fotos: url`) one entry per value of the field of its name — each option of a multi_select or tags, each line of a text, its fields separated by `|`. The step's marker is still the row's state:. With view:cards, a component of the theme the page wears that draws each card (`item:livro`), filled with the row as view:item fills it: the row's fields in the slots of the same names, as text, a list of the component one entry per value, and a line whose slots the row leaves empty left out. The grid keeps its per_row, gap, limit, sort, filter_by, search, pages and layout:carousel; the component draws the card's look, so there is no panel around it unless surface:card. Each card opens the row's own page: link:, else the address a ```route of this space gives the row (`:slug to: livro collection: livros`). With view:item (where it is required), the component that draws each row the filters select, whole.
link string
With view:board item:, where each card goes, as on view:cards: link:"/@ana/tarefas/{chave}", a field alone that holds the address, or none; without it, the row's own page under a ```route of this space. With view:cards, where each card goes, {field} standing for that field of the row (URL-encoded): link:"/@ana/livros/{slug}", a /path or an http(s) address; a field alone (link:"{site}") is the address the row holds, as it is, when it is one. A row whose field is empty has no link. Without it, an item: card opens the address a ```route of this space gives the row; a card without item: keeps its title's own link first. link:none: no card is a link (an item: card whose component holds its own links or a :::drawer), and a column's own link: stays. With view:index, where each value goes, {value} standing for it (URL-encoded): a /path or an http(s) address, or ?… for this page. To list a table filtered by the value, give that table an id: and use its filter parameter: link:"/@ana/saidas?data-saidas_filter_destino={value}" (the table filter_by's the field). {value_slug} is the value as a step of an address, made the way every page's address is (lowercase, accents dropped, spaces and punctuation as dashes: "Design Gráfico" is design-grafico), for a page per value: link:"/@ana/categoria/{value_slug}"; a value with nothing of a slug left has no link.
states string
With view:calendar state:, how the field's values map to an item's looks, as value=look pairs separated by commas: `states:"Proposta=suggested, Cancelada=removed, Remarcada=moved"`. With view:timeline state:, how the field's values map to a step's states, as value=state pairs separated by commas: `states:"Entregue=done, Em trânsito=current, Falhou=error"`. A value it does not name, and one that is a state's own name, keep their own.
period enum
With view:calendar, month (the default: whole weeks) or week (seven days), each week from the day `week_start` names (Monday by default). Readers move to the previous or next period, or back to today, with links beside the title; only the rows of the period shown are read, up to `limit`. Valores aceitos: month, week
hours enum
With view:calendar period:week on a datetime, the hours drawn: auto (the default) from 8 to 18, reaching earlier or later when an item does; work, 8 to 18; full, the whole day. Each item sits at its time, as long as it lasts, beside the ones it overlaps; a narrow page lists them instead. Valores aceitos: auto, work, full
days enum
With view:calendar period:week, the days drawn: all (the default, seven) or weekdays (Monday to Friday, a work week, whatever `week_start` says); only the rows of the days drawn are read. Valores aceitos: all, weekdays
week_start enum
With view:calendar, the day each week starts on: monday (the default, ISO 8601), sunday or saturday — the same for every reader of the page. Valores aceitos: monday, sunday, saturday
start string
With view:calendar, the day whose period the page opens on instead of today's: a date (`start:2026-10-13`) or a day counted from the reader's today as @filter counts it (`start:today+2d`, `start:-1w`), within ten years of today. Readers still move to the previous or next period, and "Today" takes them to today's.
direction enum
With view:timeline, vertical (the default) runs down the page; horizontal runs across as a stepper and turns vertical when the page is narrow. Valores aceitos: vertical, horizontal
field string
With view:field, the field shown as a control the space's writers change in place (`field:status`): a select for a select, checkboxes for a multi_select, chips for tags, a checkbox for a boolean, a date (or date and time) input, a number input, a text box for text, long_text, email and url. A files field is its files, and for a writer a drop zone where files are dropped, pasted or picked and each taken out, where flows' staff try it (`fields:anexos`). A reference, a file, a computed field, created_at and updated_at show their value. Everybody else sees the value. A value that names a colour (`green`, `verde`, `#36884d`) shows a small square of it beside the word. For several fields use `fields:status,due,done` instead (one or the other). With view:index (where it is required), the field whose values are listed, each with how many rows hold it: a select, multi_select, tags or text field (`field:destino`). A tags or multi_select row counts under each value it holds.
over string
With view:cards, the @column written across the bottom of each card's picture, in white on a darkened band (a price, a date): `over:preco`.
ratio enum
With view:cards, the shape each card's picture is cropped to (4/3 when left out). Valores aceitos: 4/3, 5/4, 9/7, 3/2, 1/1, 16/9, 3/4
per_row enum
With view:cards, at most this many cards per row on a wide screen (as many as fit when left out); a phone gets one. Valores aceitos: 2, 3, 4
medium_per_row enum
With view:cards, at most this many cards per row in the theme's medium layout: wider than a phone and narrower than the theme's wide_from (medium_per_row:2 beside per_row:3, a Framer site's tablet layout). Without wide_from in the theme there is no medium layout and per_row: holds. Valores aceitos: 2, 3, 4
gap enum
With view:cards, the room between the cards, a step of the theme's scale like a :::grid's space: (3 when left out; 2 is a listing's tight 16px). Valores aceitos: 1, 2, 3, 4, 5
column_gap enum
With view:cards, the room between cards side by side, in px (column_gap:24); beside gap:, it wins for the columns. Valores aceitos: 8, 12, 16, 24, 32, 40
row_gap enum
With view:cards, the room between rows of cards, in px (row_gap:12); beside gap:, it wins for the rows. 0 to 4 for a dense list (layout:rows) whose rows touch. Valores aceitos: 0, 2, 4, 8, 12, 16, 24, 32, 40
row_padding enum
With view:cards, the room above and below the words inside each card, in px (row_padding:4): with layout:rows, item:, `avatar:small:` and `pill:small:`, a row 28-32px tall. Valores aceitos: 0, 2, 4, 6, 8, 12
photo_height enum
With view:cards, each picture this tall in px whatever the card's width (photo_height:254), cropped to fill; instead of ratio:. Valores aceitos: 200, 220, 240, 254, 280, 300
card_height decimal
With view:cards, every card this tall in px whatever it holds (card_height:530, or 530.8: one figure after the point), the tail cell too: with item:, the component's last block sits at the card's foot and a :::cover in it fills the room between, its picture centred. phone_card_height: is the height on a phone (card_height there when left out). Valores aceitos: de 160 a 900
phone_card_height decimal
With view:cards, every card this tall in px on a phone (phone_card_height:461.6); alone, wider screens keep the cards at their own heights. Valores aceitos: de 160 a 900
medium_card_height decimal
With view:cards, every card this tall in px in the theme's medium layout, wider than a phone and narrower than the theme's wide_from (medium_card_height:688); card_height there when left out, or without wide_from in the theme. Valores aceitos: de 160 a 900
inset enum
With view:cards, room inside the grid's left and right edges, in px (inset:12), as a grid whose cards carry half a gutter each is drawn. Valores aceitos: 8, 12, 16, 24
layout enum
With view:cards, `carousel` puts the cards in one row that scrolls sideways, each stop a card at the row's start: touch, trackpad, the arrow keys with the row focused, and Previous/Next buttons once a script runs; nothing moves by itself. `per_row:` is the most that show at once (cards keep a listing card's width, so a narrow screen shows fewer); `limit:` is how many it holds, the first ones in the sort, with no pages. `rows` lists them one under the other, each a small picture on the left (6rem wide, cut to `ratio:`) and its title and lines beside it, as a sidebar's "Popular posts" draws them; with `surface:none` they are bare rows. grid (the default) wraps them in rows. Valores aceitos: grid, carousel, rows
phone enum
With view:cards (the grid), what the cards do on a phone, as a :::grid's phone: does: stack (the default) one under the other; scroll keeps them in one row that scrolls sideways, the next card peeking in, each snapping to the row's start (the recent obituaries on a home's phone layout). Wider than a phone it is the grid it was; layout:carousel already scrolls everywhere. Valores aceitos: stack, scroll
surface enum
With view:cards, card (the default) draws each card on a panel; none leaves the panel out: the picture with its own rounded corners, and the title and lines under it on the page's ground. With view:metric, card (the default) draws each stat on a tile; none leaves the tile out: the number large in the heading colour and its label under it, on the ground the block stands on. Valores aceitos: card, none
title_font enum
With view:cards, the font of each card's title: body (the default, the text's font) or heading (the theme's heading font, as a blog whose post titles are set like its headings). Valores aceitos: body, heading
title_lines enum
With view:cards, how many lines a card's title may run to before it is cut with an ellipsis: 1 (when left out, a listing's one line), 2 or 3 (a blog's post titles). Valores aceitos: 1, 2, 3
button string
With view:cards, a small button under each card's lines, to the title's link: `button:"Details"`, or with an icon of the set first, `button:"icon:plus Details"`.
tail enum
With view:cards, next makes the block right after the fence, in the same band, the grid's last cell, the size of a card and in the next free cell after the last one: a "Suggest a book" card beside the 13th book, in its row. It follows the last card shown, on every page, after a search or a filter and after "Load more" (paging:more), and alone when no row is left; on a phone it is the last of the stack. The block is drawn where it stands and moved in, so a ```@form keeps its own frame; write it as a :::card to give it a card's panel and height. Not with layout:carousel or layout:rows. The page, its frames and the reader's preview place it; the editor shows it under the cards. Valores aceitos: none, next
count boolean
With view:index, whether each value shows its count (the default) or only its name (count:false).
index_sort enum
With view:index, the order of the values: count (the most rows first, the default; a tie by name) or name (A to Z). Either way the values listed are the limit: most frequent. Valores aceitos: count, name
type enum
With view:chart, the drawing: bar (the default), line, or area (a line with the ground under it filled, fading down). Valores aceitos: bar, line, area
look enum
With view:chart, page (the default): the chart at the page's width, with its axes, grid and legend; spark: a dashboard tile's chart — no axes, no grid, no legend and no title, bars with rounded tops, an area fading under its line — its numbers kept as a table for a screen reader. Valores aceitos: page, spark
focal string
With view:chart, the one item drawn in the accent (--nt-chart-focal): a category as the first @column prints it, a series by its label, or `last` for the last row (today's bar of a tile).
set list
With view:action, what the button sets on the one row the filters select: field=value pairs separated by commas (`set:arquivado=true`, `set:"status=Feito,arquivado=true"`), each a select field and one of its options, or a boolean and true or false. The filters must select exactly one row (none: the empty message; more: no button, and the writer is told). Drawn only to a writer of the collection who may write that row; the press writes through the same door and checks as a change in place.
label string
With view:action, the words on the button (`label:"Arquivar time"`).
confirm string
With view:action, a question asked before the button writes (`confirm:"Arquivar este time?"`).
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. Optional children: `@filter field op value` (op: eq, ne, gt, gte, lt, lte, contains, contains_any, in, nin, empty, present; `in` and `nin` take a,b; `empty` and `present` take no value — `@filter day empty` keeps the rows with nothing in the field (missing, null, a blank text, an empty list), `present` the others; every line must hold; a field takes each op once, but `ne` may repeat, each line leaving out one more value: `@filter state ne done` + `@filter state ne dropped`), `@column field label:"…" format:… icon:…` (one field of this collection; `label:" "` is a heading with no words, as an icon column has, the field still named to a screen reader; `icon:` an icon of the set drawn before the value; a reference like `@column prova` prints the row it points at, and there are no dotted paths; `format:image` on a url or text field shows the picture as a thumbnail kept on this site, and a click opens it; `format:icon` on a text or select field draws the icon of the set its value names (`target`, `rocket`; a name the set lacks prints as written), and `tint:<field>` colours it in a square of the colour that field holds — a colour like `green` or `#36884d`, or a select's option by its order in the palette (`@column icon format:icon tint:color`); a file of this site — a /f/<token>/<name> path, what an upload gives — shows itself, and on a url or text field `format:video` plays it in a small inline player and `format:file` links it for download under its name; `format:progress of:<number or computed field>` on a number or computed field draws it out of that other number of the same row, a bar and "5 / 10" in a table and the words elsewhere — saved of a goal, an instalment of how many, spent of a limit, a team's done tasks of all of them (two rollups: `@column feitas format:progress of:total`); `format:percent` on a number or computed field prints a ratio as a share of a hundred (0.82 reads 82%) and `format:money` an amount with two places, both in the reader's language and with no currency sign; `format:relative` on a date, a datetime, created_at or updated_at says today, tomorrow, yesterday, a weekday for the six days ahead, else the short date ("Nov 19", "19 de nov."), and `format:date-short` the short date, the year only when not this one, both in the reader's days; `overdue:danger` (or `warning`) on such a column draws its value in that tone once its day is past; `format:markdown` on a text or long_text field draws its markdown as the page's own (headings, lists, a checklist, a quote, links; the page's allowlist, and no block runs from it) where the staff try it, and prints it as written elsewhere, validate saying so; a pill (`format:badge`: a select, multi_select, tags or boolean by default; one pill per value of a multi_select or tags, a boolean as Yes or No in the reader's language) takes a colour, first that answers: `colors:"A fazer=gray,Feito=green"` per value (a colour of the palette or a hex), `tint:<field>` (what another field of the row names), and a tags field's own tag colours; `icons:"Alta=chevron-up"` draws an icon of the set in the pill; `link:route` links the cell to the row's own page under the ```route of this space that draws the collection, with no field holding the address (a row that cannot fill the route has no link), and `link:` also takes a computed field whose text is an address; `format:track` on a text or long_text field draws the GPS track it holds, small, as ```@track draws one (manual @track), in a table and on view:cards, its words elsewhere; `format:duration` on a number or computed field prints a time — seconds by default (`unit:s`) as a stopwatch, 743 reads 12:23 and 3725 reads 1:02:05, minutes or hours (`unit:min`, `unit:h`) in words to the minute, 84 reads 1h 24min and 45 reads 45 min — and `format:pace` minutes per km written as a decimal as a pace, 6.2 reads 6:12 /km (`unit:mi` names another distance); an empty value, and a pace of zero, stay empty; `suffix:"km"` on a number column writes the number in the reader's language and the word after it, on a space that does not break — 7.9 reads 7,9 km in Portuguese — and goes with no format that writes its own words; `prefix:"+"` is its mirror, a short mark before the number with no space (+76), with the same checks; `format:position` on any field prints the row's place in the table's sort instead of the field — across pages, rows equal in the sort's first field sharing a place (1, 1, 3), under the heading "#" unless `label:` says another — on a table and view:cards, a leaderboard's column (`@data collection:corridas sort:tempo` + `@column atleta format:position`)), and the metrics `@count`, `@sum field`, `@avg field`, `@min field`, `@max field`, each with an optional `label:"…"`; `by:<select field>` on `@count`, `@sum` and `@avg` gives one line per option, in the schema's order (`@sum valor by:categoria`); `decimals:0` (0 to 6) on a metric line rounds its number half up to that many places and prints them all (`@avg nota decimals:0` reads 85, not 84.50); without it a whole number prints bare and any other with two; `format:percent`, `format:money`, `format:duration` or `format:pace` (with its `unit:`) on a metric line prints its number as a column of that format does (`@sum minutos format:duration unit:min` reads 2h 9min), and `suffix:` writes its word after the number (`@sum distancia suffix:km`), `prefix:` its mark before it (`@sum seguidores_novos prefix:"+"` reads +76). `as:<name>` names a metric line, and `@ratio <arithmetic>` works a number out of the lines named so — their names, numbers, + - * / and parentheses, and nothing else: no field, no row, no function (`@sum gasto_mes label:"gasto" as:gasto` + `@sum limite_mensal label:"teto" as:teto` + `@ratio gasto / teto format:percent label:"do teto usado"`: 820 of 1000 reads 82%); the lines' numbers are over the same filtered rows, a division by zero, a line with no value (a rollup the reader may not read) or a number at or past 1e30 is no value, a @ratio may name another @ratio (never in a circle, at most 8 deep), and it takes label:, decimals:, format: and as: like the others; over lines by the same field it is one number per option (`by:` on it may repeat that field), and over lines by different fields, or by: on a @ratio of lines by none, it is refused. `@sample field:value field:value` (up to 10 lines) is a row drawn while the collection has none, marked as an example and shown ONLY to who may write the collection (a reader, a visitor, a view link and a mail get `empty:`): a template's board or checklist shows its shape to its author before the first real row; on a table, view:cards, board, checklist or timeline, read-only, and gone the moment one real row exists.

Filhos aceitos

@filter, @column, @count, @sum, @avg, @min, @max, @ratio, @sample

@diff renderiza: servidor

A patch as a review reads it — what `git diff` prints — one section per file, coloured by language, stacked or side by side. Select a line to annotate it.

Renderizado no servidor.

Exemplo

~~~@diff title:"Greeting takes a mark"
--- a/greeting.rb
+++ b/greeting.rb
@@ -1,3 +1,3 @@
 def hello(name)
-  "Hello, #{name}"
+  "Hello, #{name}!"
 end
~~~

Argumentos

title string
A line above the files: what the change is.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Texto livre. The patch: the output of `git diff` (or any unified diff). Fence it with ~~~ so the backticks inside a patch stay text.

@event renderiza: servidor

A moment to put in a calendar: the date and time (or a whole day), how long, where — printed, with a Google Calendar link and an .ics file for Apple and Outlook.

Renderizado no servidor.

Exemplo

```@event to:2026-10-17T14:00-03:00 duration:60 title:"First meeting" where:https://meet.example/abc zone:America/Sao_Paulo
```

Argumentos

to string Obrigatório
When it starts, as 2026-10-17T14:00-03:00. With no offset it is read as UTC; a date alone is its first minute. With all_day:true, the day (2026-10-17).
title string Obrigatório
What the calendar entry is called.
duration integer Padrão: 60
How long it lasts, in minutes (5 to 1440). Defaults to 60. Valores aceitos: de 5 a 1440
where string
Where it happens: a place, or the address of the call (https://…).
details string
A line for the calendar entry's notes: what to read, what to bring.
zone string
The time zone the moment is printed in, as the tz database names it (America/Sao_Paulo). Without it the moment is printed in UTC.
all_day boolean Padrão: false
true: a whole day — the day of `to`, the same on every calendar, with no time; duration and zone are not read.
days integer
How many whole days in a row, from the day of `to` (1 to 90): a trip, a conference. Makes the block all_day. Defaults to 1. Valores aceitos: de 1 a 90
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@flashcards renderiza: servidor

A deck of cards to drill: a term and its meaning, a question and its answer, a word and its translation — or a self-test, with questions the reader answers and a score. One card per line, front | back; a line of three parts or more is a multiple-choice question. Turned by a click or the keyboard; printed in full, answers included, without a script.

Renderizado no servidor.

Exemplo

```@flashcards label:"DNS do envio"
SPF | Diz quais servidores podem enviar em nome do domínio.
DKIM | Assina cada mensagem; o destinatário confere no DNS.
```

```@flashcards label:"Self-test"
Which port does a mail client submit on? | 587 :: The submission port, with STARTTLS. | 25 :: Port 25 is for servers talking to servers. | 80 | 443
Which record signs each message? | DKIM | SPF :: SPF names the servers; it signs nothing. | MX
```

Argumentos

label string
A line above the deck saying what it drills.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. One card per line. `front | back` is a card that turns. `question | right answer | wrong | wrong …` is a multiple-choice question: the FIRST answer after the question is the right one, and the options are shown shuffled (the same order on every render, so it works printed and without a script). An option may say why after ` :: ` (a space, two colons, a space): `25 :: Port 25 is server to server.` — shown once the reader picks. The reader's picks and score stay in their browser; to keep each learner's answers on the server, use a @form with scope:viewer.

@form renderiza: servidor

A form that writes a row into a collection of this space. Only renders for somebody the collection accepts.

Renderizado no servidor.

Exemplo

```@form collection:inscricoes submit:"Quero entrar"
nome
email required
```

```@form collection:lista layout:inline submit:"Assinar"
email required
```

```@form collection:inscricoes mode:edit own:true
nome
email required
```

```@form collection:inscricoes preview:true
nome
email required
```

```@form collection:anuncios labels:inside button:full submit:"Enviar cadastro"
## 1. Owner
nome
telefone width:1/2
email width:1/2
## 2. The property
rua width:3/4
numero width:1/4
```

```@form collection:contatos submit:"Talk to us"
nome required
interesses as:checkboxes
```

A photo journal's check-in on a phone: one tap opens the camera, and the time is already filled in:

```@form collection:checkins submit:"Check in"
foto as:camera
quando default:now
nota
```

In two steps, with a progress bar:

```@form collection:reunioes steps:bar submit:"Schedule a meeting"
step: About you
nome required width:1/2
sobrenome required width:1/2
email required
---
step: How we can help
servicos as:checkboxes
como_soube
```

In the layout a ```route draws each obituary with (`:slug to: obituario collection: obituarios`), its condolence wall:

```@form collection:condolencias submit:"Leave a condolence"
obituario from:params.slug
nome required
mensagem long_text
```

```@data collection:condolencias
@filter obituario eq params.slug
@column nome
@column mensagem
```

One kudos per athlete on each activity's page (its @schema says `unique:"atividade,atleta"`), and the button that takes back one's own:

```@form collection:kudos submit:"Dar kudos" undo:"Desfazer kudos" undone:"Kudos desfeito."
atividade from:page.slug
atleta from:viewer.username
```

Argumentos

collection string Obrigatório
The name of the collection inside this space: lowercase letters, digits and hyphens, 2 to 40 characters (coord-agents, never coord_agents — field names take underscores, collection names do not). Under a template's use, the bare name is the use's own collection; @space/name (this page's space) is always the space's own, shared.
success string
What to say after a row goes in. Defaults to a thank-you. Drawn again within 12 hours, the form says when it was sent, with Send another, instead of showing itself empty: in the browser that sent it, and on any device for a person signed in. On a collection that holds the sender's rows for approval (`hold:anyone` on its @schema), the default says the entry waits for review.
submit string
The label of the button. Defaults to "Send".
show_left boolean Padrão: false
true: on a collection whose @schema says capacity:, the form says how many places are left ("12 places left"), counted when the page is drawn; with per:, nothing (each value has its own, and a full one is drawn off in its select).
full string
What the form says in its place when no place is left (capacity: on the collection's @schema, and no waitlist:). Defaults to saying every place is taken.
waitlisted string
What to say after a row goes on the waitlist (waitlist: on the collection's @schema), in place of success:. Defaults to saying the places are taken and the row is on the waitlist, in the order it came.
soon string
What the form says in its place before the collection's opens: (on its @schema). Defaults to saying when it opens, on the space owner's clock.
closed string
What the form says in its place after the collection's closes: (on its @schema). Defaults to saying it closed.
duplicate string
What the form says over its fields when the row it sent holds the values of the collection's `unique:` fields that another row holds already (`duplicate:"Você já deu kudos nesta atividade."`). Defaults to saying a row with those values is already there, naming the fields.
undo string
The words of a button that takes back the row this form keeps for the person signed in (`undo:"Desfazer kudos"`; an icon of the set before them, `undo:"icon:x Desfazer"`, as submit: takes one): on a collection whose @schema says `unique:`, once they have the row the form would write — its key made only of fields the page writes (`from:`), the person among them (`atleta from:viewer.username`) — the button stands in the form's place, and pressing it moves that row to the trash (a writer can restore it) and draws the form again. Only a row the person sent themselves: one the owner seeded, wrote on the Collections screen or through the MCP is never offered or taken, even when its fields name them. Not with mode:edit; refused on a collection with no unique:, and on a form whose key has a field the sender types.
undone string
What the form says after `undo:` took the row back (`undone:"Kudos desfeito."`). Defaults to saying it was taken back.
scope enum
viewer: require sign-in and attribute the row to the sender. Use scope:viewer on reads to show only that person's rows; collection visibility still controls other reads. Valores aceitos: viewer
mode enum Padrão: create
create: a form that adds a row. edit: a form that changes one of the viewer's own rows; it needs own:true. To change any row's fields, a writer uses `@data view:field fields:…` (edits them inline) or the Collections screen. Valores aceitos: create, edit
layout enum Padrão: stacked
stacked: one field under the other, each with its label. inline: the fields and the button in one row — for a signup of one or two fields; the labels become the hints inside the fields and stay readable to a screen reader. Valores aceitos: stacked, inline
labels enum Padrão: above
above: each field's name over it. inside: the name is the hint written in the empty field, and a select opens on it — how a site's contact or listing form is drawn; a screen reader still reads the label. A checkbox keeps its label beside it; a date, which shows the browser's dd/mm/yyyy and no hint, floats its name small inside the box over the value; a file and a list of options keep their name above. Valores aceitos: above, inside
button enum Padrão: auto
full: the send button takes the form's whole width, as a long site form ends. Valores aceitos: auto, full
shape enum Padrão: default
pill: fully rounded fields and button, the fields on the ground of the band they stand on (a dark footer keeps them dark). outline: the fields keep the theme's corners and are drawn the same way, on the ground of the band or card they stand on behind a hairline (a lead form on a dark-green card). With `submit:"icon:arrow-right"` the button is a round icon alone, its name still read to a screen reader. Valores aceitos: default, pill, outline
fill enum Padrão: default
default: each field filled with the page's background, or, on a dark band or card (inverse, accent, gradient), with a step of the band's own ground. surface: filled with the theme's surface colour wherever the form stands — grey fields on a white page — and the same step off the ground on a dark band or card. shade: black at 10% over whatever ground the form stands on (#e6e6e6 on a white card), with no hairline. deep: black at 15%, with no hairline. shape:pill and shape:outline keep their own fields on a dark ground. Valores aceitos: default, surface, shade, deep
radius enum Padrão: auto
The corners of the fields AND the send button, in px (radius:10), or pill (fully rounded); auto keeps the theme's: its field corners and its button shape. Valores aceitos: auto, 0, 4, 8, 10, 12, 16, 20, 24, pill
field_height enum Padrão: auto
The height in px of every field of one line (text, email, a select…) and of the send button (field_height:50); a long_text box keeps its rows. auto keeps the form's own (44px, or a pill's 50). Valores aceitos: auto, 40, 44, 48, 50, 56
field_space enum Padrão: auto
The space in px between one field and the next, and between the last field and the button (field_space:24); auto keeps the form's own (14px). layout:inline keeps its fields in one row. Valores aceitos: auto, 8, 12, 16, 20, 24, 32
label_space enum Padrão: auto
The space in px between a field's label and its box (label_space:8); auto keeps the form's own (4px). A label drawn inside the box (labels:inside, a date's) keeps its place. Valores aceitos: auto, 0, 4, 6, 8, 12
label_align enum Padrão: inherit
Where each field's label, hint and error sit: inherit (as the text around the form: centred in a centred card or band) or start (at the start whatever the card or band does, as a site's newsletter card centres its title and note but not its labels). Valores aceitos: inherit, start
text enum Padrão: inherit
The size of the fields' and the button's words in px (text:14), whatever the text around the form; inherit keeps it. Valores aceitos: inherit, 12, 13, 14, 15, 16
steps enum Padrão: count
With `---` lines in the body (a form in steps), how the reader is told how far along they are: count ("Step 1 of 2" over the step), bar (a progress bar with "1/2" beside it) or none (nothing shown; a screen reader still hears which step it is). Over the step on screen, the earlier steps' answers, each with Change to go back to it. Valores aceitos: count, bar, none
advance enum Padrão: next
In a form in steps: auto goes on to the next step as soon as the reader chooses, in every step whose only field is a select (drawn as cards or as a list), with no Next to press; a choice made with the arrow keys waits for Enter, and the last step still sends with its button. next (the default): Next goes on. `advance:auto` on one select's line does it for that step alone. Valores aceitos: next, auto
another enum Padrão: none
What the form does after a row goes in: none (the default) draws the thank-you with a "Send another" link; always draws the form again, empty, with the thank-you over it, for entering rows one after the other; choice draws a "Create another" box beside the button that the reader ticks to get the form back (always), or leaves to get the thank-you (none) — Linear's "Create more". Inside a :::drawer edge:center the dialog stays open either way. Not with mode:edit. Valores aceitos: none, always, choice
own boolean Padrão: false
true: list the rows this viewer created, each with a link that opens it in the form. Signed-in people only.
preview boolean Padrão: false
true: the form as it would look — fields, labels, layout, the button's words — with the button disabled and a note that it sends nothing, shown to whoever may read the collection or send through it, even when the collection accepts nobody; anyone else gets the closed notice. No form element and no address to send to, so nothing is ever written. For the docs, a theme's or a layout's preview, a mockup.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. One field per line, a subset of the collection's schema: `email required`, `nome`, `mensagem long_text`. Options must match the collection schema; change @schema first to override them. `width:1/2` on a line (1/4 1/3 1/2 2/3 3/4 full) puts fields side by side, on a phone one under the other. `icon:user` on the line of a field of one line of text (text, email, url, number) draws that icon of the set at the start of the box, as a site's lead form marks its name and e-mail fields (`nome icon:user`, `email icon:mail`; manual icons). `label:"Seu nome"` on a line is what this form calls the field, and `placeholder:"João"` what its empty box shows (a field whose box shows words, or a select, whose blank choice it is): the form's words, never the schema's, which keeps its own label for every other table and form. `hint:"Considerando 2 encontros por mês."` on a line is a line of help drawn under the field, read with it by a screen reader. Any word a line does not know is refused, by validate too, with the words a line takes. `as:checkboxes` on a multi_select's line (`interesses as:checkboxes`) draws a box to tick for each option instead of a list box; the same list is sent, and a required one asks for at least one box. `as:camera` on a `file` field's line (`foto as:camera`) opens a phone's rear camera on a tap instead of the file picker (a desktop keeps its picker); the field takes the same pictures. `default:now` on a `datetime` or a `date` field's line (`quando default:now`) fills the empty field with the reader's local time, or day, when the form opens, still editable: an edit opens on the row's value, and without a script the field stays empty. A line that starts with `#` is a section title inside the form (`## 2. The property`). A `file` field takes a picture (JPEG, PNG, WebP, GIF or HEIC, up to 10 MB), or what its schema's `accept:` names (`curriculo file accept:document`: a PDF or a Word document, DOCX, handed to readers as a download; `arquivo file accept:gpx`: a GPS track, whose schema's `fills:` writes its distance, duration, start and track into the row, a value typed in the form winning; a create form that lists the file need not list the fields it fills, even required ones, and a file that says nothing for a required one is refused when sent), kept as the row's own file: only readers of the collection see it, and it counts against the space owner's storage. Empty body: every writable field, in schema order. `from:` on a line makes it a field THE PAGE FILLS, drawn as no input: `obituario from:params.slug` in the layout a ```route draws each obituary with writes that row's slug into every condolence sent from its page (also `row.<field>`, a field of the row the route found — `unidade from:row.unidade` — and `page.slug`, `page.name`, `page.parent`, as a @data filter reads them; and `viewer.username`, the person sending — `atleta from:viewer.username` writes their space's name, `viewer.name` the name they gave — so a form with one is for people signed in, and a visitor reads the sign-in line in its place; never the e-mail, which is no word of a page). The server sets the value from the page the form was drawn on, asked for again at the submit (the row still there and readable by the sender); whatever the browser sends for it is ignored, so nobody posts onto another row by editing the request. On a page that gives no value (the layout opened on its own) the field is left out. A line holding only `---` splits the form into STEPS, shown one at a time with Back and Next: Next checks only that step's fields, the last step has the form's button, and one submit writes one row with every step's fields; a line `step: Who you are` inside a step names it (its heading, and what a screen reader hears). Without a script every step is shown, one under the other, as one form. Not with layout:inline. `as:cards` on a select's line (`plano as:cards`) draws its options as big cards to pick one of, one under the other, and `as:choice` (`fiz as:choice`) as buttons side by side, for a yes or a no; `when:fiz` on another line (`mensagem when:fiz`, or `when:fiz=não` for one answer) shows that field only once the other has a value, and sends nothing of it while hidden — never on a required field; `other:"Something else…"` on that line adds a last card with a box for an answer of the reader's own, kept in the collection's text field `<field>_other` (`plano_other`, which the @schema must have; the select is left empty then, so it cannot be required). `advance:auto` on a select's line alone in its step goes on as soon as it is chosen (or `advance:auto` on the form, for every such step). `min:100` on a text or long_text line asks for at least that many characters: a counter under the box ("0 / 100"), Next and the send button off until it is reached, and the server refuses a shorter one.

@hours renderiza: servidor

When a place is open: the week, printed, and "open now" by the clock of the place. For a venue, a shop, a clinic, a contact page.

Renderizado no servidor.

Exemplo

```@hours zone:America/Sao_Paulo notice:"Closed on the 12th"
mon-fri 11:30-15:00, 18:00-23:00
sat 12:00-00:00
sun closed
```

O que ele desenha

Seg – Sex
11:30 – 15:00
18:00 – 23:00
Sáb
12:00 – 00:00
Dom
Fechado

Closed on the 12th

Argumentos

zone string Obrigatório
The time zone of the place, as the tz database names it: America/Sao_Paulo, Europe/Lisbon. "Open now" is read on that clock, not the reader's.
title string
A heading over the week.
notice string
One line under the week: a holiday, new hours, "kitchen closes 30 minutes earlier".
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. One line per day or run of days, then the hours: `mon-fri 09:00-18:00`, `sat 10:00-14:00, 16:00-20:00`, `sun closed`. Days in English or Portuguese. An end before the start runs past midnight.

@members renderiza: servidor

The people in a group: name, a line about them, who runs it. Shown only to those the group lets see its list (its managers; its members when the group says so). Nothing for anybody else. `columns:role,state,email` draws it as a table: role (member or manager), state (in, invited, asked to join — the people not in yet listed only to the group's managers) and email (to the managers only), each only what the viewer already reads on the group's own screen. `actions:invite,remove` gives the group's managers its invite form and a Remove button on each row, the group's own doors.

Renderizado no servidor.

Exemplo

```@members group:"Turma 3" label:"Quem está na turma" columns:role,state
```

Argumentos

group string Obrigatório
The group, by name or id. A name must be one you stand in, or a group with a door (by_request, open).
label string
A line above the list.
columns list
Draw the list as a table with these columns, in order: role, state, email (`columns:role,state`). state lists the people invited or asking to join to the group's managers; email is drawn to the managers only.
actions list
What the group's managers may do from the list: invite, remove (`actions:invite,remove`) — the invite form of the group's screen, and Remove (or Withdraw, for an invitation) on each person but themselves. Nobody else sees them.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@pages renderiza: servidor

Também escrito ```pages

A gallery of pages, each one a picture of itself: the pages inside a folder (`from:`), or the pages listed in the body. Only pages the reader may open are shown.

Renderizado no servidor.

Exemplo

```@pages from:./plans columns:2
```

Argumentos

columns integer Padrão: 3
How many cards per row (1–4). Defaults to 3. Valores aceitos: de 1 a 4
from string
A folder: its path (/@you/work), or relative like a link — ./work inside this page, ../work beside it, ~/work in the space this page is in; in a layout, relative to the page that puts the layout on. A bare name (work) is not a folder. Its pages with something written are the gallery, in the order they were made, and a new page joins it by itself — the way to keep a section's hub, and a template's hub keeps pointing at its own folder wherever it is copied. Without it, the pages listed in the body.
limit integer Padrão: 12
How many cards at most (1–48). Defaults to 12. A list in the body longer than this shows its first ones, and validate warns. Valores aceitos: de 1 a 48
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. Without `from:`, one page path per line. `/a/section | /a/section/one` links to the first and pictures the second.

@patterns renderiza: servidor

The section pattern library: every pattern, grouped, with a link to it rendered and its markdown to copy.

Renderizado no servidor.

Exemplo

```@patterns
```

Argumentos

members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@pdf renderiza: servidor

A page of a PDF uploaded to this site, drawn in the page (or a few, pages:18-19). Only that page's bytes are fetched; a click opens the PDF in the site's viewer at that page. Without a script, or printed, it is a link to the viewer at that page.

Renderizado no servidor.

Exemplo

```@pdf src:/f/k3Fq9ZrX2mB7vT1wLp8sYa/curso.pdf page:18 title:"Figure 3: the request cycle"
```

Argumentos

src path Obrigatório
The PDF's address on this site, /f/<token>/<name>.pdf, as `files` lists it. Starts with a single / — "//host/x" is another site, not a path. No #page= here: the page is page:.
page integer Padrão: 1
The page drawn. 1 by default. Valores aceitos: de 1 a 100000
pages string
A range of pages drawn one under the other, first-last: pages:18-19. At most 4. Instead of page:.
title string
A short line shown under the page.
height integer
The most pixels tall a page is drawn. By default a page fits the width of the column. Valores aceitos: de 120 a 2000
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@period renderiza: servidor

The period a reader picks for the whole page — `name:janela options:7,14,30 default:7` draws "7 days · 14 days · 30 days" as links (`?janela=14`), the chosen one marked — and every ```@data on the page counts from it: `@filter dia gt -{janela}d` keeps the chosen number of days, `{janela}` in a metric line's label or a @data's title prints it, and `delta:previous` on a metric line compares with the period of the same length before it. Works without a script (links).

Renderizado no servidor.

Exemplo

```@period name:janela options:7,14,30 default:7
```

Argumentos

name string Obrigatório
The parameter the links carry and the placeholder a @data writes ({janela}): lowercase letters, digits and _, starting with a letter.
options list Obrigatório
The numbers offered, in order: whole numbers from 1 to 999, up to 8 (options:7,14,30).
default integer
The option chosen when the address names none (or names one that is not offered); the first option unless said.
unit enum Padrão: d
d (the default): the numbers are days; w: weeks. A filter writes the same unit after the placeholder (-{janela}d, -{janela}w). Valores aceitos: d, w
label string
Each option's words, {n} standing for its number (label:"{n} dias"); without it, "7 days" in the reader's language.
style string
Wears a named style of the page's theme declared for:period (```style name:<name> for:period on a page under the theme's styles; manual styles): CSS scoped to this block's root and kept from reaching outside it. It reaches the published hooks — .nt-period-option, .nt-period-option--on — a segmented control, say: a pill of a ground with the chosen option a raised white pill (`[aria-current]`, or `.nt-period-option--on`). Staff preview.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@posts renderiza: servidor

The pages inside a folder as a list of posts, newest first: title, date and a line each. The date is the page's ```meta date:, else the day it was made. A post's ```meta tags: (separated by commas) and author: are drawn under it as links, and ?tag=<tag> or ?author=<author> on the page holding the block lists the posts that carry it — the blog's tag and author pages, in the sitemap. Only pages the reader may open are listed; a public folder also offers its RSS and Atom feeds.

Renderizado no servidor.

Exemplo

```@posts limit:5
```

Argumentos

from path
The folder whose pages are listed. Without it, the page the block is on.
limit integer Padrão: 10
How many posts, the newest first (1–50). Defaults to 10. Valores aceitos: de 1 a 50
feed boolean Padrão: true
false: leave out the links to the folder's RSS and Atom feeds.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@qr renderiza: servidor

A QR code of this page, or of another address: for a table, a slide, a poster, a card. Dark on white whatever the theme, so a camera reads it.

Renderizado no servidor.

Exemplo

```@qr label:"Abra esta página no celular"
```

O que ele desenha

Abra esta página no celular

Argumentos

to string
What the code opens: a path of this site (/@ana/menu) or a web address starting with https://. Without it, the page the block is on.
label string
A line under the code, saying what it opens.
size enum Padrão: medium
How large it is drawn on the screen. It prints sharp at any size. Valores aceitos: small, medium, large
color string
The colour of the code itself, as #rrggbb. Dark enough to read against the background, or the block says so.
background string
The colour behind the code, as #rrggbb. White by default, which is what a camera likes best.
eye string
The colour of the three corner squares, as #rrggbb. The colour of the code by default.
shape enum Padrão: square
The shape of the small modules: square, dots or rounded. The corner squares stay square whatever this says. Valores aceitos: square, dots, rounded
logo string
A mark in the middle: `brand` (the mark of this site), `none`, or the path of an image on this site (/demo/mark.png).
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@row renderiza: servidor

Inside a theme component that `@data … item:` draws for each row: that row's fields as view:field draws them — a select, checkboxes, a date, a text box — changed in place by the collection's writers, read by everybody else (`fields:status,prioridade`). The row is the one the block already read: nothing else is read. Only in a component; in a ```@use there is no row and it is left out.

Renderizado no servidor.

Exemplo

```@row fields:status,prioridade
```

Argumentos

fields list
The row's fields to show as controls, in order (`fields:status,prioridade,prazo`).
field string
One field (`field:status`); fields: for several.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@schema renderiza: servidor

Declares the fields of a collection of this space. Whoever edits the page sees the declaration (a reader gets nothing in its place); only somebody with settings on the space can apply it.

Renderizado no servidor.

Exemplo

```@schema collection:inscricoes accepts:anyone
nome text required
email email required label:"E-mail"
prova reference:provas
```

Argumentos

collection string Obrigatório
The name of the collection inside this space: lowercase letters, digits and hyphens, 2 to 40 characters (coord-agents, never coord_agents — field names take underscores, collection names do not). Under a template's use, the bare name is the use's own collection; @space/name (this page's space) is always the space's own, shared.
visibility enum Padrão: private
Who may READ the rows: private (the space's people) or public (anyone). Private by default. Valores aceitos: private, public
accepts enum Padrão: nobody
Who may send a row through an @form: nobody, members (people a role on the space root reaches) or anyone (in a private space: anyone who reads a published page holding the form; a page anyone may edit opens nothing). Nobody by default. Valores aceitos: nobody, members, anyone
hold enum Padrão: nobody
Rows held for approval: anyone holds every row sent through an @form by a person who does not write the collection (a member's or a visitor's) until a writer approves it — on the Collections screen, on a @data block they read, or with update_records approve:true — or declines it (the trash). A held row is read by the collection's writers and by nobody else, through any door (every @data view, records, grep, the export, the calendar, counts and rollups); the form tells its sender the entry waits for review. Rows the writers write (the screen, a board, upsert_records) are never held. Nobody by default. Valores aceitos: nobody, anyone
capacity integer
The most rows the collection's @forms keep at once (capacity:60): the next one is refused, the form says no place is left, and `show_left:true` on the @form prints how many are. Counted over the kept rows, not trashed, and not on the waitlist; a row the owner adds through the Collections screen or upsert_records takes a place too, and is never refused. Two people sending the last place at the same moment: one row goes in. From 1 to 100000. Valores aceitos: de 1 a 100000
per string
With capacity:, the places are counted per value of this field (capacity:1 per:slot: one booking per slot); a full value is refused on that field, the others still take rows, and a select's full options are drawn off in the @form. A stored field of type text, select, email, url, number, date, datetime, reference, boolean.
waitlist string
With capacity:, a boolean field of the collection: once the places are taken (for the row's value of per:), a row a form sends still goes in, with this field true, and the form says it is on the waitlist. When a row in a place goes to the trash, or the capacity is raised, the oldest waiting row moves in (the field turns false): an `updated` event, so `@notify on:updated` or `@hook on:updated field:<this field>` tells the owner. The forms never ask for it and never set it; filter a list of who is in with `@filter <field> eq false`.
opens string
When the collection's @forms start taking rows: 2026-12-01 or "2026-12-01 09:00", on the space owner's clock (Settings → Preferences, else UTC), or with an offset (2026-12-01T09:00-03:00). Before it the form says when it opens, and a row sent is refused.
closes string
When the collection's @forms stop taking rows, written as opens: is; a date alone closes at the end of that day. After it the form says it closed, and a row sent, or an edit of one through `own:true`, is refused.
unique string
Fields no two rows may share the values of: `unique:"atividade,atleta"` keeps one kudos per person per activity. 1 to 3 stored fields of type text, select, email, url, number, date, datetime, reference, boolean. A second row with the same values is refused, saying which fields, at every door: a form (in the form's own words with `duplicate:"…"` on the @form), the Collections screen, a board, a sheet's paste, upsert_records, update_records, and a row brought back from the trash; an upsert_records whose unique_by is these fields updates the row it finds. An empty value is a value: two rows that leave a field of the key empty share it (mark the field required to keep it filled). A row waiting for approval holds its key; a row in the trash holds none. Two sends of the same key at the same moment: one row goes in. Declared over rows that already share a key, the schema is refused whole, with how many keys and one of them. It refuses the second row and nothing more: nothing on a page takes the first away (the Collections screen and delete_records do). The refusal tells the sender that a row with those values exists, even one they may not read: keep unique: off a field a stranger can try values of on a public form (an e-mail would say who is registered); a key that names the sender (`atleta from:viewer.username`) tells them only about their own rows.
calendar string
A date or datetime field that puts every row on the calendar of the space's own people who may read the collection: their calendar feed (Settings → Preferences) shows each row on its date, with their @remind lines as alarms. The field is indexed as if it said `indexed`. Only the space's owner applies it.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. One field per line: `name type [required] [indexed] [private] [label:"…"]`. `private` keeps the field's values from every reader who does not write the collection, even on a public one: not drawn in @data (no column), not in records, grep, the export or the calendar, never a filter, sort, group or count for them, and every computed field made from it answers nothing to them; an @form still asks it (`email email required private`). The types: text, long_text, number, boolean, date, datetime, email, url, select, multi_select, tags, file, files, reference, computed. A type may carry its argument: `select:a,b` (an option with spaces in quotes: `select:"in progress",passed`), `reference:outra` (the row's id; `reference:atividades by:codigo` holds the value of that field of the target instead, a text, number, sequence or e-mail field best `indexed` there: every rollup, lookup, include, @column and form select follows it by that field, a key two rows share names the oldest, a form refuses a key no row the sender may read holds, a text field holding the codes becomes one with its rows as they are, and a reference by id holding ids cannot change its `by:`), `computed:sum(outra.valor)` (count, sum, avg, min or max; sum and avg take a number, min and max a number, a date or a datetime and answer in its type: `computed:min(tasks.due)` is a project's earliest due date), or a formula in double quotes over the fields of the same row, other computed fields included: `sobra computed:"limite_mensal - gasto"`, `margem computed:"lucro / preco"`, `situacao computed:"if(uso >= 0.8, \"atenção\", \"ok\")"`, `faltam computed:"days(entrega - today())"`, `media computed:"round((p1 + p2 * 2 + trabalho) / 4, 1)"` (numbers with a dot; if, round, min, max, abs, coalesce, days, today, current_month, current_year, month, year, weekday, concat, share, running, rank; manual computed). Indexed date/datetime fields do not accelerate temporal comparisons. `default:<value>` is what a new row takes when it arrives without the field or with it empty, at every door (a form, the screen, upsert_records): a value the type can hold, one of a select's options (`status select:open,closed default:open`; not on computed, file, files, reference, multi_select or tags). `doors:` names the only doors that may set or change the field (form, board, calendar, checklist, field, sheet, bulk, screen, mcp, import, group, feedback, system, addon, action, api): `state select:todo,done doors:board,field,screen` refuses an upsert_records (mcp) that sets or changes state, naming the field, and lets one that leaves it alone through. `sequence` numbers the rows as they are added, a number the server writes: `numero sequence by:sigla` gives the rows whose sigla is ADV 1, 2, 3 and the first of COM 1 (without `by:`, one count for the collection); a row sent with a number keeps it and the count goes on after it, a number is never given twice, two rows added at once never share one, and a deleted row leaves a gap. A row whose `by:` value changes takes the new value's next number, as an issue tracker gives a moved issue a new key: ADV-12 moved to COM is the next COM, and the 12 it leaves is not given again; a change that sends a number of its own keeps it (the number the row already held, sent back with the move, is not one). The number is stored whole: the key reads ADV-12, never ADV-12.0. A formula joins it into a key (`chave computed:"concat(sigla, \"-\", numero)"`) a route's `find_by:` or a @filter finds the row by. No default, never required. `accept:` on a file field names what an @form takes for it (image, document, gpx; a picture when left out): `curriculo file accept:document` takes a PDF or a Word document (DOCX), `anexo file accept:image,document` either; the file's bytes decide, never its name, up to 10 MB, and a document is handed to readers as a download. A `files` field holds several files a row (at most 20), each what its `accept:` names: `anexos files accept:image,document`. A writer adds them in place in a `@data view:field` — a drop zone, where flows' staff try it: drop, paste or pick, each file checked by its bytes and up to the space owner's plan's file size (never past 25 MB) — and takes them out there; a form does not write one, and `@column anexos format:file` lists them, a thumbnail for a picture. It holds only files sent to it: upsert_records, update_records and an import may reorder them or leave some out (a file left out is deleted with its bytes), never write one in — a link belongs in a url field. `accept:gpx` takes a GPS track a watch or a phone exported (a GPX file that reads; one with a DOCTYPE, past 200000 points or with no track is refused), handed to readers as a download, and `fills:` writes what it says into fields of the same row when the row is sent or its file changes through a @form: `arquivo file accept:gpx fills:"distancia_km=distance_km, duracao_min=duration_min, elevacao_m=elevation_gain_m, quando=started_at, percurso=track"` (field=source; the sources: distance_km (number), duration_min (number), duration_s (number), elevation_gain_m (number), started_at (datetime/date/text), track (long_text/text), points (number)). A value the person typed in the form wins, a source the file lacks (no times, no elevation) leaves its field alone, and the track is at most 300 points `lat,lng,ele`, the shape ```@track draws. Only a form fills: upsert_records and the sheet write values, never files. A `@hook` line POSTs the changes of the rows to a URL after they are saved, signed with the collection's secret: `@hook on:updated field:status to:Ready url:https://…`. `on:` created, updated, deleted, restored (all four when left out, created and updated when the line has a `field:`), approved (only when named); `field:` only when that field changed; `from:`/`to:` what it changed from/to, a value the field's type can hold; `source:` only through these doors (form, board, calendar, checklist, field, sheet, bulk, screen, mcp, import, group, feedback, system, addon, action, api); `url:` https, a public host, port 443, 80 or 1024 and up. On a collection that holds rows for approval (`hold:anyone`), an event about a row still waiting carries `held: true` — its `created` from a stranger's form, an `updated` when its sender edits it and it waits again, its `deleted` when a writer declines it — and a writer letting it in posts `approved`, with the row's values as `changes` ({field: [null, value]}) and no `held`. A receiver that must act only on rows let in hears `on:created,approved` and skips the events with `held: true`: the same row comes as `created` (held) and then as `approved`. `when:"<condition>"` in place of `on:` POSTs a `crossed` event when a formula over the row turns true, once per crossing: `@hook when:"uso >= 0.8" url:https://…`. The condition and its checks are a `@notify when:`'s (manual @notify): a formula answering true or false, armed silently by its first check, checked when the row, or a collection one of its rollups reads, is written, and at the owner's midnight for the clock; `on:`, `field:`, `from:`, `to:` and `source:` beside it are refused, and a collection holds at most 10 `when:` lines, @notify and @hook together. Each event carries `crossing` (the condition, and the values of the names it reads that made it true) and `row` (the row's stored fields, as the schema has them); the delivery is any hook's: signed, retried, and paused after failures. While the hook is turned off its crossings are not posted, then or later: turned on again, it posts the next ones. Only the space's owner applies hooks and sees their secret and deliveries (Collections screen); whoever edits the page reads the @hook lines in its source, a reader never gets them. A `@remind` line reminds people of a date field of the rows: `@remind field:due before:1d,1h to:field:assignee`. `field:` a date or datetime field; `before:` 15m, 1h, 1d, 1w (comma-separated, days and weeks only on a date field); `at:HH:MM` a time on the recipient's clock (a date field without it fires at 09:00); `to:` owner (the default), field:<an e-mail or text field naming an account> or group:<a group with a role on the space>; `via:` email (the default, Pro), hook (the `reminder` event a `@hook on:reminder` line forwards) or calendar (only an alarm on the row in the calendar feed of each person `to:` names, on every plan; the collection needs `calendar:` on that field). Only the space's own people (its owner, a role on it they opened, a member of a group with a role on it) who may read the collection are reminded, at most 50 reminder e-mails a day each; a reader never gets the @remind lines. A `@notify` line tells the space's owner when rows arrive, a visitor's @form row included: `@notify on:created to:owner via:email`, or `@notify on:created to:owner via:push title:<field> body:<field> open:<page>`. `on:` created, updated (created when left out); `to:` owner, author only — `owner` (left out) the space's owner, `author` the signed-in person who created the row, each at their own account's e-mail or on their own devices, never an address from the line or a row; `via:` email, push (email when left out). `via:email`: the mail lists each row's fields (label: value, in the schema's order; a file by its name, a long text cut) and links to the collection's rows; on a collection that holds rows for approval (`hold:anyone`), a row waiting says so first and the link opens the rows that wait — `@notify on:created` is how the owner is told a row waits, and letting it in mails nothing more (a `@hook on:approved` hears it). Rows that arrive within 5 minutes of the first go in one mail (at most 20 drawn, the rest counted), and the owner gets at most their plan's notice e-mails a day (UTC); past it the day's mails are held, not sent, and the @schema block says how many. `via:push`: a notification on the apps and the browsers the owner turned on in Settings ▸ Notifications (nowhere turned on: nothing is sent, and no e-mail instead). `title:` and `body:` each name a stored field of the row whose value is the notification's title and body; left out, the collection's name and the row's first fields. `open:` is the page of the space the notification opens, its path under the space (`open:coach/today`, never an address); left out, the collection's rows. Only a `via:push` line or a `to:author` line takes them. `to:author` (a ticket resolved → the employee who opened it): each row's author is told of their own rows only, in their own mail or notification — a visitor's row has nobody to tell, and a row the owner created is the owner's own lines' — and told ONLY what the line names: the summary (received, changed, or the condition that turned true and the values of the names it reads), the `title:` and `body:` fields, a link to the `open:` page; never the rest of the row, which they read only through the tables and forms you opened (`@notify when:"solved = true" to:author title:subject open:help`). Told while they may read their own rows (the collection readable by them, or one that still takes their rows: closing the form stops it), at most 20 times a day per person per collection, held to your plan's numbers with your own mails, and never once they turned the space off in Settings ▸ Notifications. Rows that arrive within 1 minute of the first are one notification, counted, and the owner gets at most their plan's notifications a day (UTC), the rest held the same way. One event may have a line of each way; two lines of the same way may not hear the same event. While browser notifications are being opened, `via:push` is applied only for the accounts that have them. `when:"<condition>"` in place of `on:` tells when a formula over the row turns true, the row's computed fields, rollups and windows included: `@notify when:"uso >= 0.8"`, `@notify when:"gasto > limite_mensal" via:push`. The condition is written as a computed formula is (manual computed) and must answer true or false; one that does not compile, or answers anything else, is refused with the problem and where it is. `on:` with `when:` is refused: the crossing is the event. It tells once per crossing: a row that turns true (from false, or never checked) is told once, and again only after it went back to false and turned true again. The mail and the notification say the condition, the row and the values of the names it reads (uso: 0.85). It is checked when a row of the collection is written (that row), when a row of a collection one of its rollups reads is written (the whole collection, 1 minute after the first such write, and at most once every 5 minutes), and at the owner's midnight for conditions on the clock (today(), current_month()). A collection holds at most 10 `when:` lines. A condition that reads the whole collection (a window such as share(), or a rollup over the collection itself) is checked whole at every write, and so is not checked over 20000 rows: the @schema block says so; name a rollup of another collection instead. A line just applied tells nothing at first: its first check writes down the rows already true, silently (the @schema block says while it runs), and only later crossings are told. A check reads at most 5000 rows, the rest at the next minute; what crosses close together is one mail or one notification, held to the same daily number. A check that fails (a condition the schema no longer compiles, a read too slow) is shown in the @schema block with the reason, and tried again later. To stop, remove the @notify line and apply the schema (rows waiting then are dropped, and apply_schema says how many; a line changed, say on:created to on:created,updated, keeps them). Whoever may apply the schema (settings on the space) may add one; a reader never gets the @notify lines. An `@access` line makes each row read and written by the group one of its fields names (ADR 069): `@access by:time group:"time-{value}"`. `by:` a text or select field; `group:` the group's name with `{value}` where the row's value goes (`"{value}"` when the field holds the name). The groups that count are those granted on the space's root with the data (`share … group: data:true`, which only the space's owner gives); applying binds each value to its groups by identity and says which (a group renamed since counts for no value until the schema is applied again), and a team added later is bound by applying the schema again (the block says so). Then a row is read and written by the active members of its group, by the person who created it when the field is empty, and by the space's owner and co-owners; by nobody else, through any door: @data, records, grep, the export, the API, files, forms, reminders. It narrows who may read the collection, it never widens it. A writer sets only a value of their own groups (or none); upserts, imports and updates by filter are the owner's alone. Rollups and windows over such a collection are empty for the people whose rows are narrowed; a share link or a snapshot never shows its maker's rows. One line per schema; flows' staff for now. Reserved field names: the row's own (`id`, `extra`, `record`, `included`, `data`, `resolved`, `created_at`, `updated_at`, `created_by`, `initialize`) and the methods every row answers to (`abort`, `as_json`, `assign_attributes`, `at_exit`, `attribute`, `attribute_aliases`, `attribute_method_patterns`, `attribute_missing`, `attribute_names`, `attribute_writer_missing`, `attributes`, `autoload`, `binding`, `caller`, `caller_locations`, `catch`, `class`, `class_eval`, `clone`, `concern`, `context_for_validation`, `deep_dup`, `define_singleton_method`, `display`, `display_label`, `dup`, `enable_warnings`, `enum_for`, `errors`, `eval`, `exec`, `exit`, `extend`, `fail`, `fork`, `format`, `freeze`, `gem`, `gem_original_require`, `gets`, `global_variables`, `halted_callback_hook`, `hash`, `historical_scalar_value`, `init_internals`, `initialize_clone`, `initialize_copy`, `initialize_dup`, `inspect`, `instance_eval`, `instance_exec`, `instance_values`, `instance_variable_get`, `instance_variable_names`, `instance_variable_set`, `instance_variables`, `instance_variables_to_inspect`, `itself`, `lambda`, `load`, `local_variables`, `loop`, `matched_attribute_method`, `method`, `method_missing`, `methods`, `missing_attribute`, `model_name`, `no_warning_require`, `object_id`, `open`, `p`, `pp`, `presence`, `presence_in`, `pretty_inspect`, `pretty_print`, `pretty_print_cycle`, `pretty_print_inspect`, `pretty_print_instance_variables`, `print`, `printf`, `private_methods`, `proc`, `protected_methods`, `public_method`, `public_methods`, `public_send`, `putc`, `puts`, `raise`, `raise_validation_error`, `rand`, `raw_field_value`, `read_attribute_for_validation`, `readline`, `readlines`, `remove_instance_variable`, `require`, `require_dependency`, `require_relative`, `require_without_bootsnap`, `run_callbacks`, `sanitize_for_mass_assignment`, `sanitize_forbidden_attributes`, `select`, `send`, `set_trace_func`, `silence_warnings`, `singleton_class`, `singleton_method`, `singleton_method_added`, `singleton_method_removed`, `singleton_method_undefined`, `singleton_methods`, `sleep`, `slice`, `spawn`, `sprintf`, `srand`, `suppress`, `syscall`, `system`, `tap`, `test`, `then`, `throw`, `to_enum`, `to_json`, `to_key`, `to_model`, `to_param`, `to_partial_path`, `to_query`, `to_s`, `to_yaml`, `trace_var`, `trap`, `try`, `untrace_var`, `validate`, `validates_absence_of`, `validates_acceptance_of`, `validates_comparison_of`, `validates_confirmation_of`, `validates_exclusion_of`, `validates_format_of`, `validates_inclusion_of`, `validates_length_of`, `validates_numericality_of`, `validates_presence_of`, `validates_size_of`, `validates_with`, `validation_context`, `values_at`, `warn`, `with`, `with_options`, `with_warnings`, `yield_self`, `zeitwerk_original_require`). A hyphen reads as an underscore, so `created-at` is reserved too.

Filhos aceitos

@hook, @remind, @notify, @access

@secret renderiza: servidor

An API key, a token or a password kept beside the page, encrypted: the page shows it masked, and only the people who edit the page reveal, copy or set it. The value is never in the page's text, and no tool reads it: a person sets it with the block's Set value button, in the editor, or moves a key already typed on the page into it with `secret_from_text`; `read`, `search` and the assistant see its name and options, never the value.

Renderizado no servidor.

Exemplo

```@secret name:anthropic-main label:"Anthropic (main)" show_start:12 show_end:4
```

Argumentos

name string Obrigatório
The secret's name on this page (lowercase letters, digits, - and _, up to 48): anthropic-main. Never the value — that is set with the block's Set value button, in the editor, or moved from the page's text with `secret_from_text`.
label string
What the secret is, printed above it.
note string
One line under it: where it is used, when it expires.
show_start integer Padrão: 0
How many characters of the start are shown in the mask (sk-ant-oat01): never more than a third of the value. Valores aceitos: de 0 a 24
show_end integer Padrão: 4
How many characters of the end are shown in the mask: never more than a third of the value, with the start. Valores aceitos: de 0 a 8
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@themes renderiza: servidor

The starting themes: every whole look an author can begin from, drawn in its own colours, with its theme fence to copy.

Renderizado no servidor.

Exemplo

```@themes
```

Argumentos

members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@timer renderiza: servidor

A timer the reader starts with a click, pauses and stops: a stopwatch, or a pomodoro that counts down and ends by itself. On stop it writes one row (the task, when it started, the minutes) into a collection, like a @form. A focus session, a workout, an exam, a meeting.

Renderizado no servidor.

Exemplo

```@timer collection:sessoes mode:pomodoro minutes:25 break:5
```

The collection it writes into, declared once:

```@schema collection:sessoes accepts:members
task text
started datetime
minutes number
```

A stopwatch on a fixed task, into fields named otherwise:

```@timer collection:treinos task:"Corrida" fields:atividade,inicio,minutos
```

Only a clock, nothing kept:

```@timer mode:pomodoro minutes:50
```

Argumentos

collection string
The collection the row goes into, as a @form names it. It takes the row from whoever may send a @form into it (its accepts:). Without it the timer only counts and nothing is kept.
mode enum Padrão: stopwatch
stopwatch counts up until Complete; pomodoro counts minutes: down and ends by itself, writing the row then. Valores aceitos: stopwatch, pomodoro
minutes integer
A pomodoro's length in minutes (default 25). Only with mode:pomodoro. Valores aceitos: de 1 a 240
break integer
A pomodoro's break in minutes, counted down after it ends (nothing is written for a break). Only with mode:pomodoro. Valores aceitos: de 1 a 60
task string
What the session is for, written into the row's task field. Without it the reader types it in a box above the clock.
fields list
The collection's fields the row fills, comma separated, in this order: the task (text), the moment it started (datetime), the minutes (number). Defaults to task,started,minutes.
scope enum
viewer: only a signed-in reader may keep a session, and the row is attributed to them (`@data scope:viewer` then lists each person's own). Valores aceitos: viewer
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@tokens renderiza: servidor

A theme's tokens, drawn: its colours as swatches with their codes, and its typefaces as a sample — the preview of a design system kept in a page.

Renderizado no servidor.

Exemplo

```@tokens from:/@ana/design
```

Argumentos

from path
The page whose theme is drawn: a path of this site (/@ana/design). Without it, the page the block is on.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@track renderiza: servidor

Draws one row's GPS track as a line: the route of a run, a ride, a hike, a delivery. The row keeps the track in a text field as `lat,lng` pairs (an optional third value is the elevation in metres) separated by spaces, new lines or `;`, or as a JSON array of [lat, lng] / [lat, lng, ele]. Drawn by the server as a picture of the line alone, with a round mark at its start and a square one at its end: no map under it, and nothing loads from any map service. Under it, the distance worked out from the points, and the elevation gain when the points carry elevation. A field that holds no track, or no row, shows the empty: words. It reads the collection as a @data does: a reader the rows are closed to sees "Private data."

Renderizado no servidor.

Exemplo

```@track collection:atividades field:percurso
@filter codigo eq params.codigo
```

The collection, declared once:

```@schema collection:atividades
codigo text
quando datetime
percurso long_text
```

The latest activity, tall, with no numbers under it:

```@track collection:atividades field:percurso sort:-quando height:tall stats:false
```

Argumentos

collection string Obrigatório
The name of the collection inside this space: lowercase letters, digits and hyphens, 2 to 40 characters (coord-agents, never coord_agents — field names take underscores, collection names do not). Under a template's use, the bare name is the use's own collection; @space/name (this page's space) is always the space's own, shared.
field string Obrigatório
The text or long_text field of the collection that holds the track.
sort string
The order the row is taken in when the filters leave more than one: a field, a leading minus reverses it (`-quando` for the latest activity). The first row is the one drawn.
height enum Padrão: medium
The shape of the drawing: short (a strip), medium or tall. It takes the width it is given and keeps the track's proportions inside. Valores aceitos: short, medium, tall
stats boolean Padrão: true
The distance, and the elevation gain when the points carry elevation, under the drawing. stats:false draws the track alone; its description to a screen reader still says the distance.
empty string
What to say when there is no row, or the field holds no track.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Uma instrução por linha. Optional `@filter field op value` lines, exactly as a @data takes them (`manual @data`): they select the row. A value may be read from the page, so one layout draws every activity's track: `@filter codigo eq params.codigo` (what a ```route's address gave), `row.<field>` (the row the route found), `page.slug`. Every line must hold; the first row left, in sort:, is drawn.

Filhos aceitos

@filter

@use renderiza: servidor

A component of the theme this page wears (the theme's screen lists them, with when to use each and its slots), filled with this page's words.

Renderizado no servidor.

Exemplo

```@use cartao-de-curso
titulo: Torno para iniciantes
data: Sáb · 14 jun
```

Argumentos

name string Obrigatório
The component's name, as its theme lists it: `cartao-de-curso`. Written alone after @use.
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Texto livre. One slot per line, `slot: words`; a list, one line per entry, its fields in the component's order: `etapas: Pedido criado | done | 10 mar`. A link or a picture slot takes an address (/…, https://…); a slot the component types takes what it says: a number, a date written YYYY-MM-DD, one of its choices, or (inline) **bold**, *italics* and ~~struck~~ in its words.

@video renderiza: servidor

A video player over a file uploaded to this site, or over a video file at an https address of another host (.mp4, .webm, .m3u8), which the page does not request until the reader presses play. Controls on, nothing autoplays.

Renderizado no servidor.

Exemplo

```@video src:/f/k3Fq9ZrX2mB7vT1wLp8sYa/demo.mp4 title:"Como aplicar o esquema"
```

Argumentos

src string Obrigatório
Path of the file on this site, usually an upload of the page (starts with a single / — "//host/x" is another site, not a path); or an https address of a video file on another host, ending in .mp4, .webm or .m3u8 (a stream), drawn with this site's poster or a plain surface and a play button, nothing of that host requested until the reader presses it. In the layout a ```route draws its rows with, a field of the row: src:row.video; in a theme component, a slot: src:{{video}}. A row with no address leaves the block out. A video on YouTube, Vimeo, Google Drive, Loom, Wistia or Facebook is an ```@embed … play:here.
title string
A short title shown under the player.
preload enum Padrão: metadata
How much the browser fetches before play: none, metadata or auto. Valores aceitos: none, metadata, auto
poster path
Path of an image shown before play. Starts with a single / — "//host/x" is another site, not a path.
mode enum Padrão: player
player shows controls and never autoplays; background plays muted, looped and without controls, for the ground of a :::hero or a looping thumbnail in a column (paused when the reader asks for reduced motion). A file of this site only: a video of another host plays only on the reader's press. Valores aceitos: player, background
ratio enum Padrão: auto
The shape the video is cut to, the shapes a :::cover takes (16/9, 4/3, 1/1, 9/16…), the picture filling it and cropped at its edges; auto (the default) is the file's own shape. With mode:background as the ground of a band, the band's shape: the ground fills it. Valores aceitos: 16/9, 16/10, 3/2, 4/3, 5/4, 1/1, 4/5, 3/4, 2/3, 9/16, 2/1, 21/9, auto
width integer
How wide the video is in px (16 to 600; width:200 with ratio:16/9 is a 200x112 thumbnail), never wider than its column. Left out, it fills the column. With mode:background as the ground of a band, it fills the band instead. Valores aceitos: de 16 a 600
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@whatsapp renderiza: servidor

The round WhatsApp button in a site's corner: one tap opens the conversation with the message already written.

Renderizado no servidor.

Exemplo

```@whatsapp number:"+55 21 95550-0134" message:"Olá! Vi o site e quero mais informações."
```

Argumentos

number string Obrigatório
The WhatsApp number, with the country code: "+55 21 98519-2305".
message string
What the conversation starts with, already written for the person.
label string
What a screen reader says, and the hint on hover. Defaults to "Talk on WhatsApp" in the page's language.
position enum Padrão: corner
corner: on a site, fixed in the bottom corner while the page scrolls. inline: where it is written. Valores aceitos: corner, inline
members_of string
A group, by name or id: only its members (and whoever edits the page) see this block; everybody else sees a line saying so, with the group's door. Nothing of the block reaches them — not on the page, not in its Markdown, not through the MCP, the search or their calendar feed (an @event is on its members' and editors' feeds only).
consent string
A flag the reader must have allowed before this block shows (`consent:videos`; several, separated by spaces). It has to be one a `@consent` on this site offers.

Corpo

Este componente não tem corpo.

@chart renderiza: navegador

Também escrito ```chart

A chart or a table, drawn from CSV: bars, stacked bars, a line, an area, a pie, a donut, a scatter or bubble plot, a heatmap, a waterfall. A reader can point at a value and hide a series.

Renderizado no navegador.

Exemplo

```@chart type:line
title: Pages published
markers: Feb=Launch
---
month,pages
Jan,3
Feb,7
```

O que ele desenha

title: Pages published
markers: Feb=Launch
---
month,pages
Jan,3
Feb,7

Argumentos

type enum Padrão: bar
Which drawing. `stacked` piles the series of a bar chart; `pie` and `donut` read the first series, one slice per row. `scatter` reads x and y from the first two number columns and sizes a bubble by an optional third; `heatmap` fills a cell per row and column by its value and prints it; `waterfall` reads one column: the first row is the start total, the last the end total (blank to compute it), the rows between are signed contributions. Valores aceitos: bar, stacked, line, area, pie, donut, scatter, heatmap, waterfall, table
title titulo string
Printed above the chart.
markers marcos string
Moments on the category axis, as category=label pairs separated by semicolons: `markers: Jun=Launch; Aug=New price`. Each is a dashed line with its label, outside the series and the legend, and said in words under the chart. A pair naming no category of the data is left out.
look enum
`editorial`: the chart on diagram-design's fixed 1000 px sheet, its reference geometry for the type (axes, bar widths, label positions), in the page's colours; the sheet scales down on a phone. `spark`: a dashboard tile's chart, the marks alone at the tile's width — no axes, grid, legend, value labels or title, bars with 6px rounded tops, a line edge to edge (an area fading under it), only the focal point marked; the numbers stay a table for a screen reader (bar, stacked, line and area; the others keep `page`). `page` (the default): the chart laid out at the page's width. Valores aceitos: page, editorial, spark
focal foco string
The one item drawn in the page's accent, the rest in the series palette, the way diagram-design marks one element: a row (`focal: S5`), a series (`focal: plates`), `last` for the last row when none is called that (today's bar), or in a heatmap a `row,column` cell (`focal: payments,S4`). Exactly one; a second name after a comma is refused, and so is a name the data has not. The legend and the table mark it with ★, so the hue is never the only sign.
bands faixas string
Zones of the value axis drawn as tinted bands behind the marks, each named at its right edge and in words under the chart, as from-to=label pairs separated by commas or semicolons: `bands: "60-100=On track,40-60=Adjust,0-40=Off track"`. The axis stretches to show every band. `colors:` may name a band (`On track=#36884d`); one it does not name is a faint tint of the text. On bar, stacked, line and area charts; a band that is not two numbers and a label is refused.
colors cores string
A colour of its own for a series, or in a pie or a donut for a slice (a row), or a band of `bands:`, as name=#hex pairs separated by commas or semicolons: `colors: "Energizing=#36884d,Neutral=#8a8a8a,Draining=#de3c37"`. The others keep the page's series colours — the theme's `diagram_palette` (and `dark_diagram_palette`) when it sets one, else the chart's own. A pair naming nothing in the data is left out; a colour that is not #rgb or #rrggbb is refused. The legend's swatch takes the same colour, so name a hue a reader can tell from the others.

Corpo

CSV, ou o bloco inteiro em JSON. CSV: the first row names the columns, the first column labels the category axis. The whole body may be JSON instead.

@chat renderiza: navegador

Também escrito ```chat

A conversation: one message per line, `who: text` with an optional ` @ time`. `me` (or `eu`) sits on the right.

Renderizado no navegador.

Exemplo

```@chat title:Suporte
ana: Oi, chegou?
me: Chegou sim @ 10:42
```

O que ele desenha

ana: Oi, chegou?
me: Chegou sim @ 10:42

Argumentos

title titulo string
The line above the thread.

Corpo

Uma mensagem por linha. One `who: text @ time` per line.

@checklist renderiza: navegador

Também escrito ```checklist

A working checklist: it counts, it groups under ## headings, and it remembers — in the reader's own browser, never on the page. For ticks every reader shares and an agent can tick, use @data view:checklist over a collection (manual views).

Renderizado no navegador.

Exemplo

```@checklist title:"Antes do deploy"
## Testes
- [ ] Rodar a suite
- [x] Console limpo
```

O que ele desenha

## Testes
- [ ] Rodar a suite
- [x] Console limpo

Argumentos

title titulo string
The line above the list.

Corpo

Itens, separados por uma linha ---. One item per line: `- [ ] something`, `- [x] done` (ticked until the reader changes it), or a plain `- something`, which is an unticked item; optional `## Section` headings. A body with no item is an error block, and `validate` says so.

@profile renderiza: navegador

Também escrito ```profile

The head of a link page: avatar, name, bio and a row of social icons.

Renderizado no navegador.

Exemplo

```@profile
name: Nara
bio: A taste of everything
avatar: /demo/nara.svg
instagram: https://instagram.com
```

O que ele desenha

name: Nara
bio: A taste of everything
avatar: /demo/nara.svg
instagram: https://instagram.com

Argumentos

name string Obrigatório
The name printed under the avatar.
bio string
One paragraph under the name.
avatar string
An image URL, absolute or root-relative.
shape enum Padrão: circle
The avatar's shape. Valores aceitos: circle, rounded

Corpo

Um link por linha. More `platform: url` lines.

@reviews renderiza: navegador

Também escrito ```reviews

A row of review cards, each with its stars.

Renderizado no navegador.

Exemplo

```@reviews title:"O que dizem"
★★★★★ Ana
Best bagels in town.
```

O que ele desenha

★★★★★ Ana
Best bagels in town.

Argumentos

title titulo string
The line above the row.

Corpo

Itens, separados por uma linha ---. One review per block, separated by a --- line: `★★★★☆ Name` or `4/5 Name`, then the text.

@faq renderiza: navegador

Também escrito ```faq

Questions that open, one <details> each.

Renderizado no navegador.

Exemplo

```@faq
Do you ship?
Yes, worldwide.
---
Returns?
Within 30 days.
```

O que ele desenha

Do you ship?
Yes, worldwide.
---
Returns?
Within 30 days.

Argumentos

title titulo string
The line above the questions.

Corpo

Itens, separados por uma linha ---. One question per block, separated by a --- line: the question line, then the answer.

@embed renderiza: navegador

Também escrito ```embed

A card that names a provider and links out. Never a frame the reader did not ask for: the page loads no third party inside itself, and with play:here a video of YouTube, Vimeo, Google Drive, Loom, Wistia or Facebook is a poster and a button until the reader presses play, then the provider's player in a frame — never its script (ADR 013). In a theme component the address can be a slot (`video:{{link}} play:here`), and in the layout a ```route draws its rows with, a field of the row (`video:row.link play:here`): a row with no address leaves the block out. A video file at an https address is a ```@video src:https://….

Renderizado no navegador.

Exemplo

```@embed youtube:https://youtu.be/abc
title: Sunrise set
```

O que ele desenha

title: Sunrise set

Argumentos

youtube string
A YouTube URL.
spotify string
A Spotify URL.
podcast string
A podcast URL.
video string
A video URL. With play:here it plays with whichever player reads it (YouTube, Vimeo, Google Drive, Loom, Wistia, Facebook), so a template can take a row's link without knowing whose it is; any other address stays a card.
calendar agenda string
Where somebody books a time with you: a Cal.com, Calendly or Google Calendar appointment URL.
music musica string
A track, an album or a playlist, wherever it lives.
applemusic string
An Apple Music URL.
soundcloud string
A SoundCloud URL.
bandcamp string
A Bandcamp URL.
deezer string
A Deezer URL.
tiktok string
A TikTok video or profile URL.
instagram string
An Instagram post or profile URL.
twitch string
A Twitch channel URL.
vimeo string
A Vimeo URL.
drive string
A video file shared from Google Drive (drive.google.com/file/d/…, or /open?id=…), shared with whoever reads the page.
loom string
A Loom recording (loom.com/share/…).
wistia string
A Wistia video (<account>.wistia.com/medias/…, or fast.wistia.net/embed/iframe/…).
facebook string
A Facebook video or live (facebook.com/<page>/videos/…, facebook.com/watch/?v=…); a short fb.watch link stays a card.
map string
An address or a Google Maps URL.
maps string
The same as map.
title titulo string
The card's first line.
note string
The card's second line.
play enum
here: a video of YouTube, Vimeo, Google Drive, Loom, Wistia or Facebook (or video: any of their addresses) plays in the page, in a 16:9 frame — after the reader presses play, and not before: until then the page holds nothing of the provider, only the poster and a button. The player comes from the provider's privacy-friendly address where it has one (youtube-nocookie.com, Vimeo with dnt, Wistia with doNotTrack). An address a player does not read (a channel, a folder, a short link) and any other provider stay a card. Valores aceitos: here
load enum
click: the provider's own page opens in this one when the reader presses its button, and not before — until then the page holds the card this site draws and nothing of the provider. A map (map: an address, or a Google Maps address that names the place) shows Google's map; a calendar (calendar: a booking page of HubSpot Meetings, Calendly, Cal.com or a Google Calendar appointment schedule) shows the booking, which the reader fills in there. A video plays as with play:here. Any other provider or address stays a card that links out. Valores aceitos: click
poster string
With play:here, the picture shown until the reader presses play: a file of this site (/f/…), never the provider's own thumbnail, which would load the provider before the reader asked.

Corpo

Este componente não tem corpo. This block takes no body.

@diagram renderiza: navegador

Também escrito ```diagram

A figure drawn from a list, in the editorial manner of diagram-design (cathrynlavery/diagram-design, MIT), each type on its reference geometry, in the page's colours and fonts, with one focal item in the accent: a layer stack, a pyramid or funnel, a loop, a timeline, nested rings, a process or data flow (lanes × steps), a story map, a security matrix, a service blueprint, an exploded view (isometric parts pulled apart), a high-level data stack, a medallion of tiers, a data-platform integration, an architecture delta (before and after, with a ledger of changes), an axonometric plan (a floor or a site seen from above), a tree (a hierarchy by indentation), an org chart (ownership, with callout strips), a dependency graph (ranks, fan-in, one cycle), a polar chart (one series on a dial), a gantt (tasks on weeks, in phases), a sankey (a quantity through three stages), a sequence (lifelines, activations, fragments), a swimlane (steps across team lanes), a flowchart (shapes carry type, labelled branches), a state machine (states, dots, curved returns), a quadrant (a 2×2 of dots) or a scenario matrix, a radar (series over axes), an ER model (entities, cardinality), a UML class diagram (compartments, typed arrows), a venn (sets meeting at one sweet spot), a treemap or marimekko (area as share), a fishbone (causes on bones, one root cause), a wardley map (value chain over evolution), a kanban (columns, WIP chips, card states), a user journey (stages, sentiment curve, pain), a database schema (tables, columns, foreign keys), and `figure`, a placed architecture (nodes on a grid, zones, routed connectors). Optional motion: the items enter one by one, with controls. A mermaid fence still draws any of these in mermaid's grammar (`look:editorial` gives it the same manner). The grammar of every type, with a live example each: /@docs/blocks/diagram; one example per diagram-design type: /@docs/showcase/diagram-design.

Renderizado no navegador.

Exemplo

```@diagram type:layers motion:step
title: AI app stack
top: Abstraction
bottom: Silicon
- UI surface · chat, editor, canvas {tag:L5}
- Agent harness · tools, memory, loop {focal tag:L4}
- Prompt layer · system, few-shot, caching {tag:L3}
- SDK / client · auth, retries, streaming {tag:L2}
- Model weights · opus, sonnet, haiku {tag:L1}
```

O que ele desenha

title: AI app stack
top: Abstraction
bottom: Silicon
- UI surface · chat, editor, canvas {tag:L5}
- Agent harness · tools, memory, loop {focal tag:L4}
- Prompt layer · system, few-shot, caching {tag:L3}
- SDK / client · auth, retries, streaming {tag:L2}
- Model weights · opus, sonnet, haiku {tag:L1}

Argumentos

type enum Padrão: layers
Which figure. `layers`: full-width bands stacked top to bottom (a stack, the OSI model, a hierarchy of abstraction). `pyramid`: trapezoids narrowing to an apex, the first item at the top. `funnel`: the same, widest first. `loop`: a hub with 5–8 stations on a ring. `timeline`: events on a baseline at honest positions. `nested`: concentric rings, outer first. `process` and `data-flow`: lanes × steps with nodes, chips and arrows. `story-map`: a backbone of activities and slices of cards with a release cut. `dp-security-matrix`: roles × components with an access level per cell. `service-blueprint`: stages × layers with the line of visibility. Each one's lines are described at /@docs/blocks/diagram. Valores aceitos: layers, pyramid, funnel, loop, timeline, nested, process, data-flow, story-map, dp-security-matrix, service-blueprint, figure, exploded, high-level, medallion, dp-integration, architecture-delta, axonometric-plan, tree, org-chart, dependency, polar, gantt, sankey, sequence, swimlane, flowchart, state, quadrant, radar, quadrant-consultant, er, uml-class, venn, treemap, fishbone, wardley, kanban, journey, db-schema
motion enum Padrão: none
How the items enter. `none`: the complete figure. `step`: one by one, with previous, play, pause, next and replay, and the keyboard. `reveal`: plays by itself once, when the figure first comes into view, then stays complete (replay from the controls). Items without `step:N` enter in reading order. Without JavaScript, in print, or for a reader who asked for less motion, the complete figure shows. Valores aceitos: none, step, reveal
title titulo string
The figure's name (its accessible title); a `# Heading` line in the body does the same.
caption legenda string
An italic aside under the figure; a `> quote` line in the body does the same.
desc string
One sentence a screen reader gets instead of the drawing. Written from the items when absent.
top string
What grows upward, printed on the left margin above the direction arrow (layers): `top: Abstraction`.
bottom string
What sits at the bottom, printed under the direction arrow (layers): `bottom: Silicon`.
left string
A rotated axis label on the left margin (pyramid, funnel): `left: Rarer · fewer · compounds ↑`.

Corpo

Itens, separados por uma linha ---. One `- Name · sublabel {tags}` per line; a `---` line starts a new group where the type has groups. Tags in braces: `focal` (the one item in the accent), `step:N` (the motion step), `tag:L3` (the index tag), `side:~48/yr` (a note beside the item), `value:240` (a quantity: a funnel's widths follow it).

mermaid renderiza: navegador

A diagram in mermaid's grammar, drawn by Pele (pele.run) unless the fence says `renderer:mermaid`: Pele lays a diagram out in well under a millisecond, adapts it to a phone and paints it in the page's theme. Mermaid draws what Pele does not (ZenUML; the `handDrawn` look; `themeCSS`). Either way the colours are the page's (theme keys diagram_*), unless the diagram names its own in mermaid's configuration (`%%{init: {"theme": "forest", "themeVariables": {…}}}%%`, or `config:` in its front matter), which both renderers follow. The one block with no @ spelling: a mermaid fence renders on GitHub, Obsidian, Notion and GitLab, which read the first word of the fence line and ignore the rest.

Renderizado no navegador.

Exemplo

```mermaid
flowchart LR
  A --> B
```

O que ele desenha

flowchart LR
  A --> B

Argumentos

renderer renderizador enum
Who draws it. `pele` (the default) is many times faster and follows the page's theme with no redraw; `mermaid` keeps mermaid's own drawing, for what only it does. A reader can compare a page both ways with `?diagrams=pele` or `?diagrams=mermaid` in the address. Valores aceitos: pele, mermaid
look enum Padrão: page
`editorial`: the diagram in the manner of diagram-design — one accent on the node classed `focal`, the others in ink and muted by their class (`store`, `external`, `input`, `optional`, `security`, via `:::class` or `class A focal`), the name in sans 600 over a mono sublabel (`<br/>` splits them), edge labels in small mono capitals, and arrows in steps when the configuration says `%%{init: {"flowchart": {"curve": "stepAfter"}}}%%`. `page` (the default): mermaid's usual look in the page's colours. Valores aceitos: page, editorial

Corpo

Um diagrama, na gramática do mermaid. Mermaid source, in mermaid's own grammar, configuration included. With `look:editorial`, `# key: value` lines in the body set the sheet (`# unit:`, `# scale: 120 by 20`, `# legend: A; B {x:220}`, `# trend:`, `# source:`), and a `{x: y:}` tag on a row label pins its position; `look:page` ignores them.

Diretivas de seção

Linhas de ::: arrumam a página — faixas, colunas, grades, mídia — em volta de markdown comum. Cada argumento é uma escolha de uma lista, nunca CSS, e toda seção funciona do celular à tela ultra-wide, no tema claro e no escuro.

:::section

A band of the page: its width, its surface (or a picture under it, with a shade that keeps text readable) and the space around it. Everything inside flows top to bottom.

sticky Padrão: none
top holds the whole band at the top of the window while the page scrolls — a contact strip and a :::nav inside it stay together. Give the nav inside no sticky of its own. Valores aceitos: none, top
width Padrão: normal
normal keeps the reading width (the theme's measure: with measure:none, the page's width), medium three quarters of the page width (a 3-column feature list or a centred quote card held narrower than the page, passare.com), wide uses the page width, full runs edge to edge. Valores aceitos: normal, medium, wide, full
surface Padrão: default
The band's background, from the theme: soft (its surface colour), faint (a step lighter than soft, 40% of it on the background), alt (the theme's second ground, surface_alt: a grey band beside peach ones; not set, a neutral grey that follows neither the surface nor the accent), tint (a wash of its accent), accent (the accent itself), accent-2 and accent-3 (the brand's second and third colours, the theme's accent_2 and accent_3, drawn as the accent band is: a magenta and an orange card beside a green page; not set, the accent), inverse (the theme turned over: the text as the ground, or the theme's inverse_background when it names one, a white card on a page of grey-green words), fade (the surface colour at the top paling into the page's background at the bottom; set the theme's surface for its colour), gradient (the theme's gradient_from blending into gradient_to at gradient_angle, the first colour held flat over gradient_hold % of the band: fdl.co's navy stats band is gradient_from #1f3a60, gradient_to #627590, gradient_angle 163, gradient_hold 50; set them with set_theme, never in the page; not set, the accent deepening toward black), gradient-alt (a second one, gradient_alt_from/_to/_angle/_hold; not set, the surface into the alt ground). Text colours are chosen for contrast — on a fade or a gradient, against both ends and the way between — in light and dark schemes. Valores aceitos: default, soft, faint, alt, tint, accent, accent-2, accent-3, inverse, fade, gradient, gradient-alt
media Padrão: none
background lays the band's first picture (alone in its paragraph) under the whole band, behind the text, as a hero's: a photo band, a marble closing band. The band stays as tall as what it holds; the picture covers it, cropped to fit. Valores aceitos: none, background
shade Padrão: dark
Over a background picture: dark (light text) or light (dark text), strong enough for 4.5:1 on any photo. Under light the theme's heading and button colours stay where they read on the wash, and links read at 4.5:1 in both schemes. none lays no wash: the picture is drawn as it is and the text takes the band's surface colours, as without a picture (surface:accent writes on the accent's ink) — for a photo made to carry text, its own background the brand's colour; whether the text reads on it is yours to check. Valores aceitos: dark, light, none
focus Padrão: center
With media:background, which part of the picture stays in view where the band crops it (the same words as :::cover's focus): bottom keeps people standing at the foot of a photo whole at every width, top keeps a sky or a headline in the picture. Ignored with tile:. Valores aceitos: center, top, bottom, left, right
focus_x Padrão: auto
With media:background, the focal point across, in % of the picture from its left edge (focus_x:30 keeps a face a third of the way in), for a point focus:'s five words do not name. auto keeps focus:'s. With focus_y: the point both ways; either alone keeps focus:'s word, or the middle, for the other. Valores aceitos:
focus_y Padrão: auto
With media:background, the focal point down, in % of the picture from its top (focus_y:20 keeps a face in the upper fifth whole as the band grows wide and short). auto keeps focus:'s. Valores aceitos:
height Padrão: auto
auto: as tall as what the band holds. media: with media:background, as tall as its picture at the band's width (the picture's own shape: a 1920x1280 photo makes a 960px band at 1440), never shorter than what it holds. The picture has to be one uploaded to the page (a /f/ address), whose size the site knows; another picture leaves the band as tall as what it holds, and so does the editor's preview. Valores aceitos: auto, media
phone Padrão: background
With media:background, what the picture does on a phone: background keeps it under the text; stack takes it out from under the text and draws it under what the band holds, edge to edge and down to the band's bottom edge, on the band's own surface — the text first, then the people in the photo — at the picture's own shape or phone_ratio's, cropped around focus:. Wider than a phone the picture is the background either way. Valores aceitos: background, stack
phone_ratio Padrão: auto
With phone:stack, the shape the picture is cropped to on a phone, around focus: (focus:bottom keeps the people at the foot of a photo): auto is the picture's own shape; a taller shape (4/5, 3/4) draws it larger, its sides cropped. Valores aceitos: auto, 16/9, 3/2, 4/3, 1/1, 4/5, 3/4
phone_fade Padrão: none
With phone:stack, how the picture under the text begins on a phone: none starts it at a line; soft fades its top third in from the band's own ground, so a photo whose top is a lighter or darker shade of the band's colour meets it without a step. The picture's colours are never read: the band's ground shows through the fade, whatever its surface. Valores aceitos: none, soft
heading Padrão: normal
How large this block's h1 and h2 are: small (0.85 times the level's own size: a title under the theme's h2), normal (the level's own size), large (1.2 times it) or larger (1.4 times it) — a step on whatever sizes the level, the theme's h1_size/h2_size or the band's own scale, so a quote set as a ## in a testimonial band comes out 40px beside 29px section titles (digfamily.co). A card inside keeps its own heading:. h3 and smaller are left as they are. Valores aceitos: small, normal, large, larger
h1 Padrão: auto
This band's own size for its h1, in px on a wide screen (h1:120, a hero's title; h1:200, a club's), as the theme's h1_size is for the page: it shrinks the same way on a phone (to about 65%, never under 1.2 times the text around it), heading: multiplies it, and a card inside reads it. auto keeps the theme's h1_size, or the ladder. From 16 to 200, the theme's own ceiling. Valores aceitos:
h2 Padrão: auto
This band's own size for its h2, in px on a wide screen (h2:36 for a book's title, h2:41 for a curator's beside 29px section titles elsewhere), shrinking on a phone as the theme's h2_size does; heading: multiplies it, a card inside reads it. auto keeps the theme's h2_size, or the ladder. Valores aceitos:
rule Padrão: line
How a `---` written in the block is drawn: line, across the column; short, a 60px bar 3px tall in the accent (as the block's links wear it), under a title — at the start, or in the middle when the block's text is centred (passare.com's support and demo pages). Still a thematic break: it is the --- you write where the bar goes. A line along a band's own top or bottom is the :::section's line:, not this. Valores aceitos: line, short
tile Padrão: none
With media:background, repeats the picture as a texture (a marble, paper, a pattern) instead of covering the band with it, each tile 160px (small), 320px (medium) or 640px (large) wide and never stretched; shade: keeps the text readable as on a photo. The editor's preview shows the picture covering the band; the page tiles it. Valores aceitos: none, small, medium, large
edge_top Padrão: none
The band's top edge as a shape instead of a straight line — wave, torn (paper), curve or slant — cut out of the band so the page shows through, like the bands of fdl.co (wave) and digfamily.co (torn). The band grows by the shape's height, so nothing inside is cut. Valores aceitos: none, wave, torn, curve, slant
edge_bottom Padrão: none
The band's bottom edge as a shape: wave, torn, curve or slant. Same as edge_top, at the bottom. Valores aceitos: none, wave, torn, curve, slant
edge_size Padrão: medium
How fine the edge_top and edge_bottom shapes are. medium is the shape as it has always been drawn (up to 46px tall). small is a fine edge, up to 26px tall, and a small wave or torn edge repeats the shape across the band, so a tear has many small teeth — the fine paper tear of digfamily.co — and a wave becomes a ripple; large is up to 72px tall. A curve or a slant is only made lower or taller. Valores aceitos: small, medium, large
line Padrão: none
A hairline in the band's border colour along its top, its bottom or both edges, across the whole band: a footer band's 1px top border (livros.design). Not the `---` inside the band, which is rule:. Where edge_top or edge_bottom cuts a shape, that edge is the shape and draws no line. Valores aceitos: none, top, bottom, both
space Padrão: 3
Space above and below, a step of the theme's scale. Valores aceitos: 0, 1, 2, 3, 4, 5
space_top Padrão: auto
The space above in px (space_top:52), instead of space:'s step, to match a measured design to the pixel. auto keeps space:'s. Valores aceitos:
space_bottom Padrão: auto
The space below in px (space_bottom:31), instead of space:'s step. auto keeps space:'s. Valores aceitos:
phone_space_top Padrão: auto
The space above in px on a phone (phone_space_top:48), over space_top: and space: there: a measured design that sets its bands closer on a phone. auto keeps the space every screen gets. Valores aceitos:
phone_space_bottom Padrão: auto
The space below in px on a phone (phone_space_bottom:24), over space_bottom: and space: there. auto keeps the space every screen gets. Valores aceitos:
phone_order Padrão: auto
Where the band stands on a phone (phone_order:1), without writing it twice: on a phone the page's bands with a number come in number order, after everything with none and before the footer; wider, the page's own order. To move a band up, number it and the ones it goes before (phone_order:1 on it, 2 and 3 on the next two). Only a band of the page itself, not one inside another block. A screen reader and the keyboard keep the written order, so keep it a reading order that makes sense both ways. Valores aceitos:
font Padrão: inherit
The face of the band's own text: inherit, heading, ui (the theme's face for controls, font_ui) or a local stack — a broker's contact strip and breadcrumb are Poppins over Open Sans. Valores aceitos: inherit, heading, ui, system, serif, mono, arial
align Padrão: left
Where text sits. narrow-center keeps it left on wide screens and centres it on a phone, where a stacked page reads better centred: a switch by screen width, not a narrow column (for that, measure:). Valores aceitos: left, center, narrow-center
measure Padrão: auto
How wide the band's paragraphs and lists run: auto (the theme's reading width), narrow (about 28 characters), medium (about 40: a lede of two lines under a wide headline, as passare.com's hero sets it) or wide (about 60). Under align:center the column stays centred. Headings keep the band's width, so a headline can run wider than the lede under it. Valores aceitos: auto, narrow, medium, wide
lead Padrão: normal
The band's opening paragraph — the first one right after its heading — set larger than the body as a lead: large (the large text step, 18px), larger (the step above it, 20px, as digfamily.co's and passare.com's intros). Only that paragraph; the rest keeps the body size. Valores aceitos: normal, large, larger
buttons Padrão: default
Which pair of colours the band's buttons wear: default, the page's; alt, the theme's second button (button_alt_background and button_alt_foreground in set_theme), as a site draws a dark-green button on its beige heroes and coral ones elsewhere. Every button in the band follows (a line of buttons, a form's send, a bar's actions); the outlined second button keeps the band's ink. Without button_alt_background in the theme, alt changes nothing. accent-2 and accent-3 fill them with the brand's second or third colour (accent_2, accent_3 in set_theme), moved like the accent until it stands out and its label reads (set_theme says when), unless contrast: brand; without that colour in the theme the band keeps the page's buttons. Valores aceitos: default, alt, accent-2, accent-3
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::section width:wide surface:soft space:4 align:center
# Automate your routine
Everything between the lines is ordinary markdown.
:::

:::hero

The opening of a page: at least a given height, content centred — with its first or last thing pinned to the top or bottom edge if asked — optionally over a background image with a shade that keeps text readable.

height Padrão: half
auto fits the content, half is half the window, screen fills it. media, with media:background, is as tall as the picture at the hero's width (its own shape: passare.com's 1920x1280 photo is 960px at 1440), never shorter than the content; the picture has to be uploaded to the page (a /f/ address), and the editor's preview shows the hero as tall as its content. Valores aceitos: auto, half, screen, media
media Padrão: none
background puts the first image inside the hero behind the text. Valores aceitos: none, background
shade Padrão: dark
Over a background image: dark (light text) or light (dark text), strong enough for 4.5:1 on any photo. none lays no wash: the picture is drawn as it is and the text takes the hero's surface colours, as without a picture (surface:accent writes on the accent's ink) — for a photo made to carry text, its own background the brand's colour; whether the text reads on it is yours to check. Valores aceitos: dark, light, none
focus Padrão: center
With media:background, which part of the picture stays in view where the band crops it (the same words as :::cover's focus): bottom keeps people standing at the foot of a photo whole at every width, top keeps a sky or a headline in the picture. Ignored with tile:. Valores aceitos: center, top, bottom, left, right
focus_x Padrão: auto
With media:background, the focal point across, in % of the picture from its left edge (focus_x:30 keeps a face a third of the way in), for a point focus:'s five words do not name. auto keeps focus:'s. With focus_y: the point both ways; either alone keeps focus:'s word, or the middle, for the other. Valores aceitos:
focus_y Padrão: auto
With media:background, the focal point down, in % of the picture from its top (focus_y:20 keeps a face in the upper fifth whole as the band grows wide and short). auto keeps focus:'s. Valores aceitos:
phone Padrão: background
With media:background, what the picture does on a phone: background keeps it under the text; stack takes it out from under the text and draws it under what the band holds, edge to edge and down to the band's bottom edge, on the band's own surface — the text first, then the people in the photo — at the picture's own shape or phone_ratio's, cropped around focus:. Wider than a phone the picture is the background either way. Valores aceitos: background, stack
phone_ratio Padrão: auto
With phone:stack, the shape the picture is cropped to on a phone, around focus: (focus:bottom keeps the people at the foot of a photo): auto is the picture's own shape; a taller shape (4/5, 3/4) draws it larger, its sides cropped. Valores aceitos: auto, 16/9, 3/2, 4/3, 1/1, 4/5, 3/4
phone_fade Padrão: none
With phone:stack, how the picture under the text begins on a phone: none starts it at a line; soft fades its top third in from the band's own ground, so a photo whose top is a lighter or darker shade of the band's colour meets it without a step. The picture's colours are never read: the band's ground shows through the fade, whatever its surface. Valores aceitos: none, soft
tile Padrão: none
With media:background, repeats the picture as a texture (a marble, paper, a pattern) instead of covering the hero with it, each tile 160px (small), 320px (medium) or 640px (large) wide and never stretched; shade: keeps the text readable as on a photo. The editor's preview shows the picture covering the hero; the page tiles it. Valores aceitos: none, small, medium, large
align Padrão: center
Where the content sits. narrow-center is left on wide screens and centred on a phone: a switch by screen width, not a narrow column (for that, measure:). Valores aceitos: center, left, narrow-center
width Padrão: wide
How wide the content may get: normal the reading width, medium three quarters of the page width, wide the page width, full edge to edge. Valores aceitos: normal, medium, wide, full
measure Padrão: auto
How wide the band's paragraphs and lists run: auto (the theme's reading width), narrow (about 28 characters), medium (about 40: a lede of two lines under a wide headline, as passare.com's hero sets it) or wide (about 60). Under align:center the column stays centred. Headings keep the band's width, so a headline can run wider than the lede under it. Valores aceitos: auto, narrow, medium, wide
rule Padrão: line
How a `---` written in the block is drawn: line, across the column; short, a 60px bar 3px tall in the accent (as the block's links wear it), under a title — at the start, or in the middle when the block's text is centred (passare.com's support and demo pages). Still a thematic break: it is the --- you write where the bar goes. A line along a band's own top or bottom is the :::section's line:, not this. Valores aceitos: line, short
surface Padrão: default
The ground when there is no background image (see section surface). alt is the theme's second ground (surface_alt). accent-2 and accent-3 are the brand's second and third colours (accent_2, accent_3; not set, the accent). fade is the theme's surface colour at the top paling into the page's background at the bottom, the text chosen to read on both ends. gradient and gradient-alt are the two gradients the theme names (gradient_from, gradient_to, gradient_angle, gradient_hold, and the same with gradient_alt_), the text chosen to read on all of it. Valores aceitos: default, soft, alt, tint, accent, accent-2, accent-3, inverse, fade, gradient, gradient-alt
edge_top Padrão: none
The band's top edge as a shape instead of a straight line — wave, torn (paper), curve or slant — cut out of the band so the page shows through, like the bands of fdl.co (wave) and digfamily.co (torn). The band grows by the shape's height, so nothing inside is cut. Valores aceitos: none, wave, torn, curve, slant
edge_bottom Padrão: none
The band's bottom edge as a shape: wave, torn, curve or slant. Same as edge_top, at the bottom. Valores aceitos: none, wave, torn, curve, slant
edge_size Padrão: medium
How fine the edge_top and edge_bottom shapes are. medium is the shape as it has always been drawn (up to 46px tall). small is a fine edge, up to 26px tall, and a small wave or torn edge repeats the shape across the band, so a tear has many small teeth — the fine paper tear of digfamily.co — and a wave becomes a ripple; large is up to 72px tall. A curve or a slant is only made lower or taller. Valores aceitos: small, medium, large
space Padrão: 5
The space above and below the content, a step of the theme's scale: 5, the default, is the largest (4 when pin: is set); 2 or 3 makes a compact hero, as digfamily.co's are. Valores aceitos: 0, 1, 2, 3, 4, 5
space_top Padrão: auto
The space above the content in px (space_top:65), instead of space:'s step, to match a measured design. auto keeps space:'s. Valores aceitos:
space_bottom Padrão: auto
The space below the content in px (space_bottom:65), instead of space:'s step. auto keeps space:'s. Valores aceitos:
phone_space_top Padrão: auto
The space above the content in px on a phone (phone_space_top:40), over space_top: and space: there. auto keeps the space every screen gets. Valores aceitos:
phone_space_bottom Padrão: auto
The space below the content in px on a phone, over space_bottom: and space: there. auto keeps the space every screen gets. Valores aceitos:
pin Padrão: none
Keeps the hero's first thing at its top edge (a logo, an eyebrow), its last at the bottom (a row of logos, a hint to scroll), or both, while the rest stays centred. It shows when the hero is taller than its content: height half or screen. Valores aceitos: none, first, last, both
h1 Padrão: auto
This band's own size for its h1, in px on a wide screen (h1:120, a hero's title; h1:200, a club's), as the theme's h1_size is for the page: it shrinks the same way on a phone (to about 65%, never under 1.2 times the text around it), heading: multiplies it, and a card inside reads it. auto keeps the theme's h1_size, or the ladder. From 16 to 200, the theme's own ceiling. Valores aceitos:
h2 Padrão: auto
This band's own size for its h2, in px on a wide screen (h2:36 for a book's title, h2:41 for a curator's beside 29px section titles elsewhere), shrinking on a phone as the theme's h2_size does; heading: multiplies it, a card inside reads it. auto keeps the theme's h2_size, or the ladder. Valores aceitos:
lead Padrão: normal
The band's opening paragraph — the first one right after its heading — set larger than the body as a lead: large (the large text step, 18px), larger (the step above it, 20px, as digfamily.co's and passare.com's intros). Only that paragraph; the rest keeps the body size. Valores aceitos: normal, large, larger
buttons Padrão: default
Which pair of colours the band's buttons wear: default, the page's; alt, the theme's second button (button_alt_background and button_alt_foreground in set_theme), as a site draws a dark-green button on its beige heroes and coral ones elsewhere. Every button in the band follows (a line of buttons, a form's send, a bar's actions); the outlined second button keeps the band's ink. Without button_alt_background in the theme, alt changes nothing. accent-2 and accent-3 fill them with the brand's second or third colour (accent_2, accent_3 in set_theme), moved like the accent until it stands out and its label reads (set_theme says when), unless contrast: brand; without that colour in the theme the band keeps the page's buttons. Valores aceitos: default, alt, accent-2, accent-3
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::hero height:screen media:background shade:dark
![A desk at sunrise](/uploads/desk.jpg)
# Work that runs itself
Automate the routine between your tools.
:::

:::split

Two parts side by side — text and media — that stack when there is not room for both. By ratio, the two share the width; with a rail, the first is a side column of a fixed width and the other takes the rest.

Os itens são separados por uma linha ---.

ratio Padrão: 1/2
How much of the width the first part takes. Valores aceitos: 1/3, 1/2, 2/3
side Padrão: left
Which part comes first on wide screens; on narrow ones the first item is always on top. Valores aceitos: left, right
align Padrão: center
Vertical alignment of the two parts. Valores aceitos: start, center, end
space Padrão: 3
The gap, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4, 5
narrow Padrão: stack
stack puts the parts one above the other when narrow; keep keeps them side by side. Valores aceitos: stack, keep
medium Padrão: auto
stack puts the parts one above the other in the theme's medium layout too, as on a phone: wider than a phone and narrower than the theme's wide_from (a hero's cards under its title on a tablet, beside it from 1440). auto keeps them side by side when there is room. Without wide_from in the theme there is no medium layout and stack changes nothing. Valores aceitos: auto, stack
reverse Padrão: none
narrow puts the second part on top when the parts stack, so a picture written after its text comes first on a phone. Valores aceitos: none, narrow
sticky Padrão: none
Which part stays in place while the other scrolls past it, as a portfolio's side column does. It only sticks while the parts are side by side, never when they stack. Valores aceitos: none, first, second
media Padrão: none
bleed: the second part (the picture) runs past the split to the page's edge on its side — the right, or the left with side:right — while the text keeps its column, as fdl.co's heroes set a photo from the middle of the page to the screen's edge. From a page 48rem wide, where the parts are always side by side; narrower they stack as usual. Wrap a hero's text and picture in a split to bleed the hero's picture. Valores aceitos: none, bleed
rail Padrão: none
Makes the first part a side column of that width, in rem, and gives the other part everything else — a side menu, a portfolio's rail, a form beside a text. The side keeps its width on any screen instead of growing with it, and the parts stack when the other would get less than half. With a rail, ratio is not used. Valores aceitos: none, 12, 16, 20, 24
heading Padrão: normal
How large this block's h1 and h2 are: small (0.85 times the level's own size: a title under the theme's h2), normal (the level's own size), large (1.2 times it) or larger (1.4 times it) — a step on whatever sizes the level, the theme's h1_size/h2_size or the band's own scale, so a quote set as a ## in a testimonial band comes out 40px beside 29px section titles (digfamily.co). A card inside keeps its own heading:. h3 and smaller are left as they are. Valores aceitos: small, normal, large, larger
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::split ratio:1/2 side:right
## Text first
A paragraph that sits beside the picture.
---
![Product](/uploads/product.png)
:::

:::columns

Items side by side in equal columns, all stacking at once when the row gets too narrow.

Os itens são separados por uma linha ---.

threshold Padrão: 40
Below this width, in rem, the columns stack. Valores aceitos: 30, 40, 50, 60
limit Padrão: 4
With more items than this, they stack whatever the width. Valores aceitos: 2, 3, 4, 5
align Padrão: stretch
Vertical alignment of the columns. Valores aceitos: start, center, end, stretch
items Padrão: plain
card draws each item as a card; stat sets each item's heading as a large number (it counts up when motion is on); step numbers the items as a process. Valores aceitos: plain, card, stat, step
number Padrão: default
With items:stat, the colour of the number: default is the heading colour, accent the theme's accent as text (moved until it reads on the ground it sits on, a band's included), muted its secondary text colour. Valores aceitos: default, accent, muted
caption Padrão: muted
With items:stat, the line after the number: muted (under it, in the secondary text colour), plain (under it, the body text as any paragraph) or above (over it, in the secondary text colour: an app dashboard's "Focused time" over "2h 31m"; a @data view:metric in the item puts its label over its number too). The item is written the same way, the figure first. Valores aceitos: muted, plain, above
size Padrão: normal
With items:stat, how large the number is drawn, always in proportion to its column: normal (about 30-60px), large (38-72px), display (45-88px), for a site whose figures are the page's largest type. The top of each range needs a wide column: in a section of the default width, three columns draw large at about 53px; width:wide or fewer columns reach it. Valores aceitos: normal, large, display
unit Padrão: default
With items:stat, the unit after the figure, written in emphasis with a space before it (`## 24K *+*`, `## 60 *%*`): accent sets it apart in the theme's accent (as links wear it on that ground, moved until it reads), muted in the secondary text colour; either draws it upright, a little smaller than the figure. default leaves the emphasis as written, in the number's colour. Valores aceitos: default, accent, muted
marker Padrão: filled
With items:step, how each step's number is drawn: filled (a small disc in the button colour) or outline (a large ring, 3rem, a thin line in the accent with the number inside it in the accent, as a three-step process draws its circled numerals). Valores aceitos: filled, outline
space Padrão: 3
The gap, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4, 5
icon_size Padrão: small
How large an item's feature icon is drawn: an `icon:` alone on the item's first line (`` `icon:truck` `` over a `### Title`). small is 28px, medium 36px, large 48px. Nothing else in the item changes. Valores aceitos: small, medium, large
icon_ground Padrão: none
A pale ground behind each item's feature icon, twice the icon's size: circle (a disc, as an icon row without cards draws it) or square (the theme's rounded corners). The ground is the theme's accent at a low strength over whatever is under it (on a band, the band's link colour), so it follows the theme in light and dark. none draws the icon bare. Valores aceitos: none, circle, square
icon_color Padrão: accent
The colour of each item's feature icon: accent (the accent as links wear it on that ground) or foreground (the item's own text colour: dark on a light page, light on a dark one or on an accent band). Valores aceitos: accent, foreground
icon_place Padrão: top
Where each item's feature icon stands: top (over the item's words) or side (at the start of the item, the words beside it, the icon centred on them) — a row of facts under a hero or a stats band, each an outline icon beside two short lines. On a phone the icon stays beside its words. Valores aceitos: top, side
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::columns items:card
### Plan
Tell us what you need.
---
### Build
We build it with you.
---
### Launch
It goes live.
:::

:::grid

As many items per row as fit, each at least `min` wide; one per row on a phone. An item can span more columns or rows with :::cell.

Os itens são separados por uma linha ---.

min Padrão: 16
The smallest an item may get, in rem, before the row wraps. Valores aceitos: 8, 10, 12, 14, 16, 18, 20, 24, 28
cols Padrão: auto
At most this many items per row, however wide the page gets. Six items with cols:3 come out as two rows of three instead of five and one alone; cols:5 holds a course site's five tracks on one row (min:12 or smaller lets them fit a laptop). A phone still gets one per row. Valores aceitos: auto, 2, 3, 4, 5
items Padrão: plain
card draws each item as a card; stat sets each item's heading as a large number (it counts up when motion is on); step numbers the items as a process. Valores aceitos: plain, card, stat, step
media Padrão: none
With items:card, background: each card's first picture (alone in its paragraph) is its ground, covering the card however tall the row makes it, with the card's own ground washed over it so its text reads — :::card media:background for every card of the grid (a row of quote panels on marble). Valores aceitos: none, background
number Padrão: default
With items:stat, the colour of the number: default is the heading colour, accent the theme's accent as text (moved until it reads on the ground it sits on, a band's included), muted its secondary text colour. Valores aceitos: default, accent, muted
caption Padrão: muted
With items:stat, the line after the number: muted (under it, in the secondary text colour), plain (under it, the body text as any paragraph) or above (over it, in the secondary text colour: an app dashboard's "Focused time" over "2h 31m"; a @data view:metric in the item puts its label over its number too). The item is written the same way, the figure first. Valores aceitos: muted, plain, above
size Padrão: normal
With items:stat, how large the number is drawn, always in proportion to its column: normal (about 30-60px), large (38-72px), display (45-88px), for a site whose figures are the page's largest type. The top of each range needs a wide column: in a section of the default width, three columns draw large at about 53px; width:wide or fewer columns reach it. Valores aceitos: normal, large, display
unit Padrão: default
With items:stat, the unit after the figure, written in emphasis with a space before it (`## 24K *+*`, `## 60 *%*`): accent sets it apart in the theme's accent (as links wear it on that ground, moved until it reads), muted in the secondary text colour; either draws it upright, a little smaller than the figure. default leaves the emphasis as written, in the number's colour. Valores aceitos: default, accent, muted
marker Padrão: filled
With items:step, how each step's number is drawn: filled (a small disc in the button colour) or outline (a large ring, 3rem, a thin line in the accent with the number inside it in the accent, as a three-step process draws its circled numerals). Valores aceitos: filled, outline
align Padrão: stretch
Vertical alignment of items in a row. Valores aceitos: stretch, start, center
space Padrão: 3
The gap, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4, 5
last Padrão: start
Where an incomplete last row sits: start (the grid's own) or center (fdl.co's five benefits as three and two, the two in the middle), each cell as wide as a column of the rows above. Best with cols:; a :::cell span: is not kept in a centred grid. Valores aceitos: start, center
divider Padrão: none
line draws a thin rule between the cells, in the band's border colour, and none around the grid: a row of five facts separated by hairlines. The cells take half the gap as padding. Valores aceitos: none, line
phone Padrão: stack
What the grid does on a phone: stack (the default) puts its items one under the other; scroll keeps them in one row that scrolls sideways, each item a little narrower than the screen so the next one peeks in, snapping to the row's start (a row of categories, the recent obituaries, five course tracks). Wider than a phone it is the grid it was. Nothing moves by itself: a finger, a trackpad, or the keyboard through the items' own links moves it, and a screen reader reads every item in order. With reduced motion the row never scrolls smoothly. Valores aceitos: stack, scroll
icon_size Padrão: small
How large an item's feature icon is drawn: an `icon:` alone on the item's first line (`` `icon:truck` `` over a `### Title`). small is 28px, medium 36px, large 48px. Nothing else in the item changes. Valores aceitos: small, medium, large
icon_ground Padrão: none
A pale ground behind each item's feature icon, twice the icon's size: circle (a disc, as an icon row without cards draws it) or square (the theme's rounded corners). The ground is the theme's accent at a low strength over whatever is under it (on a band, the band's link colour), so it follows the theme in light and dark. none draws the icon bare. Valores aceitos: none, circle, square
icon_color Padrão: accent
The colour of each item's feature icon: accent (the accent as links wear it on that ground) or foreground (the item's own text colour: dark on a light page, light on a dark one or on an accent band). Valores aceitos: accent, foreground
icon_place Padrão: top
Where each item's feature icon stands: top (over the item's words) or side (at the start of the item, the words beside it, the icon centred on them) — a row of facts under a hero or a stats band, each an outline icon beside two short lines. On a phone the icon stays beside its words. Valores aceitos: top, side
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
lightbox Padrão: off
on: each picture of the block opens full size over the page when clicked (Escape or a click outside closes it), with Previous and Next, the arrow keys and a swipe through the block's other pictures; only the picture shown is loaded. A picture that is already a link keeps its link. Without a script, a click opens the picture itself. Valores aceitos: off, on
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::grid min:16 items:card
### Fast
Pages render in milliseconds.
---
### Typed
Nothing you write becomes CSS.
:::

:::cell

Inside a grid item: how many columns and rows that item takes (bento layouts), and which layer it sits on. Inside a :::footer item, span: alone: the columns that item takes, or full for a row of its own.

span Padrão: 1
Columns the item takes; full takes the whole row. On a phone every item is one column (a footer's full row stays a row). Valores aceitos: 1, 2, 3, 4, full
rows Padrão: 1
Rows the item takes. Valores aceitos: 1, 2, 3
layer Padrão: 0
Stacking order when items overlap (with offset). Valores aceitos: 0, 1, 2, 3
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::grid min:14
:::cell span:2 rows:2
![Hero shot](/uploads/hero.jpg)
:::
---
### Small tile
:::

:::card

A panel: a surface, padding, the theme's radius, an optional border and shadow.

tone Padrão: soft
The panel's surface, with contrast-checked text (see section surface). alt is the theme's second ground (surface_alt), as on a band; accent-2 and accent-3 the brand's second and third colours (accent_2, accent_3; not set, the accent). ok, warn, info and danger are a status: the panel takes a light wash of the colour a pill of that status wears, for a notice, a result or a warning. Valores aceitos: default, soft, alt, tint, accent, accent-2, accent-3, inverse, ok, warn, info, danger
media Padrão: inset
bleed: a frameless picture (`:::cover frame:none`) that opens the card runs to the card's edges, under the card's top corners, as a listing card shows its photo; the text keeps the card's padding. background: the card's first picture (alone in its paragraph) is its ground, covering the whole card however tall it grows (a marble quote panel beside a form), with the card's own ground washed over it so its text reads as on the plain card. Valores aceitos: inset, bleed, background
wash Padrão: even
With media:background, how the card's own ground lies over its picture: even (the same veil all over) or start (solid at the start, where the words begin, thinning toward the end so the photo shows there — a dark-green subscription panel over a photo of a team). The end keeps enough of the ground for text there to read. Valores aceitos: even, start
border Padrão: none
A hairline border: line all round; sides one rule at each side and none above or below, a quote set between two thin rules (digfamily.co). In the border colour of the band it sits on. Valores aceitos: none, line, sides
rule Padrão: line
How a `---` written in the block is drawn: line, across the column; short, a 60px bar 3px tall in the accent (as the block's links wear it), under a title — at the start, or in the middle when the block's text is centred (passare.com's support and demo pages). Still a thematic break: it is the --- you write where the bar goes. A line along a band's own top or bottom is the :::section's line:, not this. Valores aceitos: line, short
text Padrão: inherit
The size of the panel's own text, in px, whatever the page's body size: a site whose body is 12px writes its chips at 15 (text:15). Valores aceitos: inherit, 12, 13, 14, 15, 16, 18
font Padrão: inherit
The face of the panel's own text: inherit (the page's body face), heading (the theme's heading face), ui (the theme's face for controls, font_ui) or a local stack that loads nothing (system, serif, mono, arial) — a broker's search chips are Arial on an Open Sans page. Valores aceitos: inherit, heading, ui, system, serif, mono, arial
align Padrão: inherit
Where the panel's text sits: inherit (as the band around it: centred in a centred section), start (to the left whatever the band does, as a card's text stays in fdl.co's centred testimonials), center, or header (its heading, price and words centred and its lists at the start, as passare.com's launch-plan cards). Valores aceitos: inherit, start, center, header
heading Padrão: normal
How large the panel's own headings are: normal (the theme's), large (20px and bold, as a call-to-action tile's line is set) or larger (22px, a listing's count above its cards), whatever the theme's heading scale; display 1.65 times the size a band's h2 is drawn at (a quote card's 48px quote beside 29px section titles, fdl.co). Valores aceitos: normal, large, larger, display
height Padrão: auto
How tall the panel stands at least, its content centred top to bottom: auto (as tall as what it holds), short (about 190px), medium (300px, a broker's call-to-action tile) or tall (400px). Valores aceitos: auto, short, medium, tall
radius Padrão: auto
The panel's corners, in px, a step of the radius scale: auto keeps the theme's radius; 0 is square, 24 a site's rounded cards, 32 a newsletter card that is almost a pill. A picture run to its edges (media:bleed) rounds with it. Valores aceitos: auto, 0, 4, 8, 12, 16, 20, 24, 32
shadow Padrão: none
A shadow under the panel. Valores aceitos: none, soft, lifted
space Padrão: 2
Padding inside, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4
padding Padrão: auto
The padding inside in px (padding:30), instead of space:'s step, to match a measured design. auto keeps space:'s. Valores aceitos:
offset Padrão: 0
Overlap a neighbour by a step of the scale, drawn over it: up-1 to up-3 pull the element up into the content above it; down-1 to down-3 let it hang past its own bottom over what follows — a split's picture overhanging the band below it, a card riding over the next band's top. It takes no room there: what follows moves up under it by the same step. down-* acts from a page 48rem wide; narrower, where everything is one column and what follows is full-width text, the element takes its own room. Valores aceitos: 0, up-1, up-2, up-3, down-1, down-2, down-3
tilt Padrão: none
A slight rotation, a few degrees. Valores aceitos: none, left, right
flow Padrão: auto
The space between one thing and the next inside it, a step of the theme's scale: one space for everything, whatever the things are. auto keeps each element's own margins, which is what prose wants — a heading further from the paragraph above it than from the one below. Valores aceitos: auto, 0, 1, 2, 3, 4, 5
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::card tone:accent shadow:lifted
### Founding plan
Everything, for the first hundred creators.
:::

:::table

A markdown table drawn as a comparison or a price list: one column filled, the plan columns a step deeper each. Write the table inside as usual; align:center centres the columns after the labels, and a picture in a cell (a logo in a header) is drawn in it at a line's height or two.

highlight Padrão: none
One column filled in the theme's inverse pair — its foreground as the ground, its background as the text — from the header to the last row: the offer a comparison argues for (fdl.co's FDL column, navy with white text, beside the local bank's). Valores aceitos: none, 2, 3, 4, 5, last
steps Padrão: none
columns: each column after the first (the row labels) a step deeper into the theme's surface colour, as a price list shades its plans from the cheapest to the fullest. Valores aceitos: none, columns
align Padrão: start
center: every column after the first (the row labels) centred, header included, as a comparison sets its yes and no under each plan. Valores aceitos: start, center
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number

Exemplo

:::table highlight:last
| | Local bank | Ours |
|:--|:--:|:--:|
| Rate | Variable | Fixed |
| Approval | Weeks | Days |
:::

:::inline

Items in a line that wraps: buttons, tags, logos, small facts.

Os itens são separados por uma linha ---.

justify Padrão: start
How the line is distributed. Valores aceitos: start, center, end, between
align Padrão: center
Vertical alignment within a line. Valores aceitos: center, start, end
space Padrão: 2
The gap, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4
space_top Padrão: auto
The room above the line in px (space_top:34), instead of the line's own margin, to match a measured design. Valores aceitos:
space_bottom Padrão: auto
The room under the line in px (space_bottom:46), instead of the line's own margin. Valores aceitos:
sticky Padrão: none
top keeps the line at the top of the screen while the page scrolls under it, below the app's header: a few buttons that change how the page is viewed (Pele / Mermaid, light / dark), with no bar behind them. Valores aceitos: none, top
phone Padrão: wrap
What the line does on a phone: wrap keeps its items side by side, wrapping when they do not fit; stack puts them one above the other, each as wide as the line, a button's words centred — a hero's two buttons as passare.com sets them on a phone; scroll keeps them on one line that scrolls sideways, each item its own width (a row of category pills, a site's tabs; it does not stop at each item, which would pull the one the keyboard reached out of view), reachable with the keyboard through their links and read in order by a screen reader. Wider than a phone the line is a line either way. Valores aceitos: wrap, stack, scroll
wide Padrão: wrap
What the line does wider than a phone: wrap (the default) keeps its items side by side, wrapping when they do not fit; scroll keeps them on one line that scrolls sideways when they do not fit, each item its own width (a long row of category pills on a desktop), reachable with the keyboard through their links. On a phone, phone: decides. Valores aceitos: wrap, scroll
logos Padrão: none
A logo strip: every picture in the line at one height — small 24px, medium 32px, large 48px — linked or not, drawn whole, a wide wordmark held to five times its height, and, without space:, a wider gap. A linked picture with alt text ([![App Store](/f/badge.png)](url)) is always the picture, never a button. Valores aceitos: none, small, medium, large
pictures Padrão: auto
The height of every picture in the line, in px (pictures:70), drawn whole at its own shape: a testimonial's 70px headshots, a row of 40px icons, a signature beside a portrait (pictures:240), a shelf of book spines (pictures:420) — every px to 240, then in steps of 20 to 600. natural draws each picture at its own size (never wider than the line), side by side and bottom-aligned, pictures in one paragraph too, wrapping when they do not fit: a bookshelf of covers of different heights. auto keeps a line's 36px, or logos:'s height; set with logos:, this one wins and the strip keeps its spacing. Valores aceitos:
logos_tone Padrão: original
Recolours every picture in the line: dark draws them black, for white-on-transparent logos on a light ground; light draws them white, for dark logos on an accent, inverse or photo ground; muted draws them grey and quieter, their shapes kept, as a site's 'in good company' row is drawn. original keeps their colours. In a reader's dark scheme dark and light swap, so the logos stay visible on the dark ground. Valores aceitos: original, dark, light, muted
items Padrão: plain
chip draws each item as a pill, 48px tall and fully rounded: its picture and its words on one line, centred, the words 15px at weight 500 in the chip's ink — a footer's "@willianmatiola" beside his portrait, a partner's logo and name. The picture is a 36px circle cut from the middle of the picture (pictures:<px> sets another size); with logos:small|medium|large it is a logo instead, drawn whole at that height and never cut. Write the picture inside the link ([![Willian](/f/w.jpg) @willianmatiola](https://…)) or beside it (![Logo](/f/l.png) [Partner](https://…)): an item whose paragraph holds one link is that link everywhere on the chip, ringed as a whole when the keyboard reaches it. The ground: the theme's surface on the page (the page's own ground on a soft, tint or alt band, as cards are), and on a dark ground — an accent or inverse band, a gradient, a photo under a dark shade — the band's ground darkened (black at 15%), its words in the band's ink. On a phone chips wrap as the line does (phone: still says otherwise). One kind of picture per line: portraits and logos are two lines. Valores aceitos: plain, chip
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::inline justify:center
[Start free](/signup)
---
[See pricing](/pricing)
:::

:::cover

Media cropped to a ratio, optionally in a device frame.

ratio Padrão: 16/9
The shape the image or video is cropped to. auto keeps the picture's own shape, never cropped, at its own width — never stretched past its own pixels or past the column — and centred, as a blog shows its pictures; with size:, the size is the widest it gets (:::cover ratio:auto size:medium is a 1600px screenshot at 512px, a 300px picture at 300px). Valores aceitos: 16/9, 16/10, 3/2, 4/3, 5/4, 1/1, 4/5, 3/4, 2/3, 9/16, 2/1, 21/9, auto
focus Padrão: center
Which part of the media stays in view when it is cropped. Valores aceitos: center, top, bottom, left, right
focus_x Padrão: auto
The focal point across, in % of the media from its left edge, for a crop focus:'s five words do not name: focus_x:70 focus_y:30 keeps a face up and to the right whole in a 4/5 crop of a wide photo. auto keeps focus:'s; either alone keeps focus:'s word, or the middle, for the other. Valores aceitos:
focus_y Padrão: auto
The focal point down, in % of the media from its top (focus_y:25). auto keeps focus:'s. Valores aceitos:
fit Padrão: cover
cover fills the ratio's shape, cropping what does not fit (around focus:); contain draws the whole picture inside the shape, never cropped, on ground: where it leaves room — a product shot or a logo kept whole in a row of 4/3 tiles. Valores aceitos: cover, contain
frame Padrão: rounded
none, rounded corners, a circle (avatars), a browser window or a phone around the media. Valores aceitos: none, rounded, circle, browser, phone
ground Padrão: none
A ground of the theme's under the picture, which shows wherever the picture is transparent: soft (the surface), tint (a wash of the accent), alt (the second ground), accent, accent-2 or accent-3 (the brand's second and third colours; not set, the accent). A portrait cut out of its background on a pastel circle is frame:circle ground:tint (passare.com's team). Valores aceitos: none, soft, tint, alt, accent, accent-2, accent-3
shadow Padrão: none
A shadow under the media. Valores aceitos: none, soft, lifted
shade Padrão: none
A dark wash over the media so what an overlay writes on it reads: bottom darkens the lower half (a price under a photo), top the upper half, dark the whole picture evenly. A plain overlay on a shaded cover writes in white. Valores aceitos: none, bottom, top, dark
size Padrão: full
How wide the media is, never wider than its column: full fills it, half is half of it, medium up to 512px (a video poster beside text), compact up to 480px (a blog's featured picture), narrow up to 384px (a blog's picture inside a post, a phone screenshot), small 96px (a headshot in a byline; with frame:circle, round), icon 40px (a feature's icon, drawn whole, never cropped), or a width in px (size:300, a book's cover between small and narrow) — every px to 240, then in steps of 20 to 600, the scale pictures: takes. small and icon are square unless ratio: says otherwise; in a centred band or hero the media sits in the middle; with ratio:auto a number is the widest it gets, as a word is. Valores aceitos:
align Padrão: auto
Where a cover narrower than its column (size:, or ratio:auto) sits: auto (centred directly in a centred section or hero, and with ratio:auto; at the start elsewhere), start (always at the start, even in a centred band), or center (always centred: a round headshot under a card in a grid or columns item of a centred section). Valores aceitos: auto, start, center
offset Padrão: 0
Overlap a neighbour by a step of the scale, drawn over it: up-1 to up-3 pull the element up into the content above it; down-1 to down-3 let it hang past its own bottom over what follows — a split's picture overhanging the band below it, a card riding over the next band's top. It takes no room there: what follows moves up under it by the same step. down-* acts from a page 48rem wide; narrower, where everything is one column and what follows is full-width text, the element takes its own room. Valores aceitos: 0, up-1, up-2, up-3, down-1, down-2, down-3
tilt Padrão: none
A slight rotation, a few degrees. Valores aceitos: none, left, right
lightbox Padrão: off
on: each picture of the block opens full size over the page when clicked (Escape or a click outside closes it), with Previous and Next, the arrow keys and a swipe through the block's other pictures; only the picture shown is loaded. A picture that is already a link keeps its link. Without a script, a click opens the picture itself. Valores aceitos: off, on
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::cover ratio:16/9 frame:browser shadow:lifted
![The dashboard](/uploads/dashboard.png)
:::

:::overlay

Content placed over its parent and kept inside it: a badge on a picture, or — with kind:plain — anything at all, a card over a photo, a caption, a play button.

at Padrão: center
Where on the parent it sits. Valores aceitos: center, top-left, top-right, bottom-left, bottom-right, bottom
kind Padrão: badge
badge draws it as a small pill, which is what a label on a picture wants. plain draws nothing of its own: whatever is inside — a card, a heading, a button — sits over the parent as it is, never larger than the parent, scrolling inside itself if it would be. tags: each paragraph a small capitalised tag on a dark ground, stacked down the corner, as a listing marks its photo (exclusive, for sale, available); a paragraph that is only a picture stays a picture, a favourite button above the tags. Valores aceitos: badge, plain, tags
tone Padrão: default
The colour of a badge or of the tags (kind:badge, kind:tags): default (a badge on the theme's surface, a tag on a dark wash), accent, or the brand's second or third colour (accent-2, accent-3: an orange "New" on a cover; not set, the accent), with the text picked to read on it. kind:plain draws no ground of its own and ignores it. Valores aceitos: default, accent, accent-2, accent-3
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::cover ratio:4/3
![Studio](/uploads/studio.jpg)
:::overlay at:top-right
**New**
:::
:::

:::box

A plain container with no look of its own: what it holds flows top to bottom, and nothing about it shows until a style dresses it (`style:<name>`, manual styles) — the ring of covers behind a card, a collage, a layer placed by hand. Without a style it is a group and nothing more.

style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number

Exemplo

:::box style:anel
![A cover](/demo/layout/work-1.svg)
![Another cover](/demo/layout/work-2.svg)
:::

:::masonry

Items of different heights packed into columns, like a photo wall. Reading order runs down each column.

Os itens são separados por uma linha ---.

min Padrão: 16
The narrowest a column may get, in rem. Valores aceitos: 12, 14, 16, 18, 20, 24
items Padrão: plain
card draws each item as a card. Valores aceitos: plain, card
space Padrão: 3
The gap, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4
lightbox Padrão: off
on: each picture of the block opens full size over the page when clicked (Escape or a click outside closes it), with Previous and Next, the arrow keys and a swipe through the block's other pictures; only the picture shown is loaded. A picture that is already a link keeps its link. Without a script, a click opens the picture itself. Valores aceitos: off, on
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
motion Padrão: none
How it appears as the reader scrolls to it; items of a layout arrive one after another. Nothing moves for a reader who asks for reduced motion, and without JavaScript everything is simply there. Valores aceitos: none, fade, rise, scale
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::masonry min:14 items:card
"Short quote." — Ana
---
A longer testimonial that takes more lines than the others.
:::

:::marquee

A strip that scrolls by itself, for logos or short quotes. It pauses on hover and stands still for a reader who asks for reduced motion.

Os itens são separados por uma linha ---.

speed Padrão: normal
How fast the strip moves. Valores aceitos: slow, normal, fast
direction Padrão: left
Which way it moves. Valores aceitos: left, right
space Padrão: 4
The gap between items, a step of the theme's scale. Valores aceitos: 1, 2, 3, 4, 5
logos Padrão: none
A strip of logos at one height — small 24px, medium 32px, large 48px — each drawn whole, a wide wordmark held to five times its height. none keeps a line's 36px. Valores aceitos: none, small, medium, large
pictures Padrão: auto
The height of every picture in the strip, in px (pictures:60: fdl.co's strip of funeral homes), drawn whole at its own shape — every px to 240, then in steps of 20 to 600, the scale :::inline's pictures: takes; set with logos:, this one wins. Valores aceitos:
logos_tone Padrão: original
Recolours every picture in the line: dark draws them black, for white-on-transparent logos on a light ground; light draws them white, for dark logos on an accent, inverse or photo ground; muted draws them grey and quieter, their shapes kept, as a site's 'in good company' row is drawn. original keeps their colours. In a reader's dark scheme dark and light swap, so the logos stay visible on the dark ground. Valores aceitos: original, dark, light, muted
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::marquee speed:slow
![Northwind](/demo/layout/logo-northwind.svg)
---
![Acme](/demo/layout/logo-acme.svg)
---
![Globex](/demo/layout/logo-globex.svg)
:::

:::nav

A site's navigation bar: the brand, then the links (a list item with a list under it is a menu), then the actions (lone links become buttons). On a phone the links move to their own scrolling row. A menu: `- Product` (or a link) with its links indented under it opens a panel, on hover, click, tap or Enter; the words after a link on its line are its second, muted line (`- [Families](./families) For the families you serve`); a label in the panel with links under it is a titled column (`- Popular features`, then its links), so a mega menu is two levels: deeper lists are drawn plain, and validate says so. On a phone the panel opens under the whole bar, or, with phone:drawer, the links are behind a menu button and each menu is a fold inside that drawer; drawer:always puts them behind that button at every width, with whatever else the links item holds (promo cards).

Os itens são separados por uma linha ---.

sticky Padrão: none
top keeps the bar at the top of the page while scrolling. Valores aceitos: none, top
surface Padrão: default
The bar's ground, with contrast-checked text. Valores aceitos: default, soft, inverse
width Padrão: wide
How wide the bar's content may get. Valores aceitos: wide, full
brand Padrão: normal
How tall the brand's picture is drawn: normal (the height of a line of text), small, or large (a wide logo with a wordmark, twice as tall). Valores aceitos: normal, small, large
align Padrão: end
Where the links sit: end puts them with the actions at the far end of the bar; start puts them right after the brand, the actions alone at the end (digfamily.co's header). Valores aceitos: end, start
menus Padrão: chevron
chevron draws a small arrow after every menu's label; plain draws none after a label of words, which still opens the menu on hover, click, tap or Enter (a label that is a link keeps its arrow: it is the only thing that opens that menu). A phone's drawer keeps every arrow. Valores aceitos: chevron, plain
links Padrão: plain
plain: the links in the bar's text colour, the page being read underlined. quiet: the links in the muted colour and semi-bold, the page being read in the accent with no line, as a shop's or a broker's menu is drawn. Valores aceitos: plain, quiet
space Padrão: normal
The room between the links: normal, or tight (about a word's width), for a menu of five or six on one line. Valores aceitos: normal, tight
line Padrão: subtle
The line under the bar: the border colour, the accent colour, the brand's second or third colour (accent-2, accent-3; not set, the accent), or none. Valores aceitos: subtle, accent, accent-2, accent-3, none
height Padrão: normal
How tall the bar stands: normal (its contents and a little air), or tall (101px, a small logo floating in a roomy white bar, as a broker's or a shop's header is drawn). Valores aceitos: normal, tall
text Padrão: inherit
The size of the menu's links, in px (text:15), whatever the page's body size: a broker's menu is 15px on a 12px page. Valores aceitos: inherit, 12, 13, 14, 15, 16, 18
ground Padrão: solid
The bar's ground: solid, or veil (90% of it, the page showing faintly through as it scrolls under a sticky bar, as a broker's header does). Valores aceitos: solid, veil
phone Padrão: row
Where the links go on a phone: row puts them on a row of their own under the brand that scrolls sideways; drawer hides them behind a menu button at the end of the bar (the actions stay in the bar, unless phone_actions:drawer) that opens them as a panel under the whole bar, one link per line, each menu a fold that opens its links under its label. Wider than a phone both are one bar. Valores aceitos: row, drawer
drawer Padrão: phone
Where the links are behind a menu button: phone, only on a phone and only with phone:drawer (the bar as it was); always, at every width — the bar is the brand, the menu button and the actions, as a site whose header is a logo and a menu button on a desktop too — the button opening a panel under the whole bar. With always the links item may hold any markdown after its links, drawn in the panel: a :::grid of promo cards, a paragraph, a button. On a phone the panel is phone:drawer's, and phone_actions: still decides where the actions go. Valores aceitos: phone, always
phone_actions Padrão: bar
With phone:drawer, where the actions go on a phone: bar keeps them beside the menu button on the bar's one line (the brand's picture gives way and the buttons are drawn smaller); drawer leaves the bar the brand and the menu button alone and draws the actions at the bottom of the drawer, one full-width button per line, as passare.com's header does on a phone. Wider than a phone the actions are the bar's either way. Without phone:drawer they stay in the bar. Valores aceitos: bar, drawer
actions Padrão: filled
How the actions (the bar's last part, a button per line) are drawn: filled, every one a filled button; first, the first filled and the others outlined (as :::inline draws its second button); last, the last filled and the ones before it outlined — an outlined "Sign in" before a filled "Schedule a meeting". The outline is the bar's text colour, or the accent under the theme's button_secondary: accent. Valores aceitos: filled, first, last
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::nav sticky:top
**Orbit**
---
- [Features](~/features)
- [Pricing](~/pricing)
- [Blog](~/blog)
---
[Download](~/download)
:::

:::banner

A band pinned to an edge of the screen — a cookie notice, an announcement, a promotion — with anything inside. Without a script it is a band at the end of the page, where it was written; with one it floats, and can be closed.

Os itens são separados por uma linha ---.

position Padrão: bottom
Where it sits once a script pins it: along the bottom edge, along the top, in the middle over the dimmed page (where the reader answers before going on), or as a card in the bottom corner. Bands on the bottom edge stack, never overlap: one with no close and no @consent (a call bar) holds the edge, and a cookie notice sits on top of it until answered. Valores aceitos: bottom, top, center, corner
shape Padrão: flat
flat runs edge to edge; floating is a card with a margin, the theme's corners and a shadow. The middle and the corner are always a card. Valores aceitos: flat, floating
dismiss Padrão: none
Whether the reader may close it without answering: never; until the page is opened again; or for good, remembered on this site by the band's id. A `@consent` inside closes it when answered, whatever this says. Valores aceitos: none, once, remember
surface Padrão: default
The band's ground, with contrast-checked text: soft (the theme's surface), accent, accent-2 or accent-3 (the brand's colours; not set, the accent: a promotion bar in the brand's orange, its words and buttons picked to read on it), inverse (the theme's inverse pair; its ground is inverse_background when the theme names one). Valores aceitos: default, soft, accent, accent-2, accent-3, inverse
width Padrão: wide
How wide the band's content may get. Valores aceitos: wide, full
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::banner position:bottom dismiss:remember surface:inverse id:cookies
Este site usa vídeos do YouTube, que carregam cookies do Google.
---
[Saiba mais](/privacidade)
:::

:::sidenav

A side menu, top to bottom: one link per line, each a full-width row with its icon; a line of only bold text names a group, and --- starts the next group. The link to the page being read is marked, which is how a layout's side menu shows where the reader is. A pill, `text:` words or keys written last inside a link stand at the row's end (`[`icon:inbox` Inbox `pill:7`](./inbox)`, a count or a role chip); a link written after a group's bold title stands at the title's end (`**Teams** [`icon:plus`](./new-team "New team")`, the group's +).

Os itens são separados por uma linha ---.

size Padrão: normal
How tall each row is: normal suits a side menu, compact a long one. Valores aceitos: normal, compact
current Padrão: pill
How the link to the page being read is marked: a soft pill behind the row, a line at its start, or only bolder text. Valores aceitos: pill, line, bold
groups Padrão: fixed
Whether a group's title folds its rows away: fixed never; open, a button on the title, every group open; closed, every group folded but the one holding the page being read. Without a script every group is open. Valores aceitos: fixed, open, closed
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::sidenav
**Account**

[`icon:user` Profile](./profile)

[`icon:settings` Preferences](./preferences)
---
**Space**

[`icon:palette` Look](./look)
:::

:::rows

A list of settings or facts, one row per item: the first line is the row's title, the next its hint, and the last line — whatever it holds: a value, a button, a `switch:on`, a `pill:` — sits at the row's end. A row whose title is a link opens it from anywhere on the row, with a chevron at the end.

Os itens são separados por uma linha ---.

inset Padrão: none
none draws hairlines between rows on the page itself; card puts the rows in a rounded panel of their own, the grouped list of a phone's settings. Valores aceitos: none, card
space Padrão: 2
How much room each row has above and below, a step of the theme's scale. Valores aceitos: 1, 2, 3
end Padrão: last
last puts the item's last line at the row's end (when the item has more than one line); none keeps every line under the title. Valores aceitos: last, none
button Padrão: outline
How a link at a row's end is drawn: outline (a pill outlined in the text colour) or filled (the theme's own button, its fill and label, as a course card's round arrow in the accent). A link that holds only an icon (`` [`icon:arrow-right`](./course) ``) is a circle either way, its name read from the link's title or the icon to a screen reader. Valores aceitos: outline, filled
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::rows
**Reader notes**

Readers can mark a passage and leave a note beside it.

`switch:on`
---
**Display name**

`dropdown:Ana Ceramics`
---
[**Address and domain**](./address)

`pill:warn:Waiting for DNS`
:::

:::shell

An app's frame: a side column (the first item, usually a :::sidenav) beside the main part (the second item, usually a layout's :::slot). On a wide screen it is a panel with the side column at a fixed width; on a phone it fills the screen, the side column goes away and a first line of the main part that is a link with `icon:chevron-left` becomes the bar that goes back. In the main part a `#` heading is the screen's title, with a hairline under it, and a `##` heading is a small muted label over a group of rows, as on a settings screen; a bigger heading inside the main part is a `###`. With headings:page the main part's headings are the page's own, for a reader page with a side column (a blog beside its categories).

Os itens são separados por uma linha ---.

rail Padrão: 16
The side column's width, in rem. Valores aceitos: 14, 16, 18, 20
frame Padrão: panel
panel draws the frame as a raised panel with the theme's radius and a shadow, over the page's ground; plain draws no panel; full makes the shell the page: edge to edge, from the top, at least as tall as the screen, with no radius or shadow (with ```view standalone: true it is the whole screen a reader gets). Valores aceitos: panel, plain, full
divider Padrão: line
A hairline between the side column and the main part. Valores aceitos: line, none
headings Padrão: app
How the main part's headings are drawn: app, as an app's screen (a # is the screen's title over a hairline, a ## a small muted uppercase label over a group of rows); page, as the page's own h1 and h2, the theme's sizes — a reader page with a column of categories beside its posts (passare.com's blog, frame:plain). Valores aceitos: app, page
narrow Padrão: back
What the side column becomes on a phone: back drops it and keeps only the way back; drawer adds a Menu button to that bar, which opens the side column as a drawer from the start edge, the current page marked. Valores aceitos: back, drawer
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:
style
Wears a named style of the page's theme (```style name:<name> for:<carrier> on a page under the theme's styles; manual styles): CSS the theme compiled for this kind of block, scoped to it and kept from reaching outside it or into the Flows blocks inside. The last mile no argument draws; a styled block gives up the checks Flows makes for its directives (phone, contrast, dark mode), and validate says which. Staff preview. Valores aceitos: a style's name: lowercase letters, numbers and dashes, starting with a letter

Exemplo

:::shell
:::sidenav
[`icon:user` Profile](./profile)

[`icon:settings` Preferences](./preferences)
:::
---
[`icon:chevron-left` Settings](./settings)

:::slot
:::
:::

:::timeline

A sequence of steps or events joined by a line: an order's tracking, a stepper, an activity feed, an onboarding. Each item, separated by ---, is a step: its first line the title, the next ones its details (a date, who did it). `state:done`, `state:current`, `state:upcoming`, `state:error` or `state:skipped` written in an item gives its marker and says where it is in words; an item that is only a heading names a group (Today, In progress); a :::timeline inside an item is its sub-steps.

Os itens são separados por uma linha ---.

direction Padrão: vertical
vertical runs down the page; horizontal runs across, as a stepper, and turns vertical when the page is narrow. Valores aceitos: vertical, horizontal
marker Padrão: dot
What sits on the line at each step: a dot coloured by its state; the step's number; or the `icon:` the item's first line starts with. Valores aceitos: dot, number, icon
line Padrão: solid
The line that joins the steps. Valores aceitos: solid, dashed, none
density Padrão: normal
How much room each step has: compact suits a long feed. Valores aceitos: normal, compact
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::timeline
**Pedido criado** `state:done`

10 mar 2026
---
**Em trânsito** `state:current`

Royal Mail · previsão 12 mar
---
**Entregue** `state:upcoming`
:::

:::drawer

A panel that slides in from an edge of the screen over the page, or a dialog in its middle (edge:center), holding anything at all. The first item is what its button says (words, an `icon:` too); the second is what it holds. Without a script both are on the page where they were written; with one the button opens the panel, and the reader closes it with its × button, Escape, a tap outside, or by following a link inside. While it is open the page behind takes no clicks and Tab stays inside it. A @form inside a dialog sends without closing it: the thank-you, or with `another:` the form again, is drawn in the dialog.

Os itens são separados por uma linha ---.

edge Padrão: end
The edge it slides in from: end is the right in a left-to-right page and the left in a right-to-left one; start the other side; top and bottom slide down or up. center is a dialog in the middle of the screen over the page, as a "New task" form opens over a list: the first field of what it holds takes the focus. Valores aceitos: end, start, top, bottom, center
size Padrão: normal
How much of the screen it takes: from the side, its width (18, 22 or 32rem, or all of it); from the top or the bottom, up to a height (a third, half, three quarters, or all of it), shorter when what it holds is; in the center, its width (24, 32 or 44rem, or all of the screen), as tall as what it holds up to most of the screen, then scrolling. Valores aceitos: narrow, normal, wide, full
collapse Padrão: always
always is a drawer at every width; narrow keeps what it holds on the page where it was written while the page is wide, and makes it a drawer behind its button on a phone. Valores aceitos: always, narrow
surface Padrão: default
The panel's ground, with contrast-checked text. Valores aceitos: default, soft, inverse
trigger Padrão: button
How what opens it is drawn: button, a bordered button; plain, its words as written, in the line's own face and colour, with nothing around them (a task's title in a list that opens its panel). Valores aceitos: button, plain
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::drawer edge:start
`icon:menu` Etapas
---
:::sidenav
[Intake](./intake)

[Risco](./risco)
:::
:::

:::drawer edge:center
`icon:plus` New task
---
## New task

```@form collection:tasks submit:"Create" another:choice
title required
status
```
:::

:::menu

A button that opens a small panel anchored to it, over the page: a row's "…" menu, a user menu, a chip that opens its choices. The first item is what the button says (words, an `icon:` too, or `icon:more-horizontal` alone); the second is what it opens. When that is links and nothing else (a list of them, or one per line) it is a menu: the arrow keys move through its links, Home and End go to the first and the last, and a list item with a list under it is a submenu, which the right arrow, Enter or a tap opens and the left arrow closes. Anything else — `@data view:field` controls, a form, words — is a panel the reader tabs through. Without a script both are on the page where they were written; with one the button opens the panel, and Escape (the focus back on the button), a tap outside, Tab out of it or following a link closes it.

Os itens são separados por uma linha ---.

align Padrão: start
Which edge of the button the panel lines up with: start (under its start, the left in a left-to-right page) or end (under its end: a "…" at the end of a row). It opens above the button when there is no room under it, and never runs off the screen. Valores aceitos: start, end
trigger Padrão: button
button draws the label as a bordered button; plain draws it as the words or the icon alone, with no border and no ground (a row's "…", a chip), still a button to the keyboard and a screen reader. Valores aceitos: button, plain
width Padrão: auto
The panel's width: auto as wide as what it holds (up to 20rem), narrow 12rem, normal 16rem, wide 24rem; never wider than the screen. Valores aceitos: auto, narrow, normal, wide
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::menu align:end trigger:plain
`icon:more-horizontal`
---
- Status
  - [Todo](?status=todo)
  - [Done](?status=done)
- [Open as a page](./adv-12)
- [Copy link](#copy)
:::

:::menu
Properties
---
```@data collection:tasks view:field fields:status,priority
@filter key eq ADV-12
```
:::

:::tabs

Panels that take turns in one place, one tab each: Details, Timeline, Notes. Each item, separated by ---, is a tab; its first line — a heading, or a line that is only bold — names it, and the rest is its panel. Without a script every panel is on the page under its own name; with one the reader picks a tab (arrow keys too), and a link to anything inside a panel opens it.

Os itens são separados por uma linha ---.

style Padrão: line
line underlines the tab that is open, along a hairline; pill draws the tabs as a row of buttons, the open one filled. Valores aceitos: line, pill
hide Padrão: none
Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Valores aceitos: none, narrow, wide
only Padrão: any
Show only in one layout of the page, to draw a different arrangement for each: narrow on a phone (where hide:wide shows it), wide on screens from the theme's wide_from, medium between the two (a Framer site's tablet layout, wide_from 1440 in set_theme). Without wide_from in the theme there is no medium layout: medium never shows and wide is every screen wider than a phone. A block that shows at no width — only:medium on a theme without wide_from, only:narrow inside a block with only:wide, hide:narrow inside hide:wide — is refused: its text would reach search engines and no reader. Valores aceitos: any, narrow, medium, wide
id
A name for this block, so a link can land on it (`[Spaces](#spaces)`) and an agent can address it. Written as the element's id, never as a class. Without one, a link to a heading inside a band lands on the heading — halfway down its column in a split, with the picture cut off above it. Valores aceitos: letters, numbers, dashes and underscores, starting with a letter or a number
editable
Which of this section's fields a person in content mode may change (the visual editor, EV8): eyebrow, headline, title, text, photo, link. Drawn nowhere; the server refuses a content-mode save that changes anything else (Page::ContentEdit). Valores aceitos:

Exemplo

:::tabs
### Detalhes

Cliente: Ana Ceramics
---
### Timeline

Em trânsito desde 10 mar.
---
### Notas

Sem notas.
:::

:::slot

In a layout (a page other pages wear): where the wearing page goes. Everything around it — a nav, a side column, a footer — is what those pages have in common. A named slot holds a default that a page may replace with :::fill.

name Padrão: main
main is where the page's own content goes, and a layout needs one. The others are places a page may fill; what is written inside the slot is what shows when it does not. Valores aceitos: main, hero, aside, top, bottom, cta

Exemplo

:::nav
**[Studio](~)**
---
- [Work](~/work)
- [About](~/about)
:::

:::slot
:::

:::slot name:cta
## Let's talk
[Write to us](~/contact)
:::

:::fill

In a page that wears a layout: what goes into one of the layout's named slots instead of its default. It leaves the page's own flow and shows where the layout put that slot.

name Padrão: aside
The slot to fill. One the layout does not have stays where it was written, so nothing a person wrote disappears. Valores aceitos: hero, aside, top, bottom, cta

Exemplo

:::fill name:cta
## Hiring designers
[See the roles](~/jobs)
:::

# The page's own content