Notis med två kolumner – regler och exempel

En tvåkolumnsnotis placerar två korta, etiketterade meddelanden under ett gemensamt ämne. Meddelandena kan kontrastera handlingar, förklara två villkor eller särskilja relaterade tillstånd, men varje meddelande måste vara korrekt och användbart när det läses för sig självt.

Detta renderade element fungerar eftersom “Utkast-sida” och “Publicerad sida” är verkliga villkor, inte kosmetiska rubriker. Den gemensamma rubriken definierar beslutet, varje meddelande ger en komplett instruktion, och inget av dem ber läsaren att utläsa mening från färg eller horisontell position.

Varför detta element är viktigt

Läsare stöter ofta på vägledning medan de skannar efter det villkor som gäller för dem. Ett långt stycke som säger “utkast kan innehålla märkta exempel, medan publicerade sidor kräver verifierade värden” tvingar läsaren att hålla en sats i minnet medan den testar den andra. Två avgränsade meddelanden minskar det arbetet. Etiketterna visar förgreningspunkten först, så en läsare kan identifiera det relevanta villkoret och sedan läsa dess instruktion.

Den psykologiska fördelen är selektiv uppmärksamhet. Människor behöver inte alltid båda meddelandena lika mycket; de behöver förtroendet att de uppmärksammade rätt. En gemensam rubrik etablerar frågan, medan distinkta etiketter gör de tillgängliga tillstånden synliga. Sida-vid-sida-presentation gör också en meningsfull kontrast uppenbar utan att överdriva den som en vinnare och förlorare.

Den fördelen försvinner när författaren tvingar fram falsk symmetri. Falsk symmetri uppstår när layouten antyder att två idéer har samma omfattning, betydelse eller giltighet trots att innehållet inte gör det. En enmening-påminnelse bredvid en sexstegs säkerhetsprocedur är inte ett par. Det är inte heller en obligatorisk juridisk begränsning bredvid ett valfritt produktivitetstips. Lika breda kolumner kan få olika meddelanden att se utbytbara ut, vilket är precis fel signal.

Maskinextraherbarhet är förmågan hos programvara att isolera innehåll samtidigt som relationerna som gör det korrekt bevaras. En typad tvåkolumnsnotis exponerar ett överordnat ämne och två etiketterade undermeddelanden. Söksystem och AI-agenter kan hämta “För en publicerad sida, använd verifierade värden med en källa och kontrollerat datum” utan att gissa vilken rubrik som styr vilken mening. Tydliga etiketter, källordning och självständiga brödtexter överlever responsiv stapling och textbaserad extrahering.

Följ skrivreglerna för element innan du väljer denna komponent. Syfte har företräde framför utseende. En allvarlig risk förblir en varningsruta , en beteende-för-beteende-korrigering förblir ett gör-och-låt-inte-block , och två fakta blir inte notiser bara för att en design kan placera dem i kolumner.

När det ska användas

Använd detta element när ett gemensamt ämne har exakt två korta meddelanden och att se båda samtidigt hjälper läsaren att klassificera, jämföra eller undvika förvirring. Lämpliga relationer inkluderar:

• Två villkor: inloggad kontra utloggad, utkast kontra publicerad, före migrering kontra efter migrering.
• Två målgrupper: kontoinnehavare kontra inbjuden användare, så länge som båda får vägledning om samma händelse.
• Rekommenderat och avrått beteende: endast när varje sida är ett kort meddelande snarare än en lista med matchade beteenden.
• Tillgängliga och otillgängliga tillstånd: när etiketterna anger villkoren som producerar varje tillstånd.
• Nuvarande och kommande beteende: när datum eller versionsgränser är tydligt angivna.

Alla dessa tester måste godkännas:

1. En rubrik kan korrekt introducera båda meddelandena.
2. Exakt två villkor eller meddelanden finns; källan döljer inte ett tredje fall.
3. Varje meddelande har en specifik etikett och en fullständig konsekvens eller handling.
4. Paret kan förstås i källordning på en smal skärm.
5. Inget meddelande kräver en nästlad procedur, tabell, formulär eller lång kvalificering.

Nästan-träffar avslöjar felaktig användning. Använd vanlig prosa när det andra påståendet bara fortsätter det första. Använd en jämförelsetabell när läsare måste bedöma flera kriterier. Använd ett beslutsträd när fler än två villkor förgrenar sig eller när ett svar leder till en annan fråga. Använd en fristående varning när det kan orsaka skada, dataförlust, juridisk exponering eller en irreversibel handling att missa meddelandet. Använd gör-och-låt-inte-block när flera felaktiga beteenden var och en behöver en motsvarande korrigering.

Hitta inte på en motvikt. Om den ärliga instruktionen är “Säkerhetskopiera databasen före migrering”, skapar “Efter migrering: fortsätt arbeta” symmetri men inget värde. Dela inte heller ett meddelande i “Viktigt” och “Även viktigt.” Etiketter måste namnge verkliga villkor, tillstånd, målgrupper eller positioner.

Var det ska placeras

Placera elementet omedelbart efter stycket som definierar den gemensamma situationen. Läsare måste veta vilket beslut eller tillstånd meddelandena gäller innan de möter förgreningarna. När paret föregår en handling, placera det före det första steget som ändrar data eller förbinder läsaren till ett val.

Exakta positionsregler är:

• Placera ett par med två villkor efter förutsättningar och före villkorsspecifika instruktioner.
• Placera en kontrast före en handling innan kontrollen, kommandot, nedladdningen eller steget den kvalificerar.
• Placera ett par med resultattillstånd efter att resultatet har definierats och före felsökningsdetaljer.
• Behåll bevis eller en källa inom det relevanta meddelandet när det stöder endast det meddelandet; placera gemensamma bevis omedelbart efter hela paret.
• I upprepade dokumentationsavsnitt, använd samma källordning så att återkommande tillstånd inte byter position.

Elementet får inte placeras bredvid en annan tvåkolumnskomponent, jämförelsetabell, flikkontroll, prisrutnät eller delad uppmaning till handling. Angränsande rutnät gör gränser otydliga och kan antyda ett fyrvägsval. Det får inte skilja ett påstående från dess källhänvisning, ett steg från dess nödvändiga varning, eller ett formulärfält från dess etikett. Placera det inte inuti ett numrerat steg: de nästlade förgreningarna kan göra sekvens och ansvar otydliga.

Sätt aldrig en allvarlig varning i en kolumn bredvid rutinmässig rådgivning i den andra. Den lika geometrin minskar varningens dominans och antyder att läsare kan välja mellan de två. Flytta risken till en fristående varning före den relevanta handlingen, använd sedan detta element senare endast om två säkra villkor fortfarande behöver förtydligas.

Anatomi

1. Gemensam rubrik: namnger den situation eller det beslut som styrs av båda meddelandena.
2. Notisbehållare: grupperar paret som ett redaktionellt element utan att antyda att det är en enda varning.
3. Notisetikett: namnger ett villkor, tillstånd, målgrupp eller beteende på 2–6 ord.
4. Notisbrödtext: anger relevant fakta, konsekvens och nästa handling i den ordningen när alla tre behövs.
5. Valfri ikon: förstärker en synlig textetikett; den bär aldrig särskiljningen ensam.
6. Valfri källnot: stöder ett föränderligt, reglerat eller extern definierat påstående inom det meddelande det kvalificerar.
7. Källordning: bestämmer skärmläsar-, kopierings- och mobilordning; visuell styling får inte vända den.

Författaren tillhandahåller den gemensamma rubriken, två etiketter, två brödtexter, ton och eventuella källor. Renderaren tillhandahåller det responsiva rutnätet, avstånd, visuell betoning, semantisk behållare och dekorativ ikonbehandling.

Designexempel

Dessa är de fullt stödda varianterna. Varianter ändrar etiketter och betoning, inte datamodellen med två meddelanden.

Kontrasterande handlingar

Används för en rekommenderad och en avrådd handling när det bara finns ett meddelande på varje sida. Ange handlingen och dess anledning; utöka inte denna variant till matchade listor.

Villkorliga tillstånd

Används när rätt instruktion beror på ett ömsesidigt uteslutande villkor som “Befintligt konto” och “Nytt konto.” Namnge villkoret i varje etikett och sätt det vanligaste eller förutsättande tillståndet först.

Parade förtydliganden

Används när två relaterade fakta förhindrar olika missförstånd men inte är motsatser. Använd neutral styling på båda så att designen inte skapar godkännande, allvarlighetsgrad eller preferens.

Kompakt statuspar

Används för korta statuskonsekvenser efter att tillstånden redan har förklarats. Varje brödtext är en mening. Ta inte bort etiketter eller reducera brödtexterna till oförklarade värden.

Staplat mobilpar

Alla varianter staplas vid smala bredder. Behåll det första meddelandet omedelbart före det andra och behåll den gemensamma rubriken. Skapa ingen svepinteraktion eller flikar, eftersom att dölja ett meddelande motverkar elementets syfte.

Parametrar

“Källa” identifierar var en adapter hämtar varje värde. Brödtextsmappningen lagrar medvetet två kompletta notisposter snarare än två visuellt positionerade kolumner.

Den överordnade brödtextens första rubrik mappas till title. Varje nästlat objekt mappar sin första rubrik till label och allt efter den till content; notisattribut håller tone och icon. Renderaren måste avvisa ett, tre eller tomma notisobjekt snarare än att tyst fylla eller släppa en kolumn.

Syntax och kodexempel

Alla format bevarar samma rubrik, notisordning, etiketter, brödtexter, toner och källor. “Kolumn ett” och “kolumn två” är presentationstermer, inte fältnamn.

Bärbar Markdown-anvisning

:::notification-two-column{variant=conditional}
## Välj instruktion för din publiceringsstatus

::notice{tone=neutral icon="draft"}
### Utkast-sida

Använd exempelvärden endast när de är tydligt märkta som exempel. Ta bort eller ersätt alla exempel före publicering.
::

::notice{tone=caution icon="publish"}
### Publicerad sida

Använd verifierade värden med en källa och kontrollerat datum. Om verifieringen är ofullständig, avstå från påståendet.
::
:::

Detta element åsidosätter det generiska namnet på nästlade objekt med notice eftersom posterna har notisspecifik ton. Den första överordnade rubriken tillhandahåller den gemensamma rubriken; varje notis första rubrik tillhandahåller dess etikett.

Hugo-kortkod

Ingen nuvarande produktionskortkod implementerar detta exakta parade notiskontrakt. Tills en adapter finns, använd semantisk HTML som det renderade exemplet. Den avsedda Hugo-notationen dokumenteras som:

{{< notification-two-column variant="conditional" >}}
## Välj instruktion för din publiceringsstatus

{{< notification tone="neutral" icon="draft" >}}
### Utkast-sida
Använd endast märkta exempelvärden och ta bort dem före publicering.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Publicerad sida
Använd verifierade värden med en källa och kontrollerat datum.
{{< /notification >}}
{{< /notification-two-column >}}

Snedstreck-kommentarformen förhindrar att detta specifikationsexempel anropar en kortkod som inte finns. En framtida adapter måste validera exakt två underordnade notiser och rendera dem i källordning.

WordPress-block

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Välj instruktion för din publiceringsstatus</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Utkast-sida</h3>
<p>Använd endast märkta exempelvärden och ta bort dem före publicering.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Publicerad sida</h3>
<p>Använd verifierade värden med en källa och kontrollerat datum.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

En WordPress-redigerare bör presentera två fasta notisplatser, tillåta omordning och förhindra publicering när antingen etikett eller brödtext är tom. Den får inte låta författare lägga till en tredje notis bara för att rutnätsblocket stöder fler kolumner.

Exempel

Bra: två verkliga villkor med fullständiga handlingar

Före import Ladda ner aktuella poster och notera exporttiden. Kopian ger dig en återställningspunkt om fältmappning producerar ett oväntat resultat.

Efter import Jämför det importerade postantalet med källantalet, inspektera sedan minst en post som innehåller varje mappat fält. Antal upptäcker utelämningar; den fullständiga posten upptäcker förskjutna värden.

Detta par har ett ämne – säker importverifiering – och en verklig tidsgräns. Varje meddelande namnger en handling och förklarar vilket fel den fångar. Det andra är längre eftersom det innehåller två relaterade kontroller, men båda sidor bär jämförbart ansvar och förblir begripliga när de staplas.

Dålig: falsk symmetri som nedvärderar en risk

Användbart tips Döp om exporten så att den är lättare att hitta senare.

Viktigt Import med “Ersätt alla” raderar permanent befintliga poster och kan inte ångras. Säkerhetskopiera databasen, bekräfta målet, få godkännande och schemalägg driftstopp innan du fortsätter.

Det första meddelandet är valfri städning; det andra beskriver irreversibel dataförlust och flera förutsättningar. Att placera dem i lika kolumner antyder lika vikt och får det kritiska meddelandet att se ut som ett av två alternativ. Flytta meddelandet om dataförlust till en fristående varning före kontrollen. Behåll filnamnsförslaget som vanlig stödjande prosa.

Schema-markup och tillgänglighet

En tvåkolumnsnotis har ingen dedikerad Schema.org-typ. Dess innehåll förblir inom den omgivande Article, TechArticle eller WebPage. Skicka inte ItemList, HowToStep, Question eller Answer bara för att två avgränsade poster finns. Om ett meddelande innehåller innehåll som oberoende kvalificerar för strukturerad data, avgör den omgivande posttypens schemaregler mappningen; detta element lägger till ingen i sig själv.

Använd en märkt section när paret tillhör huvudförklaringen, eller en märkt aside när båda meddelandena är kompletterande. Varje underordnat element kan vara en aside eller section med en verklig rubrik på rätt dokumentnivå. Använd inte ARIA alert eller alertdialog: dessa roller meddelar dynamiska, tidskänsliga förändringar och är olämpliga för statisk redaktionell vägledning.

Det tillgängliga namnet kommer från den synliga gemensamma rubriken genom inbyggd rubrikstruktur eller aria-labelledby. Varje notisetikett måste vara text. Färg, kantstil, position och ikoner kan förstärka ton men kan inte definiera den. Om en ikon är dekorativ, dölj den för hjälpmedelsteknik; om den förmedlar information som inte finns i etiketten, skriv om etiketten istället för att förlita dig på alternativ text för att reparera designen.

DOM-ordning styr mening. Skärmläsare och mobila layouter måste stöta på det första meddelandet och sedan det andra. Vänd inte den visuella ordningen med CSS. Vid 200 % textzoom och smala bredder måste meddelandena staplas utan beskärning eller horisontell sidscrollning. Länkar behöver beskrivande etiketter, och flera länkar får inte komprimeras till en omärkt rad ikoner.

Skrivregler

Skriv relationen innan du skriver meddelandena: “Läsaren behöver två meddelanden eftersom den korrekta vägledningen ändras beroende på ___.” Om tomrummet inte kan fyllas med ett konkret villkor, tillstånd, målgrupp, tid eller beteendekontrast, använd prosa.

• Använd exakt två meddelanden under en gemensam rubrik.
• Håll rubriken på 3–12 ord och varje etikett på 2–6 ord.
• Sikta på 25–80 ord per brödtext; 120 ord är ett absolut maximum.
• Använd en eller två korta stycken per meddelande och högst en kort inline-länk.
• Sätt fakta eller villkor först, dess konsekvens som andra och handlingen sist när alla finns med.
• Använd parallell etikettgrammatik: “Före lansering / Efter lansering”, inte “Före lansering / Vad administratörer bör göra senare.”
• Namnge villkor direkt. Skriv aldrig “vänster”, “höger”, “det andra alternativet” eller “rutan ovan.”
• Matcha ton med bevis. Neutrala parade fakta bör inte ärva grön och röd behandling.
• Låt föränderliga påståenden bära ett datum, version, plan, jurisdiktion eller källa efter behov.

Jämförbar vikt innebär att båda meddelandena förtjänar samma ögonblick i läsarens flöde. Det kräver inte identiska meningar eller teckenantal. Padda inte en kort sanning för att matcha en längre. Om en brödtext överstiger den andra med mer än ungefär två till ett, testa om det större meddelandet behöver ett separat avsnitt eller om det mindre meddelandet är en falsk motsvarighet.

Placera aldrig en procedur i flera steg, tabell, formulär, priskort, vittnesmål, reklamuppmaning till handling, långt citat, kodexempel, video eller nästlad komponent inuti ett meddelande. Använd aldrig paret för att mjuka upp juridisk, medicinsk, finansiell, integritets-, säkerhets- eller destruktiv-handlingsvägledning. Antyd inte att två villkor är uttömmande om inte innehållsägaren har verifierat att inget tredje tillstånd finns.

Posttyper som använder det

postTypes-frontmatter-arrayen är källan för denna tabell. Inkludering innebär att elementet är tillgängligt för ett genuint tvåmeddelande-fall, inte obligatoriskt på varje sida av den typen.

QA-checklista

• Gemensamt ämne: En korrekt rubrik styr båda meddelandena utan att tänja på omfattningen.
• Exakt två meddelanden: Källan innehåller två fullständiga poster och inget underförstått tredje tillstånd.
• Verklig relation: Etiketter namnger en meningsfull kontrast, ett villkor, en målgrupp, en status eller en tidsgräns.
• Oberoende innebörd: Varje meddelande förblir tydligt när det extraheras med den gemensamma rubriken.
• Ingen falsk symmetri: Båda meddelandena förtjänar jämförbar betoning; inget är fyllnad eller en nedtonad kritisk varning.
• Korrekt placering: Paret följer sin kontext och föregår den handling eller detalj det kvalificerar.
• Säkra grannar: Det ligger inte i anslutning till en annan delad layout, tabell, flikkontroll eller tvåkolumns-CTA.
• Användbara etiketter: Etiketter använder parallell grammatik och är aldrig beroende av vänster/höger-position eller färg.
• Längdkontroll: Brödtexter håller sig inom ett eller två stycken och högst 120 ord var.
• Innehållsbegränsning: Ingen nästlad procedur, tabell, formulär, media, marknadsföring eller komplex komponent förekommer inuti.
• Responsiv ordning: Mobil, tangentbord, skärmläsare och kopierad-text-ordning matchar den författade sekvensen.
• Tillgänglig semantik: En synlig rubrik märker det överordnade elementet; underordnade etiketter är rubriker; statiskt innehåll använder inte alert-roller.
• Tonintegritet: Styling återspeglar den faktiska innebörden och förvandlar inte neutrala fakta till bra/dåliga bedömningar.
• Notationslikvärdighet: Markdown, Hugo och WordPress bevarar samma rubrik, etiketter, brödtexter, attribut och ordning.
• Schemarestriktion: Elementet skapar ingen ostödd strukturerad data.

Avvisa elementet om kontrollerna för gemensamt ämne, verklig relation eller falsk symmetri misslyckas. Det är redaktionella brister som en renderare inte kan åtgärda. Skriv om innehållet som prosa, separata avsnitt, en fristående varning eller ett annat syftesanpassat element innan du justerar presentationen.

FAQ

Den strukturerade FAQ:en i frontmatter täcker de implementeringsbeslut som mest sannolikt blir missförstådda: meddelandena behöver inte vara motsatser eller identiska i längd, mobilordning följer källordning, allvarliga risker förblir fristående varningar och elementet skapar ingen egen schema-markup.