Text
Textos estruturam títulos, parágrafos, notas e citações, definindo hierarquia e tom da interface.
Quando usar
- Comunicar propósito de telas com títulos e parágrafos introdutórios.
- Destacar avisos ou dicas em notas (
*>) dentro de cards e modais. - Registrar metadados ou mensagens de apoio com níveis secundários (
>>,>>>). - Compartilhar depoimentos ou feedback usando citações (
">).
Exemplo básico
Seção textual completa
Por quê: apresenta contexto, metadados e ação em blocos claramente hierarquizados.
Variantes
Notas e citações
Quando usar: destacar alertas e registrar feedback com formato diferenciado. Por quê: a formatação especial chama atenção sem exigir componentes extras.
Metadados sutis
Quando usar: oferecer informações de suporte sem competir com o conteúdo principal.
Por quê: o nível >>> mantém o dado presente, porém discreto.
Títulos hierárquicos
Quando usar: organizar o conteúdo em seções aninhadas com clareza. Por quê: hierarquia visível ajuda a pessoa usuária a escanear a página rapidamente.
Composição (usando com outros)
- Text + Card — adiciona contexto e notas antes de ações.
- Text + Stack — empilha mensagens com espaçamento controlado.
- Text + Button — combina instrução e ação em sequência lógica.
Card com texto e ação
Por quê: explica o contexto e oferece o próximo passo em um único bloco.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
# … ###### | títulos | — | Define hierarquia de seções (use um # por tela). | Não |
>, >>, >>> | parágrafos | — | Parágrafos principal, secundário e metadado. | Não |
*> | nota | — | Realça alertas, dicas e mensagens importantes. | Não |
"> | citação | — | Registra depoimentos ou mensagens destacadas. | Não |
Erros comuns (Do/Don’t)
❌ Errado — Dois `#` na mesma tela
✅ Correto — Uso de subtítulos
Por quê: apenas um # mantém foco e previne conflitos de acessibilidade.
❌ Errado — Citação com botão
✅ Correto — Citação e ação organizadas
Por quê: cada bloco textual deve manter propósito único; ações ficam em rows ou botões próprios.
Referências cruzadas
Relacionados
Card: envolve texto com títulos e ações.Stack: controla espaçamento entre blocos textuais.Button: ações ligadas ao conteúdo textual.Styles Block: customiza tipografia global.
Composições recomendadas
- Text + Card + Row-end → explicações seguidas de ação direta.
- Text + Stack → storytelling linear com espaçamento definido.
- Text + Styles Block → ajustes de tipografia alinhados ao branding.
Texto guiando ação
Por quê: orienta a pessoa usuária e apresenta o CTA associado imediatamente.