Infobox: 3 Columnas — Formato, Reglas y Ejemplos

Un infobox de tres columnas presenta exactamente tres puntos paralelos bajo una misma idea compartida. Es útil cuando el lector necesita ver un modelo real de tres partes de un vistazo: tres responsabilidades, tres criterios, tres resultados o tres flujos de trabajo coordinados. Las columnas prometen igualdad de estatus editorial, por lo que cada punto debe realizar el mismo tipo de trabajo con una profundidad comparable.

Ese elemento renderizado tiene un título compartido y exactamente tres elementos. Los tres títulos son frases nominales, los tres cuerpos describen un tipo de confianza y los íconos aportan ritmo sin transmitir significado. Quita los íconos y el modelo permanece intacto.

Por qué este elemento es importante

Los lectores no experimentan un párrafo denso como un modelo solo porque contenga tres cláusulas. Deben retener la primera cláusula en la memoria, detectar la transición a la segunda y decidir si la tercera es igual, subordinada o meramente adicional. Un infobox de tres columnas hace explícita la relación. El título compartido nombra lo que se mantiene constante; tres elementos delimitados muestran la división completa; el peso visual equilibrado indica a los lectores que deben examinar cada elemento antes de dar por entendido el modelo.

Esto ayuda mediante la fragmentación (chunking), la agrupación de información relacionada en unidades manejables. Tres es suficiente para revelar un sistema sin producir un catálogo. Un lector puede escanear los tres títulos, entrar por el punto que más le interese y luego comparar el nivel de detalle. El elemento es particularmente efectivo cuando la prosa repetiría el mismo sujeto tres veces u ocultaría la distinción dentro de una oración larga.

La capacidad de extracción por máquina es la habilidad del software para aislar una unidad de contenido sin perder su tema o sus relaciones. Un infobox de tres columnas tipificado expone un tema principal y tres hijos ordenados. Los sistemas de búsqueda, las API de contenido y las herramientas de recuperación de IA pueden preservar el título compartido, el título de cada elemento, cada cuerpo y el orden de origen, en lugar de tener que adivinar si un párrafo contiene una lista. Los encabezados explícitos también le dan a cada elemento una etiqueta de recuperación útil.

La extracción solo funciona cuando las palabras son autónomas. «La confianza técnica significa que la página se renderiza y los enlaces se resuelven» puede sobrevivir fuera del diseño. «La tercera parte se encarga de esto» no puede. La estructura tampoco puede fabricar una tercera idea. Sigue las reglas de redacción de elementos : establece el modelo de contenido antes de elegir el renderizador. El requisito específico del elemento de exactamente tres elementos prevalece sobre cualquier disposición general de elementos repetibles.

Cuándo usarlo

Usa un infobox de tres columnas solo cuando se cumplan las cinco condiciones:

1. Un título compartido puede gobernar con precisión todo el elemento.
2. El tema se divide de forma natural en exactamente tres puntos.
3. Los tres puntos responden a la misma pregunta implícita.
4. Cada punto merece una profundidad, evidencia y peso visual similares.
5. Cada punto puede explicarse en uno o dos párrafos cortos sin estructura anidada.

Los usos adecuados incluyen tres componentes de un marco, tres responsabilidades de un propietario, tres dimensiones de calidad, tres resultados de una capacidad o tres verificaciones realizadas en la misma etapa. La relación puede ser complementaria, secuencial o categórica, pero debe estar expresada. Si el autor no puede completar la frase «Estos tres pertenecen juntos porque…», la agrupación probablemente sea relleno visual.

El error más común es un par genuino más un tercer elemento débil. «Personas, proceso y más» no se convierte en un modelo de tres partes porque el diseño tenga tres espacios. Tampoco lo hace «Velocidad, precisión y valor» cuando el artículo solo define velocidad y precisión y trata el valor como su resultado. Conserva el par, explica el resultado en prosa o elige otro elemento.

No uses este infobox para tres instrucciones secuenciales. Las columnas debilitan la secuencia, especialmente cuando se apilan en anchos reducidos; usa una lista de pasos cuando el orden de finalización sea importante. No lo uses para tres productos evaluados según varios criterios; usa una tabla comparativa. No lo uses para una lista que hoy contiene tres hechos pero que podría incorporar un cuarto en la próxima actualización. Un contrato fijo de tres columnas es adecuado solo cuando tres es inherente a la idea.

Otros errores comunes incluyen un encabezado más dos elementos reales, un elemento que contiene todas las salvedades, tres afirmaciones promocionales sin mecanismo ni evidencia, y un segmento de audiencia dividido en tres datos demográficos arbitrarios. En cada caso, el diseño exagera una relación que el contenido no ha justificado.

Dónde colocarlo

Coloca el infobox inmediatamente después del párrafo que introduce la idea principal. Ese párrafo debe explicar por qué ayuda una visión triple; el título compartido nombra el modelo y los elementos definen sus partes. A continuación, incluye interpretación, evidencia o una transición que se aplique al grupo en su conjunto.

Puede aparecer directamente debajo de un H2 cuando ese encabezado proporciona el título compartido y no hay ningún párrafo o componente intermedio. También puede seguir a una definición cuando los tres elementos desarrollan dimensiones del término. No debe interrumpir una afirmación y su cita, una advertencia y la condición que la activa, un paso y su resultado esperado, ni una oración que introduce una lista convencional. Esas relaciones deben permanecer contiguas.

No lo coloques inmediatamente junto a otra cuadrícula de tres columnas, tabla de precios, control de pestañas, conjunto de tarjetas o llamada a la acción de tres opciones. La geometría repetida hace que la explicación editorial parezca interactiva o comercial y obliga a los lectores a inferir qué agrupación importa. Intercala prosa explicativa o elige una estructura que abarque toda la relación. Evita colocar un segundo infobox en la misma sección corta; la repetición convierte un modelo deliberado en mobiliario decorativo.

En una página larga, múltiples infobox de tres columnas son aceptables solo bajo diferentes encabezados y para modelos genuinamente distintos. No deben usarse como tratamiento predeterminado para cada trío en el texto.

Anatomía

La anatomía contiene una región principal y tres regiones de elementos repetidos. La captura de pantalla etiquetada debe identificar las partes semánticas en lugar de los tokens de color, radio o espaciado, para que la especificación sobreviva a un rediseño.

1. Límite exterior: Agrupa el título y los tres elementos como una unidad editorial.
2. Título compartido: Nombra la idea dividida por los tres elementos. No es un cuarto elemento.
3. Espacio de ícono opcional: Contiene un ícono decorativo aprobado por elemento; los tres espacios se usan juntos o se omiten juntos.
4. Título del elemento: Nombra un miembro del conjunto con un lenguaje paralelo a los otros dos títulos.
5. Cuerpo del elemento: Explica ese miembro con una profundidad equiparable y sigue siendo significativo al extraerse.
6. Relación de diseño: Utiliza tres columnas iguales donde el espacio lo permita y apila elemento uno, elemento dos y luego elemento tres en pantallas estrechas.

Los autores controlan los títulos, los cuerpos, los tokens de ícono y el orden de origen. El renderizador controla el ancho de las columnas, los espacios, los puntos de interrupción, los bordes, los fondos y la tipografía.

Ejemplos de diseño

Hay un elemento semántico con cuatro variantes compatibles y un estado responsivo. Ninguno cambia el contrato exacto de tres elementos.

Variante con título predeterminada: Preferida para contenido explicativo. El título compartido y los tres títulos de elemento hacen explícita la jerarquía; no hay íconos presentes.

Variante con íconos: Añade un ícono decorativo a cada elemento. Los íconos deben compartir familia, tamaño y peso visual. No se admite una mezcla de ícono, fotografía y espacio vacío.

Variante con título contextual: El H2 inmediatamente anterior proporciona el título compartido. Esto solo está permitido cuando el contenedor puede hacer referencia programática a ese encabezado visible y nada separa el encabezado del elemento.

Variante compacta: Adecuada para tres definiciones o verificaciones breves. Cada cuerpo sigue siendo una oración completa, no un eslogan o un fragmento de etiqueta.

Estado de ventana estrecha: Los elementos se apilan verticalmente en el orden de redacción. Ningún texto puede depender de la posición izquierda, central o derecha.

Parámetros

El contrato separa el significado de autoría de la presentación. Las columnas responsivas y el estilo de los íconos pertenecen al renderizador; los campos de contenido y el orden semántico pertenecen a la fuente.

El título es obligatorio a menos que un encabezado inmediatamente anterior proporcione el mismo tema principal y etiquete el contenedor. El contenido del elemento puede contener énfasis, código inline y un enlace de texto relevante. No puede contener encabezados anidados, tablas, listas de más de tres viñetas cortas, elementos multimedia, formularios, llamadas a la acción ni otro componente.

Sintaxis y ejemplos de código

Las tres notaciones preservan el mismo título, tres elementos ordenados, tokens de ícono opcionales y cuerpos. La directiva portátil de Markdown es la fuente canónica. Hugo y WordPress son contratos de adaptación y deben rechazar cualquier cantidad de elementos distinta de tres.

Directiva portátil de Markdown

:::infobox-3-columns
## Una página publicable necesita tres tipos de confianza

::item{icon="reader"}
### Confianza del lector

La respuesta es clara, completa y lo suficientemente específica para guiar una decisión o acción.
::

::item{icon="editorial"}
### Confianza editorial

Las afirmaciones están respaldadas, la terminología es coherente y se mantienen todas las calificaciones requeridas.
::

::item{icon="technical"}
### Confianza técnica

La página se renderiza, los enlaces se resuelven, los metadatos se asignan correctamente y las máquinas pueden recuperar su estructura.
::
:::

El primer encabezado principal se asigna a title. Cada ::item asigna su primer encabezado a item.title, el cuerpo restante a item.content y el atributo opcional icon a un token de ícono aprobado. Se requieren tres elementos anidados incluso cuando el diseño se apila.

Asignación de shortcode de Hugo

{{< infobox-3-columns title="Una página publicable necesita tres tipos de confianza" variant="icons" >}}
  {{< infobox-item title="Confianza del lector" icon="reader" >}}
  La respuesta es clara, completa y lo suficientemente específica para guiar una decisión o acción.
  {{< /infobox-item >}}
  {{< infobox-item title="Confianza editorial" icon="editorial" >}}
  Las afirmaciones están respaldadas, la terminología es coherente y se mantienen todas las calificaciones requeridas.
  {{< /infobox-item >}}
  {{< infobox-item title="Confianza técnica" icon="technical" >}}
  La página se renderiza, los enlaces se resuelven, los metadatos se asignan correctamente y las máquinas pueden recuperar su estructura.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Esta es una especificación de adaptación portátil, no una garantía de que el sitio actual tenga registrados esos shortcodes. Utiliza solo parámetros con nombre, preserva el orden de origen, valida los tokens de ícono y falla en la validación de autoría en lugar de eliminar o envolver silenciosamente un elemento adicional.

Bloque de WordPress

<!-- wp:amicited/infobox-3-columns {"title":"Una página publicable necesita tres tipos de confianza","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Confianza del lector","icon":"reader"} -->
  <p>La respuesta es clara, completa y lo suficientemente específica para guiar una decisión o acción.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Confianza editorial","icon":"editorial"} -->
  <p>Las afirmaciones están respaldadas, la terminología es coherente y se mantienen todas las calificaciones requeridas.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Confianza técnica","icon":"technical"} -->
  <p>La página se renderiza, los enlaces se resuelven, los metadatos se asignan correctamente y las máquinas pueden recuperar su estructura.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

El editor debe exponer tres espacios fijos para elementos. Puede permitir al autor reordenar los elementos, pero no debe ofrecer un insertador sin restricciones que permita un cuarto hijo o un bloque no relacionado.

Ejemplos

Ejemplo correcto: un modelo operativo real de tres vías

Esto funciona porque el título compartido define un modelo de responsabilidad, los tres roles son distintos y cada cuerpo responde a la misma pregunta: ¿qué debe verificar este responsable? Los elementos utilizan títulos nominales paralelos y profundidad comparable. Ninguno existe solo para completar la fila.

Ejemplo incorrecto: un par rellenado a tres

Tres formas de mejorar una página de aterrizaje

Clarifica la oferta: Nombra la audiencia, el problema, el mecanismo y el resultado esperado en un lenguaje que el lector pueda verificar.

Demuestra la afirmación: Añade evidencia relevante, explica sus limitaciones y mantén las citas vinculadas a las afirmaciones que respaldan.

Haz que destaque: Añade colores atractivos y cualquier otra cosa que se sienta atractiva.

Los dos primeros elementos son requisitos editoriales con resultados observables. El tercero es un consejo visual vago, no tiene un estándar de evidencia equivalente y cumple una función diferente. Se añadió porque el diseño pedía tres columnas, no porque el modelo tenga tres partes. Elimina el tercer elemento y usa una estructura de dos partes, o define un tercer requisito genuino, como reducir la fricción de interacción, y respáldalo con la misma profundidad.

Marcado de schema y accesibilidad

Un infobox de tres columnas no tiene un tipo dedicado de Schema.org y no crea datos estructurados independientes. Su texto sigue siendo parte del Article, TechArticle o WebPage que lo contiene, siempre que esa página cumpla los requisitos. No marques los hijos como ItemList simplemente porque sean tres, y no infieras HowTo a partir de etiquetas que suenen secuenciales. Introduce schema a nivel de página solo cuando el contenido subyacente cumpla de forma independiente los requisitos de ese esquema.

Usa un contenedor semántico etiquetado con tres secciones hijas. Usa <section> cuando el modelo sea parte del argumento principal y <aside> cuando sea complementario. Conecta el título compartido visible con aria-labelledby y asigna a cada hijo un encabezado real en el nivel de documento correcto. El texto en negrita no es un sustituto de un encabezado.

El orden de origen es el orden de lectura. Los lectores de pantalla, la navegación por teclado, el texto copiado y los diseños móviles deben encontrar el elemento uno, luego el elemento dos y luego el elemento tres. El CSS puede crear columnas, pero no debe usar reglas de orden para reorganizarlas. Nunca escribas «izquierda», «centro» o «derecha»; esas posiciones desaparecen cuando los elementos se apilan.

Los íconos son decorativos a menos que comuniquen información que no esté presente en el título. Los íconos decorativos usan aria-hidden="true" en HTML o texto alternativo vacío cuando se renderizan como imágenes. Si un ícono es informativo, su significado también debe aparecer en texto visible; un nombre accesible oculto a la vista no ayuda a los lectores que pueden ver la página pero no interpretar el símbolo. El color y la forma del ícono nunca deben ser la única distinción entre elementos.

En anchos reducidos, apila los elementos antes de que el texto se vuelva apretado. Admite el zoom de texto sin recortes, superposiciones ni desplazamiento horizontal a nivel de página. Una captura de pantalla de tres columnas no sustituye al contenido semántico responsivo.

Reglas de redacción

Comienza con la frase «Esta idea tiene tres partes: X, Y y Z». La frase debe seguir siendo precisa después de definir cada parte. Si una parte es resultado de las otras dos, una categoría general o un ejemplo menor, el modelo no es verdaderamente paralelo.

Usa exactamente tres elementos. Mantén cada título entre 2 y 7 palabras y usa el mismo patrón gramatical: tres frases nominales, tres preguntas o tres etiquetas temporales. Mantén cada cuerpo entre 25 y 80 palabras cuando sea posible y nunca superes las 110. Una diferencia de una oración es aceptable. Un elemento de 25 palabras junto a dos de 100 palabras requiere edición o una estructura diferente.

Profundidad equiparable significa trabajo explicativo comparable, no relleno. Cada cuerpo debe responder a la misma pregunta implícita, contener un nivel similar de especificidad y exponer las consecuencias en un nivel similar. Si un elemento necesita genuinamente más explicación, traslada el modelo a secciones ordinarias donde la longitud pueda variar honestamente.

Usa un lenguaje directo y neutral. Los títulos deben identificar el significado, no la posición: «Descubrimiento / Producción / Revisión» es más sólido que «Primero / Segundo / Tercero». Las etiquetas secuenciales son aceptables solo cuando cada elemento resume una fase en lugar de instruir al lector a través de pasos. Evita los superlativos, las afirmaciones de beneficios sin respaldo y tres eslóganes disfrazados de explicación.

Los íconos son opcionales. Úsalos los tres o ninguno, selecciónalos de una familia aprobada y mantenlos visualmente consistentes. No elijas íconos antes que los títulos, uses emojis como tokens de ícono en producción ni permitas que un ícono reemplace un encabezado significativo del elemento.

Nunca coloques dentro del elemento:

• Dos o cuatro elementos, un elemento vacío o un tercer espacio «misceláneo».
• Un procedimiento detallado, matriz de comparación, plan de precios, formulario, carrusel de testimonios o banner promocional.
• Secciones H2 anidadas, otro infobox, pestañas, paneles de acordeón, video o galería de imágenes.
• Listas largas con viñetas, listas de fuentes, avisos legales, advertencias de seguridad o salvedades separadas de la afirmación que regulan.
• Tres enlaces no relacionados diseñados para parecer llamadas a la acción equivalentes.

Cuando el contenido supere estos límites, promociona los tres elementos a secciones normales de la página. El diseño fijo nunca debe convertirse en una razón para comprimir matices esenciales u ocultar una salvedad.

Tipos de publicación que lo usan

El campo postTypes del frontmatter es el conjunto de usos registrados. Identifica formatos que suelen contener un modelo significativo de tres partes; no exige un infobox cuando la fuente no tiene un trío genuino.

Lista de verificación de QA

• Una idea principal: Un título compartido preciso explica por qué los tres elementos pertenecen juntos.
• Exactamente tres elementos: La fuente y la salida renderizada contienen tres hijos completos: nunca dos, cuatro o un marcador de posición vacío.
• División triple genuina: Eliminar cualquier elemento hace que el modelo esté incompleto; ninguno es relleno, un resultado ni una categoría miscelánea.
• Títulos paralelos: Todos los títulos de los elementos usan la misma forma gramatical e identifican el significado, no la posición en pantalla.
• Profundidad equiparable: Cada cuerpo responde a la misma pregunta implícita con detalle y evidencia comparables.
• Ubicación útil: El elemento sigue a su contexto introductorio y no separa una afirmación, advertencia, paso o cita de su contenido dependiente.
• Vecinos seguros: No es adyacente a otra cuadrícula de tres columnas, bloque de precios, control de pestañas o CTA de tres opciones.
• Redacción extraíble: Los títulos compartidos y de los elementos nombran sus temas; los cuerpos no dependen de pronombres cercanos ni de la posición visual.
• Consistencia de íconos: Los tres elementos usan íconos aprobados de una misma familia, o ningún elemento usa ícono; el significado permanece en el texto.
• Orden responsivo: El móvil apila elemento uno, elemento dos y luego elemento tres sin recortes, desplazamiento horizontal ni reordenamiento mediante CSS.
• Semántica accesible: El contenedor tiene una etiqueta programática visible, los títulos de los elementos son encabezados y los íconos decorativos están ocultos para la tecnología de asistencia.
• Límites de contenido: Los cuerpos se mantienen dentro de dos párrafos cortos y no contienen componentes complejos anidados, procedimientos ni controles promocionales.
• Paridad de notación: Markdown portátil, Hugo y WordPress preservan el mismo título, tres elementos, tokens de ícono, cuerpos y orden.
• Restricción de schema: El renderizador no infiere marcado de lista, comparación ni cómo-hacer a partir de la presentación de tres columnas.

Un revisor debe rechazar el elemento cuando fallen el número de elementos, la lógica triple genuina o la profundidad equiparable. Esos son defectos del modelo de contenido; el pulido visual no puede repararlos.

FAQ

Las entradas FAQ del frontmatter cubren el número fijo de elementos, la profundidad equiparable, los íconos opcionales, el orden móvil y la restricción de schema. La plantilla de academy puede renderizar esas respuestas aprobadas sin duplicarlas en el cuerpo.