Infobox: 2 Colunas — Formato, Regras e Exemplos

Uma infobox de duas colunas divide uma ideia em exatamente dois pontos paralelos para que o leitor compreenda a relação de relance. Use-a quando o par for mais útil lado a lado do que enterrado em um parágrafo: duas responsabilidades, duas etapas, duas perspectivas ou duas partes complementares de uma resposta.

Esse exemplo renderizado é uma infobox, um título compartilhado e exatamente dois itens. Ambos os itens respondem ao mesmo tipo de pergunta com profundidade comparável. O elemento não afirma que as duas necessidades são opostas; ele mostra que um brief útil precisa levar ambas em conta.

Por que este elemento é importante

A prosa densa faz com que os leitores reconstruam relações. Em uma frase como “Um brief de conteúdo deve servir ao leitor resolvendo uma tarefa e servir ao negócio apoiando uma ação qualificada”, as duas responsabilidades existem, mas seus limites são fracos. Uma infobox de duas colunas torna o assunto compartilhado visível uma vez e dá a cada responsabilidade uma região nomeada. Os leitores podem escanear ambos os cabeçalhos, escolher por onde começar e comparar a quantidade e o tipo de detalhe sem reler uma frase composta.

O benefício psicológico vem do agrupamento: organizar informações relacionadas em unidades delimitadas. O título compartilhado diz ao leitor o que permanece constante, enquanto os títulos dos itens mostram o que muda. Essa hierarquia é especialmente útil quando nenhum dos pontos deve dominar. A prosa comum naturalmente dá mais destaque ao primeiro ponto e pode fazer o segundo parecer uma reflexão tardia; colunas equivalentes sinalizam peso editorial igual.

A extraibilidade por máquina é a capacidade do software de isolar uma unidade de conteúdo mantendo seu significado. Uma infobox tipificada expõe um tópico pai e dois itens filhos explícitos. Um sistema de recuperação pode preservar o título compartilhado, os títulos dos itens, o corpo do texto e a ordem da fonte, em vez de adivinhar onde uma cláusula termina e a outra começa. Cada item ainda deve ser autocontido: “O requisito de negócio é a evidência que apoia uma ação qualificada” sobrevive à extração, enquanto “O outro lado” não sobrevive.

A estrutura não salva um raciocínio fraco. Se a fonte contém um ponto desenvolvido e uma frase adicionada por simetria, a renderização apenas torna o desequilíbrio mais óbvio. Aplique as regras de escrita de elementos : escreva o raciocínio completo primeiro, depois escolha este elemento apenas quando a ideia finalizada tiver genuinamente duas partes paralelas. As regras específicas do elemento nesta página têm precedência onde definem seu mapeamento e limites exatos de itens.

Quando usar

Use uma infobox de duas colunas quando todas as quatro condições forem verdadeiras:

1. Há uma ideia pai clara que pode dar título a toda a caixa.
2. A ideia pai se divide naturalmente em exatamente dois itens.
3. Ambos os itens desempenham o mesmo trabalho informacional, como explicar uma responsabilidade, etapa, perspectiva de público ou dimensão.
4. Cada item pode ser compreendido em aproximadamente 30–90 palavras sem uma estrutura aninhada.

Bons usos incluem “Antes do lançamento / Após o lançamento”, “Sinal do leitor / Sinal do negócio”, “O que muda / O que permanece igual” e “Responsabilidade do proprietário / Responsabilidade do revisor”. Os rótulos devem expor uma relação real. Se o leitor não conseguir completar a frase “Estes pertencem juntos porque…”, o agrupamento é provavelmente decorativo.

Casos de quase-acerto são importantes porque um layout de duas colunas pode fazer qualquer par parecer intencional. Não use para uma única ideia dividida em uma quebra de frase arbitrária. Não transforme uma lista de quatro itens em duas colunas longas apenas para economizar espaço vertical; a ordem da fonte e a leitura dinâmica tornam-se ambíguas. Não use para uma comparação detalhada de produtos com múltiplos critérios, pois uma tabela de comparação dá a cada critério uma linha explícita. Não use para prós e contras quando o número de pontos difere ou quando os leitores precisam ponderar várias compensações. Não emparelhe uma definição com uma chamada para ação promocional: esses blocos desempenham funções diferentes e não merecem tratamento igual.

O sinal de alerta mais forte é um rótulo como “Outro”, “Mais” ou “Informações adicionais”. Esses rótulos revelam que a divisão segue o espaço disponível em vez do significado. Retorne o conteúdo à prosa, ou encontre a distinção real antes de usar o elemento.

Onde posicionar

Posicione a infobox imediatamente após o parágrafo que introduz a ideia compartilhada. O leitor precisa de uma frase de contexto antes de encontrar a divisão, mas não deve precisar atravessar evidências não relacionadas ou outra subseção para chegar até ela. Após a caixa, continue com análise, exemplos ou instruções que se aplicam a ambos os itens.

Ela pode ficar diretamente abaixo de um H2 quando o próprio H2 fornece a ideia pai e a infobox tem seu próprio título mais específico. Também pode seguir uma definição curta quando os dois itens explicam dimensões dessa definição. Não deve aparecer entre uma afirmação e sua citação, entre um passo e a condição necessária para concluir esse passo, ou dentro de um item de lista ordenada. Essas posições quebram relações que devem permanecer contíguas.

Não a posicione ao lado de outra infobox de duas colunas, tabela de comparação, conjunto de abas ou bloco de prós e contras. Estruturas paralelas adjacentes forçam o leitor a decidir qual relação visual é importante e podem criar quatro colunas aparentes em telas largas. Insira prosa explicativa entre estruturas distintas, ou combine o material em uma tabela ou seção mais adequada. Evite colocá-la imediatamente antes ou depois de uma chamada para ação de duas colunas; geometria idêntica pode fazer uma explicação editorial parecer promocional.

Use no máximo uma infobox de duas colunas em uma seção curta. A repetição transforma um contraste útil em mobiliário de página. Quando um artigo longo contém vários pares genuínos, separe-os sob diferentes cabeçalhos e confirme que cada par tem uma ideia pai distinta.

Anatomia

A anatomia contém uma região pai e duas regiões filhas repetidas. A captura de tela deve rotular partes semânticas, não preenchimento ou tokens de cor, para que a especificação permaneça útil se o sistema visual mudar.

1. Limite externo: Agrupa o título pai e ambos os itens como uma unidade editorial.
2. Título compartilhado: Nomeia a ideia que ambos os itens explicam. Não é um terceiro ponto.
3. Título e corpo do primeiro item: Declara o primeiro membro do par em linguagem completa e extraível.
4. Título e corpo do segundo item: Responde ao mesmo tipo de pergunta com profundidade equivalente.
5. Relação de layout: Usa colunas de largura igual quando o espaço permite e empilha o item um antes do item dois em telas estreitas.

Bordas, fundo, espaçamento, raio, escala tipográfica e ponto de quebra pertencem ao renderizador. Os autores controlam a hierarquia e a ordem do conteúdo, não os tokens visuais.

Exemplos de design

Há um elemento semântico com quatro variantes de conteúdo e viewport suportadas. As variantes alteram o tratamento do título ou a apresentação responsiva; elas nunca alteram o requisito de exatamente dois itens.

Variante padrão com título: Preferida para uso independente. Um título compartilhado nomeia a ideia pai, e ambos os itens filhos têm títulos concisos.

Variante com título contextual: O H2 imediatamente anterior pode atuar como título compartilhado. Isso é permitido apenas quando nenhum parágrafo ou componente separa o H2 da caixa e a infobox tem um nome acessível derivado desse cabeçalho.

Variante compacta: Use para duas definições ou responsabilidades curtas. Cada corpo ainda forma uma frase completa; o layout não se torna um par de slogans.

Variante para viewport estreito: Os itens empilham verticalmente. A ordem permanece significativa sem referências a “esquerda”, “direita”, “acima” ou “ao lado”.

Ícones não são uma variante de conteúdo. Se o sistema de design adicionar ícones decorativos, eles usam texto alternativo vazio e não substituem os títulos dos itens. Se cada item precisar de uma imagem informativa, use um elemento orientado a imagem em vez de expandir este contrato de infobox.

Parâmetros

O contrato de parâmetros impede que o elemento se transforme em uma grade genérica. Valores que descrevem significado pertencem ao conteúdo criado pelo autor; o layout responsivo permanece no renderizador.

O título é obrigatório a menos que o cabeçalho de documento imediatamente anterior forneça o mesmo tópico pai e possa rotular o contêiner programaticamente. Os corpos dos itens permitem ênfase, código inline e um link útil. Eles não permitem cabeçalhos aninhados, tabelas, mídia, acordeões, formulários, chamadas para ação ou outra infobox.

Sintaxe e exemplos de código

Todas as três notações preservam o mesmo título pai, dois itens ordenados, títulos dos itens e corpos dos itens. A diretiva Markdown portátil é a fonte canônica. Os formulários Hugo e WordPress são contratos de adaptadores; seus renderizadores devem produzir HTML semântico equivalente e ordem responsiva.

Diretiva Markdown portátil

:::infobox-2-columns
## Um brief de conteúdo útil responde a duas perguntas

::item
### O que o leitor precisa?

Declare a pergunta, decisão ou tarefa que a página deve resolver, incluindo o contexto que altera a resposta.
::

::item
### O que o negócio precisa?

Declare a ação qualificada que a página deve apoiar, juntamente com a evidência necessária para merecer essa ação.
::
:::

O primeiro cabeçalho pai mapeia para title. Cada ::item mapeia seu primeiro cabeçalho para item.title e o corpo restante para item.content. Este mapeamento exato de dois itens substitui a permissão geral de itens repetíveis nas regras base.

Shortcode Hugo

{{< infobox-2-columns title="Um brief de conteúdo útil responde a duas perguntas" >}}
  {{< infobox-item title="O que o leitor precisa?" >}}
  Declare a pergunta, decisão ou tarefa que a página deve resolver, incluindo o contexto que altera a resposta.
  {{< /infobox-item >}}
  {{< infobox-item title="O que o negócio precisa?" >}}
  Declare a ação qualificada que a página deve apoiar, juntamente com a evidência necessária para merecer essa ação.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

O adaptador usa apenas parâmetros nomeados. Ele deve rejeitar um terceiro item em vez de encapsulá-lo silenciosamente, e deve preservar a ordem dos itens do autor quando o layout empilha.

Bloco WordPress

<!-- wp:amicited/infobox-2-columns {"title":"Um brief de conteúdo útil responde a duas perguntas"} -->
  <!-- wp:amicited/infobox-item {"title":"O que o leitor precisa?"} -->
  <p>Declare a pergunta, decisão ou tarefa que a página deve resolver, incluindo o contexto que altera a resposta.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"O que o negócio precisa?"} -->
  <p>Declare a ação qualificada que a página deve apoiar, juntamente com a evidência necessária para merecer essa ação.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

O WordPress deve expor dois slots fixos de item em vez de uma área “adicionar bloco” irrestrita. Os editores podem reordenar os dois itens, mas não podem inserir um bloco não relacionado entre eles ou adicionar uma terceira coluna.

Exemplos

Exemplo bom

Isso funciona porque o título compartilhado estabelece uma ideia, o limite de tempo cria um par genuíno, e ambas as colunas especificam trabalho de medição comparável. Cada item permanece significativo quando empilhado ou extraído independentemente.

Exemplo ruim

Melhore seu conteúdo

Escreva bem: Crie conteúdo útil, autoritativo e envolvente que seu público amará e os mecanismos de busca recompensarão.

Outras coisas: SEO também inclui trabalho técnico, links, design de conversão, análise, construção de marca, distribuição, manutenção e muitas outras atividades importantes.

Isso falha porque o par é artificial. “Escreva bem” é uma instrução vaga, “Outras coisas” é uma categoria genérica, e o segundo item contém muito mais escopo que o primeiro. A caixa implica conceitos iguais e paralelos onde nenhum existe. Substitua por prosa que defina o objetivo real do conteúdo, depois use uma lista ou seções separadas para os fluxos de trabalho distintos.

Marcação Schema e acessibilidade

Uma infobox de duas 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 a envolve, quando a página se qualifica para essa marcação. Não marque os dois itens como ItemList apenas por serem dois; o elemento representa uma relação, não necessariamente uma lista classificada ou completa. Se um item contém independentemente um fato usado em outra parte dos dados estruturados, a política de schema no nível da página governa esse fato.

HTML semântico deve expressar um contêiner rotulado com duas seções filhas. Use um aside apenas quando o par for complementar à narrativa ao redor; use uma section quando fizer parte do argumento principal. Dê ao contêiner um nome acessível através de seu título visível e aria-labelledby. Cada título filho deve ser um cabeçalho real no nível correto, não texto em negrito escolhido por aparência.

A ordem da fonte é a ordem de acessibilidade. Navegação por teclado, leitores de tela, copiar-e-colar e telas estreitas devem encontrar o item um antes do item dois. CSS pode criar colunas, mas não deve revertê-las visualmente. Nunca se refira a “a caixa da esquerda” ou “a caixa da direita”, porque essas posições desaparecem quando empilhadas. Cor, formato do ícone e fundo não podem ser a única forma de distinguir itens. O design deve suportar zoom de texto sem cortes, rolagem horizontal ou colunas sobrepostas.

Regras de escrita

Comece escrevendo a frase pai: “Esta ideia tem duas partes: X e Y.” Se essa frase for imprecisa, não use o elemento. Dê a ambos os títulos dos itens a mesma forma gramatical — dois substantivos, duas perguntas ou duas frases de tempo — porque a linguagem paralela torna a relação imediatamente legível.

Use exatamente dois itens. Mantenha cada título entre 2–7 palavras e cada corpo entre 30–90 palavras quando possível, com um máximo absoluto de 120 palavras. Uma diferença de uma frase é aceitável; um item de 35 palavras ao lado de um item de 110 palavras requer edição ou uma estrutura diferente. Cada corpo deve responder à mesma pergunta implícita e usar profundidade de evidência comparável. Profundidade equivalente não significa preencher uma resposta curta com enchimento.

Use linguagem direta e neutra. Declare a distinção nos títulos e explique sua consequência nos corpos. Prefira “Antes do lançamento / Após o lançamento” a “Primeiro / Segundo”, porque rótulos significativos sobrevivem à extração. Evite “um/outro” a menos que as escolhas sejam genuinamente exclusivas, e evite “versus” quando os itens são complementares.

Nunca coloque estes itens dentro do elemento:

• Um terceiro item, mesmo que o renderizador pudesse encapsulá-lo.
• Um procedimento de múltiplas etapas, lista longa de marcadores, tabela de dados, grade de preços, formulário, depoimento ou banner promocional.
• Seções H2 independentes, infoboxes aninhadas, abas, acordeões, vídeo ou galerias de imagens.
• Texto legal obrigatório, avisos de segurança, listas de fontes ou qualificações que se aplicam a apenas uma frase fora da caixa.
• Dois links não relacionados projetados para se assemelhar a chamadas para ação concorrentes.

Se qualquer item precisar de subtítulos ou mais de dois parágrafos, promova ambos os itens para seções de página comuns. Se os leitores precisarem escolher entre os itens, adicione critérios de decisão em prosa ou use um elemento de comparação ou decisão; simetria visual sozinha não explica uma escolha.

Tipos de postagem que o utilizam

O campo postTypes do frontmatter é a fonte para este conjunto de usos. Cada formato listado tem uma relação natural de duas partes, mas nenhum deve incluir o elemento por padrão quando o conteúdo não formar um par genuíno.

Checklist de QA

• Uma ideia pai: A caixa tem um assunto compartilhado claro que explica por que ambos os itens pertencem juntos.
• Exatamente dois itens: A fonte e a saída renderizada contêm dois itens filhos — nunca um, três ou um slot vazio.
• Paralelismo verdadeiro: Ambos os itens respondem ao mesmo tipo de pergunta e usam títulos com gramática paralela.
• Profundidade equivalente: Nenhum item é um contrapeso simbólico ou um aglomerado genérico; detalhe e evidência são comparáveis.
• Posicionamento útil: A caixa segue seu contexto introdutório e não separa uma afirmação da evidência ou um passo de seu requisito.
• Vizinhos seguros: Não está adjacente a outra grade paralela, componente de comparação ou CTA de duas colunas.
• Redação extraível: Os títulos pai e dos itens nomeiam seus assuntos, e os corpos não dependem de “esquerda”, “direita” ou pronomes próximos.
• Ordem responsiva: Layouts estreitos empilham o item um antes do item dois sem cortes, rolagem horizontal ou reordenação visual.
• Estrutura acessível: O contêiner tem um rótulo programático visível, os títulos filhos são cabeçalhos reais, e cor ou ícones não carregam significado sozinhos.
• Limites de conteúdo: Cada corpo permanece dentro de dois parágrafos 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, dois itens, corpos e ordem.
• Restrição de schema: Nenhuma marcação de lista ou comparação é adicionada a menos que o conteúdo da página se qualifique independentemente para ela.

Um revisor deve rejeitar o elemento quando qualquer uma das primeiras quatro verificações falhar. Essas falhas indicam um problema conceitual, não um defeito de estilo, e alterar a largura ou a decoração não pode repará-las.

FAQ

As entradas de FAQ no frontmatter respondem às perguntas recorrentes de implementação: a contagem de itens é fixa em dois, profundidade importa mais que contagens idênticas de palavras, comparações detalhadas precisam de uma tabela, o mobile preserva a ordem da fonte, e o elemento não gera marcação schema. Manter essas respostas no frontmatter estruturado permite que o template da academy renderize o tratamento de FAQ aprovado sem duplicar o conteúdo no corpo.