Iconbox — Formato, Regras e Exemplos

Um iconbox combina um ícone proposital com um rótulo curto e uma explicação focada. O ícone torna o assunto reconhecível, o rótulo o nomeia e o texto explica por que ele é importante. O elemento funciona melhor como membro de um pequeno grupo equivalente, como três capacidades de produto ou quatro requisitos — não como decoração espalhada por uma página.

O símbolo de verificação é proposital: ele reforça a verificação em vez de preencher um canto vazio. Como o rótulo visível já declara o mesmo significado, o símbolo renderizado fica oculto da tecnologia assistiva. Um usuário de leitor de tela recebe a mensagem completa de “Fontes verificadas” e sua explicação sem ouvir a saída redundante do ícone.

Por que este elemento é importante

Os leitores não processam cada frase em ordem. Eles procuram pontos de referência que respondam “Isso é sobre o que preciso?” Um iconbox cria um padrão de reconhecimento compacto: forma primeiro, rótulo segundo, explicação terceiro. Em um grupo bem formado, os leitores podem escanear os rótulos, identificar uma categoria relevante e depois ler apenas o texto de suporte necessário. Isso reduz o esforço de decodificar um parágrafo que contém várias ideias com peso equivalente.

O valor psicológico vem do reconhecimento, do agrupamento e da consistência. Um escudo familiar pode sugerir proteção, um relógio pode sugerir tempo e um documento pode sugerir relatório antes mesmo de o leitor terminar o rótulo. O rótulo então elimina a ambiguidade. A geometria repetida informa ao leitor que os itens têm a mesma hierarquia editorial. Esse sinal é útil apenas quando o conteúdo é verdadeiramente paralelo; uma grade de cards não pode transformar alegações não relacionadas em um conjunto coerente.

A extraibilidade por máquina significa que o software pode isolar uma unidade de conteúdo mantendo seu assunto e afirmação. Um iconbox estruturado expõe um item nomeado com um corpo conciso e uma posição estável dentro de um grupo opcional. Sistemas de recuperação podem extrair “Fontes verificadas” junto com sua explicação em vez de adivinhar qual frase pertence a qual símbolo visual. O próprio ativo do ícone contribui pouco para a extração, portanto as palavras visíveis devem carregar a proposição completa.

O ícone ainda deve ter significado editorial. Um brilho arbitrário, um foguete ou uma forma abstrata adiciona ruído para as pessoas e nenhuma semântica útil para as máquinas. “Proposital, mas redundante” é um modo de acessibilidade válido: um ícone pode ajudar leitores com visão a reconhecer uma categoria enquanto fica oculto da tecnologia assistiva porque o rótulo visível já fornece seu significado. Siga as regras de escrita de elementos redigindo a ideia completa primeiro e selecionando o iconbox apenas na passagem estrutural posterior. Os limites específicos do elemento aqui têm precedência para escolha do ícone, agrupamento e mapeamento de acessibilidade.

Quando usar

Use um iconbox quando o conteúdo for uma ideia concisa e nomeada e um ícone do sistema aprovado puder representar essa ideia sem adivinhação. Um grupo é apropriado quando dois a seis itens respondem à mesma pergunta implícita com profundidade comparável: “O que está incluído?”, “Quais salvaguardas se aplicam?” ou “O que este fluxo de trabalho produz?” Cada item deve permanecer compreensível quando copiado como texto simples.

Usos adequados incluem um resumo de funcionalidades com um resultado por item, uma visão geral de requisitos antes de instruções detalhadas, um conjunto de princípios de serviço ou uma explicação compacta de saídas de fluxo de trabalho. O ícone é um auxílio de reconhecimento, não a evidência. Detalhes como formatos de arquivo, prazos de resposta, sistemas suportados ou responsabilidades ainda pertencem ao rótulo e ao corpo.

Casos próximos do limite são comuns:

• Use uma lista de marcadores comum quando o ícone seria a mesma marca de verificação em cada item. Repetição não transmite significado de categoria.
• Use uma tabela de comparação quando os itens precisam ser julgados segundo critérios compartilhados. Iconboxes separados dificultam a comparação entre itens.
• Use uma lista de etapas quando ordem, conclusão ou dependência forem importantes. Uma fileira de iconboxes implica equivalência, não uma sequência.
• Use um box de definição quando um termo desconhecido precisar de um significado formal. Um ícone não fortalece uma definição precisa.
• Use um aviso ou nota quando gravidade e interrupção forem as principais funções. Um iconbox tem peso estrutural neutro.
• Use seções completas quando cada item precisar de vários parágrafos, evidências, mídia ou subtítulos.

Não use iconboxes apenas para fazer uma página com muito texto parecer ter design. Se o autor escolhe o ícone após buscar algo visualmente atraente em vez de semanticamente preciso, o conteúdo provavelmente não precisa deste elemento.

Onde posicionar

Coloque um iconbox isolado imediatamente após o parágrafo que ele suporta. Coloque um grupo de iconboxes após um título e um parágrafo introdutório que nomeie a pergunta compartilhada. Esse contexto explica por que os itens pertencem ao mesmo conjunto; o grupo então fornece a resposta compacta. Siga o grupo com detalhes, evidências ou a próxima decisão, em vez de repetir cada box em prosa.

Em um artigo, o primeiro grupo deve aparecer apenas após a resposta direta ou a definição de abertura. Em uma página comercial, um grupo de capacidades pode seguir a declaração do problema e do resultado, mas não deve preceder a proposta de valor apenas para criar um herói visual. Em documentação, coloque um grupo de requisitos antes do procedimento que ele rege, mantendo a sequência necessária e os critérios de aceitação nas instruções comuns.

Não posicione um grupo de iconboxes diretamente ao lado de outra grade de cards, uma tabela de comparação, uma parede de logotipos, uma faixa de estatísticas ou uma chamada para ação de múltiplas colunas. Grades adjacentes achatam a hierarquia da informação e fazem fatos editoriais parecerem promoções. Insira prosa explicativa ou um limite de seção entre eles. Não coloque um iconbox entre uma afirmação e sua fonte, entre uma etapa e seu resultado esperado, dentro de uma célula de tabela ou dentro de outro iconbox. Nunca posicione dois grupos consecutivamente.

Anatomia

Um iconbox contém três regiões de autoria e uma relação contextual. A captura de tela rotula regiões portadoras de significado, em vez de valores de pixel, para que o contrato sobreviva a redesenho visual.

1. Região do ícone: Usa um ícone aprovado cujo conceito corresponda ao item. Nunca substitui palavras visíveis.
2. Rótulo curto: Nomeia a funcionalidade, requisito, resultado ou categoria em linguagem concreta.
3. Corpo do texto: Explica a consequência, escopo ou evidência em um parágrafo compacto.
4. Destino opcional: Fornece um próximo passo descritivo quando a variante com link é usada.
5. Contexto de grupo: Um título precedente ou rótulo de grupo acessível declara a pergunta que todos os iconboxes irmãos respondem.

Borda, fundo, raio, tamanho do ícone, cor, colunas da grade e pontos de quebra pertencem ao renderizador. Autores escolhem conteúdo semântico, identidade do ícone, ordem da fonte e modo de acessibilidade.

Exemplos de design

O elemento suporta quatro variantes de apresentação. Todas preservam a mesma hierarquia ícone-rótulo-corpo e a mesma ordem da fonte.

Padrão: O card isolado ou agrupado padrão. Use quando o corpo precisar de 25 a 60 palavras para explicar um item.

Compacto: Usa um corpo de uma frase de 12 a 30 palavras. É adequado para conceitos familiares, não para comprimir uma qualificação matizada.

Com link: Adiciona um destino. Prefira um link descritivo visível. Se o card inteiro for interativo, o renderizador deve fornecer um único destino de link e um estado de foco claro.

Status: Comunica um estado como disponível, restrito, aprovado ou pendente. A palavra de status deve ser visível; nem a cor nem a forma do ícone podem ser o único sinal.

Viewport estreito: Qualquer grupo torna-se uma coluna na ordem da fonte. O renderizador não deve reordenar boxes para equilibrar suas alturas.

O modo de acessibilidade é separado da variante de apresentação. Um ícone redundante fica oculto da tecnologia assistiva porque seu rótulo carrega o mesmo significado. Um ícone genuinamente informativo recebe um equivalente textual programático, mas os autores devem normalmente adicionar essa informação ao rótulo visível em vez de manter um fato baseado apenas no ícone.

Parâmetros

O contrato mantém o significado de autoria separado da apresentação. Os limites se aplicam a todas as variantes, a menos que um limite mais restritivo seja declarado.

icon deve ser resolvido por meio do registro de ícones aprovados; autores não podem fornecer SVG arbitrário, emoji, URLs de imagem ou nomes de classes de fontes de ícones. Markdown limitado permite ênfase, código inline e um link inline. Exclui títulos aninhados, listas, tabelas, mídia, formulários, botões, acordeões e outros componentes. Quando o primeiro título do corpo fornece label, o adaptador remove esse título do corpo e o renderiza no nível correto relativo à página.

Sintaxe e exemplos de código

Cada notação mapeia para o mesmo ícone, rótulo, corpo, variante e modo de acessibilidade. A chave do ícone é semântica e portável; cada plataforma mapeia shield-check para seu ativo local aprovado.

Diretiva Markdown portável

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Fontes verificadas

Cada alegação factual vincula-se a uma fonte que um revisor pode inspecionar, de modo que a evidência permanece visível durante a redação, aprovação e atualizações posteriores.
:::

O primeiro título torna-se label; o parágrafo restante torna-se content. O ícone é redundante porque “Fontes verificadas” fornece o significado completo em texto visível.

Shortcode Hugo

{{< iconbox icon="shield-check" label="Fontes verificadas" iconMode="redundant" variant="standard" >}}
Cada alegação factual vincula-se a uma fonte que um revisor pode inspecionar, de modo que a evidência permanece visível durante a redação, aprovação e atualizações posteriores.
{{< /iconbox >}}

O adaptador usa apenas parâmetros nomeados. Ele deve rejeitar uma chave de ícone ou variante desconhecida em vez de exibir silenciosamente um fallback que possa alterar o significado.

Bloco WordPress

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Fontes verificadas","iconMode":"redundant","variant":"standard"} -->
<p>Cada alegação factual vincula-se a uma fonte que um revisor pode inspecionar, de modo que a evidência permanece visível durante a redação, aprovação e atualizações posteriores.</p>
<!-- /wp:amicited/iconbox -->

O editor deve expor um seletor de ícones aprovados pesquisável, não um campo de ativo de texto livre. Sua prévia de nome acessível deve mostrar se o ícone está oculto ou anunciado.

Exemplos

Bom exemplo

Isso funciona porque o símbolo de documento corresponde ao conceito de relatório, o rótulo nomeia uma capacidade concreta e o corpo explica o resultado e sua consequência prática. O texto visível é completo sem o símbolo, então o símbolo pode ficar oculto da tecnologia assistiva.

Mau exemplo

Isso falha em todos os aspectos. O foguete é decorativo em vez de um marcador de categoria preciso, o rótulo não contém nenhuma capacidade específica e o corpo não fornece mecanismo, limite ou resultado verificável. O emoji também pode ser anunciado de forma imprevisível. Substitua o bloco por uma declaração concreta — o que fica mais rápido, por qual mecanismo, sob quais condições — ou exclua-o.

Marcação Schema e acessibilidade

Iconbox não tem um tipo Schema.org dedicado. Seu rótulo e corpo permanecem conteúdo do Article, TechArticle, WebPage, Product ou outra entidade de nível de página que o contém, quando essa marcação é justificada por outros motivos. Um grupo visual não é automaticamente um ItemList; use marcação de lista apenas quando o conjunto é completo ou ordenado no modelo de conteúdo. Um iconbox de status não justifica propriedades de Review, Rating ou disponibilidade sem os dados subjacentes necessários.

Renderize um iconbox não interativo como uma section quando fizer parte do argumento principal ou um aside quando for suplementar. Dê a ele um nome acessível por meio do rótulo visível. Use um título real no nível correto; não escolha h3 apenas porque seu tamanho de fonte padrão parece adequado. Irmãos repetidos podem ficar dentro de uma lista quando o grupo realmente é uma lista, com cada iconbox em um item de lista.

A maioria dos ícones deve ser SVG inline com aria-hidden="true" e focusable="false", porque o rótulo visível repete seu significado. Isso não os torna editorialmente decorativos: eles ainda ajudam no reconhecimento visual, mas anunciar o mesmo conceito duas vezes adiciona ruído. Se um ícone comunica informações ausentes do rótulo, forneça um equivalente textual acessível por meio do mapeamento iconText do componente. Melhor ainda, revise o rótulo visível para que todos os leitores recebam o fato.

Nunca dependa apenas de cor, posição, movimento ou forma do ícone. Uma marca de verificação verde precisa de texto visível como “Aprovado”; um cadeado precisa de “Restrito” ou da condição exata de acesso. Ícones exigem contraste suficiente contra seu fundo, mas o renderizador é dono dos tokens de cor. Enfeites decorativos que não transmitem nada devem ser removidos, não receber texto alternativo verboso. Evite alt="ícone", nomes de arquivo, nomes de glifos Unicode e texto duplicado como “Escudo, Fontes verificadas.”

Para a variante com link, um iconbox tem um único destino. O nome interativo deve comunicar esse destino, o foco do teclado deve ser visível e a área clicável não deve conter outro link ou botão. O hover não pode revelar texto essencial. A ordem de leitura e de teclado deve corresponder à ordem da fonte em qualquer largura de viewport.

Regras de escrita

Escreva o rótulo antes de selecionar o ícone. O rótulo deve ser uma frase nominal concreta ou resultado curto: “Acesso baseado em funções”, “Exportação semanal” ou “Revisão humana.” Mantenha os rótulos dos pares gramaticalmente paralelos. Evite alegações genéricas como “Poderoso”, “Perfeito”, “Inovador” e “Melhor da categoria”, porque eles não nomeiam nem uma capacidade nem uma decisão.

Use 2–6 palavras e no máximo 55 caracteres para o rótulo. Use um parágrafo de corpo de 12–60 palavras; a variante compacta deve permanecer entre 12–30. Comece com o mecanismo, escopo ou resultado específico. Mantenha um tom calmo e factual. Se uma qualificação altera a promessa, coloque-a no mesmo box em vez de em letras miúdas distantes.

Use de dois a seis boxes por grupo. Dê a cada item profundidade comparável e faça-os responder à mesma pergunta. Ordene por prioridade do leitor, lógica do fluxo de trabalho ou uma categoria declarada — não por qual ícone parece melhor. Não use o mesmo ícone para significados diferentes dentro de um grupo e não use múltiplos estilos visuais ou famílias de ícones juntos.

Nunca coloque dentro de um iconbox:

• Um inventário longo de funcionalidades, procedimento de várias etapas, lista aninhada de marcadores, tabela, formulário, depoimento, preço ou aviso legal.
• Um rótulo apenas com ícone, uma sigla não explicada ou um status expresso apenas por cor.
• Mais de um link, chamadas para ação concorrentes ou um botão dentro de um link de card inteiro.
• Uma captura de tela, vídeo, gráfico, logotipo, fotografia ou outro iconbox.
• Evidência que se aplica a vários boxes mas aparece em apenas um, fazendo o grupo parecer desigual ou enganoso.

Se o conteúdo exceder esses limites, promova-o para uma seção normal. Se cada item precisa da mesma marca de verificação, remova os ícones e use uma lista. Se os rótulos não fazem sentido sem suas imagens, reescreva os rótulos antes de publicar.

Tipos de post que usam

O campo postTypes do frontmatter é a fonte para esta tabela. A inclusão significa que o elemento está disponível quando o conteúdo forma um conjunto genuinamente equivalente, não que toda página desse tipo deva conter iconboxes.

Lista de verificação de QA

• Ícone proposital: Cada ícone tem uma relação óbvia com seu rótulo; removê-lo reduziria o reconhecimento visual, não o significado factual.
• Texto visível completo: O rótulo e o corpo comunicam a proposição completa sem depender do ícone, da cor ou da posição.
• Modo de acessibilidade correto: Ícones redundantes estão ocultos; ícones informativos têm um equivalente textual conciso e uma razão documentada.
• Grupo verdadeiramente equivalente: Os irmãos respondem à mesma pergunta, têm profundidade comparável e usam gramática de rótulo paralela.
• Contagem segura: Um grupo contém de dois a seis itens; conjuntos maiores são categorizados ou movidos para uma estrutura mais adequada.
• Texto preciso: Rótulos nomeiam capacidades, requisitos, estados ou resultados concretos; corpos fornecem um mecanismo, escopo ou consequência.
• Origem do ícone válida: Cada chave de ícone existe no registro aprovado e nenhum emoji, SVG arbitrário, URL de imagem ou classe de fonte de ícone é usado.
• Posicionamento adequado: O grupo segue seu contexto de enquadramento e não separa alegações de fontes, etapas de resultados ou avisos de ações afetadas.
• Vizinhos seguros: Nenhuma grade de cards, tabela, parede de logotipos, faixa de estatísticas ou CTA de múltiplas colunas fica diretamente ao lado do grupo.
• Estrutura acessível: Níveis de título seguem o documento, o contraste é suficiente, o status tem texto visível e a ordem da fonte corresponde à ordem de leitura.
• Restrição de interação: Um iconbox com link tem um destino, um nome descritivo, um estado de foco visível e nenhum controle interativo aninhado.
• Paridade de notação: Markdown portável, Hugo e WordPress preservam a mesma chave de ícone, rótulo, conteúdo, variante e comportamento de acessibilidade.
• Restrição de schema: O componente não adiciona schema autônomo e não infere propriedades de ItemList ou status a partir da aparência.
• Verificação responsiva: Em larguras estreitas, os boxes empilham na ordem da fonte sem cortes, rolagem horizontal ou ocultação de texto essencial.

Rejeite o elemento se seu ícone for arbitrário, seu rótulo for vago ou seu texto visível depender do símbolo. Esses são defeitos do modelo de conteúdo; alterar espaçamento, cor ou estilo de ilustração não pode repará-los.

FAQ

O FAQ do frontmatter cobre tamanho do grupo, texto alternativo, cards com link, emoji e comportamento do schema. Manter as respostas aprovadas no frontmatter estruturado permite que o layout da academia as renderize consistentemente sem duplicar as mesmas perguntas no corpo do artigo.