flows.md · documentação
Padrões#
Seções prontas para montar uma página: aberturas, faixas de logos, grades de recursos, bento, depoimentos, preços, perguntas, chamada final, menu e rodapé. Cada padrão é só markdown com diretivas de layout, então depois de colocado na página tudo nele pode mudar.
- No editor: abra Layout e escolha o padrão em Insert…. Ele entra depois da seção selecionada.
- Por um agente: o manual do MCP lista os padrões e mostra o markdown de cada um.
- À mão: abra o markdown de um padrão abaixo e copie.
Cada título abre o padrão renderizado com este tema. Os textos e as imagens são de exemplo.
Abertura
Hero centrado
A abertura mais comum: título grande, uma frase e dois botões, centrados.
Hero dividido
Texto de um lado e imagem do outro; no celular a imagem vai para baixo.
The markdown
:::hero height:auto align:left
:::split ratio:1/2 align:center
# Uma frase que diz o que você faz
Uma linha que explica para quem é e por que importa.
:::inline
[Começar agora](#comecar)
---
[Falar com a gente](#contato)
:::
---
:::cover ratio:4/3 shadow:lifted
:::
:::
:::
Hero com o produto
Título centrado e, logo abaixo, o produto numa janela de navegador.
The markdown
:::hero height:auto
# Uma frase que diz o que o produto faz
Uma linha com o principal benefício.
:::inline
[Testar grátis](#comecar)
---
[Ver o vídeo](#video)
:::
:::cover ratio:16/9 frame:browser shadow:lifted
:::
:::
Hero sobre imagem
Título sobre uma foto de fundo, com a sombra que mantém o texto legível em qualquer imagem.
The markdown
:::hero height:screen media:background shade:dark
**Uma data, um lugar ou uma novidade**
# Uma frase curta e forte
:::inline
[Garantir o seu](#comecar)
---
[Saber mais](#detalhes)
:::
:::
Hero de tela cheia
A marca presa no topo, o título no meio e uma faixa presa na base da tela; o que fica no meio continua centrado.
The markdown
:::hero height:screen pin:both flow:2
**Nome da marca**
# Uma frase curta e forte
Uma linha que explica para quem é e por que importa.
:::inline justify:center
[Começar agora](#comecar)
---
[Ver como funciona](#detalhes)
:::
:::inline justify:center
---
---
:::
:::
Prova
Faixa de logos
Quem já usa, numa faixa que passa devagar e para quando o leitor pede menos movimento.
The markdown
:::section width:wide space:2 align:center
Times que já usam
:::marquee speed:slow
---
---
---
---
---
:::
:::
Números
Três ou quatro números grandes que contam até o valor quando aparecem.
Depoimentos em grade
Avaliações com estrelas lado a lado.
Depoimentos em carrossel
Citações numa faixa que rola de lado; bom quando são muitas.
The markdown
:::section width:wide space:4
## O que dizem
:::carousel item:narrow items:card
"Uma frase curta sobre o que mudou." — Ana, designer
---
"Uma frase curta sobre o que mudou." — Bruno, engenheiro
---
"Uma frase curta sobre o que mudou." — Carla, fundadora
---
"Uma frase curta sobre o que mudou." — Davi, estudante
:::
:::
Mural de depoimentos
Citações curtas e longas encaixadas em colunas.
The markdown
:::section width:wide space:4
## Mural
:::masonry min:16 items:card
"Curto e direto." — A.
---
"Um depoimento mais longo, que conta a situação antes, o que mudou e o resultado, em duas ou três frases." — B.
---
"Outro curto." — C.
---
"Um depoimento de tamanho médio, com um detalhe concreto." — D.
:::
:::
Recursos
Grade de recursos
Seis recursos em cartões; a grade decide quantos cabem por linha.
The markdown
:::section width:wide space:5
## O que vem junto
Uma frase que resume os recursos.
:::grid min:16 cols:3 items:card motion:rise
`icon:zap`
### Primeiro recurso
O benefício dele numa frase.
---
`icon:shield`
### Segundo recurso
O benefício dele numa frase.
---
`icon:layers`
### Terceiro recurso
O benefício dele numa frase.
---
`icon:users`
### Quarto recurso
O benefício dele numa frase.
---
`icon:chart`
### Quinto recurso
O benefício dele numa frase.
---
`icon:sparkles`
### Sexto recurso
O benefício dele numa frase.
:::
:::
Recursos alternados
Recursos em linhas de texto e imagem que trocam de lado a cada linha.
The markdown
:::section width:wide space:5
:::split ratio:1/2 align:center motion:rise
## Primeiro recurso
Dois ou três parágrafos curtos sobre o que ele resolve e como.
---
:::cover ratio:4/3 shadow:soft
:::
:::
:::split ratio:1/2 side:right align:center motion:rise
## Segundo recurso
Dois ou três parágrafos curtos sobre o que ele resolve e como.
---
:::cover ratio:4/3 shadow:soft
:::
:::
:::
Bento
Uma grade de blocos de tamanhos diferentes: um destaque grande e peças menores em volta.
The markdown
:::section width:wide space:5
## Tudo num lugar só
:::grid min:14 motion:scale
:::cell span:2 rows:2
:::cover ratio:1/1
:::overlay at:bottom-left
**O recurso principal**
:::
:::
:::
---
:::card tone:accent space:3
### 3x
mais rápido
:::
---
:::card tone:soft border:line space:3
**Um detalhe**
Uma frase sobre ele.
:::
---
:::cell span:2
:::card tone:inverse space:3
### Um recurso largo
Uma frase que ocupa a linha inteira.
:::
:::
:::
:::
Galeria
Fotos de alturas diferentes encaixadas em colunas, como um mural.
The markdown
:::section width:wide space:4
## Galeria
:::masonry min:14 space:2
:::cover ratio:3/4
:::
---
:::cover ratio:4/3
:::
---
:::cover ratio:1/1
:::
---
:::cover ratio:4/3
:::
---
:::cover ratio:3/4
:::
:::
:::
Coluna lateral
Um índice numa coluna de largura fixa, que fica parada enquanto o texto rola ao lado; no celular vai para cima do texto.
The markdown
:::section width:wide space:4
:::split rail:16 sticky:first align:start space:4
**Nesta página**
[O problema](#o-problema)
[O que fizemos](#o-que-fizemos)
[O resultado](#o-resultado)
---
## O problema
Um parágrafo que conta de onde a história começa, com o número que incomodava.
## O que fizemos
Um parágrafo para cada decisão que importou. A coluna ao lado fica parada enquanto isto rola.
## O resultado
O número de antes e o de depois, e o que mudou para quem usa.
:::
:::
Flashcards
Um baralho para decorar: termo e significado, pergunta e resposta, palavra e tradução. Vira ao clicar.
The markdown
:::section width:normal space:4
## Para guardar de cor
Vire cada cartão. Setas do teclado andam o baralho; espaço vira.
```@flashcards label:"Vocabulário"
Ubiquitous language | A língua que o time e o negócio falam igual, no código e na reunião.
Bounded context | A fronteira dentro da qual um termo tem um único significado.
Aggregate | O conjunto de objetos que muda junto, com uma raiz que responde por ele.
```
:::
Conversão
Preços
Três planos em cartões, com o do meio em destaque.
The markdown
:::section width:wide space:5 align:center
## Preços
Uma frase sobre como a cobrança funciona.
:::
:::section width:wide space:2
:::grid min:18 motion:rise
:::card tone:soft border:line space:3
### Grátis
**R$ 0** por mês
- O essencial
- Para uma pessoa
:::inline
[Começar](#comecar)
:::
:::
---
:::card tone:accent shadow:lifted space:3
### Pro
**R$ 49** por mês
- Tudo do Grátis
- O recurso que mais vende
:::inline
[Assinar](#assinar)
:::
:::
---
:::card tone:soft border:line space:3
### Times
**Sob consulta**
- Tudo do Pro
- Para a empresa inteira
:::inline
[Falar com a gente](#contato)
:::
:::
:::
:::
Perguntas frequentes
As dúvidas que aparecem antes da compra, cada uma abre ao clicar.
The markdown
:::section width:normal space:5
## Perguntas frequentes
```@faq
Uma pergunta que as pessoas sempre fazem?
A resposta em uma ou duas frases.
---
Outra pergunta comum?
A resposta em uma ou duas frases.
---
Posso cancelar quando quiser?
A resposta em uma ou duas frases.
```
:::
Chamada final
Uma faixa na cor de destaque com a última chamada da página.
Newsletter
Um convite para assinar, com o que a pessoa recebe e com que frequência.
Contagem regressiva
Uma faixa que conta o tempo até um lançamento, uma abertura de portas ou o fim das inscrições, e muda de frase quando a hora chega.
The markdown
:::section width:wide surface:soft space:4 align:center
## As inscrições fecham em breve
Uma frase que diz o que acontece na data e por que vale chegar antes.
```@countdown to:2030-01-01T09:00-03:00 label:"Faltam" done:"As inscrições estão encerradas"
```
:::inline justify:center
[Garantir minha vaga](#inscricao)
:::
:::
Código para copiar
Um cupom, uma chave Pix, a senha do wifi ou um comando — escrito na página, com um botão que copia.
Pessoas
Time
As pessoas por trás, com foto redonda, nome e papel.
The markdown
:::section width:wide space:5
## Quem faz
:::grid min:12 space:3
:::cover ratio:1/1 frame:circle
:::
**Nome Sobrenome**
Papel no time
---
:::cover ratio:1/1 frame:circle
:::
**Nome Sobrenome**
Papel no time
---
:::cover ratio:1/1 frame:circle
:::
**Nome Sobrenome**
Papel no time
---
:::cover ratio:1/1 frame:circle
:::
**Nome Sobrenome**
Papel no time
:::
:::
Membros
Quem está num grupo — nome, uma linha sobre cada um, quem gerencia. Só quem o grupo deixa ver a lista enxerga.
Contato
Quem procurar e todas as formas de chegar — WhatsApp com a mensagem já escrita, telefone, e-mail, mapa — e um botão que salva o contato no celular.
The markdown
:::section width:wide surface:tint space:4
:::split ratio:1/2 align:center
## Fale com a gente
Horário de atendimento, em quanto tempo alguém responde e qual é o melhor canal.
---
```@contact name:"Ateliê Exemplo" role:"Atendimento" phone:"+55 11 5550-0134" whatsapp:"+55 11 95550-0134" message:"Olá! Vim pela página de vocês." email:[email protected] address:"Rua das Acácias, 120 — Porto Azul"
```
:::
:::
Horário e endereço
Os dias e as horas em que o lugar abre, com "aberto agora" pelo relógio do lugar, ao lado de como chegar e falar.
The markdown
:::section width:wide space:4
:::split ratio:1/2 align:start
## Venha nos visitar
Uma frase sobre o lugar: como chegar, onde estacionar, se precisa reservar.
```@hours zone:America/Sao_Paulo notice:"Fechado nos feriados nacionais"
seg-sex 09:00-18:00
sáb 10:00-14:00
dom fechado
```
---
```@contact name:"Ateliê Exemplo" phone:"+55 11 5550-0134" whatsapp:"+55 11 95550-0134" message:"Olá! Quero visitar vocês." address:"Rua das Acácias, 120 — Porto Azul"
```
:::
:::
Cartão de visita
Quem é, como falar e um QR code da própria página, para mostrar na tela ou imprimir no verso de um cartão.
The markdown
:::section width:wide space:4
:::split ratio:1/2 align:center
## Ana Exemplo
Designer de produto. Atendo projetos de três a seis meses, remoto ou em Porto Azul.
```@contact name:"Ana Exemplo" role:"Designer de produto" whatsapp:"+55 11 95550-0134" message:"Olá, Ana! Peguei seu cartão." email:[email protected] site:https://example.com
```
---
```@qr label:"Aponte a câmera para abrir esta página" size:medium
```
:::
:::
Loja
Vitrine de produtos
Uma prateleira de produtos com foto, preço e um botão que leva ao checkout de onde você já vende.
The markdown
:::section width:wide space:5 align:center
## O que está à venda
Uma frase sobre entrega, prazo ou frete — o que a pessoa precisa saber antes de clicar. Troque cada botão pelo endereço do seu checkout: a compra acontece onde você já vende, não aqui.
:::
:::section width:wide space:2
:::grid min:16 motion:rise
:::card tone:soft border:line space:3
:::cover ratio:4/3
:::
### Caneca de cerâmica
**R$ 68** · esmalte azul, 300 ml
:::inline
[Comprar](#comprar-caneca)
:::
:::
---
:::card tone:soft border:line space:3
:::cover ratio:4/3
:::
### Moedor de pimenta
**R$ 145** · madeira maciça, 20 cm
:::inline
[Comprar](#comprar-moedor)
:::
:::
---
:::card tone:soft border:line space:3
:::cover ratio:4/3
:::
### Avental de linho
**R$ 210** · linho cru, tamanho único
:::inline
[Comprar](#comprar-avental)
:::
:::
:::
:::
What it draws
O que está à venda
Uma frase sobre entrega, prazo ou frete — o que a pessoa precisa saber antes de clicar. Troque cada botão pelo endereço do seu checkout: a compra acontece onde você já vende, não aqui.
Caneca de cerâmica
R$ 68 · esmalte azul, 300 ml
Comprar
Moedor de pimenta
R$ 145 · madeira maciça, 20 cm
Comprar
Avental de linho
R$ 210 · linho cru, tamanho único
Comprar
Lista de preços
Serviços e valores em uma lista que se lê de cima a baixo, sem cartões.
The markdown
:::section width:normal space:5
## Serviços e valores
Preços por serviço. Para orçamentos fora desta lista, fale antes de contratar.
:::split ratio:2/3 align:start space:2
**Corte e finalização**
Uma hora, com lavagem.
---
**R$ 120**
:::
:::split ratio:2/3 align:start space:2
**Coloração**
Duas a três horas, conforme o comprimento.
---
**R$ 280**
:::
:::split ratio:2/3 align:start space:2
**Hidratação**
Quarenta minutos.
---
**R$ 90**
:::
:::split ratio:2/3 align:start space:2
**Pacote mensal**
Corte, hidratação e uma finalização.
---
**R$ 240**
:::
Valores de outubro. Cancelamentos com menos de 24 horas são cobrados pela metade.
:::
Gorjeta
Uma chave Pix que se copia em um clique, com valores sugeridos e um recado curto.
The markdown
:::section width:normal space:5 align:center
## Se algo aqui te ajudou
Nada aqui é pago. Se quiser retribuir, a chave está abaixo — qualquer valor.
```@copy label:"Chave Pix" value:[email protected] note:"Copie e cole no seu banco"
```
:::inline justify:center
[R$ 10](#pagar-10)
---
[R$ 25](#pagar-25)
---
[R$ 50](#pagar-50)
:::
Sem cadastro, sem assinatura, sem cobrança recorrente. Troque os valores pelos seus links de pagamento — a cobrança acontece fora desta página.
:::
Links de pagamento
Um cartão por forma de pagamento, cada um levando para fora — a cobrança acontece onde você já vende.
The markdown
:::section width:wide space:5 align:center
## Como pagar
Escolha por onde prefere. O pagamento acontece no site de quem processa, não aqui.
:::
:::section width:wide space:2
:::columns limit:3 items:card space:3
### Cartão
Em até 12 vezes, com a bandeira que preferir.
:::inline
[Pagar com cartão](#pagar-cartao)
:::
---
### Pix
À vista, com confirmação na hora.
```@copy label:"Chave Pix" value:00000000-0000-0000-0000-000000000000
```
---
### Boleto
Vence em três dias úteis.
:::inline
[Gerar boleto](#pagar-boleto)
:::
:::
:::
:::section width:normal space:3 align:center
Uma linha sobre nota fiscal, prazo de entrega ou política de reembolso.
:::
Moldura
Menu
A barra do site: a marca, os links e uma ação. Fica no topo ao rolar; no celular os links rolam de lado.
Rodapé
A marca com uma frase e colunas de links.
Aviso
Uma faixa presa à borda da tela — um aviso, uma promoção com prazo, um recado — que o leitor pode fechar e que não volta.
Aviso de cookies
Uma faixa presa ao rodapé com as finalidades que o leitor aceita ou recusa — lembrado neste site, sem cookie do servidor.
The markdown
:::banner position:bottom shape:floating dismiss:none surface:soft id:cookies
**Sua privacidade.** O essencial mantém o site funcionando. O resto é opcional e só carrega se você permitir.
```@consent link:/privacidade
essential | Essenciais | Mantêm o site funcionando. | required
videos | Vídeos do YouTube | Carrega o player do Google, que usa cookies.
stats | Estatísticas | Conta as páginas mais lidas, sem identificar você.
```
:::