Iconbox — Formato, Reglas y Ejemplos

Un iconbox combina un icono con propósito con una etiqueta breve y una explicación enfocada. El icono hace reconocible el tema, la etiqueta lo nombra y el texto explica por qué es importante. El elemento funciona mejor como miembro de un pequeño grupo homogéneo, como tres capacidades de producto o cuatro requisitos, no como decoración dispersa en una página.

El símbolo de verificación tiene un propósito: refuerza la verificación en lugar de llenar una esquina vacía. Dado que la etiqueta visible ya expresa el mismo significado, el símbolo renderizado se oculta de la tecnología de asistencia. Un usuario de lector de pantalla recibe el mensaje completo de «Fuentes verificadas» y su explicación sin escuchar una salida redundante del icono.

Por qué es importante este elemento

Los lectores no procesan cada oración en orden. Buscan puntos de referencia que respondan a «¿Esto es sobre lo que necesito?». Un iconbox crea un patrón de reconocimiento compacto: primero la forma, luego la etiqueta, luego la explicación. En un grupo bien formado, los lectores pueden escanear las etiquetas, identificar una categoría relevante y luego leer solo el texto de apoyo que necesitan. Esto reduce el esfuerzo de desempaquetar un párrafo que contiene varias ideas con el mismo peso.

El valor psicológico proviene del reconocimiento, la segmentación y la coherencia. Un escudo familiar puede sugerir protección, un reloj puede sugerir tiempo y un documento puede sugerir informes antes de que el lector termine de leer la etiqueta. La etiqueta luego elimina la ambigüedad. La geometría repetida le indica al lector que los elementos tienen el mismo rango editorial. Esa señal solo es útil cuando el contenido es verdaderamente paralelo; una cuadrícula de tarjetas no puede convertir afirmaciones no relacionadas en un conjunto coherente.

La extractibilidad por máquina significa que el software puede aislar una unidad de contenido mientras retiene su tema y afirmación. Un iconbox estructurado expone un elemento nombrado con un cuerpo conciso y una posición estable dentro de un grupo opcional. Los sistemas de recuperación pueden extraer «Fuentes verificadas» junto con su explicación en lugar de adivinar qué oración pertenece a qué símbolo visual. El activo del icono en sí contribuye poco a la extracción, por lo que las palabras visibles deben transmitir la proposición completa.

El icono debe tener un significado editorial. Una chispa, un cohete o una forma abstracta arbitrarios añaden ruido para las personas y ningún significado útil para las máquinas. «Con propósito pero redundante» es un modo de accesibilidad válido: un icono puede ayudar a los lectores videntes a reconocer una categoría mientras se oculta de la tecnología de asistencia porque la etiqueta visible ya proporciona su significado. Sigue las reglas de escritura de elementos redactando primero la idea completa y seleccionando el iconbox solo en la fase estructural posterior. Los límites específicos del elemento aquí tienen prioridad para la elección del icono, la agrupación y el mapeo de accesibilidad.

Cuándo usarlo

Usa un iconbox cuando el contenido sea una idea concisa y nombrada y un icono del sistema aprobado pueda representar esa idea sin ambigüedad. Un grupo es apropiado cuando de dos a seis elementos responden a la misma pregunta implícita con una profundidad comparable: «¿Qué está incluido?», «¿Qué salvaguardas aplican?» o «¿Qué produce este flujo de trabajo?». Cada elemento debe seguir siendo comprensible cuando se copie como texto plano.

Los usos sólidos incluyen un resumen de funcionalidades con un resultado por elemento, una descripción general de requisitos antes de instrucciones detalladas, un conjunto de principios de servicio o una explicación compacta de los resultados del flujo de trabajo. El icono es una ayuda para el reconocimiento, no la evidencia. Los detalles específicos como formatos de archivo, ventanas de respuesta, sistemas compatibles o la propiedad aún pertenecen a la etiqueta y al cuerpo.

Los casos límite son comunes:

• Usa una lista de viñetas ordinaria cuando el icono sería la misma marca de verificación en todos los elementos. La repetición no transmite ningún significado de categoría.
• Usa una tabla comparativa cuando los elementos deban evaluarse según criterios compartidos. Los iconboxes separados dificultan la comparación entre elementos.
• Usa una lista de pasos cuando el orden, la finalización o la dependencia sean importantes. Una fila de iconboxes implica pares, no una secuencia.
• Usa un cuadro de definición cuando un término desconocido necesite un significado formal. Un icono no refuerza una definición precisa.
• Usa una advertencia o nota cuando la gravedad y la interrupción sean las funciones principales. Un iconbox tiene un peso estructural neutral.
• Usa secciones completas cuando cada elemento necesite varios párrafos, evidencia, medios o subtítulos.

No uses iconboxes simplemente para que una página con mucho texto parezca diseñada. Si el autor elige el icono después de buscar algo visualmente atractivo en lugar de semánticamente preciso, probablemente el contenido no necesita este elemento.

Dónde colocarlo

Coloca un iconbox independiente inmediatamente después del párrafo al que apoya. Coloca un grupo de iconboxes después de un encabezado y un párrafo introductorio que nombre la pregunta compartida. Este contexto explica por qué los elementos pertenecen juntos; luego el grupo da la respuesta compacta. Sigue el grupo con detalles, pruebas o la siguiente decisión, en lugar de repetir cada recuadro en prosa.

En un artículo, el primer grupo debe aparecer solo después de la respuesta directa o la definición inicial. En una página comercial, un grupo de capacidades puede seguir a la declaración del problema y el resultado, pero no debe preceder a la propuesta de valor solo para crear un héroe visual. En documentación, coloca un grupo de requisitos antes del procedimiento que rige, manteniendo la secuencia requerida y los criterios de aceptación en las instrucciones ordinarias.

No coloques un grupo de iconboxes directamente junto a otra cuadrícula de tarjetas, una tabla comparativa, un muro de logotipos, una banda de estadísticas o una llamada a la acción de varias columnas. Las cuadrículas adyacentes aplastan la jerarquía de la información y hacen que los hechos editoriales se asemejen a promociones. Inserta prosa explicativa o un límite de sección entre ellos. No pongas un iconbox entre una afirmación y su fuente, entre un paso y su resultado esperado, dentro de una celda de tabla ni dentro de otro iconbox. Nunca coloques dos grupos espalda con espalda.

Anatomía

Un iconbox contiene tres regiones de autoría y una relación contextual. La captura de pantalla etiqueta las regiones portadoras de significado, no los valores de píxeles, para que el contrato sobreviva al rediseño visual.

1. Región del icono: Utiliza un icono aprobado cuyo concepto coincida con el elemento. Nunca sustituye a las palabras visibles.
2. Etiqueta breve: Nombra la funcionalidad, requisito, resultado o categoría en un lenguaje concreto.
3. Cuerpo del texto: Explica la consecuencia, el alcance o la evidencia en un párrafo compacto.
4. Destino opcional: Proporciona un siguiente paso descriptivo cuando se usa la variante enlazada.
5. Contexto de grupo: Un encabezado precedente o una etiqueta de grupo accesible indica la pregunta que responden todos los iconboxes hermanos.

El borde, fondo, radio, tamaño del icono, color, columnas de cuadrícula y puntos de ruptura pertenecen al renderizador. Los autores eligen el contenido semántico, la identidad del icono, el orden de origen y el modo de accesibilidad.

Ejemplos de diseño

El elemento admite cuatro variantes de presentación. Todas preservan la misma jerarquía icono-etiqueta-cuerpo y el mismo orden de origen.

Estándar: La tarjeta predeterminada, independiente o agrupada. Úsala cuando el cuerpo necesite de 25 a 60 palabras para explicar un elemento.

Compacta: Usa un cuerpo de una sola oración de 12 a 30 palabras. Es adecuada para conceptos familiares, no para comprimir una calificación matizada.

Enlazada: Añade un destino. Prefiere un enlace descriptivo visible. Si toda la tarjeta es interactiva, el renderizador debe proporcionar un único destino de enlace y un estado de enfoque claro.

Estado: Comunica un estado como disponible, restringido, aprobado o pendiente. La palabra de estado debe ser visible; ni el color ni la forma del icono pueden ser la única señal.

Ventana estrecha: Cualquier grupo se convierte en una columna en el orden de origen. El renderizador no debe reordenar los recuadros para equilibrar sus alturas.

El modo de accesibilidad es independiente de la variante de presentación. Un icono redundante se oculta de la tecnología de asistencia porque su etiqueta transmite el mismo significado. Un icono genuinamente informativo recibe un equivalente textual programático, pero los autores normalmente deberían añadir esa información a la etiqueta visible en lugar de mantener un hecho basado solo en el icono.

Parámetros

El contrato mantiene el significado de autoría separado de la presentación. Los límites aplican a todas las variantes a menos que se indique un límite más estricto.

icon debe resolverse a través del registro de iconos aprobados; los autores no pueden proporcionar SVG arbitrarios, emojis, URLs de imagen ni nombres de clase de fuentes de iconos. El Markdown limitado permite énfasis, código en línea y un enlace en línea. Excluye encabezados anidados, listas, tablas, medios, formularios, botones, acordeones y otros componentes. Cuando el primer encabezado del cuerpo proporciona label, el adaptador elimina ese encabezado del cuerpo y lo renderiza al nivel correcto relativo a la página.

Sintaxis y ejemplos de código

Cada notación se asigna al mismo icono, etiqueta, cuerpo, variante y modo de accesibilidad. La clave del icono es semántica y portátil; cada plataforma asigna shield-check a su activo local aprobado.

Directiva portátil de Markdown

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

Cada afirmación factual enlaza a una fuente que un revisor puede inspeccionar, de modo que la evidencia permanece visible durante la redacción, aprobación y actualizaciones posteriores.
:::

El primer encabezado se convierte en label; el párrafo restante se convierte en content. El icono es redundante porque «Fuentes verificadas» proporciona el significado completo en texto visible.

Shortcode de Hugo

{{< iconbox icon="shield-check" label="Fuentes verificadas" iconMode="redundant" variant="standard" >}}
Cada afirmación factual enlaza a una fuente que un revisor puede inspeccionar, de modo que la evidencia permanece visible durante la redacción, aprobación y actualizaciones posteriores.
{{< /iconbox >}}

El adaptador utiliza solo parámetros con nombre. Debe rechazar una clave de icono o variante desconocida en lugar de mostrar silenciosamente un fallback que podría cambiar el significado.

Bloque de WordPress

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Fuentes verificadas","iconMode":"redundant","variant":"standard"} -->
<p>Cada afirmación factual enlaza a una fuente que un revisor puede inspeccionar, de modo que la evidencia permanece visible durante la redacción, aprobación y actualizaciones posteriores.</p>
<!-- /wp:amicited/iconbox -->

El editor debería exponer un selector de iconos aprobados y buscables, no un campo de activo de texto libre. Su vista previa de nombre accesible debería mostrar si el icono está oculto o es anunciado.

Ejemplos

Buen ejemplo

Esto funciona porque el símbolo de documento coincide con el concepto de informe, la etiqueta nombra una capacidad concreta y el cuerpo explica el resultado y su consecuencia práctica. El texto visible es completo sin el símbolo, por lo que el símbolo puede ocultarse de la tecnología de asistencia.

Mal ejemplo

Esto falla en todos los niveles. El cohete es decorativo en lugar de un marcador de categoría preciso, la etiqueta no contiene ninguna capacidad específica y el cuerpo no proporciona ningún mecanismo, límite o resultado verificable. El emoji también puede anunciarse de forma impredecible. Reemplaza el bloque con una declaración concreta (qué se vuelve más rápido, mediante qué mecanismo, bajo qué condiciones) o elimínalo.

Marcado schema y accesibilidad

Iconbox no tiene un tipo dedicado de Schema.org. Su etiqueta y cuerpo siguen siendo contenido del Article, TechArticle, WebPage, Product u otra entidad a nivel de página que lo contenga, cuando ese marcado está justificado por otro motivo. Un grupo visual no es automáticamente un ItemList; usa marcado de lista solo cuando el conjunto esté completo u ordenado en el modelo de contenido. Un iconbox de estado no justifica las propiedades Review, Rating o disponibilidad sin los datos subyacentes requeridos.

Renderiza un iconbox no interactivo como un section cuando forme parte del argumento principal o como un aside cuando sea suplementario. Asígnale un nombre accesible a través de la etiqueta visible. Usa un encabezado real en el nivel correcto; no elijas h3 solo porque su tamaño de fuente predeterminado se vea bien. Los elementos repetidos pueden estar dentro de una lista cuando el grupo es verdaderamente una lista, con cada iconbox en un elemento de lista.

La mayoría de los iconos deberían ser SVG en línea con aria-hidden="true" y focusable="false", porque la etiqueta visible repite su significado. Esto no los hace decorativos desde el punto de vista editorial: todavía ayudan al reconocimiento visual, pero anunciar el mismo concepto dos veces añade ruido. Si un icono comunica información ausente de la etiqueta, proporciona un equivalente textual accesible a través del mapeo iconText del componente. Mejor aún, revisa la etiqueta visible para que todos los lectores reciban el dato.

Nunca dependas solo del color, la posición, el movimiento o la forma del icono. Una marca de verificación verde necesita texto visible como «Aprobado»; un candado necesita «Restringido» o la condición de acceso exacta. Los iconos requieren suficiente contraste contra su fondo, pero el renderizador posee los tokens de color. Los adornos decorativos que no transmitan nada deben eliminarse, no asignárseles texto alternativo verbose. Evita alt="icon", nombres de archivo, nombres de glifos Unicode y texto duplicado como «Escudo, Fuentes verificadas».

Para la variante enlazada, un iconbox tiene un destino. El nombre interactivo debe comunicar ese destino, el enfoque del teclado debe ser visible y el área cliqueable no debe contener otro enlace o botón. El hover no puede revelar texto esencial. El orden de lectura y teclado debe coincidir con el orden de origen en todo ancho de ventana.

Reglas de redacción

Escribe la etiqueta antes de seleccionar el icono. La etiqueta debe ser una frase nominal concreta o un resultado breve: «Acceso basado en roles», «Exportación semanal» o «Revisión humana». Mantén las etiquetas de elementos pares gramaticalmente paralelas. Evita afirmaciones genéricas como «Potente», «Sin fisuras», «Innovador» y «Mejor de su clase», porque no nombran ni una capacidad ni una decisión.

Usa de 2 a 6 palabras y no más de 55 caracteres para la etiqueta. Usa un párrafo de cuerpo de 12 a 60 palabras; la variante compacta debe mantenerse entre 12 y 30. Comienza con el mecanismo, alcance o resultado específico. Mantén un tono tranquilo y factual. Si una salvedad cambia la promesa, inclúyela en el mismo recuadro en lugar de en letra pequeña distante.

Usa de dos a seis recuadros por grupo. Dale a cada elemento una profundidad comparable y haz que respondan la misma pregunta. Ordena por prioridad del lector, lógica del flujo de trabajo o una categoría indicada, no por qué icono se ve mejor. No uses el mismo icono para diferentes significados dentro de un grupo, y no uses múltiples estilos visuales o familias de iconos juntos.

Nunca pongas esto dentro de un iconbox:

• Un inventario extenso de funcionalidades, un procedimiento de varios pasos, una lista anidada con viñetas, una tabla, un formulario, un testimonio, un precio o un descargo legal.
• Una etiqueta solo con icono, un acrónimo sin explicación o un estado expresado solo por color.
• Más de un enlace, llamadas a la acción en competencia o un botón dentro de un enlace de tarjeta completa.
• Una captura de pantalla, video, gráfico, logotipo, fotografía u otro iconbox.
• Evidencia que aplica a varios recuadros pero aparece solo en uno, haciendo que el grupo se vea desigual o engañoso.

Si el contenido excede estos límites, promuévelo a una sección normal. Si todos los elementos necesitan la misma marca de verificación, elimina los iconos y usa una lista. Si las etiquetas no tienen sentido sin sus imágenes, reescribe las etiquetas antes de publicar.

Tipos de publicación que lo usan

El campo postTypes del frontmatter es la fuente de esta tabla. La inclusión significa que el elemento está disponible cuando el contenido forma un conjunto genuinamente parejo, no que toda página de ese tipo deba contener iconboxes.

Lista de verificación de QA

• Icono con propósito: Cada icono tiene una relación obvia con su etiqueta; eliminarlo reduciría el reconocimiento visual, no el significado factual.
• Texto visible completo: La etiqueta y el cuerpo comunican la proposición completa sin depender del icono, color o posición.
• Modo de accesibilidad correcto: Los iconos redundantes están ocultos; los iconos informativos tienen un equivalente textual conciso y una razón documentada.
• Grupo verdaderamente parejo: Los hermanos responden la misma pregunta, tienen profundidad comparable y usan gramática de etiqueta paralela.
• Cantidad segura: Un grupo contiene de dos a seis elementos; los conjuntos más grandes se categorizan o se mueven a una estructura más adecuada.
• Texto preciso: Las etiquetas nombran capacidades, requisitos, estados o resultados concretos; los cuerpos proporcionan un mecanismo, alcance o consecuencia.
• Fuente de icono válida: Cada clave de icono existe en el registro aprobado y no se redacta ningún emoji, SVG arbitrario, URL de imagen ni clase de fuente de icono.
• Ubicación adecuada: El grupo sigue su contexto de encuadre y no separa afirmaciones de fuentes, pasos de resultados, ni advertencias de las acciones afectadas.
• Vecinos seguros: Ninguna cuadrícula de tarjetas, tabla, muro de logotipos, banda de estadísticas o CTA de varias columnas se sitúa directamente junto al grupo.
• Estructura accesible: Los niveles de encabezado siguen el documento, el contraste es suficiente, el estado tiene texto visible y el orden de origen coincide con el orden de lectura.
• Moderación interactiva: Un iconbox enlazado tiene un destino, un nombre descriptivo, un estado de enfoque visible y ningún control interactivo anidado.
• Paridad de notación: Markdown portátil, Hugo y WordPress preservan la misma clave de icono, etiqueta, contenido, variante y comportamiento de accesibilidad.
• Moderación de schema: El componente no añade schema independiente y no infiere ItemList ni propiedades de estado a partir de la apariencia.
• Verificación responsiva: En anchos estrechos, los recuadros se apilan en orden de origen sin recortes, desplazamiento horizontal ni texto esencial oculto.

Rechaza el elemento si su icono es arbitrario, su etiqueta es vaga o su texto visible depende del símbolo. Esos son defectos del modelo de contenido; cambiar el espaciado, color o estilo de ilustración no puede repararlos.

FAQ

El frontmatter FAQ cubre el tamaño del grupo, el texto alternativo, las tarjetas enlazadas, los emojis y el comportamiento de schema. Mantener las respuestas aprobadas en el frontmatter estructurado permite que el diseño de la academia las renderice de manera consistente sin duplicar las mismas preguntas en el cuerpo del artículo.