Infobox: 3 Columns — Format, Rules and Examples

A three-column infobox presents exactly three parallel points under one shared idea. It is useful when the reader needs to see a real three-part model at once: three responsibilities, three criteria, three outcomes, or three coordinated workstreams. The columns promise equal editorial status, so each point must do the same kind of work at comparable depth.

That rendered element has one shared title and exactly three items. All three titles are noun phrases, all three bodies describe a kind of confidence, and the icons add rhythm without carrying meaning. Remove the icons and the model is unchanged.

Why this element matters

Readers do not experience a dense paragraph as a model merely because it contains three clauses. They must hold the first clause in memory, detect the transition to the second, and decide whether the third is equal, subordinate, or merely additional. A three-column infobox makes the relationship explicit. The shared title names what stays constant; three bounded items show the complete split; matched visual weight tells readers to inspect each item before treating the model as understood.

This helps through chunking, the grouping of related information into manageable units. Three is enough to reveal a system without producing a catalog. A reader can scan the three titles, enter through the point most relevant to them, and then compare the level of detail. The element is particularly effective when prose would otherwise repeat the same subject three times or hide the distinction inside a long sentence.

Machine extractability is the ability of software to isolate a content unit without losing its subject or relationships. A typed three-column infobox exposes one parent topic and three ordered children. Search systems, content APIs, and AI retrieval tools can preserve the shared title, each item title, each body, and source order instead of guessing whether a paragraph contains a list. Explicit headings also give each item a useful retrieval label.

Extraction only works when the words are self-contained. “Technical confidence means the page renders and links resolve” can survive outside the layout. “The third part handles this” cannot. Structure also cannot manufacture a third idea. Follow the element writing rules : establish the content model before choosing the renderer. The element-specific requirement for exactly three items takes precedence over any general allowance for repeatable items.

When to use it

Use a three-column infobox only when all five tests pass:

1. One shared title can accurately govern the whole element.
2. The subject divides naturally into exactly three points.
3. All three points answer the same implicit question.
4. Each point deserves similar depth, evidence, and visual weight.
5. Each point can be explained in one or two short paragraphs without nested structure.

Strong uses include three components of a framework, three owner responsibilities, three dimensions of quality, three outcomes from one capability, or three checks performed at the same stage. The relationship may be complementary, sequential, or categorical, but it must be stated. If the author cannot complete “These three belong together because…,” the grouping is probably visual padding.

The most common near miss is a genuine pair plus a weak third item. “People, process, and more” does not become a three-part model because the layout has three slots. Neither does “Speed, accuracy, and value” when the article defines only speed and accuracy and treats value as their result. Keep the pair, explain the result in prose, or choose another element.

Do not use this infobox for three sequential instructions. Columns weaken sequence, especially when they stack at narrow widths; use a step list when completion order matters. Do not use it for three products evaluated across several criteria; use a comparison table. Do not use it for a list that happens to contain three facts today but may gain a fourth during the next update. A fixed three-column contract is suitable only when three is inherent to the idea.

Other near misses include a heading plus two real items, one item containing all the caveats, three promotional claims with no mechanism or evidence, and one audience segment split into three arbitrary demographics. In each case, the layout overstates a relationship the content has not earned.

Ready to Monitor Your AI Visibility?

Track how AI chatbots mention your brand across ChatGPT, Perplexity, and other platforms.

Get Started Contact

Where to place it

Place the infobox immediately after the paragraph that introduces the parent idea. That paragraph should explain why a three-way view helps; the shared title then names the model and the items define its parts. Follow the element with interpretation, evidence, or a transition that applies to the group as a whole.

It may appear directly below an H2 when that heading supplies the shared title and no paragraph or component intervenes. It may also follow a definition when the three items unpack dimensions of the term. It must not interrupt a claim and its citation, a warning and the condition that triggers it, a step and its expected result, or a sentence that introduces a conventional list. Those relationships must remain contiguous.

Do not place it immediately beside another three-column grid, price table, tabs control, card deck, or three-option call to action. Repeated geometry makes editorial explanation look interactive or commercial and forces readers to infer which grouping matters. Insert explanatory prose or choose one structure that carries the whole relationship. Avoid placing a second infobox in the same short section; repetition turns a deliberate model into decorative furniture.

On a long page, multiple three-column infoboxes are acceptable only under different headings and for genuinely different models. They should not be used as the default treatment for every trio in the copy.

Anatomy

The anatomy contains one parent region and three repeated item regions. The labelled screenshot should identify semantic parts rather than color, radius, or spacing tokens so the specification survives a redesign.

1. Outer boundary: Groups the title and all three items as one editorial unit.
2. Shared title: Names the idea divided by the three items. It is not a fourth item.
3. Optional icon slot: Holds one approved decorative icon per item; all three slots are used together or omitted together.
4. Item title: Names one member of the set in language parallel to the other two titles.
5. Item body: Explains that member at matched depth and remains meaningful when extracted.
6. Layout relationship: Uses three equal columns where space permits and stacks item one, item two, then item three on narrow screens.

Authors control titles, bodies, icon tokens, and source order. The renderer controls column width, gaps, breakpoints, borders, backgrounds, and typography.

Stay Updated on AI Visibility Trends

Get the latest insights on AI mentions, brand monitoring, and optimization strategies.

Email address

Subscribe

Design examples

There is one semantic element with four supported variants and one responsive state. None changes the exact three-item contract.

Default titled variant: Preferred for explanatory content. The shared title and three item titles make the hierarchy explicit; no icons are present.

Icon variant: Adds one decorative icon to every item. Icons must share family, size, and visual weight. A mixture of icon, photograph, and blank slot is not supported.

Contextual-title variant: The immediately preceding H2 supplies the shared title. This is allowed only when the container can reference that visible heading programmatically and nothing separates the heading from the element.

Compact variant: Suitable for three short definitions or checks. Each body is still a complete sentence, not a slogan or label fragment.

Narrow-viewport state: Items stack vertically in authored order. No wording may depend on left, middle, or right position.

Parameters

The contract separates authored meaning from presentation. Responsive columns and icon styling belong to the renderer; content fields and semantic order belong to the source.

The title is required unless an immediately preceding heading provides the same parent topic and labels the container. Item content may contain emphasis, inline code, and one relevant text link. It may not contain nested headings, tables, lists longer than three short bullets, media, forms, calls to action, or another component.

Syntax and code examples

All three notations preserve the same title, three ordered items, optional icon tokens, and bodies. The portable Markdown directive is the canonical source. Hugo and WordPress are adapter contracts and must reject any item count other than three.

Portable Markdown directive

:::infobox-3-columns
## A publishable page needs three kinds of confidence

::item{icon="reader"}
### Reader confidence

The answer is clear, complete, and specific enough to guide a decision or action.
::

::item{icon="editorial"}
### Editorial confidence

Claims are supported, terminology is consistent, and every required qualification remains attached.
::

::item{icon="technical"}
### Technical confidence

The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
::
:::

The first parent heading maps to title. Each ::item maps its first heading to item.title, remaining body to item.content, and optional icon attribute to an approved icon token. Three nested items are required even when the layout stacks.

Hugo shortcode mapping

{{< infobox-3-columns title="A publishable page needs three kinds of confidence" variant="icons" >}}
  {{< infobox-item title="Reader confidence" icon="reader" >}}
  The answer is clear, complete, and specific enough to guide a decision or action.
  {{< /infobox-item >}}
  {{< infobox-item title="Editorial confidence" icon="editorial" >}}
  Claims are supported, terminology is consistent, and every required qualification remains attached.
  {{< /infobox-item >}}
  {{< infobox-item title="Technical confidence" icon="technical" >}}
  The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

This is a portable adapter specification, not a promise that the current site registers those shortcodes. It uses named parameters only, preserves source order, validates icon tokens, and fails authoring validation instead of silently dropping or wrapping an extra item.

WordPress block

<!-- wp:amicited/infobox-3-columns {"title":"A publishable page needs three kinds of confidence","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Reader confidence","icon":"reader"} -->
  <p>The answer is clear, complete, and specific enough to guide a decision or action.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Editorial confidence","icon":"editorial"} -->
  <p>Claims are supported, terminology is consistent, and every required qualification remains attached.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Technical confidence","icon":"technical"} -->
  <p>The page renders, links resolve, metadata maps correctly, and machines can recover its structure.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

The editor should expose three fixed item slots. It may allow the author to reorder the items, but it must not offer an unrestricted inserter that permits a fourth child or unrelated block.

Examples

Good example: a real three-way operating model

This works because the shared title defines one responsibility model, the three roles are distinct, and each body answers the same question: what must this owner verify? The items use parallel noun titles and comparable depth. None exists only to complete the row.

Bad example: a pair padded to three

Three ways to improve a landing page

Clarify the offer: Name the audience, problem, mechanism, and expected outcome in language the reader can verify.

Prove the claim: Add relevant evidence, explain its limits, and keep citations attached to the statements they support.

Make it pop: Add attractive colors and whatever else feels engaging.

The first two items are editorial requirements with observable outputs. The third is vague visual advice, has no matching evidence standard, and does a different job. It was added because the design asked for three columns, not because the model has three parts. Remove the third item and use a two-part structure, or define a genuine third requirement such as reducing interaction friction and support it at the same depth.

Schema markup and accessibility

A three-column infobox has no dedicated Schema.org type and creates no standalone structured data. Its text remains part of the enclosing Article, TechArticle, or WebPage when that page qualifies. Do not mark the children as ItemList merely because there are three, and do not infer HowTo from sequential-sounding labels. Feed page-level schema only when the underlying content independently meets that schema’s requirements.

Use one labelled semantic container with three child sections. Use <section> when the model is part of the main argument and <aside> when it is complementary. Connect the visible shared title with aria-labelledby, and give every child a real heading at the correct document level. Bold text is not a heading substitute.

Source order is reading order. Screen readers, keyboard navigation, copied text, and mobile layouts must encounter item one, item two, then item three. CSS may create columns but must not use ordering rules to reshuffle them. Never write “left,” “middle,” or “right”; those positions disappear when items stack.

Icons are decorative unless they communicate information not present in the title. Decorative icons use aria-hidden="true" in HTML or empty alternative text when rendered as images. If an icon is informative, its meaning must also appear in visible text; an accessible name hidden from sight does not help readers who can see the page but cannot interpret the symbol. Color and icon shape must never be the only distinction among items.

At narrow widths, stack the items before text becomes cramped. Support text zoom without clipping, overlap, or page-level horizontal scrolling. A three-column screenshot is not a substitute for responsive semantic content.

Writing rules

Start with the sentence “This idea has three parts: X, Y, and Z.” The sentence must remain accurate after each part is defined. If one part is a result of the other two, a broad catch-all, or a minor example, the model is not truly parallel.

Use exactly three items. Keep each title to 2–7 words and use the same grammatical pattern: three noun phrases, three questions, or three time labels. Keep each body to 25–80 words where possible and never exceed 110. A difference of one sentence is acceptable. A 25-word item beside two 100-word items requires editing or a different structure.

Matched depth means comparable explanatory work, not filler. Each body should answer the same implicit question, contain a similar level of specificity, and state consequences at a similar level. If one item genuinely needs more explanation, move the model into ordinary sections where length can vary honestly.

Use direct, neutral language. Titles should identify meaning, not position: “Discovery / Production / Review” is stronger than “First / Second / Third.” Sequential labels are acceptable only when each item summarizes a phase rather than instructing the reader through steps. Avoid superlatives, unsupported benefit claims, and three slogans disguised as explanation.

Icons are optional. Use all three or none, select them from one approved family, and keep them visually consistent. Do not choose icons before titles, use emoji as production icon tokens, or let an icon replace a meaningful item heading.

Never put these inside the element:

• Two or four items, an empty item, or a “miscellaneous” third slot.
• A detailed procedure, comparison matrix, price plan, form, testimonial carousel, or promotional banner.
• Nested H2 sections, another infobox, tabs, accordion panels, video, or image gallery.
• Long bullet lists, source lists, legal disclaimers, safety warnings, or qualifications detached from the claim they govern.
• Three unrelated links styled to resemble equal calls to action.

When content outgrows these limits, promote the three items to normal page sections. The fixed layout should never become a reason to compress essential nuance or hide a qualification.

Post types that use it

The postTypes frontmatter field is the registered usage set. It identifies formats that often contain a meaningful three-part model; it does not require an infobox when the source has no genuine trio.

QA checklist

• One parent idea: A precise shared title explains why all three items belong together.
• Exactly three items: Source and rendered output contain three complete children—never two, four, or an empty placeholder.
• Genuine three-way split: Removing any item makes the model incomplete; none is padding, a result, or a miscellaneous category.
• Parallel titles: All item titles use the same grammatical form and identify meaning rather than screen position.
• Matched depth: Each body answers the same implicit question with comparable detail and evidence.
• Useful placement: The element follows its introducing context and does not separate a claim, warning, step, or citation from its dependent content.
• Safe neighbors: It is not adjacent to another three-column grid, pricing block, tabs control, or three-option CTA.
• Extractable wording: Shared and item titles name their subjects; bodies do not rely on nearby pronouns or visual position.
• Icon consistency: All three items use approved icons from one family, or no item uses an icon; meaning remains in text.
• Responsive order: Mobile stacks item one, item two, then item three without clipping, horizontal scrolling, or CSS reordering.
• Accessible semantics: The container has a visible programmatic label, item titles are headings, and decorative icons are hidden from assistive technology.
• Content limits: Bodies stay within two short paragraphs and contain no nested complex component, procedure, or promotional control.
• Notation parity: Portable Markdown, Hugo, and WordPress preserve the same title, three items, icon tokens, bodies, and order.
• Schema restraint: The renderer does not infer list, comparison, or how-to markup from the three-column presentation.

A reviewer should reject the element when item count, genuine three-way logic, or matched depth fails. Those are content-model defects; visual polish cannot repair them.

FAQ

The frontmatter FAQ entries cover the fixed item count, matched depth, optional icons, mobile order, and schema restraint. The academy template can render those approved answers without duplicating them in the body.