Notificação de Duas Colunas — Regras e Exemplos

Uma notificação de duas colunas coloca dois avisos curtos e rotulados sob um mesmo assunto compartilhado. Os avisos podem contrastar ações, explicar duas condições ou distinguir estados relacionados, mas cada um deve permanecer preciso e útil quando lido isoladamente.

Este elemento renderizado funciona porque “Página em rascunho” e “Página publicada” são condições genuínas, não títulos cosméticos. O título compartilhado define a decisão, cada aviso fornece uma instrução completa, e nenhum deles pede que o leitor infira significado a partir de cor ou posição horizontal.

Por que este elemento é importante

Os leitores frequentemente encontram orientações enquanto escaneiam em busca da condição que se aplica a eles. Um parágrafo longo que diz “rascunhos podem conter exemplos rotulados, enquanto páginas publicadas exigem valores verificados” faz o leitor manter uma cláusula na memória enquanto testa a outra. Dois avisos delimitados reduzem esse trabalho. Os rótulos expõem primeiro a ramificação, para que o leitor possa identificar a condição relevante e então ler sua instrução.

O benefício psicológico é a atenção seletiva. As pessoas nem sempre precisam de ambas as mensagens igualmente; elas precisam de confiança de que notaram a mensagem correta. Um título compartilhado estabelece a pergunta, enquanto rótulos distintos tornam visíveis os estados disponíveis. A apresentação lado a lado também torna um contraste significativo óbvio sem exagerá-lo como um vencedor e perdedor.

Esse benefício desaparece quando o autor força uma falsa simetria. Falsa simetria ocorre quando o layout implica que duas ideias têm o mesmo escopo, importância ou validade, mesmo que o conteúdo não tenha. Um lembrete de uma frase ao lado de um procedimento de segurança de seis etapas não é um par. Tampouco é uma restrição legal obrigatória ao lado de uma dica opcional de produtividade. Colunas de largura igual podem fazer mensagens desiguais parecerem intercambiáveis, que é exatamente o sinal errado.

Extraibilidade por máquina é a capacidade do software de isolar conteúdo enquanto preserva as relações que o tornam preciso. Uma notificação tipada de duas colunas expõe um assunto pai e dois avisos filhos rotulados. Sistemas de busca e agentes de IA podem recuperar “Para uma página publicada, use valores verificados com uma fonte e data de verificação” sem adivinhar qual título rege qual frase. Rótulos explícitos, ordem da fonte e corpos autocontidos sobrevivem ao empilhamento responsivo e à extração apenas de texto.

Siga as regras de escrita de elementos antes de escolher este componente. O propósito tem precedência sobre a aparência. Um risco grave continua sendo uma caixa de aviso , uma correção comportamento por comportamento continua sendo um bloco de o que fazer e o que não fazer , e dois fatos não se tornam notificações meramente porque um design pode colocá-los em colunas.

Quando usar

Use este elemento quando um assunto compartilhado tem exatamente dois avisos curtos e vê-los ambos ao mesmo tempo ajuda o leitor a classificar, comparar ou evitar confusão. Relacionamentos apropriados incluem:

• Duas condições: logado versus deslogado, rascunho versus publicado, antes da migração versus após a migração.
• Dois públicos: proprietário da conta versus usuário convidado, desde que ambos recebam orientação sobre o mesmo evento.
• Comportamento recomendado e desencorajado: apenas quando cada lado é um aviso curto, não uma lista de comportamentos emparelhados.
• Estados disponíveis e indisponíveis: quando os rótulos indicam as condições que produzem cada estado.
• Comportamento atual e futuro: quando datas ou limites de versão são explícitos.

Todos estes testes devem ser aprovados:

1. Um título pode introduzir com precisão ambos os avisos.
2. Existem exatamente duas condições ou mensagens; a fonte não está escondendo um terceiro caso.
3. Cada aviso tem um rótulo específico e uma consequência ou ação completa.
4. O par pode ser compreendido na ordem da fonte em uma tela estreita.
5. Nenhum aviso requer um procedimento aninhado, tabela, formulário ou qualificação longa.

Quase-acertos revelam uso inadequado. Use prosa comum quando a segunda afirmação meramente continua a primeira. Use uma tabela de comparação quando os leitores precisam avaliar vários critérios. Use uma árvore de decisão quando mais de duas condições ramificam ou quando uma resposta leva a outra pergunta. Use um aviso independente quando perder a mensagem pode causar danos, perda de dados, exposição legal ou uma ação irreversível. Use blocos de o que fazer e o que não fazer quando vários comportamentos errados precisam cada um de uma correção correspondente.

Não invente um contrapeso. Se a instrução honesta é “Faça backup do banco de dados antes da migração”, adicionar “Após a migração: continue trabalhando” cria simetria, mas nenhum valor. Da mesma forma, não divida um aviso em “Importante” e “Também importante”. Os rótulos devem nomear condições, estados, públicos ou posições reais.

Onde posicionar

Posicione o elemento imediatamente após o parágrafo que define a situação compartilhada. Os leitores devem saber qual decisão ou estado os avisos qualificam antes de encontrarem as ramificações. Quando o par precede uma ação, coloque-o antes do primeiro passo que altera dados ou compromete o leitor com uma escolha.

As regras exatas de posição são:

• Coloque um par de duas condições após os pré-requisitos e antes das instruções específicas da condição.
• Coloque um contraste pré-ação antes do controle, comando, download ou passo que ele qualifica.
• Coloque um par de estado de resultado após o resultado ter sido definido e antes dos detalhes de solução de problemas.
• Mantenha evidência ou fonte dentro do aviso relevante quando ela suporta apenas aquele aviso; coloque evidência compartilhada imediatamente após o par completo.
• Em seções de documentação repetidas, use a mesma ordem da fonte para que estados recorrentes não troquem de posição.

O elemento não pode ficar ao lado de outro componente de duas colunas, tabela de comparação, controle de abas, grade de preços ou chamada para ação dividida. Grades adjacentes tornam os limites ambíguos e podem implicar uma escolha de quatro vias. Ele não pode separar uma afirmação de sua citação, um passo de seu aviso obrigatório, ou um controle de formulário de seu rótulo. Não o coloque dentro de um passo numerado: as ramificações aninhadas podem tornar a sequência e a responsabilidade pouco claras.

Nunca coloque um aviso grave em uma coluna ao lado de um conselho rotineiro na outra. A geometria igual reduz a dominância do aviso e sugere que os leitores podem escolher entre os dois. Promova o risco para um aviso independente antes da ação relevante; depois, use este elemento novamente apenas se duas condições seguras ainda precisarem de esclarecimento.

Anatomia

1. Título compartilhado: nomeia a única situação ou decisão regida por ambos os avisos.
2. Contêiner do aviso: agrupa o par como um elemento editorial sem implicar que seja um alerta único.
3. Rótulo do aviso: nomeia uma condição, estado, público ou comportamento em 2–6 palavras.
4. Corpo do aviso: declara o fato relevante, consequência e próxima ação nessa ordem quando todos os três são necessários.
5. Ícone opcional: reforça um rótulo de texto visível; nunca carrega a distinção sozinho.
6. Nota de fonte opcional: suporta uma afirmação mutável, regulamentada ou definida externamente dentro do aviso que qualifica.
7. Ordem da fonte: determina a ordem do leitor de tela, cópia e mobile; o estilo visual não deve revertê-la.

O autor fornece o título compartilhado, dois rótulos, dois corpos, tom e quaisquer fontes. O renderizador fornece a grade responsiva, espaçamento, ênfase visual, contêiner semântico e tratamento decorativo de ícone.

Exemplos de design

Estas são as variantes suportadas completas. As variantes alteram rótulos e ênfase, não o modelo de dados de dois avisos.

Ações contrastantes

Use para uma ação recomendada e uma desencorajada quando há apenas uma mensagem de cada lado. Declare a ação e sua razão; não expanda esta variante em listas emparelhadas.

Estados condicionais

Use quando a instrução correta depende de uma condição mutuamente exclusiva, como “Conta existente” e “Nova conta”. Nomeie a condição em cada rótulo e coloque o estado mais comum ou pré-requisito primeiro.

Esclarecimentos emparelhados

Use quando dois fatos relacionados previnem diferentes mal-entendidos, mas não são opostos. Aplique estilo neutro a ambos para que o design não invente aprovação, gravidade ou preferência.

Par de status compacto

Use para consequências curtas de status após os estados já terem sido explicados. Cada corpo é uma frase. Não remova os rótulos nem reduza os corpos a valores não explicados.

Par empilhado para mobile

Todas as variantes empilham em larguras estreitas. Mantenha o primeiro aviso imediatamente antes do segundo e retenha o título compartilhado. Não crie uma interação de deslizar ou abas, pois esconder um aviso derrota o propósito do elemento.

Parâmetros

“Fonte” identifica onde um adaptador obtém cada valor. O mapeamento do corpo armazena deliberadamente dois registros completos de aviso, em vez de duas colunas visualmente posicionadas.

O primeiro título do corpo pai mapeia para title. Cada item aninhado mapeia seu primeiro título para label e tudo após ele para content; atributos do aviso contêm tone e icon. O renderizador deve rejeitar itens de aviso com um, três ou vazios, em vez de preencher ou descartar silenciosamente uma coluna.

Sintaxe e exemplos de código

Todos os formatos preservam o mesmo título, ordem dos avisos, rótulos, corpos, tons e fontes. “Coluna um” e “coluna dois” são termos de apresentação, não nomes de campos.

Diretiva Markdown portátil

:::notification-two-column{variant=conditional}
## Escolha a instrução para seu estado de publicação

::notice{tone=neutral icon="draft"}
### Página em rascunho

Use valores de amostra apenas quando estiverem visivelmente rotulados como exemplos. Remova ou substitua cada amostra antes da publicação.
::

::notice{tone=caution icon="publish"}
### Página publicada

Use valores verificados com uma fonte e data de verificação. Se a verificação estiver incompleta, omita a afirmação.
::
:::

Este elemento substitui o nome genérico de item aninhado por notice porque os registros têm comportamento de tom específico do aviso. O primeiro título pai fornece o título compartilhado; o primeiro título de cada aviso fornece seu rótulo.

Shortcode Hugo

Nenhum shortcode de produção atual implementa este contrato exato de avisos emparelhados. Até que exista um adaptador, use HTML semântico como o exemplo renderizado. A notação Hugo pretendida é documentada como:

{{< notification-two-column variant="conditional" >}}
## Escolha a instrução para seu estado de publicação

{{< notification tone="neutral" icon="draft" >}}
### Página em rascunho
Use apenas valores de amostra rotulados e remova-os antes da publicação.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Página publicada
Use valores verificados com uma fonte e data de verificação.
{{< /notification >}}
{{< /notification-two-column >}}

O formato de comentário com barra evita que este exemplo de especificação invoque um shortcode que não existe. Um adaptador futuro deve validar exatamente dois avisos filhos e renderizá-los na ordem da fonte.

Bloco WordPress

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Escolha a instrução para seu estado de publicação</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Página em rascunho</h3>
<p>Use apenas valores de amostra rotulados e remova-os antes da publicação.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Página publicada</h3>
<p>Use valores verificados com uma fonte e data de verificação.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Um editor WordPress deve apresentar dois slots fixos de aviso, permitir reordenação e impedir a publicação quando qualquer rótulo ou corpo estiver vazio. Ele não deve permitir que autores adicionem um terceiro aviso meramente porque o bloco de grade suporta mais colunas.

Exemplos

Bom: duas condições reais com ações completas

Antes de importar
Baixe os registros atuais e anote o horário da exportação. A cópia fornece um ponto de recuperação se o mapeamento de campos produzir um resultado inesperado.

Após importar
Compare a contagem de registros importados com a contagem da fonte e, em seguida, inspecione pelo menos um registro contendo cada campo mapeado. As contagens detectam omissões; o registro completo detecta valores deslocados.

Este par tem um assunto — verificação segura de importação — e um limite de tempo genuíno. Cada aviso nomeia uma ação e explica qual falha ela detecta. O segundo é mais longo porque contém duas verificações relacionadas, mas ambos os lados carregam responsabilidade comparável e permanecem compreensíveis quando empilhados.

Ruim: falsa simetria que rebaixa um risco

Dica útil
Renomeie a exportação para que seja mais fácil de encontrar depois.

Importante
Importar com “Substituir tudo” exclui permanentemente registros existentes e não pode ser desfeito. Faça backup do banco de dados, confirme o destino, obtenha aprovação e agende uma parada antes de continuar.

O primeiro aviso é uma arrumação opcional; o segundo descreve perda irreversível de dados e vários pré-requisitos. Colocá-los em colunas iguais implica peso igual e faz a mensagem crítica parecer uma de duas alternativas. Mova o aviso de perda de dados para uma caixa de aviso independente antes do controle. Mantenha a sugestão de nome de arquivo como prosa comum de suporte.

Marcação Schema e acessibilidade

Uma notificação de duas colunas não tem um tipo Schema.org dedicado. Seu conteúdo permanece dentro do Article, TechArticle ou WebPage que a contém. Não emita ItemList, HowToStep, Question ou Answer meramente porque existem dois registros delimitados. Se um aviso contiver conteúdo que se qualifica independentemente para dados estruturados, as regras de schema do tipo de postagem que o contém decidem o mapeamento; este elemento não adiciona nenhum por si só.

Use uma section rotulada quando o par pertence à explicação principal, ou um aside rotulado quando ambos os avisos são complementares. Cada filho pode ser um aside ou section com um título real no nível de documento correto. Não use ARIA alert ou alertdialog: esses papéis anunciam mudanças dinâmicas e sensíveis ao tempo e são inadequados para orientação editorial estática.

O nome acessível vem do título compartilhado visível através da estrutura de título nativa ou aria-labelledby. Cada rótulo de aviso deve ser texto. Cor, estilo de borda, posição e ícones podem reforçar o tom, mas não podem defini-lo. Se um ícone for decorativo, oculte-o da tecnologia assistiva; se ele comunicar informações não presentes no rótulo, reescreva o rótulo em vez de confiar em texto alternativo para reparar o design.

A ordem do DOM controla o significado. Leitores de tela e layouts mobile devem encontrar o primeiro aviso e depois o segundo. Não inverta a ordem visual com CSS. Com zoom de texto a 200% e larguras estreitas, os avisos devem empilhar sem recorte ou rolagem horizontal da página. Links precisam de rótulos descritivos, e múltiplos links não devem ser comprimidos em uma linha de ícones não rotulados.

Regras de escrita

Escreva o relacionamento antes de escrever os avisos: “O leitor precisa de duas mensagens porque a orientação correta muda por ___.” Se a lacuna não puder ser preenchida com uma condição concreta, estado, público, tempo ou contraste comportamental, use prosa.

• Use exatamente dois avisos sob um título compartilhado.
• Mantenha o título entre 3–12 palavras e cada rótulo entre 2–6 palavras.
• Busque 25–80 palavras por corpo; 120 palavras é o máximo absoluto.
• Use um ou dois parágrafos curtos por aviso e no máximo um link curto inline.
• Coloque o fato ou condição primeiro, sua consequência em segundo e a ação por último quando todos estiverem presentes.
• Use gramática de rótulo paralela: “Antes do lançamento / Após o lançamento,” não “Antes do lançamento / O que os administradores devem fazer depois.”
• Nomeie as condições diretamente. Nunca escreva “esquerda”, “direita”, “a outra opção” ou “a caixa acima.”
• Corresponda o tom à evidência. Fatos neutros emparelhados não devem herdar tratamento verde e vermelho.
• Faça afirmações mutáveis carregarem uma data, versão, plano, jurisdição ou fonte conforme apropriado.

Peso comparável significa que ambas as mensagens merecem o mesmo momento no fluxo do leitor. Não exige contagens idênticas de frases ou caracteres. Não preencha uma verdade curta para igualar uma mais longa. Se um corpo exceder o outro em mais de aproximadamente dois para um, teste se o aviso maior precisa de uma seção separada ou se o aviso menor é um falso contraponto.

Nunca coloque um procedimento de múltiplas etapas, tabela, formulário, cartão de preços, depoimento, chamada para ação promocional, citação longa, amostra de código, vídeo ou componente aninhado dentro de um aviso. Nunca use o par para suavizar orientações legais, médicas, financeiras, de privacidade, segurança ou de ação destrutiva. Não implique que duas condições são exaustivas a menos que o proprietário do conteúdo tenha verificado que nenhum terceiro estado existe.

Tipos de postagem que o utilizam

O array postTypes no frontmatter é a fonte desta tabela. Inclusão significa que o elemento está disponível para um caso genuíno de dois avisos, não obrigatório em toda página desse tipo.

Lista de verificação de QA

• Assunto compartilhado: Um título preciso rege ambos os avisos sem estender o escopo.
• Exatamente dois avisos: A fonte contém dois registros completos e nenhum terceiro estado implícito.
• Relacionamento real: Os rótulos nomeiam um contraste, condição, público, status ou limite de tempo significativo.
• Significado independente: Cada aviso permanece claro quando extraído com o título compartilhado.
• Sem falsa simetria: Ambas as mensagens merecem ênfase comparável; nenhuma é preenchimento ou um aviso crítico rebaixado.
• Posicionamento correto: O par segue seu contexto e precede a ação ou detalhe que qualifica.
• Vizinhos seguros: Não está adjacente a outro layout dividido, tabela, controle de abas ou CTA de duas colunas.
• Rótulos úteis: Os rótulos usam gramática paralela e nunca dependem de posição esquerda/direita ou cor.
• Controle de comprimento: Os corpos permanecem dentro de um ou dois parágrafos e no máximo 120 palavras cada.
• Restrição de conteúdo: Nenhum procedimento aninhado, tabela, formulário, mídia, promoção ou componente complexo aparece dentro.
• Ordem responsiva: A ordem em mobile, teclado, leitor de tela e texto copiado corresponde à sequência do autor.
• Semântica acessível: Um título visível rotula o pai; os rótulos filhos são títulos; conteúdo estático não usa papéis de alerta.
• Integridade do tom: O estilo reflete o significado real e não transforma fatos neutros em julgamentos bom/ruim.
• Paridade de notação: Markdown, Hugo e WordPress preservam o mesmo título, rótulos, corpos, atributos e ordem.
• Restrição de schema: O elemento não cria dados estruturados não suportados.

Rejeite o elemento se as verificações de assunto compartilhado, relacionamento real ou falsa simetria falharem. Esses são defeitos editoriais que um renderizador não pode corrigir. Reescreva o conteúdo como prosa, seções separadas, um aviso independente ou outro elemento adequado ao propósito antes de ajustar a apresentação.

FAQ

As FAQ estruturadas no frontmatter cobrem as decisões de implementação mais propensas a serem mal compreendidas: os avisos não precisam ser opostos ou de comprimentos idênticos, a ordem mobile segue a ordem da fonte, riscos graves permanecem avisos independentes, e o elemento não cria marcação schema própria.