Infobox: 3 kolumner — format, regler och exempel

En trekolumnig infobox presenterar exakt tre parallella punkter under en gemensam idé. Den är användbar när läsaren behöver se en verklig tredelad modell på en gång: tre ansvarsområden, tre kriterier, tre resultat eller tre samordnade arbetsflöden. Kolumnerna utlovar likvärdig redaktionell status, så varje punkt måste göra samma typ av arbete på jämförbart djup.

Det renderade elementet har en gemensam titel och exakt tre objekt. Alla tre titlar är nominalfraser, alla tre brödtexter beskriver en typ av förtroende, och ikonerna tillför rytm utan att bära betydelse. Ta bort ikonerna och modellen är oförändrad.

Varför detta element är viktigt

Läsare upplever inte en tät stycke som en modell bara för att den innehåller tre satser. De måste hålla den första satsen i minnet, upptäcka övergången till den andra och avgöra om den tredje är likvärdig, underordnad eller bara ett tillägg. En trekolumnig infobox gör relationen explicit. Den gemensamma titeln namnger vad som är konstant; tre avgränsade objekt visar den fullständiga uppdelningen; matchad visuell tyngd säger åt läsaren att granska varje objekt innan modellen betraktas som förstådd.

Detta hjälper genom chunkning – gruppering av relaterad information i hanterbara enheter. Tre är tillräckligt för att avslöja ett system utan att producera en katalog. En läsare kan skanna de tre titlarna, gå in via den punkt som är mest relevant för dem och sedan jämföra detaljnivån. Elementet är särskilt effektivt när prosa annars skulle upprepa samma ämne tre gånger eller dölja skillnaden inuti en lång mening.

Maskinextraherbarhet är förmågan hos programvara att isolera en innehållsenhet utan att förlora dess ämne eller relationer. En typad trekolumnig infobox exponerar ett överordnat ämne och tre ordnade underobjekt. Söksystem, innehålls-API:er och AI-hämtningsverktyg kan bevara den gemensamma titeln, varje objekttitel, varje brödtext och källordning istället för att gissa om ett stycke innehåller en lista. Explicita rubriker ger också varje objekt en användbar hämtningsetikett.

Extrahering fungerar bara när orden är självförsörjande. “Tekniskt förtroende innebär att sidan renderas och länkar fungerar” kan överleva utanför layouten. “Den tredje delen hanterar detta” kan inte. Struktur kan inte heller tillverka en tredje idé. Följ skrivreglerna för element : etablera innehållsmodellen innan du väljer renderare. Det elementspecifika kravet på exakt tre objekt har företräde framför eventuella allmänna tillåtelser för repeterbara objekt.

När du ska använda det

Använd en trekolumnig infobox endast när alla fem testerna godkänns:

1. En gemensam titel kan korrekt styra hela elementet.
2. Ämnet delas naturligt in i exakt tre punkter.
3. Alla tre punkter besvarar samma underförstådda fråga.
4. Varje punkt förtjänar liknande djup, bevisning och visuell tyngd.
5. Varje punkt kan förklaras i en eller två korta stycken utan nästlad struktur.

Starka användningsområden inkluderar tre komponenter i ett ramverk, tre ägaransvar, tre dimensioner av kvalitet, tre resultat från en kapacitet eller tre kontroller som utförs i samma skede. Relationen kan vara kompletterande, sekventiell eller kategorisk, men den måste anges. Om författaren inte kan fullfölja “Dessa tre hör ihop för att…” är grupperingen troligen visuell utfyllnad.

Det vanligaste nästan-misset är en genuin par plus ett svagt tredje objekt. “Människor, process och mer” blir inte en tredelad modell för att layouten har tre platser. Inte heller “Hastighet, noggrannhet och värde” när artikeln bara definierar hastighet och noggrannhet och behandlar värde som deras resultat. Behåll paret, förklara resultatet i prosa eller välj ett annat element.

Använd inte denna infobox för tre sekventiella instruktioner. Kolumner försvagar sekvens, särskilt när de staplas vid smala bredder; använd en steglista när ordningsföljden är viktig. Använd den inte för tre produkter som utvärderas enligt flera kriterier; använd en jämförelsetabell. Använd den inte för en lista som råkar innehålla tre fakta idag men kan få en fjärde vid nästa uppdatering. Ett fast trekolumnskontrakt är endast lämpligt när tre är inneboende i idén.

Andra nästan-missar inkluderar en rubrik plus två verkliga objekt, ett objekt som innehåller alla reservationer, tre marknadsföringspåståenden utan mekanism eller bevis, och ett målgruppssegment som delats in i tre godtyckliga demografier. I varje fall överdriver layouten en relation som innehållet inte har förtjänat.

Var du ska placera det

Placera infoboxen omedelbart efter stycket som introducerar den överordnade idén. Det stycket bör förklara varför en tredelad vy är användbar; den gemensamma titeln namnger sedan modellen och objekten definierar dess delar. Följ elementet med tolkning, bevisning eller en övergång som tillämpas på gruppen som helhet.

Den kan placeras direkt under en H2 när den rubriken tillhandahåller den gemensamma titeln och inget stycke eller komponent kommer emellan. Den kan också följa en definition när de tre objekten packar upp dimensioner av termen. Den får inte avbryta ett påstående och dess källa, en varning och villkoret som utlöser den, ett steg och dess förväntade resultat, eller en mening som introducerar en konventionell lista. Dessa relationer måste förbli sammanhängande.

Placera den inte omedelbart bredvid ett annat trekolumnigt rutnät, pristabell, flikkontroll, kortlek eller trealternativs uppmaning till handling. Upprepad geometri får redaktionell förklaring att se interaktiv eller kommersiell ut och tvingar läsare att gissa vilken gruppering som är viktig. Lägg in förklarande prosa eller välj en struktur som bär hela relationen. Undvik att placera en andra infobox i samma korta avsnitt; upprepning förvandlar en avsiktlig modell till dekorativ möbel.

På en lång sida är flera trekolumniga infoboxar acceptabla endast under olika rubriker och för genuint olika modeller. De bör inte användas som standardbehandling för varje trio i texten.

Anatomi

Anatomin innehåller en överordnad region och tre upprepade objektregioner. Den märkta skärmbilden bör identifiera semantiska delar snarare än färg-, radie- eller mellanrumstoken så att specifikationen överlever en omdesign.

1. Yttre gräns: Grupperar titeln och alla tre objekt som en redaktionell enhet.
2. Gemensam titel: Namnger idén som delas av de tre objekten. Det är inte ett fjärde objekt.
3. Valfri ikonplats: Innehåller en godkänd dekorativ ikon per objekt; alla tre platser används tillsammans eller utelämnas tillsammans.
4. Objekttitel: Namnger en medlem av mängden i språk parallellt med de andra två titlarna.
5. Objektbrödtext: Förklarar den medlemmen på matchat djup och förblir meningsfull när den extraheras.
6. Layoutrelation: Använder tre lika kolumner där utrymmet tillåter och staplar objekt ett, objekt två, sedan objekt tre på smala skärmar.

Författare styr titlar, brödtexter, ikontoken och källordning. Renderaren styr kolumnbredd, mellanrum, brytpunkter, kanter, bakgrunder och typografi.

Designexempel

Det finns ett semantiskt element med fyra varianter som stöds och ett responsivt tillstånd. Inget ändrar kontraktet om exakt tre objekt.

Standardvariant med titlar: Föredragen för förklarande innehåll. Den gemensamma titeln och de tre objekttitlarna gör hierarkin explicit; inga ikoner finns.

Ikonvariant: Lägger till en dekorativ ikon till varje objekt. Ikoner måste dela familj, storlek och visuell tyngd. En blandning av ikon, fotografi och tom plats stöds inte.

Kontextuell titelvariant: Den omedelbart föregående H2:n förser den gemensamma titeln. Detta är endast tillåtet när containern kan referera till den synliga rubriken programmatiskt och inget skiljer rubriken från elementet.

Kompakt variant: Lämplig för tre korta definitioner eller kontroller. Varje brödtext är fortfarande en fullständig mening, inte en slogan eller etikettfragment.

Tillstånd för smal visningsport: Objekt staplas vertikalt i författarordning. Ingen formulering får bero på vänster, mitten eller höger position.

Parametrar

Kontraktet separerar författad betydelse från presentation. Responsiva kolumner och ikonstyling tillhör renderaren; innehållsfält och semantisk ordning tillhör källan.

Titeln är obligatorisk om inte en omedelbart föregående rubrik förser samma överordnade ämne och etiketterar containern. Objektinnehåll kan innehålla betoning, inline-kod och en relevant textlänk. Det får inte innehålla nästlade rubriker, tabeller, listor längre än tre korta punkter, media, formulär, uppmaningar till handling eller en annan komponent.

Syntax och kodexempel

Alla tre notationerna bevarar samma titel, tre ordnade objekt, valfria ikontoken och brödtexter. Det bärbara Markdown-direktivet är den kanoniska källan. Hugo och WordPress är adapterkontrakt och måste avvisa ett annat objektantal än tre.

Bärbart Markdown-direktiv

:::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.
::
:::

Den första överordnade rubriken mappas till title. Varje ::item mappar sin första rubrik till item.title, återstående brödtext till item.content och valfritt icon-attribut till en godkänd ikontoken. Tre nästlade objekt krävs även när layouten staplas.

Hugo-shortcode-mappning

{{< 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 >}}

Detta är en bärbar adapterspecifikation, inte ett löfte om att den aktuella webbplatsen registrerar dessa shortcodes. Den använder endast namngivna parametrar, bevarar källordning, validerar ikontoken och misslyckas med redaktionell validering istället för att tyst släppa eller slå in ett extra objekt.

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 -->

Redigeraren bör exponera tre fasta objektplatser. Den kan tillåta författaren att omordna objekten, men den får inte erbjuda en obegränsad insättare som tillåter ett fjärde barn eller orelaterat block.

Exempel

Bra exempel: en verklig tredelad operativ modell

Detta fungerar eftersom den gemensamma titeln definierar en ansvarsmodell, de tre rollerna är distinkta och varje brödtext besvarar samma fråga: vad måste denna ägare verifiera? Objekten använder parallella substantivtitlar och jämförbart djup. Inget finns endast för att fylla raden.

Dåligt exempel: ett par utökat till tre

Tre sätt att förbättra en landningssida

Förtydliga erbjudandet: Namnge målgruppen, problemet, mekanismen och förväntat resultat i språk som läsaren kan verifiera.

Bevisa påståendet: Lägg till relevant bevisning, förklara dess begränsningar och håll källhänvisningar kopplade till de påståenden de stödjer.

Gör det poppigt: Lägg till attraktiva färger och vad som annars känns engagerande.

De första två objekten är redaktionella krav med observerbara resultat. Det tredje är ett vagt visuellt råd, har ingen matchande bevisningsstandard och gör ett annat jobb. Det lades till för att designen efterfrågade tre kolumner, inte för att modellen har tre delar. Ta bort det tredje objektet och använd en tvådelad struktur, eller definiera ett genuint tredje krav såsom att minska interaktionsfriktion och stödj det på samma djup.

Schema-uppmärkning och tillgänglighet

En trekolumnig infobox har ingen dedikerad Schema.org-typ och skapar ingen fristående strukturerad data. Dess text förblir en del av den omgivande Article, TechArticle eller WebPage när den sidan kvalificerar sig. Märk inte barnen som ItemList enbart för att det finns tre, och dra inte slutsatsen HowTo från sekvensliknande etiketter. Mata endast sidnivåns schema när det underliggande innehållet oberoende uppfyller det schemats krav.

Använd en märkt semantisk container med tre barnsektioner. Använd <section> när modellen är en del av huvudargumentet och <aside> när den är kompletterande. Koppla den synliga gemensamma titeln med aria-labelledby, och ge varje barn en verklig rubrik på rätt dokumentnivå. Fetstil är inte ett rubrikalternativ.

Källordning är läsföljd. Skärmläsare, tangentbordsnavigering, kopierad text och mobila layouter måste möta objekt ett, objekt två, sedan objekt tre. CSS kan skapa kolumner men får inte använda sorteringsregler för att blanda om dem. Skriv aldrig “vänster”, “mitten” eller “höger”; dessa positioner försvinner när objekt staplas.

Ikoner är dekorativa om de inte förmedlar information som inte finns i titeln. Dekorativa ikoner använder aria-hidden="true" i HTML eller tom alternativtext när de renderas som bilder. Om en ikon är informativ måste dess betydelse också framgå i synlig text; ett tillgängligt namn som är dolt för ögat hjälper inte läsare som kan se sidan men inte kan tolka symbolen. Färg och ikonform får aldrig vara den enda skillnaden mellan objekt.

Vid smala bredder, stapla objekten innan texten blir trång. Stöd textzoom utan klippning, överlappning eller horisontell rullning på sidnivå. En trekolumnig skärmbild är inte en ersättning för responsivt semantiskt innehåll.

Skrivregler

Börja med meningen “Den här idén har tre delar: X, Y och Z.” Meningen måste förbli korrekt efter att varje del har definierats. Om en del är ett resultat av de andra två, en bred samlingskategori eller ett mindre exempel, är modellen inte verkligt parallell.

Använd exakt tre objekt. Håll varje titel på 2–7 ord och använd samma grammatiska mönster: tre nominalfraser, tre frågor eller tre tidsetiketter. Håll varje brödtext på 25–80 ord där möjligt och överskrid aldrig 110. En menings skillnad är acceptabel. Ett 25-ords objekt bredvid två 100-ords objekt kräver redigering eller en annan struktur.

Matchat djup innebär jämförbart förklaringsarbete, inte utfyllnad. Varje brödtext bör besvara samma underförstådda fråga, innehålla en liknande specificitetsnivå och ange konsekvenser på en liknande nivå. Om ett objekt verkligen behöver mer förklaring, flytta modellen till vanliga sektioner där längd kan variera ärligt.

Använd direkt, neutralt språk. Titlar bör identifiera betydelse, inte position: “Upptäckt / Produktion / Granskning” är starkare än “Första / Andra / Tredje.” Sekventiella etiketter är endast acceptabla när varje objekt sammanfattar en fas snarare än instruerar läsaren genom steg. Undvik superlativ, ogrundade förmånsanspråk och tre slagord förklädda som förklaring.

Ikoner är valfria. Använd alla tre eller ingen, välj dem från en godkänd familj och håll dem visuellt konsekventa. Välj inte ikoner före titlar, använd inte emoji som produktionsikontoken, och låt inte en ikon ersätta en meningsfull objektrubrik.

Lägg aldrig in dessa inuti elementet:

• Två eller fyra objekt, ett tomt objekt eller en “övrigt” tredje plats.
• En detaljerad procedur, jämförelsematris, prisplan, formulär, vittnesmåls-karusell eller reklambanner.
• Nästlade H2-sektioner, en annan infobox, flikar, accordeonpaneler, video eller bildgalleri.
• Långa punktlistor, källistor, juridiska ansvarsfriskrivningar, säkerhetsvarningar eller kvalifikationer som är frikopplade från det påstående de styr.
• Tre orelaterade länkar formaterade som likvärdiga uppmaningar till handling.

När innehållet växer ur dessa gränser, uppgradera de tre objekten till vanliga sidsektioner. Den fasta layouten bör aldrig bli en anledning att komprimera väsentlig nyans eller dölja en kvalifikation.

Inläggstyper som använder det

Fältet postTypes i frontmatter är den registrerade användningsmängden. Det identifierar format som ofta innehåller en meningsfull tredelad modell; det kräver inte en infobox när källan saknar en genuin trio.

QA-checklista

• En överordnad idé: En precis gemensam titel förklarar varför alla tre objekt hör ihop.
• Exakt tre objekt: Käll- och renderad utdata innehåller tre fullständiga barn – aldrig två, fyra eller en tom platshållare.
• Genuin tredelad uppdelning: Att ta bort något objekt gör modellen ofullständig; inget är utfyllnad, ett resultat eller en övrig kategori.
• Parallella titlar: Alla objekttitlar använder samma grammatiska form och identifierar betydelse snarare än skärmposition.
• Matchat djup: Varje brödtext besvarar samma underförstådda fråga med jämförbar detaljrikedom och bevisning.
• Användbar placering: Elementet följer sin introducerande kontext och separerar inte ett påstående, en varning, ett steg eller en källa från dess beroende innehåll.
• Säkra grannar: Det ligger inte i anslutning till ett annat trekolumnigt rutnät, prissättningsblock, flikkontroll eller trealternativs CTA.
• Extraherbara formuleringar: Gemensamma och objektstitlar namnger sina ämnen; brödtexter förlitar sig inte på närliggande pronomen eller visuell position.
• Ikonkonsekvens: Alla tre objekt använder godkända ikoner från en familj, eller så använder inget objekt en ikon; betydelse finns i text.
• Responsiv ordning: Mobil staplar objekt ett, objekt två, sedan objekt tre utan klippning, horisontell rullning eller CSS-omordning.
• Tillgänglig semantik: Containern har en synlig programmatisk etikett, objekttitlar är rubriker och dekorativa ikoner är dolda för hjälpmedelsteknik.
• Innehållsgränser: Brödtexter håller sig inom två korta stycken och innehåller ingen nästlad komplex komponent, procedur eller marknadsföringskontroll.
• Notationsparitet: Bärbar Markdown, Hugo och WordPress bevarar samma titel, tre objekt, ikontoken, brödtexter och ordning.
• Schemarestriktion: Renderaren härleder inte lista, jämförelse- eller instruktionsmarkering från trekolumnspresentationen.

En granskare bör avvisa elementet när objektantal, genuin tredelad logik eller matchat djup misslyckas. Dessa är innehållsmodellsdefekter; visuell polering kan inte reparera dem.

FAQ

FAQ-posterna i frontmatter täcker det fasta objektantalet, matchat djup, valfria ikoner, mobil ordning och schemarestriktion. Akademimallen kan rendera dessa godkända svar utan att duplicera dem i brödtexten.