Infobox: 3 Colunas — Formato, Regras e Exemplos

Um infobox de três colunas apresenta exatamente três pontos paralelos sob uma única ideia compartilhada. É útil quando o leitor precisa ver um modelo real de três partes de uma só vez: três responsabilidades, três critérios, três resultados ou três fluxos de trabalho coordenados. As colunas prometem status editorial equivalente, portanto cada ponto deve fazer o mesmo tipo de trabalho com profundidade comparável.

Esse elemento renderizado tem um título compartilhado e exatamente três itens. Todos os três títulos são frases nominais, todos os três corpos descrevem um tipo de confiança, e os ícones adicionam ritmo sem carregar significado. Remova os ícones e o modelo permanece inalterado.

Por que este elemento é importante

Os leitores não experimentam um parágrafo denso como um modelo apenas por conter três orações. Eles precisam manter a primeira oração na memória, detectar a transição para a segunda e decidir se a terceira é igual, subordinada ou meramente adicional. Um infobox de três colunas torna a relação explícita. O título compartilhado nomeia o que permanece constante; três itens delimitados mostram a divisão completa; o peso visual equivalente diz aos leitores para inspecionar cada item antes de considerar o modelo como compreendido.

Isso ajuda através do chunking, o agrupamento de informações relacionadas em unidades gerenciáveis. Três é suficiente para revelar um sistema sem produzir um catálogo. Um leitor pode escanear os três títulos, entrar pelo ponto mais relevante para si e depois comparar o nível de detalhe. O elemento é particularmente eficaz quando a prosa, de outra forma, repetiria o mesmo assunto três vezes ou esconderia a distinção dentro de uma frase longa.

A extraibilidade por máquina é a capacidade do software de isolar uma unidade de conteúdo sem perder seu assunto ou relações. Um infobox de três colunas tipificado expõe um tópico pai e três filhos ordenados. Sistemas de busca, APIs de conteúdo e ferramentas de recuperação de IA podem preservar o título compartilhado, cada título de item, cada corpo e a ordem da fonte, em vez de adivinhar se um parágrafo contém uma lista. Cabeçalhos explícitos também fornecem a cada item um rótulo de recuperação útil.

A extração só funciona quando as palavras são autossuficientes. “Confiança técnica significa que a página renderiza e os links resolvem” pode sobreviver fora do layout. “A terceira parte trata disso” não pode. A estrutura também não pode fabricar uma terceira ideia. Siga as regras de escrita de elementos : estabeleça o modelo de conteúdo antes de escolher o renderizador. O requisito específico do elemento de exatamente três itens tem precedência sobre qualquer permissão geral para itens repetíveis.

Quando usar

Use um infobox de três colunas apenas quando todos os cinco testes forem aprovados:

1. Um título compartilhado pode governar com precisão o elemento inteiro.
2. O assunto se divide naturalmente em exatamente três pontos.
3. Todos os três pontos respondem à mesma pergunta implícita.
4. Cada ponto merece profundidade, evidência e peso visual semelhantes.
5. Cada ponto pode ser explicado em um ou dois parágrafos curtos sem estrutura aninhada.

Usos adequados incluem três componentes de um framework, três responsabilidades de um proprietário, três dimensões de qualidade, três resultados de uma capacidade ou três verificações realizadas na mesma etapa. A relação pode ser complementar, sequencial ou categórica, mas deve ser declarada. Se o autor não consegue completar “Estes três pertencem juntos porque…”, o agrupamento é provavelmente preenchimento visual.

O erro mais comum é um par genuíno mais um terceiro item fraco. “Pessoas, processo e mais” não se torna um modelo de três partes porque o layout tem três espaços. Tampouco “Velocidade, precisão e valor” quando o artigo define apenas velocidade e precisão e trata valor como resultado delas. Mantenha o par, explique o resultado em prosa ou escolha outro elemento.

Não use este infobox para três instruções sequenciais. Colunas enfraquecem a sequência, especialmente quando empilham em larguras estreitas; use uma lista de etapas quando a ordem de conclusão for importante. Não use para três produtos avaliados por vários critérios; use uma tabela de comparação. Não use para uma lista que hoje contém três fatos, mas pode ganhar um quarto na próxima atualização. Um contrato fixo de três colunas é adequado apenas quando três é inerente à ideia.

Outros erros comuns incluem um título mais dois itens reais, um item contendo todas as ressalvas, três alegações promocionais sem mecanismo ou evidência, e um segmento de público dividido em três dados demográficos arbitrários. Em cada caso, o layout exagera uma relação que o conteúdo não conquistou.

Onde posicionar

Posicione o infobox imediatamente após o parágrafo que introduz a ideia pai. Esse parágrafo deve explicar por que uma visão tripla ajuda; o título compartilhado então nomeia o modelo e os itens definem suas partes. Siga o elemento com interpretação, evidência ou uma transição que se aplique ao grupo como um todo.

Pode aparecer diretamente abaixo de um H2 quando esse cabeçalho fornece o título compartilhado e nenhum parágrafo ou componente intervém. Também pode seguir uma definição quando os três itens detalham dimensões do termo. Não deve interromper uma afirmação e sua citação, um aviso e a condição que o aciona, uma etapa e seu resultado esperado, ou uma frase que introduz uma lista convencional. Essas relações devem permanecer contíguas.

Não o posicione imediatamente ao lado de outra grade de três colunas, tabela de preços, controle de abas, baralho de cartões ou chamada para ação de três opções. A geometria repetida faz com que a explicação editorial pareça interativa ou comercial e força os leitores a inferir qual agrupamento importa. Insira prosa explicativa ou escolha uma estrutura que carregue toda a relação. Evite colocar um segundo infobox na mesma seção curta; a repetição transforma um modelo deliberado em mobília decorativa.

Em uma página longa, múltiplos infoboxes de três colunas são aceitáveis apenas sob cabeçalhos diferentes e para modelos genuinamente diferentes. Eles não devem ser usados como tratamento padrão para cada trio no texto.

Anatomia

A anatomia contém uma região pai e três regiões de item repetidas. A captura de tela legendada deve identificar partes semânticas em vez de tokens de cor, raio ou espaçamento, para que a especificação sobreviva a um redesenho.

1. Limite externo: Agrupa o título e todos os três itens como uma unidade editorial.
2. Título compartilhado: Nomeia a ideia dividida pelos três itens. Não é um quarto item.
3. Espaço opcional para ícone: Contém um ícone decorativo aprovado por item; todos os três espaços são usados juntos ou omitidos juntos.
4. Título do item: Nomeia um membro do conjunto em linguagem paralela aos outros dois títulos.
5. Corpo do item: Explica esse membro com profundidade equivalente e permanece significativo quando extraído.
6. Relação de layout: Usa três colunas iguais onde o espaço permitir e empilha item um, item dois e depois item três em telas estreitas.

Autores controlam títulos, corpos, tokens de ícone e ordem da fonte. O renderizador controla largura das colunas, espaçamentos, pontos de quebra, bordas, fundos e tipografia.

Exemplos de design

Há um elemento semântico com quatro variantes suportadas e um estado responsivo. Nenhum altera o contrato exato de três itens.

Variante padrão com título: Preferida para conteúdo explicativo. O título compartilhado e os três títulos de item tornam a hierarquia explícita; nenhum ícone está presente.

Variante com ícones: Adiciona um ícone decorativo a cada item. Os ícones devem compartilhar família, tamanho e peso visual. Uma mistura de ícone, fotografia e espaço vazio não é suportada.

Variante com título contextual: O H2 imediatamente anterior fornece o título compartilhado. Isso é permitido apenas quando o contêiner pode referenciar esse cabeçalho visível programaticamente e nada separa o cabeçalho do elemento.

Variante compacta: Adequada para três definições curtas ou verificações. Cada corpo ainda é uma frase completa, não um slogan ou fragmento de rótulo.

Estado em viewport estreito: Os itens empilham verticalmente na ordem de autoria. Nenhum texto pode depender de posição esquerda, central ou direita.

Parâmetros

O contrato separa o significado da autoria da apresentação. Colunas responsivas e estilo de ícones pertencem ao renderizador; campos de conteúdo e ordem semântica pertencem à fonte.

O título é obrigatório a menos que um cabeçalho imediatamente anterior forneça o mesmo tópico pai e rotule o contêiner. O conteúdo do item pode conter ênfase, código inline e um link de texto relevante. Não pode conter cabeçalhos aninhados, tabelas, listas com mais de três marcadores curtos, mídia, formulários, chamadas para ação ou outro componente.

Sintaxe e exemplos de código

As três notações preservam o mesmo título, três itens ordenados, tokens de ícone opcionais e corpos. A diretiva Markdown portátil é a fonte canônica. Hugo e WordPress são contratos de adaptação e devem rejeitar qualquer contagem de itens diferente de três.

Diretiva Markdown portátil

:::infobox-3-columns
## Uma página publicável precisa de três tipos de confiança

::item{icon="reader"}
### Confiança do leitor

A resposta é clara, completa e específica o suficiente para orientar uma decisão ou ação.
::

::item{icon="editorial"}
### Confiança editorial

As afirmações são fundamentadas, a terminologia é consistente e toda qualificação necessária permanece anexada.
::

::item{icon="technical"}
### Confiança técnica

A página renderiza, os links resolvem, os metadados são mapeados corretamente e as máquinas conseguem recuperar sua estrutura.
::
:::

O primeiro cabeçalho pai mapeia para title. Cada ::item mapeia seu primeiro cabeçalho para item.title, o corpo restante para item.content e o atributo opcional icon para um token de ícone aprovado. Três itens aninhados são obrigatórios mesmo quando o layout empilha.

Mapeamento de shortcode Hugo

{{< infobox-3-columns title="Uma página publicável precisa de três tipos de confiança" variant="icons" >}}
  {{< infobox-item title="Confiança do leitor" icon="reader" >}}
  A resposta é clara, completa e específica o suficiente para orientar uma decisão ou ação.
  {{< /infobox-item >}}
  {{< infobox-item title="Confiança editorial" icon="editorial" >}}
  As afirmações são fundamentadas, a terminologia é consistente e toda qualificação necessária permanece anexada.
  {{< /infobox-item >}}
  {{< infobox-item title="Confiança técnica" icon="technical" >}}
  A página renderiza, os links resolvem, os metadados são mapeados corretamente e as máquinas conseguem recuperar sua estrutura.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Esta é uma especificação de adaptador portátil, não uma promessa de que o site atual registra esses shortcodes. Usa apenas parâmetros nomeados, preserva a ordem da fonte, valida tokens de ícone e falha na validação de autoria em vez de descartar silenciosamente ou envolver um item extra.

Bloco WordPress

<!-- wp:amicited/infobox-3-columns {"title":"Uma página publicável precisa de três tipos de confiança","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Confiança do leitor","icon":"reader"} -->
  <p>A resposta é clara, completa e específica o suficiente para orientar uma decisão ou ação.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Confiança editorial","icon":"editorial"} -->
  <p>As afirmações são fundamentadas, a terminologia é consistente e toda qualificação necessária permanece anexada.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Confiança técnica","icon":"technical"} -->
  <p>A página renderiza, os links resolvem, os metadados são mapeados corretamente e as máquinas conseguem recuperar sua estrutura.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

O editor deve expor três espaços fixos de item. Pode permitir que o autor reordene os itens, mas não deve oferecer um inseridor irrestrito que permita um quarto filho ou bloco não relacionado.

Exemplos

Bom exemplo: um modelo operacional real de três vias

Isso funciona porque o título compartilhado define um modelo de responsabilidade, os três papéis são distintos e cada corpo responde à mesma pergunta: o que esse responsável deve verificar? Os itens usam títulos nominais paralelos e profundidade comparável. Nenhum existe apenas para completar a linha.

Mau exemplo: um par esticado para três

Três formas de melhorar uma página de destino

Esclareça a oferta: Nomeie o público, o problema, o mecanismo e o resultado esperado em linguagem que o leitor possa verificar.

Comprove a afirmação: Adicione evidências relevantes, explique seus limites e mantenha as citações anexadas às declarações que elas suportam.

Faça brilhar: Adicione cores atraentes e tudo o mais que pareça envolvente.

Os dois primeiros itens são requisitos editoriais com resultados observáveis. O terceiro é um conselho visual vago, não tem padrão de evidência correspondente e faz um trabalho diferente. Foi adicionado porque o design pedia três colunas, não porque o modelo tem três partes. Remova o terceiro item e use uma estrutura de duas partes, ou defina um terceiro requisito genuíno, como reduzir o atrito de interação, e o suporte com a mesma profundidade.

Marcação Schema e acessibilidade

Um infobox de três colunas não tem um tipo Schema.org dedicado e não cria dados estruturados independentes. Seu texto permanece parte do Article, TechArticle ou WebPage que o envolve, quando essa página se qualifica. Não marque os filhos como ItemList apenas porque são três, e não infira HowTo a partir de rótulos com som sequencial. Alimente schema no nível da página apenas quando o conteúdo subjacente atender independentemente aos requisitos desse schema.

Use um contêiner semântico rotulado com três seções filhas. Use <section> quando o modelo fizer parte do argumento principal e <aside> quando for complementar. Conecte o título compartilhado visível com aria-labelledby e dê a cada filho um cabeçalho real no nível de documento correto. Texto em negrito não substitui um cabeçalho.

A ordem da fonte é a ordem de leitura. Leitores de tela, navegação por teclado, texto copiado e layouts mobile devem encontrar item um, item dois e depois item três. O CSS pode criar colunas, mas não deve usar regras de ordenação para reorganizá-las. Nunca escreva “esquerda”, “meio” ou “direita”; essas posições desaparecem quando os itens empilham.

Ícones são decorativos a menos que comuniquem informações não presentes no título. Ícones decorativos usam aria-hidden="true" em HTML ou texto alternativo vazio quando renderizados como imagens. Se um ícone for informativo, seu significado também deve aparecer em texto visível; um nome acessível oculto da vista não ajuda leitores que enxergam a página mas não conseguem interpretar o símbolo. Cor e formato do ícone nunca devem ser a única distinção entre os itens.

Em larguras estreitas, empilhe os itens antes que o texto fique comprimido. Suporte zoom de texto sem cortes, sobreposição ou rolagem horizontal no nível da página. Uma captura de tela de três colunas não substitui conteúdo semântico responsivo.

Regras de escrita

Comece com a frase “Esta ideia tem três partes: X, Y e Z.” A frase deve permanecer precisa após cada parte ser definida. Se uma parte for resultado das outras duas, um guarda-chuva amplo ou um exemplo menor, o modelo não é verdadeiramente paralelo.

Use exatamente três itens. Mantenha cada título entre 2 e 7 palavras e use o mesmo padrão gramatical: três frases nominais, três perguntas ou três rótulos temporais. Mantenha cada corpo entre 25 e 80 palavras quando possível e nunca exceda 110. Uma diferença de uma frase é aceitável. Um item de 25 palavras ao lado de dois itens de 100 palavras requer edição ou uma estrutura diferente.

Profundidade equivalente significa trabalho explicativo comparável, não preenchimento. Cada corpo deve responder à mesma pergunta implícita, conter um nível semelhante de especificidade e declarar consequências em um nível semelhante. Se um item genuinamente precisa de mais explicação, mova o modelo para seções comuns onde o tamanho pode variar honestamente.

Use linguagem direta e neutra. Títulos devem identificar significado, não posição: “Descoberta / Produção / Revisão” é mais forte que “Primeiro / Segundo / Terceiro.” Rótulos sequenciais são aceitáveis apenas quando cada item resume uma fase em vez de instruir o leitor através de etapas. Evite superlativos, alegações de benefício não fundamentadas e três slogans disfarçados de explicação.

Ícones são opcionais. Use todos os três ou nenhum, selecione-os de uma família aprovada e mantenha-os visualmente consistentes. Não escolha ícones antes dos títulos, use emoji como tokens de ícone de produção, ou deixe um ícone substituir um cabeçalho de item significativo.

Nunca coloque estes itens dentro do elemento:

• Dois ou quatro itens, um item vazio ou um terceiro espaço “diversos”.
• Um procedimento detalhado, matriz de comparação, plano de preços, formulário, carrossel de depoimentos ou banner promocional.
• Seções H2 aninhadas, outro infobox, abas, painéis de acordeão, vídeo ou galeria de imagens.
• Listas longas com marcadores, listas de fontes, isenções legais, avisos de segurança ou qualificações destacadas da afirmação que governam.
• Três links não relacionados estilizados para se parecerem com chamadas para ação equivalentes.

Quando o conteúdo ultrapassar esses limites, promova os três itens para seções normais da página. O layout fixo nunca deve se tornar uma razão para comprimir nuances essenciais ou ocultar uma qualificação.

Tipos de post que o utilizam

O campo postTypes do frontmatter é o conjunto de uso registrado. Ele identifica formatos que frequentemente contêm um modelo significativo de três partes; não exige um infobox quando a fonte não tem um trio genuíno.

Checklist de QA

• Uma ideia pai: Um título compartilhado preciso explica por que todos os três itens pertencem juntos.
• Exatamente três itens: A fonte e a saída renderizada contêm três filhos completos — nunca dois, quatro ou um espaço reservado vazio.
• Divisão tripla genuína: Remover qualquer item torna o modelo incompleto; nenhum é preenchimento, resultado ou categoria diversa.
• Títulos paralelos: Todos os títulos de item usam a mesma forma gramatical e identificam significado em vez de posição na tela.
• Profundidade equivalente: Cada corpo responde à mesma pergunta implícita com detalhes e evidências comparáveis.
• Posicionamento útil: O elemento segue seu contexto introdutório e não separa uma afirmação, aviso, etapa ou citação de seu conteúdo dependente.
• Vizinhos seguros: Não está adjacente a outra grade de três colunas, bloco de preços, controle de abas ou CTA de três opções.
• Texto extraível: Os títulos compartilhado e de item nomeiam seus assuntos; os corpos não dependem de pronomes próximos ou posição visual.
• Consistência de ícones: Todos os três itens usam ícones aprovados de uma família, ou nenhum item usa ícone; o significado permanece em texto.
• Ordem responsiva: No celular, empilha item um, item dois e depois item três sem cortes, rolagem horizontal ou reordenação por CSS.
• Semântica acessível: O contêiner tem um rótulo programático visível, os títulos de item são cabeçalhos e os ícones decorativos estão ocultos da tecnologia assistiva.
• Limites de conteúdo: Os corpos permanecem dentro de dois parágrafos curtos e não contêm componente complexo aninhado, procedimento ou controle promocional.
• Paridade de notação: Markdown portátil, Hugo e WordPress preservam o mesmo título, três itens, tokens de ícone, corpos e ordem.
• Restrição de schema: O renderizador não infere marcação de lista, comparação ou instruções a partir da apresentação de três colunas.

Um revisor deve rejeitar o elemento quando a contagem de itens, a lógica tripla genuína ou a profundidade equivalente falharem. Esses são defeitos do modelo de conteúdo; o polimento visual não pode repará-los.

FAQ

As entradas de FAQ do frontmatter cobrem a contagem fixa de itens, profundidade equivalente, ícones opcionais, ordem mobile e restrição de schema. O template academy pode renderizar essas respostas aprovadas sem duplicá-las no corpo.