Infoboks: 3 kolonner — format, regler og eksempler

En tre-kolonne infoboks presenterer nøyaktig tre parallelle punkter under én felles idé. Den er nyttig når leseren trenger å se en reell tredelt modell på én gang: tre ansvarsområder, tre kriterier, tre resultater eller tre koordinerte arbeidsstrømmer. Kolonnene lover lik redaksjonell status, så hvert punkt må gjøre samme type arbeid på sammenlignbar dybde.

Det rendrede elementet har én felles tittel og nøyaktig tre elementer. Alle tre titlene er substantivfraser, alle tre brødtekstene beskriver en type trygghet, og ikonene tilfører rytme uten å bære mening. Fjern ikonene, og modellen er uendret.

Hvorfor dette elementet er viktig

Lesere opplever ikke et tett avsnitt som en modell bare fordi det inneholder tre setninger. De må holde den første setningen i minnet, oppdage overgangen til den andre, og avgjøre om den tredje er likestilt, underordnet eller bare et tillegg. En tre-kolonne infoboks gjør forholdet eksplisitt. Den felles tittelen navngir det som forblir konstant; tre avgrensede elementer viser den fulle inndelingen; matchet visuell vekt forteller leserne å undersøke hvert element før de behandler modellen som forstått.

Dette hjelper gjennom chunking, grupperingen av relatert informasjon i håndterbare enheter. Tre er nok til å avsløre et system uten å produsere en katalog. En leser kan skanne de tre titlene, gå inn gjennom punktet som er mest relevant for dem, og deretter sammenligne detaljnivået. Elementet er spesielt effektivt når prosa ellers ville gjentatt samme emne tre ganger eller skjult skillet inne i en lang setning.

Maskinuttrekkbarhet er evnen programvare har til å isolere en innholdsenhet uten å miste emnet eller relasjonene. En typet tre-kolonne infoboks eksponerer ett overordnet tema og tre ordnede underordnede elementer. Søkesystemer, innholds-API-er og AI-hentingsverktøy kan bevare den felles tittelen, hver elementtittel, hver brødtekst og kilde-rekkefølgen i stedet for å gjette om et avsnitt inneholder en liste. Eksplisitte overskrifter gir også hvert element en nyttig hentingsetikett.

Uttrekk fungerer bare når ordene er selvforklarende. “Teknisk trygghet betyr at siden rendrer og lenker løses” kan overleve utenfor layouten. “Den tredje delen håndterer dette” kan ikke. Struktur kan heller ikke fabrikkere en tredje idé. Følg element-skrivereglene : etabler innholdsmodellen før du velger rendereren. Element-spesifikke krav om nøyaktig tre elementer går foran enhver generell tillatelse for gjentakbare elementer.

Når du skal bruke det

Bruk en tre-kolonne infoboks kun når alle fem testene bestås:

1. Én felles tittel kan nøyaktig styre hele elementet.
2. Emnet deler seg naturlig i nøyaktig tre punkter.
3. Alle tre punktene svarer på samme underforståtte spørsmål.
4. Hvert punkt fortjener lignende dybde, bevis og visuell vekt.
5. Hvert punkt kan forklares i ett eller to korte avsnitt uten nøstet struktur.

Sterke bruksområder inkluderer tre komponenter i et rammeverk, tre eieransvar, tre dimensjoner av kvalitet, tre resultater fra én kapasitet, eller tre kontroller som utføres på samme stadium. Forholdet kan være komplementært, sekvensielt eller kategorisk, men det må være uttalt. Hvis forfatteren ikke kan fullføre “Disse tre hører sammen fordi…”, er grupperingen sannsynligvis visuell utfylling.

Den vanligste nesten-tabben er et ekte par pluss et svakt tredje element. “Folk, prosess og mer” blir ikke en tredelt modell fordi layouten har tre plasser. Det gjør heller ikke “Hastighet, nøyaktighet og verdi” når artikkelen kun definerer hastighet og nøyaktighet og behandler verdi som resultatet deres. Behold paret, forklar resultatet i prosa, eller velg et annet element.

Ikke bruk denne infoboksen for tre sekvensielle instruksjoner. Kolonner svekker rekkefølge, spesielt når de stables på smale skjermer; bruk en trinnliste når fullføringsrekkefølge er viktig. Ikke bruk den for tre produkter evaluert på tvers av flere kriterier; bruk en sammenligningstabell. Ikke bruk den for en liste som tilfeldigvis inneholder tre fakta i dag, men som kan få et fjerde ved neste oppdatering. En fast tre-kolonne kontrakt er kun egnet når tre er iboende i ideen.

Andre nesten-tabber inkluderer en overskrift pluss to reelle elementer, ett element som inneholder alle forbeholdene, tre påstander uten mekanisme eller bevis, og ett målgruppesegment delt inn i tre vilkårlige demografier. I hvert tilfelle overdriver layouten et forhold som innholdet ikke har opparbeidet seg.

Hvor du skal plassere det

Plasser infoboksen umiddelbart etter avsnittet som introduserer den overordnede ideen. Det avsnittet bør forklare hvorfor et tredelt perspektiv hjelper; den felles tittelen navngir deretter modellen og elementene definerer dens deler. Følg elementet med tolkning, bevis eller en overgang som gjelder for gruppen som helhet.

Den kan vises direkte under en H2 når den overskriften leverer den felles tittelen og intet avsnitt eller komponent kommer imellom. Den kan også følge en definisjon når de tre elementene utdyper dimensjoner av begrepet. Den må ikke avbryte en påstand og dens kildehenvisning, en advarsel og betingelsen som utløser den, et trinn og dets forventede resultat, eller en setning som introduserer en konvensjonell liste. Disse forholdene må forbli sammenhengende.

Ikke plasser den umiddelbart ved siden av et annet tre-kolonne rutenett, pristabell, fanekontroll, kortstabel eller tre-opsjons handlingsknapp. Gjentatt geometri får redaksjonell forklaring til å se interaktiv eller kommersiell ut og tvinger lesere til å gjette hvilken gruppering som betyr noe. Sett inn forklarende prosa eller velg én struktur som bærer hele forholdet. Unngå å plassere en andre infoboks i samme korte seksjon; gjentakelse gjør en bevisst modell til dekorativt møblement.

På en lang side er flere tre-kolonne infobokser kun akseptable under forskjellige overskrifter og for genuint forskjellige modeller. De bør ikke brukes som standardbehandling for hver trio i teksten.

Anatomi

Anatomién inneholder én overordnet region og tre gjentatte elementregioner. Det merkede skjermbildet bør identifisere semantiske deler snarere enn farge-, radius- eller mellomromstokener, slik at spesifikasjonen overlever en redesign.

1. Ytre avgrensning: Grupperer tittelen og alle tre elementene som én redaksjonell enhet.
2. Felles tittel: Navngir ideen som deles av de tre elementene. Det er ikke et fjerde element.
3. Valgfri ikonplass: Holder ett godkjent dekorativt ikon per element; alle tre plassene brukes sammen eller utelates sammen.
4. Elementtittel: Navngir ett medlem av settet i språk parallelt med de to andre titlene.
5. Elementbrødtekst: Forklarer det medlemmet på matchet dybde og forblir meningsfullt når det trekkes ut.
6. Layoutforhold: Bruker tre like kolonner der plassen tillater det, og stabler element en, element to, deretter element tre på smale skjermer.

Forfattere kontrollerer titler, brødtekster, ikontokener og kilde-rekkefølge. Rendereren kontrollerer kolonnebredde, mellomrom, brytepunkter, rammer, bakgrunner og typografi.

Designeksempler

Det er ett semantisk element med fire støttede varianter og én responsiv tilstand. Ingen endrer den nøyaktige tre-element-kontrakten.

Standard titulert variant: Foretrukket for forklarende innhold. Den felles tittelen og de tre elementtitlene gjør hierarkiet eksplisitt; ingen ikoner er til stede.

Ikonvariant: Legger til ett dekorativt ikon på hvert element. Ikoner må dele familie, størrelse og visuell vekt. En blanding av ikon, fotografi og tom plass støttes ikke.

Kontekstuell tittel-variant: Den umiddelbart foregående H2-en leverer den felles tittelen. Dette er kun tillatt når beholderen kan referere til den synlige overskriften programmatisk og ingenting skiller overskriften fra elementet.

Kompakt variant: Egnet for tre korte definisjoner eller kontroller. Hver brødtekst er fortsatt en fullstendig setning, ikke et slagord eller etikettfragment.

Smal visningsport-tilstand: Elementer stables vertikalt i forfatterens rekkefølge. Ingen ordlyd kan avhenge av venstre-, midt- eller høyreposisjon.

Parametere

Kontrakten separerer forfatterens mening fra presentasjon. Responsive kolonner og ikonstyling tilhører rendereren; innholdsfelt og semantisk rekkefølge tilhører kilden.

Tittelen er påkrevd med mindre en umiddelbart foregående overskrift gir samme overordnede tema og merker beholderen. Elementinnhold kan inneholde utheving, innebygd kode og én relevant tekstlenke. Det kan ikke inneholde nøstede overskrifter, tabeller, lister lengre enn tre korte kulepunkter, media, skjemaer, handlingsknapper eller en annen komponent.

Syntaks og kodeeksempler

Alle tre notasjonene bevarer samme tittel, tre ordnede elementer, valgfrie ikontokener og brødtekster. Det portable Markdown-direktivet er den kanoniske kilden. Hugo og WordPress er adapterkontrakter og må avvise et hvilket som helst elementantall annet enn tre.

Portabelt Markdown-direktiv

:::infobox-3-columns
## En publiserbar side trenger tre typer trygghet

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

Svaret er tydelig, fullstendig og spesifikt nok til å veilede en beslutning eller handling.
::

::item{icon="editorial"}
### Redaksjonell trygghet

Påstander er underbygget, terminologien er konsistent, og alle nødvendige kvalifikasjoner forblir tilknyttet.
::

::item{icon="technical"}
### Teknisk trygghet

Siden rendrer, lenker løses, metadata kartlegges korrekt, og maskiner kan gjenopprette strukturen.
::
:::

Den første overordnede overskriften kartlegges til title. Hver ::item kartlegger sin første overskrift til item.title, gjenværende brødtekst til item.content, og valgfritt icon-attributt til et godkjent ikontoken. Tre nøstede elementer er påkrevd selv når layouten stabler.

Hugo shortcode-kartlegging

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

Dette er en portabel adapter-spesifikasjon, ikke et løfte om at det nåværende nettstedet registrerer disse shortcodene. Den bruker kun navngitte parametere, bevarer kilde-rekkefølge, validerer ikontokener, og feiler ved forfattervalidering i stedet for å stille slippe eller pakke inn et ekstra element.

WordPress-blokk

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

Editoren bør eksponere tre faste elementplasser. Den kan tillate forfatteren å omorganisere elementene, men den må ikke tilby en ubegrenset innsetter som tillater et fjerde barn eller urelatert blokk.

Eksempler

Godt eksempel: en ekte tredelt driftsmodell

Dette fungerer fordi den felles tittelen definerer én ansvarsmodell, de tre rollene er distinkte, og hver brødtekst svarer på samme spørsmål: hva må denne eieren verifisere? Elementene bruker parallelle substantivtitler og sammenlignbar dybde. Ingen eksisterer kun for å fullføre raden.

Dårlig eksempel: et par utvidet til tre

Tre måter å forbedre en landingsside på

Tydeliggjør tilbudet: Nevn målgruppen, problemet, mekanismen og forventet resultat på språk leseren kan verifisere.

Bevis påstanden: Legg til relevant bevis, forklar begrensningene, og hold kildehenvisninger knyttet til utsagnene de støtter.

Gjør den iøynefallende: Legg til attraktive farger og hva annet som føles engasjerende.

De to første elementene er redaksjonelle krav med observerbare resultater. Det tredje er vag visuell rådgivning, har ingen matchende bevisstandard, og gjør en annen jobb. Det ble lagt til fordi designet ba om tre kolonner, ikke fordi modellen har tre deler. Fjern det tredje elementet og bruk en todelt struktur, eller definer et genuint tredje krav som å redusere interaksjonsfriksjon og støtt det på samme dybde.

Schema-markering og tilgjengelighet

En tre-kolonne infoboks har ingen dedikert Schema.org-type og oppretter ingen frittstående strukturerte data. Teksten forblir en del av den omsluttende Article, TechArticle eller WebPage når den siden kvalifiserer. Ikke merk barna som ItemList bare fordi det er tre, og ikke utled HowTo fra sekvensielt-klingende etiketter. Bruk side-nivå schema kun når det underliggende innholdet uavhengig oppfyller det schemaets krav.

Bruk én merket semantisk beholder med tre barne-seksjoner. Bruk <section> når modellen er en del av hovedargumentet og <aside> når den er komplementær. Koble den synlige felles tittelen med aria-labelledby, og gi hvert barn en reell overskrift på riktig dokumentnivå. Fet tekst er ikke en erstatning for overskrift.

Kilde-rekkefølge er leserekkefølge. Skjermlesere, tastaturnavigasjon, kopiert tekst og mobile layout må møte element én, element to, deretter element tre. CSS kan lage kolonner, men må ikke bruke ordreregler for å omorganisere dem. Skriv aldri “venstre,” “midt” eller “høyre”; disse posisjonene forsvinner når elementer stables.

Ikoner er dekorative med mindre de formidler informasjon som ikke er til stede i tittelen. Dekorative ikoner bruker aria-hidden="true" i HTML eller tom alternativ tekst når de rendres som bilder. Hvis et ikon er informativt, må dets betydning også fremgå i synlig tekst; et tilgjengelig navn skjult fra synet hjelper ikke lesere som kan se siden, men ikke kan tolke symbolet. Farge og ikonform må aldri være det eneste skillet mellom elementer.

På smale bredder, stables elementene før teksten blir trang. Støtt tekstforstørring uten beskjæring, overlapping eller horisontal rulling på sidenivå. Et tre-kolonne skjermbilde er ikke en erstatning for responsivt semantisk innhold.

Skriveregler

Start med setningen “Denne ideen har tre deler: X, Y og Z.” Setningen må forbli nøyaktig etter at hver del er definert. Hvis én del er et resultat av de to andre, en bred samlekategori, eller et mindre eksempel, er modellen ikke virkelig parallell.

Bruk nøyaktig tre elementer. Hold hver tittel på 2–7 ord og bruk samme grammatiske mønster: tre substantivfraser, tre spørsmål eller tre tidsetiketter. Hold hver brødtekst på 25–80 ord der det er mulig, og overstig aldri 110. En forskjell på én setning er akseptabel. Et 25-ords element ved siden av to 100-ords elementer krever redigering eller en annen struktur.

Matchet dybde betyr sammenlignbart forklaringsarbeid, ikke fyllstoff. Hver brødtekst bør svare på samme underforståtte spørsmål, inneholde et lignende spesifisitetsnivå, og angi konsekvenser på et lignende nivå. Hvis ett element virkelig trenger mer forklaring, flytt modellen inn i vanlige seksjoner der lengde kan variere ærlig.

Bruk direkte, nøytralt språk. Titler bør identifisere mening, ikke posisjon: “Oppdagelse / Produksjon / Gjennomgang” er sterkere enn “Første / Andre / Tredje.” Sekvensielle etiketter er kun akseptable når hvert element oppsummerer en fase snarere enn å instruere leseren gjennom trinn. Unngå superlativ, ubegrunnede fordelspåstander og tre slagord forkledd som forklaring.

Ikoner er valgfrie. Bruk alle tre eller ingen, velg dem fra én godkjent familie, og hold dem visuelt konsistente. Ikke velg ikoner før titler, bruk emoji som produksjonsikontokener, eller la et ikon erstatte en meningsfull elementoverskrift.

Sett aldri disse inne i elementet:

• To eller fire elementer, et tomt element, eller en “diverse” tredje plass.
• En detaljert prosedyre, sammenligningsmatrise, prisplan, skjema, testemonial-karusell eller reklamebanner.
• Nøstede H2-seksjoner, en annen infoboks, faner, accordeonpaneler, video eller bildegalleri.
• Lange punktlister, kildelister, juridiske ansvarsfraskrivelser, sikkerhetsadvarsler eller kvalifikasjoner løsrevet fra påstanden de styrer.
• Tre urelaterte lenker stilisert til å ligne like handlingsknapper.

Når innholdet vokser ut over disse grensene, oppgrader de tre elementene til vanlige sideseksjoner. Den faste layouten bør aldri bli en grunn til å komprimere essensiell nyanse eller skjule en kvalifikasjon.

Innleggstyper som bruker det

postTypes frontmatter-feltet er det registrerte brukssettet. Det identifiserer formater som ofte inneholder en meningsfull tredelt modell; det krever ikke en infoboks når kilden ikke har en ekte trio.

QA-sjekkliste

• Én overordnet idé: En presis felles tittel forklarer hvorfor alle tre elementene hører sammen.
• Nøyaktig tre elementer: Kilde og rendret utdata inneholder tre komplette barn—aldri to, fire eller en tom plassholder.
• Ekte tredelt inndeling: Fjerning av et hvilket som helst element gjør modellen ufullstendig; ingen er utfylling, et resultat eller en diverse-kategori.
• Parallelle titler: Alle elementtitler bruker samme grammatiske form og identifiserer mening snarere enn skjermposisjon.
• Matchet dybde: Hver brødtekst svarer på samme underforståtte spørsmål med sammenlignbar detalj og bevis.
• Nyttig plassering: Elementet følger sin introduserende kontekst og skiller ikke en påstand, advarsel, trinn eller kildehenvisning fra dens avhengige innhold.
• Trygge naboer: Det er ikke tilstøtende til et annet tre-kolonne rutenett, prisblokk, fanekontroll eller tre-opsjons CTA.
• Uttrekkbar ordlyd: Felles og elementtitler navngir sine emner; brødtekster stoler ikke på nærliggende pronomen eller visuell posisjon.
• Ikonskonsistens: Alle tre elementene bruker godkjente ikoner fra én familie, eller intet element bruker et ikon; mening forblir i tekst.
• Responsiv rekkefølge: Mobil stabler element én, element to, deretter element tre uten beskjæring, horisontal rulling eller CSS-omorganisering.
• Tilgjengelig semantikk: Beholderen har et synlig programmatisk merke, elementtitler er overskrifter, og dekorative ikoner er skjult for hjelpeteknologi.
• Innholdsbegrensninger: Brødtekster holder seg innenfor to korte avsnitt og inneholder ingen nøstet kompleks komponent, prosedyre eller salgsfremmende kontroll.
• Notasjonsparitet: Portabel Markdown, Hugo og WordPress bevarer samme tittel, tre elementer, ikontokener, brødtekster og rekkefølge.
• Schema-begrensning: Rendereren utleder ikke liste-, sammenlignings- eller fremgangsmåte-markering fra tre-kolonne presentasjonen.

En korrekturleser bør avvise elementet når elementantall, ekte tredelt logikk eller matchet dybde mislykkes. Dette er innholdsmodell-feil; visuell polering kan ikke reparere dem.

FAQ

Frontmatterens FAQ-oppføringer dekker det faste elementantallet, matchet dybde, valgfrie ikoner, mobil rekkefølge og schema-begrensning. Akademimalen kan rendere disse godkjente svarene uten å duplisere dem i brødteksten.