```theme
technical
accent: #6366f1
page_width: 900
page_padding: 24
```

_flows.md · documentação_

# Componentes de página

Um bloco de código cujo idioma começa com `@` não é código: é uma **chamada de componente**. A página continua sendo markdown — dá para exportar, colar no GitHub, guardar num arquivo — e o `@` é a única sintaxe nova.

## A linha de chamada

A primeira linha do bloco é o nome e os argumentos:

~~~text
```@pages columns:2
/@docs/showcase/orbit
/@docs/showcase/relay
```
~~~

`@pages` é o nome. `columns:2` é um argumento — `nome:valor`, separados por espaço, com aspas quando o valor tiver espaço (`title:"Antes do deploy"`). O resto do bloco é o **corpo**, e cada componente diz o que faz com ele: uma linha por item, texto livre, ou nada.

## Layout: arrumar a página

Um bloco com `@` guarda **conteúdo** — um gráfico, uma tabela, um formulário. Para **arrumar** a página em faixas, colunas e grades existe a outra sintaxe, `:::nome argumentos` … `:::`, e tudo entre as duas linhas é markdown comum, inclusive outros blocos:

:::card tone:tint
**Continua sendo markdown**

Fora do flows.md as linhas `:::` aparecem como texto solto e o resto da página lê normalmente. Nada se perde no caminho.
:::

Numa grade, `---` separa os itens:

:::grid min:14 items:card
### 20
cercas por página, no máximo
---
### 2 s
o relógio de cada cerca
---
### 1
fonte de verdade por componente
:::

`section`, `hero`, `split`, `columns`, `grid`, `card`, `cover`, `inline`, `carousel`, `masonry`, `marquee`, `nav`, `footer` e `banner` — cada argumento é uma escolha de uma lista, nunca CSS, e tudo funciona do celular à tela ultra-wide, no tema claro e no escuro. A lista completa, com exemplos, está na [referência](/@docs/components) e os padrões prontos em [padrões](/@docs/patterns).

## Filhos

Alguns componentes aceitam **filhos**: linhas do corpo que começam com `@` e configuram um pedaço da coisa. `@data` desenha as linhas de uma coleção do space, e os filhos dizem o que filtrar e o que mostrar:

~~~text
```@data collection:chamados
@filter status eq aberto
@column titulo
@column prioridade
@count
```
~~~

## Escrever, não só ler

`@form` grava numa coleção. Os campos vêm da declaração da coleção (`@schema`), então o formulário não pode pedir um campo que a tabela não tem:

~~~text
```@form collection:chamados
titulo
prioridade
```
~~~

Para uma inscrição de um campo só — uma newsletter, uma lista de espera — o formulário cabe em uma linha:

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

## Duas ajudas em código inline

Dentro de uma frase, um trecho em `código` pode virar duas coisas nossas.

`icon:nome` desenha um ícone do conjunto do flows.md, no tamanho e na cor do texto em volta:

~~~text
[Começar agora `icon:arrow-right`](#comecar)
~~~

`languages` vira os links para as **outras** versões desta página, quando ela está escrita em mais de um idioma. O lugar é seu — normalmente o rodapé — e o visual é o da página, porque é a sua página que mostra o idioma, não o flows.md:

~~~text
:::footer
**Sua marca** — uma frase sobre o que você faz.

`languages`
---
**Produto**
- [Recursos](#recursos)
:::
~~~

Só aparecem os outros idiomas: quem está lendo já está num deles. Numa página escrita num idioma só, o token não desenha nada — então o mesmo rodapé serve para todas as páginas do site.

## Quando você erra

Uma cerca com um argumento que o componente não declara não é ignorada em silêncio — isso seria uma página que renderiza e mente. Ela vira um **bloco de erro** no lugar dela, com o que estava errado, um "você quis dizer" quando dá para adivinhar, e a fonte da cerca ainda na tela. O resto da página renderiza normalmente.

## A lista inteira

[Referência de componentes](/@docs/components) — todo componente, todo argumento, gerado por eles mesmos.