Infobox: 3 kolommen — Opmaak, regels en voorbeelden

Een driekolommen-infobox presenteert precies drie parallelle punten onder één gedeeld idee. Het is nuttig wanneer de lezer een echt driedelig model in één keer moet zien: drie verantwoordelijkheden, drie criteria, drie uitkomsten of drie gecoördineerde werkstromen. De kolommen beloven een gelijke redactionele status, dus elk punt moet hetzelfde soort werk doen op vergelijkbare diepgang.

Dat weergegeven element heeft één gedeelde titel en precies drie items. Alle drie de titels zijn zelfstandige naamwoordgroepen, alle drie de beschrijvingen beschrijven een soort vertrouwen en de iconen geven ritme zonder betekenis over te dragen. Verwijder de iconen en het model blijft intact.

Waarom dit element belangrijk is

Lezers ervaren een dichte alinea niet als een model alleen omdat deze drie zinnen bevat. Ze moeten de eerste zin in hun geheugen houden, de overgang naar de tweede detecteren en beslissen of de derde gelijkwaardig, ondergeschikt of slechts aanvullend is. Een driekolommen-infobox maakt de relatie expliciet. De gedeelde titel benoemt wat constant blijft; drie afgebakende items tonen de volledige splitsing; gelijk visueel gewicht vertelt lezers om elk item te bekijken voordat ze het model als begrepen beschouwen.

Dit helpt door chunking: het groeperen van gerelateerde informatie in behapbare eenheden. Drie is genoeg om een systeem te tonen zonder een catalogus te produceren. Een lezer kan de drie titels scannen, binnenkomen via het punt dat het meest relevant voor hen is en vervolgens het detailniveau vergelijken. Het element is bijzonder effectief wanneer proza anders hetzelfde onderwerp drie keer zou herhalen of het onderscheid in een lange zin zou verbergen.

Machine-extraheerbaarheid is het vermogen van software om een inhoudseenheid te isoleren zonder het onderwerp of de relaties ervan te verliezen. Een getypeerde driekolommen-infobox toont één bovenliggend onderwerp en drie geordende kinderen. Zoeksystemen, content-API’s en AI-ophaaltools kunnen de gedeelde titel, elke itemtitel, elke beschrijving en de bronvolgorde behouden in plaats van te raden of een alinea een lijst bevat. Expliciete koppen geven elk item ook een nuttig ophaallabel.

Extractie werkt alleen wanneer de woorden op zichzelf staan. “Technisch vertrouwen betekent dat de pagina wordt weergegeven en links werken” kan buiten de lay-out overleven. “Het derde deel behandelt dit” niet. Structuur kan ook geen derde idee creëren. Volg de schrijfregels voor elementen : bepaal het inhoudsmodel voordat u de renderer kiest. De elementspecifieke vereiste voor precies drie items heeft voorrang op algemene toestemming voor herhaalbare items.

Wanneer te gebruiken

Gebruik een driekolommen-infobox alleen wanneer alle vijf tests slagen:

1. Eén gedeelde titel kan nauwkeurig het hele element besturen.
2. Het onderwerp verdeelt zich van nature in precies drie punten.
3. Alle drie de punten beantwoorden dezelfde impliciete vraag.
4. Elk punt verdient vergelijkbare diepgang, bewijs en visueel gewicht.
5. Elk punt kan worden uitgelegd in een of twee korte alinea’s zonder geneste structuur.

Sterke toepassingen zijn onder andere drie componenten van een framework, drie eigenaarsverantwoordelijkheden, drie dimensies van kwaliteit, drie uitkomsten van één mogelijkheid, of drie controles die in dezelfde fase worden uitgevoerd. De relatie kan complementair, sequentieel of categorisch zijn, maar deze moet worden vermeld. Als de auteur niet kan voltooien “Deze drie horen bij elkaar omdat…”, is de groepering waarschijnlijk visuele opvulling.

De meest voorkomende bijna-misser is een echt paar plus een zwak derde item. “Mensen, proces en meer” wordt geen driedelig model omdat de lay-out drie vakken heeft. Evenmin “Snelheid, nauwkeurigheid en waarde” wanneer het artikel alleen snelheid en nauwkeurigheid definieert en waarde als hun resultaat behandelt. Houd het paar, leg het resultaat in proza uit of kies een ander element.

Gebruik deze infobox niet voor drie opeenvolgende instructies. Kolommen verzwakken de volgorde, vooral wanneer ze op smalle breedtes stapelen; gebruik een stappenlijst wanneer de volgorde van voltooiing belangrijk is. Gebruik het niet voor drie producten die op verschillende criteria worden beoordeeld; gebruik een vergelijkingstabel. Gebruik het niet voor een lijst die toevallig vandaag drie feiten bevat, maar morgen een vierde kan krijgen tijdens de volgende update. Een vast driekolommen-contract is alleen geschikt wanneer drie inherent is aan het idee.

Andere bijna-missers zijn een kop plus twee echte items, één item dat alle kanttekeningen bevat, drie promotionele beweringen zonder mechanisme of bewijs, en één publiekssegment dat is opgesplitst in drie willekeurige demografische groepen. In elk geval overdrijft de lay-out een relatie die de inhoud niet heeft verdiend.

Waar te plaatsen

Plaats de infobox direct na de alinea die het bovenliggende idee introduceert. Die alinea moet uitleggen waarom een drieluik helpt; de gedeelde titel benoemt vervolgens het model en de items definiëren de onderdelen ervan. Volg het element met interpretatie, bewijs of een overgang die van toepassing is op de groep als geheel.

Het kan direct onder een H2 verschijnen wanneer die kop de gedeelde titel levert en er geen alinea of component tussenkomt. Het kan ook een definitie volgen wanneer de drie items dimensies van de term ontvouwen. Het mag geen bewering en de bijbehorende bron, een waarschuwing en de voorwaarde die deze activeert, een stap en het verwachte resultaat, of een zin die een conventionele lijst inleidt, onderbreken. Die relaties moeten aaneengesloten blijven.

Plaats het niet direct naast een ander driekolommenraster, prijstabel, tabbladbesturing, kaartendeck of drieknopige call-to-action. Herhaalde geometrie doet redactionele uitleg op interactief of commercieel lijken en dwingt lezers om te raden welke groepering belangrijk is. Voeg verklarend proza in of kies één structuur die de hele relatie draagt. Vermijd het plaatsen van een tweede infobox in dezelfde korte sectie; herhaling verandert een doordacht model in decoratief meubilair.

Op een lange pagina zijn meerdere driekolommen-infoboxen alleen acceptabel onder verschillende koppen en voor echt verschillende modellen. Ze mogen niet worden gebruikt als de standaardbehandeling voor elk trio in de tekst.

Anatomie

De anatomie bevat één bovenliggende regio en drie herhaalde itemregio’s. De gelabelde schermafbeelding moet semantische delen identificeren in plaats van kleur, radius of spatietokens, zodat de specificatie een herontwerp overleeft.

1. Buitenste grens: Groepeert de titel en alle drie items als één redactionele eenheid.
2. Gedeelde titel: Benoemt het idee dat door de drie items wordt verdeeld. Het is geen vierde item.
3. Optionele icoonsleuf: Bevat één goedgekeurd decoratief icoon per item; alle drie sleuven worden samen gebruikt of weggelaten.
4. Itemtitel: Benoemt één lid van de verzameling in taal die parallel is aan de andere twee titels.
5. Itembeschrijving: Legt dat lid uit op vergelijkbare diepgang en blijft betekenisvol wanneer geëxtraheerd.
6. Lay-outrelatie: Gebruikt drie gelijke kolommen waar de ruimte het toelaat en stapelt item één, item twee en daarna item drie op smalle schermen.

Auteurs beheren titels, beschrijvingen, icoontokens en bronvolgorde. De renderer beheert kolombreedte, tussenruimtes, breekpunten, randen, achtergronden en typografie.

Ontwerpvoorbeelden

Er is één semantisch element met vier ondersteunde varianten en één responsieve status. Geen verandert het exacte drie-itemcontract.

Standaard getitelde variant: Voorkeursvariant voor uitleggende inhoud. De gedeelde titel en drie itemtitels maken de hiërarchie expliciet; er zijn geen iconen aanwezig.

Iconenvariant: Voegt één decoratief icoon toe aan elk item. Iconen moeten dezelfde familie, grootte en visueel gewicht delen. Een mix van icoon, foto en lege sleuf wordt niet ondersteund.

Contextuele-titelvariant: De direct voorafgaande H2 levert de gedeelde titel. Dit is alleen toegestaan wanneer de container programmatisch naar die zichtbare kop kan verwijzen en niets de kop van het element scheidt.

Compacte variant: Geschikt voor drie korte definities of controles. Elke beschrijving is nog steeds een volledige zin, geen slogan of labelfragment.

Smalle-viewport-status: Items stapelen verticaal in de auteurvolgorde. Geen formulering mag afhangen van een linker-, midden- of rechterpositie.

Parameters

Het contract scheidt de door de auteur betekenis van presentatie. Responsieve kolommen en icoonstyling behoren tot de renderer; inhoudsvelden en semantische volgorde behoren tot de bron.

De titel is vereist, tenzij een direct voorafgaande kop hetzelfde bovenliggende onderwerp biedt en de container labelt. Itemcontent mag nadruk, inline code en één relevante tekstlink bevatten. Het mag geen geneste koppen, tabellen, lijsten langer dan drie korte opsommingen, media, formulieren, calls-to-action of een andere component bevatten.

Syntax en codevoorbeelden

Alle drie notaties behouden dezelfde titel, drie geordende items, optionele icoontokens en beschrijvingen. De draagbare Markdown-directive is de canonieke bron. Hugo en WordPress zijn adaptercontracten en moeten elk aantal items anders dan drie afwijzen.

Draagbare Markdown-directive

:::infobox-3-columns
## Een publiceerbare pagina heeft drie soorten vertrouwen nodig

::item{icon="reader"}
### Lezersvertrouwen

Het antwoord is duidelijk, volledig en specifiek genoeg om een beslissing of actie te sturen.
::

::item{icon="editorial"}
### Redactioneel vertrouwen

Beweringen worden onderbouwd, terminologie is consistent en elke vereiste kwalificatie blijft behouden.
::

::item{icon="technical"}
### Technisch vertrouwen

De pagina wordt weergegeven, links werken, metadata wordt correct toegewezen en machines kunnen de structuur herstellen.
::
:::

De eerste bovenliggende kop wordt toegewezen aan title. Elke ::item wijst de eerste kop toe aan item.title, de resterende beschrijving aan item.content en het optionele icon-kenmerk aan een goedgekeurd icoontoken. Drie geneste items zijn vereist, zelfs wanneer de lay-out stapelt.

Hugo-shortcode-toewijzing

{{< infobox-3-columns title="Een publiceerbare pagina heeft drie soorten vertrouwen nodig" variant="icons" >}}
  {{< infobox-item title="Lezersvertrouwen" icon="reader" >}}
  Het antwoord is duidelijk, volledig en specifiek genoeg om een beslissing of actie te sturen.
  {{< /infobox-item >}}
  {{< infobox-item title="Redactioneel vertrouwen" icon="editorial" >}}
  Beweringen worden onderbouwd, terminologie is consistent en elke vereiste kwalificatie blijft behouden.
  {{< /infobox-item >}}
  {{< infobox-item title="Technisch vertrouwen" icon="technical" >}}
  De pagina wordt weergegeven, links werken, metadata wordt correct toegewezen en machines kunnen de structuur herstellen.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Dit is een draagbare adapterspecificatie, geen belofte dat de huidige site die shortcodes registreert. Het gebruikt alleen benoemde parameters, behoudt de bronvolgorde, valideert icoontokens en faalt bij auteurstvalidatie in plaats van een extra item stilzwijgend te verwijderen of in te pakken.

WordPress-blok

<!-- wp:amicited/infobox-3-columns {"title":"Een publiceerbare pagina heeft drie soorten vertrouwen nodig","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Lezersvertrouwen","icon":"reader"} -->
  <p>Het antwoord is duidelijk, volledig en specifiek genoeg om een beslissing of actie te sturen.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Redactioneel vertrouwen","icon":"editorial"} -->
  <p>Beweringen worden onderbouwd, terminologie is consistent en elke vereiste kwalificatie blijft behouden.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Technisch vertrouwen","icon":"technical"} -->
  <p>De pagina wordt weergegeven, links werken, metadata wordt correct toegewezen en machines kunnen de structuur herstellen.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

De editor moet drie vaste itemsleuven tonen. Het mag de auteur toestaan de items te herordenen, maar het mag geen onbeperkte invoeger bieden die een vierde kind of niet-gerelateerd blok toestaat.

Voorbeelden

Goed voorbeeld: een echt drieweg-bedrijfsmodel

Dit werkt omdat de gedeelde titel één verantwoordelijkheidsmodel definieert, de drie rollen duidelijk zijn en elke beschrijving dezelfde vraag beantwoordt: wat moet deze eigenaar verifiëren? De items gebruiken parallelle zelfstandige titels en vergelijkbare diepgang. Geen bestaat alleen om de rij te vullen.

Slecht voorbeeld: een paar aangevuld tot drie

Drie manieren om een landingspagina te verbeteren

Verduidelijk het aanbod: Benoem het publiek, het probleem, het mechanisme en het verwachte resultaat in taal die de lezer kan verifiëren.

Bewijs de bewering: Voeg relevant bewijs toe, leg de beperkingen uit en houd bronnen gekoppeld aan de uitspraken die ze ondersteunen.

Maak het aantrekkelijk: Voeg aantrekkelijke kleuren toe en wat verder maar goed voelt.

De eerste twee items zijn redactionele vereisten met observeerbare resultaten. De derde is vaag visueel advies, heeft geen bijpassende bewijsstandaard en doet een andere taak. Het werd toegevoegd omdat het ontwerp om drie kolommen vroeg, niet omdat het model drie delen heeft. Verwijder het derde item en gebruik een tweedelige structuur, of definieer een echte derde vereiste zoals het verminderen van interactieweerstand en ondersteun dit op dezelfde diepgang.

Schema-opmaak en toegankelijkheid

Een driekolommen-infobox heeft geen speciaal Schema.org-type en creëert geen zelfstandige gestructureerde data. De tekst blijft deel uitmaken van het omringende Article, TechArticle of WebPage wanneer die pagina daarvoor in aanmerking komt. Markeer de kinderen niet als ItemList alleen omdat er drie zijn, en leid geen HowTo af uit sequentieel klinkende labels. Voer paginaniveau-schema alleen in wanneer de onderliggende inhoud onafhankelijk aan de vereisten van dat schema voldoet.

Gebruik één gelabelde semantische container met drie kindsecties. Gebruik <section> wanneer het model deel uitmaakt van de hoofdargumentatie en <aside> wanneer het complementair is. Verbind de zichtbare gedeelde titel met aria-labelledby en geef elk kind een echte kop op het juiste documentniveau. Vetgedrukte tekst is geen vervanging voor een kop.

Bronvolgorde is leesvolgorde. Schermlezers, toetsenbordnavigatie, gekopieerde tekst en mobiele lay-outs moeten item één, item twee en daarna item drie tegenkomen. CSS mag kolommen maken, maar mag geen ordeningsregels gebruiken om ze te herschikken. Schrijf nooit “links”, “midden” of “rechts”; die posities verdwijnen wanneer items stapelen.

Iconen zijn decoratief tenzij ze informatie communiceren die niet in de titel aanwezig is. Decoratieve iconen gebruiken aria-hidden="true" in HTML of een lege alternatieve tekst wanneer ze als afbeeldingen worden weergegeven. Als een icoon informatief is, moet de betekenis ook in zichtbare tekst voorkomen; een toegankelijke naam die verborgen is voor het zicht, helpt lezers niet die de pagina kunnen zien maar het symbool niet kunnen interpreteren. Kleur en icoonvorm mogen nooit het enige onderscheid tussen items zijn.

Bij smalle breedtes stapelt u de items voordat de tekst te krap wordt. Ondersteun tekstschaling zonder afknippen, overlapping of horizontaal scrollen op paginaniveau. Een schermafbeelding van drie kolommen is geen vervanging voor responsieve semantische inhoud.

Schrijfregels

Begin met de zin “Dit idee heeft drie delen: X, Y en Z.” De zin moet nauwkeurig blijven nadat elk deel is gedefinieerd. Als één deel een resultaat is van de andere twee, een brede verzamelcategorie of een klein voorbeeld, is het model niet echt parallel.

Gebruik precies drie items. Houd elke titel op 2–7 woorden en gebruik hetzelfde grammaticale patroon: drie zelfstandige naamwoordgroepen, drie vragen of drie tijdslabels. Houd elke beschrijving waar mogelijk op 25–80 woorden en overschrijd nooit 110. Een verschil van één zin is acceptabel. Een item van 25 woorden naast twee items van 100 woorden vereist redactie of een andere structuur.

Vergelijkbare diepgang betekent vergelijkbaar verklarend werk, geen opvulling. Elke beschrijving moet dezelfde impliciete vraag beantwoorden, een vergelijkbaar specificatieniveau bevatten en consequenties op een vergelijkbaar niveau vermelden. Als één item echt meer uitleg nodig heeft, verplaats het model dan naar gewone secties waar de lengte eerlijk kan variëren.

Gebruik directe, neutrale taal. Titels moeten betekenis identificeren, niet positie: “Ontdekking / Productie / Review” is sterker dan “Eerste / Tweede / Derde.” Sequentiele labels zijn alleen acceptabel wanneer elk item een fase samenvat in plaats van de lezer door stappen te instrueren. Vermijd overtreffende trappen, niet-ondersteunde voordelenbeweringen en drie slogans vermomd als uitleg.

Iconen zijn optioneel. Gebruik alle drie of geen, selecteer ze uit één goedgekeurde familie en houd ze visueel consistent. Kies geen iconen vóór titels, gebruik geen emoji als productie-icoontokens en laat een icoon geen betekenisvolle itemkop vervangen.

Plaats nooit het volgende in het element:

• Twee of vier items, een leeg item of een “overige” derde sleuf.
• Een gedetailleerde procedure, vergelijkingsmatrix, prijsplan, formulier, getuigeniscarrousel of promotionele banner.
• Geneste H2-secties, een andere infobox, tabbladen, accordeonpanelen, video of afbeeldingsgalerij.
• Lange opsommingen, bronnenlijsten, juridische disclaimers, veiligheidswaarschuwingen of kwalificaties losgekoppeld van de bewering die ze regeren.
• Drie niet-gerelateerde links gestileerd als gelijke calls-to-action.

Wanneer inhoud deze grenzen overschrijdt, promoveer de drie items dan naar normale paginasecties. De vaste lay-out mag nooit een reden worden om essentiële nuance samen te persen of een kwalificatie te verbergen.

Berichttypen die het gebruiken

Het veld postTypes in de frontmatter is de geregistreerde gebruiksset. Het identificeert formaten die vaak een betekenisvol driedelig model bevatten; het vereist geen infobox wanneer de bron geen echt trio heeft.

QA-checklist

• Eén bovenliggend idee: Een precieze gedeelde titel legt uit waarom alle drie items bij elkaar horen.
• Precies drie items: Bron en weergegeven uitvoer bevatten drie complete kinderen — nooit twee, vier of een lege plaatshouder.
• Echte driesplitsing: Het verwijderen van een item maakt het model onvolledig; geen is opvulling, een resultaat of een overige categorie.
• Parallelle titels: Alle itemtitels gebruiken dezelfde grammaticale vorm en identificeren betekenis in plaats van schermpositie.
• Vergelijkbare diepgang: Elke beschrijving beantwoordt dezelfde impliciete vraag met vergelijkbare details en bewijs.
• Nuttige plaatsing: Het element volgt de inleidende context en scheidt geen bewering, waarschuwing, stap of bron van de afhankelijke inhoud.
• Veilige buren: Het bevindt zich niet naast een ander driekolommenraster, prijsblok, tabbladbesturing of drieknopige CTA.
• Extraheerbare formulering: Gedeelde en itemtitels benoemen hun onderwerpen; beschrijvingen vertrouwen niet op nabijgelegen voornaamwoorden of visuele positie.
• Icoonconsistentie: Alle drie items gebruiken goedgekeurde iconen uit één familie, of geen item gebruikt een icoon; betekenis blijft in tekst.
• Responsieve volgorde: Mobiel stapelt item één, item twee en daarna item drie zonder afknippen, horizontaal scrollen of CSS-herordening.
• Toegankelijke semantiek: De container heeft een zichtbaar programmatisch label, itemtitels zijn koppen en decoratieve iconen zijn verborgen voor ondersteunende technologie.
• Inhoudslimieten: Beschrijvingen blijven binnen twee korte alinea’s en bevatten geen geneste complexe component, procedure of promotionele besturing.
• Notatiepariteit: Draagbare Markdown, Hugo en WordPress behouden dezelfde titel, drie items, icoontokens, beschrijvingen en volgorde.
• Schemabeperking: De renderer leidt geen lijst-, vergelijkings- of hoe-te-opmaak af uit de driekolommenpresentatie.

Een beoordelaar moet het element afwijzen wanneer het aantal items, de echte drieweglogica of de vergelijkbare diepgang faalt. Dat zijn inhoudsmodeldefecten; visuele verfraaiing kan ze niet repareren.

FAQ

De FAQ-items in de frontmatter behandelen het vaste aantal items, vergelijkbare diepgang, optionele iconen, mobiele volgorde en schemabeperking. De academiesjabloon kan die goedgekeurde antwoorden weergeven zonder ze in de hoofdtekst te dupliceren.