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.

Page components

A fenced code block whose language starts with @ is a call to a component. Everything below is generated from the components themselves, so it cannot go stale.

`@audio` renders: server

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

Server rendered.

Example

```@audio src:/rails/active_storage/blobs/redirect/abc/episodio.mp3 title:"Episódio 1"
```

Arguments

src path Required: 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 Default: metadata: How much the browser fetches before play: none, metadata or auto. Allowed: none, metadata, auto
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.

Body

This component takes no body.

`@components` renders: server

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

Server rendered.

Example

```@components
```

Arguments

only enum Default: all: Which half to list: `server`, `client`, or `all` (the default). Allowed: all, server, client
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.

Body

This component takes no body.

`@consent` renders: server

The reader's yes or no, one line per purpose (flags | label | description | required), remembered on this site as flags the reader owns. One purpose is two buttons; several are switches with accept all, reject all and save. Put it inside a :::banner for a cookie notice.

Server rendered.

Example

```@consent title:"Sua privacidade" link:/privacidade
essential | Essenciais | Mantêm o site funcionando. | required
videos | Vídeos do YouTube | Carrega o player do Google, que usa cookies.
```

Arguments

title string: A heading above the purposes.
link string: Where the full policy is: a page of this site (/privacidade) or a web address starting with https://.
accept string: The words on the button that says yes to everything. Default: Accept all.
reject string: The words on the button that says no to everything but the required. Default: Reject all.
save string: The words on the button that keeps the switches as they are. Default: Save choices.
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.

Body

One instruction per line. One purpose per line: the flags it sets (space-separated), a `|`, the label, a `|`, what it means; `| required` at the end for one that is always on.

`@contact` renders: server

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.

Server rendered.

Example

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

What it draws

Vitória Imóveis

Corretora

WhatsApp E-mail Save contact

Arguments

name string Required: 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 Default: true: Whether the "Save contact" button is shown.
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.

Body

This component takes no body.

`@copy` renders: server

A value to take away — a Pix key, a coupon, a wifi password, a command — printed, with a button that copies it.

Server rendered.

Example

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

What it draws

Chave Pix

[email protected]

Any amount helps

Arguments

value string: What is copied. 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 Default: text: text for a key or a code a person reads; code for something pasted into a terminal, kept on its own lines. Allowed: text, code
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.

Body

Free text. The value, when it does not fit on the fence line. The body wins over `value`.

`@countdown` renders: server

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

Server rendered.

Example

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

What it draws

Doors open

November 20, 2026 22:00 UTC

Arguments

to string Required: 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 Default: full: full counts days, hours, minutes and seconds; days counts only days, for something weeks away. Allowed: full, days
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.

Body

This component takes no body.

`@data` renders: server

Reads a collection of this space and renders it as a table, with filters, columns, metrics and pagination.

Server rendered.

Example

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

Arguments

collection string Required: The name of the collection inside this space, without the @space prefix.
limit integer Default: 25: How many rows per page (1–100). Defaults to 25. Allowed: 1 to 100
offset integer Default: 0: How many rows to skip before the first page. Allowed: 0 to 100000
sort string: A field to sort by; a leading minus reverses it (`-created_at`).
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.
scope enum: viewer: each person sees only the rows they created. Allowed: viewer
empty string: What to say when there is no row to show.
export boolean Default: false: Adds CSV and JSON links for the whole filtered collection — the fence's filters, sort, scope and columns, but not its limit or offset.
page_param string Default: page: The query parameter this table pages on. Give two tables different ones.
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.

Body

One instruction per line. Optional children: `@filter field op value`, `@column field label:"…" format:…` (one field of this collection; a reference like `@column prova` prints the row it points at, and there are no dotted paths; `format:image` on a url field shows the picture as a thumbnail kept on this site, and a click opens it), and the metrics `@count`, `@sum field`, `@avg field`, `@min field`, `@max field`.

Accepted children

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

`@flashcards` renders: server

A deck of cards to drill: a term and its meaning, a question and its answer, a word and its translation. One card per line, front | back. Turned by a click or the keyboard; printed in full without a script.

Server rendered.

Example

```@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.
```

Arguments

label string: A line above the deck saying what it drills.
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.

Body

One instruction per line. One card per line: the front, a `|`, the back.

`@form` renders: server

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

Server rendered.

Example

```@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
```

Arguments

collection string Required: The name of the collection inside this space, without the @space prefix.
success string: What to say after a row goes in. Defaults to a thank-you.
submit string: The label of the button. Defaults to "Send".
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. Allowed: viewer
mode enum Default: create: create: a form that adds a row. edit: a form that changes one of the viewer's own rows; it needs own:true. Allowed: create, edit
layout enum Default: 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. Allowed: stacked, inline
own boolean Default: false: true: list the rows this viewer created, each with a link that opens it in the form. Signed-in people 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.

Body

One instruction per line. 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. Empty body: every writable field, in schema order.

`@hours` renders: server

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.

Server rendered.

Example

```@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
```

What it draws

Mon – Fri: 11:30 – 15:00
18:00 – 23:00
Sat: 12:00 – 00:00
Sun: Closed

Closed on the 12th

Arguments

zone string Required: 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".
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.

Body

One instruction per line. 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` renders: server

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.

Server rendered.

Example

```@members group:"Turma 3" label:"Quem está na turma"
```

Arguments

group string Required: 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.
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.

Body

This component takes no body.

`@pages` renders: server

Also written ```pages

A gallery of the pages listed in the body, each one a picture of itself. Only pages the reader may open are shown.

Server rendered.

Example

```@pages columns:2
/@docs/showcase/dashboard
/@docs/showcase/link-pages | /@docs/showcase/link-pages/nara
```

Arguments

columns integer Default: 3: How many cards per row (1–4). Defaults to 3. Allowed: 1 to 4
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.

Body

One instruction per line. One page path per line. `/a/section | /a/section/one` links to the first and pictures the second.

`@patterns` renders: server

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

Server rendered.

Example

```@patterns
```

Arguments

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.

Body

This component takes no body.

`@qr` renders: server

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.

Server rendered.

Example

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

What it draws

Abra esta página no celular

Arguments

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 Default: medium: How large it is drawn on the screen. It prints sharp at any size. Allowed: 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 Default: square: The shape of the small modules: square, dots or rounded. The corner squares stay square whatever this says. Allowed: 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).
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.

Body

This component takes no body.

`@schema` renders: server

Declares the fields of a collection of this space. It shows the declaration; only somebody with settings on the space can apply it.

Server rendered.

Example

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

Arguments

collection string Required: The name of the collection inside this space, without the @space prefix.
visibility enum Default: private: Who may READ the rows: private (the space's people) or public (anyone). Private by default. Allowed: private, public
accepts enum Default: nobody: Who may send a row through an @form: nobody, members (signed in) or anyone. Nobody by default. Allowed: nobody, members, anyone
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.

Body

One instruction per line. One field per line: `name type [required] [indexed] [label:"…"]`. A type may carry its argument: `select:a,b`, `reference:outra`, `computed:sum(outra.valor)`. Indexed date/datetime fields do not accelerate temporal comparisons.

`@themes` renders: server

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

Server rendered.

Example

```@themes
```

Arguments

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.

Body

This component takes no body.

`@video` renders: server

A video player over a file uploaded to this site. Controls on, nothing autoplays.

Server rendered.

Example

```@video src:/rails/active_storage/blobs/redirect/abc/demo.mp4 title:"Como aplicar o esquema"
```

Arguments

src path Required: 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 Default: metadata: How much the browser fetches before play: none, metadata or auto. Allowed: 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 Default: player: player shows controls and never autoplays; background plays muted, looped and without controls, for the ground of a :::hero (paused when the reader asks for reduced motion). Allowed: player, background
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.

Body

This component takes no body.

`@chart` renders: client

Also written ```chart

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

Rendered in the browser.

Example

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

What it draws

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

Arguments

type enum Default: bar: Which drawing. `stacked` piles the series of a bar chart; `pie` and `donut` read the first series, one slice per row. Allowed: bar, stacked, line, area, pie, donut, table
title titulo string: Printed above the chart.

Body

CSV, or the whole block as JSON. CSV: the first row names the columns, the first column labels the category axis. The whole body may be JSON instead.

`@chat` renders: client

Also written ```chat

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

Rendered in the browser.

Example

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

What it draws

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

Arguments

title titulo string: The line above the thread.

Body

One message per line. One `who: text @ time` per line.

`@checklist` renders: client

Also written ```checklist

A working checklist: it counts, it groups under ## headings, and it remembers — in the reader's own browser, never on the page.

Rendered in the browser.

Example

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

What it draws

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

Arguments

title titulo string: The line above the list.

Body

Items, separated by a --- line. One `- [ ] something` per line, with optional `## Section` headings.

`@profile` renders: client

Also written ```profile

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

Rendered in the browser.

Example

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

What it draws

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

Arguments

name string Required: The name printed under the avatar.
bio string: One paragraph under the name.
avatar string: An image URL, absolute or root-relative.
shape enum Default: circle: The avatar's shape. Allowed: circle, rounded

Body

One link per line. More `platform: url` lines.

`@links` renders: client

Also written ```links

Full-width buttons, one per line. A `* ` prefix makes the featured one.

Rendered in the browser.

Example

```@links style:outline
* [Join](https://x.com/join)
[Streams](/streams) every Friday, 8pm
[Live taping](https://x.com/live) July 16 until:2030-07-16
[The mic I use](https://x.com/mic){sponsored}
```

What it draws

* [Join](https://x.com/join)
[Streams](/streams) every Friday, 8pm
[Live taping](https://x.com/live) July 16 until:2030-07-16
[The mic I use](https://x.com/mic){sponsored}

Arguments

style enum: Overrides the theme's button style for this block. Allowed: filled, outline, soft
shape enum: Overrides the theme's button shape for this block. Allowed: square, rounded, pill

Body

One link per line. One `[Label](url)` per line; `![alt](img)` on the line adds a thumbnail; a bare text line is a section heading. Text after the link is a note under the label (`preferred · 20 min`). `from:2026-07-01` and `until:2026-07-16` after the link keep the button on the page only in that window, both days included: a dated link leaves by itself. `{sponsored}` right after the link, as in prose, marks a paid or affiliate button: a visible word and `rel="sponsored nofollow"`.

`@reviews` renders: client

Also written ```reviews

A row of review cards, each with its stars.

Rendered in the browser.

Example

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

What it draws

★★★★★ Ana
Best bagels in town.

Arguments

title titulo string: The line above the row.

Body

Items, separated by a --- line. One review per block, separated by a --- line: `★★★★☆ Name` or `4/5 Name`, then the text.

`@faq` renders: client

Also written ```faq

Questions that open, one <details> each.

Rendered in the browser.

Example

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

What it draws

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

Arguments

title titulo string: The line above the questions.

Body

Items, separated by a --- line. One question per block, separated by a --- line: the question line, then the answer.

`@embed` renders: client

Also written ```embed

A card that names a provider and links out. Never a frame: the page does not load a third party inside itself (ADR 013).

Rendered in the browser.

Example

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

What it draws

title: Sunrise set

Arguments

youtube string: A YouTube URL.
spotify string: A Spotify URL.
podcast string: A podcast URL.
video string: A video URL.
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.
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.

Body

This component takes no body. This block takes no body.

`mermaid` renders: client

A diagram, drawn by mermaid. The one block with no @ spelling: a mermaid fence renders on GitHub, Obsidian, Notion and GitLab, and prefixing it would break the diagram everywhere the export is read.

Rendered in the browser.

Example

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

What it draws

flowchart LR
  A --> B

Arguments

This component takes no arguments.

Body

A diagram, in mermaid's own grammar. Mermaid source, in mermaid's own grammar.

Layout directives

Lines of ::: arrange the page — bands, columns, grids, media — around ordinary markdown. Every argument is a choice from a list, never CSS, and every layout works from a phone to an ultra-wide screen, in light and dark.

`:::section`

A band of the page: its width, its surface and the space around it. Everything inside flows top to bottom.

width Default: normal: normal keeps the reading width, wide uses the page width, full runs edge to edge. Allowed: normal, wide, full
surface Default: default: The band's background, from the theme: soft (its surface colour), tint (a wash of its accent), accent (the accent itself), inverse (the theme turned over). Text colours are chosen for contrast, in light and dark schemes. Allowed: default, soft, tint, accent, inverse
space Default: 3: Space above and below, a step of the theme's scale. Allowed: 0, 1, 2, 3, 4, 5
align Default: 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. Allowed: left, center, narrow-center
flow Default: 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. Allowed: auto, 0, 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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 Default: half: auto fits the content, half is half the window, screen fills it. Allowed: auto, half, screen
media Default: none: background puts the first image inside the hero behind the text. Allowed: none, background
shade Default: dark: Over a background image: dark (light text) or light (dark text), strong enough for 4.5:1 on any photo. Allowed: dark, light
align Default: center: Where the content sits. narrow-center is left on wide screens and centred on a phone. Allowed: center, left, narrow-center
width Default: wide: How wide the content may get. Allowed: normal, wide, full
surface Default: default: The ground when there is no background image. Allowed: default, soft, tint, accent, inverse
pin Default: 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. Allowed: none, first, last, both
flow Default: 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. Allowed: auto, 0, 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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.

Its items are separated by a --- line.

ratio Default: 1/2: How much of the width the first part takes. Allowed: 1/3, 1/2, 2/3
side Default: left: Which part comes first on wide screens; on narrow ones the first item is always on top. Allowed: left, right
align Default: center: Vertical alignment of the two parts. Allowed: start, center, end
space Default: 3: The gap, a step of the theme's scale. Allowed: 1, 2, 3, 4, 5
narrow Default: stack: stack puts the parts one above the other when narrow; keep keeps them side by side. Allowed: stack, keep
reverse Default: none: narrow puts the second part on top when the parts stack, so a picture written after its text comes first on a phone. Allowed: none, narrow
sticky Default: 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. Allowed: none, first, second
rail Default: 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. Allowed: none, 12, 16, 20, 24
flow Default: 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. Allowed: auto, 0, 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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.

Its items are separated by a --- line.

threshold Default: 40: Below this width, in rem, the columns stack. Allowed: 30, 40, 50, 60
limit Default: 4: With more items than this, they stack whatever the width. Allowed: 2, 3, 4, 5
align Default: stretch: Vertical alignment of the columns. Allowed: start, center, end, stretch
items Default: 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. Allowed: plain, card, stat, step
space Default: 3: The gap, a step of the theme's scale. Allowed: 1, 2, 3, 4, 5
flow Default: 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. Allowed: auto, 0, 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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.

Its items are separated by a --- line.

min Default: 16: The smallest an item may get, in rem, before the row wraps. Allowed: 8, 10, 12, 14, 16, 18, 20, 24, 28
cols Default: 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. A phone still gets one per row. Allowed: auto, 2, 3, 4
items Default: 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. Allowed: plain, card, stat, step
align Default: stretch: Vertical alignment of items in a row. Allowed: stretch, start, center
space Default: 3: The gap, a step of the theme's scale. Allowed: 1, 2, 3, 4, 5
flow Default: 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. Allowed: auto, 0, 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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.

span Default: 1: Columns the item takes; full takes the whole row. On a phone every item is one column. Allowed: 1, 2, 3, 4, full
rows Default: 1: Rows the item takes. Allowed: 1, 2, 3
layer Default: 0: Stacking order when items overlap (with offset). Allowed: 0, 1, 2, 3
flow Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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 Default: soft: The panel's surface, with contrast-checked text (see section surface). Allowed: default, soft, tint, accent, inverse
border Default: none: A hairline border. Allowed: none, line
shadow Default: none: A shadow under the panel. Allowed: none, soft, lifted
space Default: 2: Padding inside, a step of the theme's scale. Allowed: 1, 2, 3, 4
offset Default: 0: Pull the element up into the content above it, in steps of the scale. Allowed: 0, up-1, up-2, up-3
tilt Default: none: A slight rotation, a few degrees. Allowed: none, left, right
flow Default: 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. Allowed: auto, 0, 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

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

`:::inline`

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

Its items are separated by a --- line.

justify Default: start: How the line is distributed. Allowed: start, center, end, between
align Default: center: Vertical alignment within a line. Allowed: center, start, end
space Default: 2: The gap, a step of the theme's scale. Allowed: 1, 2, 3, 4
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

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

`:::cover`

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

ratio Default: 16/9: The shape the image or video is cropped to. Allowed: 16/9, 16/10, 3/2, 4/3, 5/4, 1/1, 4/5, 3/4, 2/3, 9/16, 2/1, 21/9
focus Default: center: Which part of the media stays in view when it is cropped. Allowed: center, top, bottom, left, right
frame Default: rounded: none, rounded corners, a circle (avatars), a browser window or a phone around the media. Allowed: none, rounded, circle, browser, phone
shadow Default: none: A shadow under the media. Allowed: none, soft, lifted
offset Default: 0: Pull the element up into the content above it, in steps of the scale. Allowed: 0, up-1, up-2, up-3
tilt Default: none: A slight rotation, a few degrees. Allowed: none, left, right
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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 Default: center: Where on the parent it sits. Allowed: center, top-left, top-right, bottom-left, bottom-right, bottom
kind Default: 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. Allowed: badge, plain
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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

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

`:::carousel`

A horizontal strip of items that scrolls and snaps; no autoplay.

Its items are separated by a --- line.

item Default: normal: How wide each item is: about a quarter, a third or two thirds of the strip (wider on phones). Allowed: narrow, normal, wide
items Default: plain: card draws each item as a card. Allowed: plain, card
space Default: 3: The gap, a step of the theme's scale. Allowed: 1, 2, 3, 4
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::carousel item:narrow items:card
"Best tool I adopted this year." — Ana
---
"It replaced three apps." — Bia
:::

`:::masonry`

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

Its items are separated by a --- line.

min Default: 16: The narrowest a column may get, in rem. Allowed: 12, 14, 16, 18, 20, 24
items Default: plain: card draws each item as a card. Allowed: plain, card
space Default: 3: The gap, a step of the theme's scale. Allowed: 1, 2, 3, 4
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, wide
motion Default: 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. Allowed: 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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.

Its items are separated by a --- line.

speed Default: normal: How fast the strip moves. Allowed: slow, normal, fast
direction Default: left: Which way it moves. Allowed: left, right
space Default: 4: The gap between items, a step of the theme's scale. Allowed: 1, 2, 3, 4, 5
hide Default: none: Hide on narrow screens (phones) or on wide ones, to show a different arrangement for each. Allowed: none, narrow, 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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::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, then the actions (lone links become buttons). On a phone the links move to their own scrolling row.

Its items are separated by a --- line.

sticky Default: none: top keeps the bar at the top of the page while scrolling. Allowed: none, top
surface Default: default: The bar's ground, with contrast-checked text. Allowed: default, soft, inverse
width Default: wide: How wide the bar's content may get. Allowed: wide, full
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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

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

`:::footer`

A site's footer: the first item introduces the site, each following item is a column of links, and the last line is small print.

Its items are separated by a --- line.

surface Default: default: The footer's ground, with contrast-checked text. Allowed: default, soft, inverse
width Default: wide: How wide the footer's content may get. Allowed: wide, full
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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

:::footer surface:soft
**Orbit** — the calmer way to browse.
---
**Product**
- [Features](~/features)
- [Pricing](~/pricing)
---
**Company**
- [About](~/about)
- [Contact](~/contact)
:::

`:::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.

Its items are separated by a --- line.

position Default: 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. Allowed: bottom, top, center, corner
shape Default: 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. Allowed: flat, floating
dismiss Default: 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. Allowed: none, once, remember
surface Default: default: The band's ground, with contrast-checked text. Allowed: default, soft, inverse
width Default: wide: How wide the band's content may get. Allowed: wide, full
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. Allowed: letters, numbers, dashes and underscores, starting with a letter or a number

Example

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

`:::slot`

In a template (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 Default: main: main is where the page's own content goes, and a template needs one. The others are places a page may fill; what is written inside the slot is what shows when it does not. Allowed: main, hero, aside, top, bottom, cta

Example

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

:::slot
:::

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

`:::fill`

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

name Default: aside: The slot to fill. One the template does not have stays where it was written, so nothing a person wrote disappears. Allowed: hero, aside, top, bottom, cta

Example

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

# The page's own content

Referência#

Page components

@audio renders: server

Example

Arguments

Body

@components renders: server

Example

Arguments

Body

@consent renders: server

Example

Arguments

Body

@contact renders: server

Example

Arguments

Body

@copy renders: server

Example

Arguments

Body

@countdown renders: server

Example

Arguments

Body

@data renders: server

Example

Arguments

Body

Accepted children

@flashcards renders: server

Example

Arguments

Body

@form renders: server

Example

Arguments

Body

@hours renders: server

Example

Arguments

Body

@members renders: server

Example

Arguments

Body

@pages renders: server

Example

Arguments

Body

@patterns renders: server

Example

Arguments

Body

@qr renders: server

Example

Arguments

Body

@schema renders: server

Example

Arguments

Body

@themes renders: server

Example

Arguments

Body

@video renders: server

Example

Arguments

Body

@chart renders: client

Example

Arguments

Body

@chat renders: client

Example

Arguments

Body

@checklist renders: client

`@audio` renders: server

`@components` renders: server

`@consent` renders: server

`@contact` renders: server

`@copy` renders: server

`@countdown` renders: server

`@data` renders: server

`@flashcards` renders: server

`@form` renders: server

`@hours` renders: server

`@members` renders: server

`@pages` renders: server

`@patterns` renders: server

`@qr` renders: server

`@schema` renders: server

`@themes` renders: server

`@video` renders: server

`@chart` renders: client

`@chat` renders: client

`@checklist` renders: client

`@profile` renders: client

`@links` renders: client

`@reviews` renders: client

`@faq` renders: client

`@embed` renders: client

`mermaid` renders: client

`:::section`

`:::hero`

`:::split`

`:::columns`

`:::grid`

`:::cell`

`:::card`

`:::inline`

`:::cover`

`:::overlay`

`:::carousel`

`:::masonry`

`:::marquee`

`:::nav`

`:::footer`

`:::banner`

`:::slot`

`:::fill`