Iconbox — Formát, pravidla a příklady

Iconbox spojuje jednu účelnou ikonu s krátkým popiskem a soustředěným vysvětlením. Ikona činí téma rozpoznatelným, popisek jej pojmenovává a text vysvětluje, proč je důležité. Tento element funguje nejlépe jako jeden člen malé skupiny rovnocenných položek, například tři schopnosti produktu nebo čtyři požadavky — nikoliv jako dekorace roztroušená po stránce.

Symbol zaškrtnutí je účelný: posiluje význam ověření, místo aby vyplňoval prázdný roh. Protože viditelný popisek již vyjadřuje stejný význam, je vykreslený symbol skryt před asistenčními technologiemi. Uživatel čtečky obrazovky obdrží kompletní zprávu z textu „Ověřené zdroje“ a jeho vysvětlení, aniž by slyšel redundantní výstup ikony.

Proč na tomto elementu záleží

Čtenáři nezpracovávají každou větu v pořadí. Hledají orientační body, které odpovídají na otázku „Je to o tom, co potřebuji?“ Iconbox vytváří kompaktní vzor rozpoznávání: nejprve tvar, poté popisek, nakonec vysvětlení. V dobře vytvořené skupině mohou čtenáři procházet popisky, identifikovat relevantní kategorii a pak číst pouze ten podpůrný text, který potřebují. Snižuje to námahu spojenou s rozbalováním odstavce obsahujícího několik stejně závažných myšlenek.

Psychologická hodnota pramení z rozpoznávání, chunkování a konzistence. Důvěrně známý štít může evokovat ochranu, hodiny čas a dokument hlášení dříve, než čtenář dočte popisek. Popisek pak odstraňuje nejednoznačnost. Opakovaná geometrie čtenáři sděluje, že položky mají stejnou redakční váhu. Tento signál je užitečný pouze tehdy, pokud je obsah skutečně paralelní; karta s ikonami nemůže proměnit nesouvisející tvrzení v koherentní sadu.

Strojová extrahovatelnost znamená, že software dokáže izolovat jednotku obsahu při zachování jejího tématu a tvrzení. Strukturovaný iconbox zpřístupňuje pojmenovanou položku se stručným tělem a stabilní pozicí v rámci volitelné skupiny. Vyhledávací systémy mohou extrahovat „Ověřené zdroje“ společně s vysvětlením, místo aby hádaly, která věta patří ke kterému vizuálnímu symbolu. Samotná ikona přispívá k extrakci jen málo, proto musí viditelná slova nést celé sdělení.

Ikona musí mít redakční význam. Libovolná třpytka, raketa nebo abstraktní tvar přidává lidem šum a strojům neposkytuje užitečnou sémantiku. „Účelná, ale redundantní“ je platný režim přístupnosti: ikona může pomoci vidícím čtenářům rozpoznat kategorii, zatímco je skryta před asistenčními technologiemi, protože viditelný popisek již poskytuje její význam. Postupujte podle pravidel pro psaní elementů — nejprve napište celou myšlenku a iconbox vyberte až v pozdějším strukturním průchodu. Zde uvedená specifika elementu mají přednost při výběru ikony, seskupování a mapování přístupnosti.

Kdy jej použít

Použijte iconbox, pokud je obsahem jedna stručná, pojmenovaná myšlenka a ikona ze schváleného systému může tuto myšlenku reprezentovat bez dohadování. Skupina je vhodná, když dvě až šest položek odpovídá na stejnou implicitní otázku ve srovnatelné hloubce: „Co je zahrnuto?“, „Která ochranná opatření platí?“ nebo „Co tento pracovní postup vytváří?“ Každá položka by měla zůstat srozumitelná, i když je zkopírována jako prostý text.

Silné použití zahrnuje souhrn funkcí s jedním výsledkem na položku, přehled požadavků před podrobnými instrukcemi, sadu principů služby nebo kompaktní vysvětlení výstupů pracovního postupu. Ikona je pomůcka pro rozpoznávání, nikoliv důkaz. Konkrétní údaje jako formáty souborů, lhůty pro odpověď, podporované systémy nebo vlastnictví stále patří do popisku a těla.

Běžné případy na hraně použití:

• Použijte běžný odrážkový seznam, pokud by ikona byla na každé položce stejné zaškrtnutí. Opakování nenese žádný kategorický význam.
• Použijte srovnávací tabulku, pokud je třeba položky posuzovat podle sdílených kritérií. Samostatné iconboxy ztěžují vzájemné porovnávání.
• Použijte seznam kroků, pokud záleží na pořadí, dokončení nebo závislostech. Řada iconboxů implikuje rovnocennost, nikoliv posloupnost.
• Použijte definiční box, pokud jeden neznámý termín potřebuje formální význam. Ikona neposiluje přesnou definici.
• Použijte varování nebo poznámku, pokud jsou hlavním účelem závažnost a přerušení. Iconbox má neutrální strukturní váhu.
• Použijte plné sekce, pokud každá položka potřebuje několik odstavců, důkazy, média nebo podnadpisy.

Nepoužívejte iconboxy pouze k tomu, aby textem těžká stránka vypadala navrženě. Pokud autor vybírá ikonu hledáním něčeho vizuálně přitažlivého místo sémanticky přesného, obsah tento element pravděpodobně nepotřebuje.

Kam jej umístit

Umístěte samostatný iconbox ihned za odstavec, který podporuje. Skupinu iconboxů umístěte za nadpis a jeden úvodní odstavec, který pojmenuje sdílenou otázku. Tento kontext vysvětluje, proč položky patří k sobě; skupina pak poskytuje kompaktní odpověď. Za skupinou následují podrobnosti, důkazy nebo další rozhodnutí, nikoliv opakování každého boxu v próze.

V článku by se první skupina měla objevit až po přímé odpovědi nebo úvodní definici. Na komerční stránce může skupina schopností následovat po vyjádření problému a výsledku, ale nesmí předcházet hodnotové nabídce pouze proto, aby vytvořila vizuální hero. V dokumentaci umístěte skupinu požadavků před postup, který řídí, přičemž požadované pořadí a akceptační kritéria ponechte v běžných instrukcích.

Neumísťujte skupinu iconboxů přímo vedle jiné mřížky karet, srovnávací tabulky, zdi log, pásu statistik nebo více-sloupcové výzvy k akci. Sousední mřížky zplošťují informační hierarchii a způsobují, že redakční fakta připomínají propagaci. Vložte mezi ně vysvětlující prózu nebo předěl sekce. Neumísťujte iconbox mezi tvrzení a jeho zdroj, mezi krok a jeho očekávaný výsledek, dovnitř buňky tabulky nebo dovnitř jiného iconboxu. Nikdy neumísťujte dvě skupiny bezprostředně za sebe.

Anatomie

Iconbox obsahuje tři autorské oblasti a jeden kontextuální vztah. Screenshot popisuje oblasti nesoucí význam, nikoliv pixelové hodnoty, aby smlouva přežila vizuální redesign.

1. Oblast ikony: Používá jednu schválenou ikonu, jejíž koncept odpovídá položce. Nikdy nenahrazuje viditelná slova.
2. Krátký popisek: Pojmenovává funkci, požadavek, výsledek nebo kategorii konkrétním jazykem.
3. Textové tělo: Vysvětluje důsledek, rozsah nebo důkaz v jednom kompaktním odstavci.
4. Volitelný cíl: Poskytuje jeden popisný další krok při použití varianty s odkazem.
5. Kontext skupiny: Předcházející nadpis nebo přístupný popisek skupiny uvádí otázku, na kterou všechny sourozenecké iconboxy odpovídají.

Okraj, pozadí, zaoblení, velikost ikony, barva, sloupce mřížky a zlomové body náleží rendereru. Autoři volí sémantický obsah, identitu ikony, pořadí ve zdroji a režim přístupnosti.

Příklady designu

Element podporuje čtyři prezentační varianty. Všechny zachovávají stejnou hierarchii ikona–popisek–tělo a stejné pořadí ve zdroji.

Standardní: Výchozí samostatná nebo seskupená karta. Použijte, když tělo potřebuje 25–60 slov k vysvětlení položky.

Kompaktní: Používá tělo o jedné větě (12–30 slov). Je vhodný pro známé koncepty, nikoliv pro komprimaci nuance.

S odkazem: Přidává jeden cíl. Upřednostněte viditelný popisný odkaz. Pokud je celá karta interaktivní, musí renderer poskytnout jediný cílový odkaz a jasný stav fokusu.

Stavový: Sděluje stav, například dostupný, omezený, prošlý nebo čekající. Stavové slovo musí být viditelné; samotná barva ani tvar ikony nesmí být jediným signálem.

Úzké viewport: Libovolná skupina se stává jedním sloupcem v pořadí zdroje. Renderer nesmí přesouvat boxy za účelem vyrovnání jejich výšek.

Režim přístupnosti je oddělený od prezentační varianty. Redundantní ikona je skryta před asistenčními technologiemi, protože její popisek nese stejný význam. Skutečně informativní ikona obdrží programový textový ekvivalent, ale autoři by měli tuto informaci běžně přidat do viditelného popisku, místo aby udržovali fakt pouze v ikoně.

Parametry

Smlouva udržuje autorský význam oddělený od prezentace. Limity platí pro všechny varianty, pokud není uveden přísnější limit.

icon musí být dohledatelný ve schváleném registru ikon; autoři nemohou dodávat libovolné SVG, emoji, URL obrázků ani názvy tříd ikon-fontů. Omezený Markdown umožňuje zvýraznění, inline kód a jeden inline odkaz. Vylučuje vnořené nadpisy, seznamy, tabulky, média, formuláře, tlačítka, accordiony a další komponenty. Pokud první nadpis v těle poskytuje label, adaptér tento nadpis z těla odstraní a vykreslí jej na správné úrovni vůči stránce.

Syntaxe a příklady kódu

Každý zápis mapuje stejnou ikonu, popisek, tělo, variantu a režim přístupnosti. Klíč ikony je sémantický a přenositelný; každá platforma mapuje shield-check na svůj schválený lokální asset.

Přenositelná Markdown direktiva

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Ověřené zdroje

Každé faktické tvrzení odkazuje na zdroj, který může recenzent zkontrolovat, takže důkazy zůstávají viditelné během psaní, schvalování i pozdějších úprav.
:::

První nadpis se stává label; zbývající odstavec se stává content. Ikona je redundantní, protože „Ověřené zdroje“ poskytuje úplný význam ve viditelném textu.

Hugo shortcode

{{< iconbox icon="shield-check" label="Ověřené zdroje" iconMode="redundant" variant="standard" >}}
Každé faktické tvrzení odkazuje na zdroj, který může recenzent zkontrolovat, takže důkazy zůstávají viditelné během psaní, schvalování i pozdějších úprav.
{{< /iconbox >}}

Adaptér používá pouze pojmenované parametry. Musí odmítnout neznámý klíč ikony nebo variantu, místo aby tiše zobrazil fallback, který by mohl změnit význam.

WordPress blok

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Ověřené zdroje","iconMode":"redundant","variant":"standard"} -->
<p>Každé faktické tvrzení odkazuje na zdroj, který může recenzent zkontrolovat, takže důkazy zůstávají viditelné během psaní, schvalování i pozdějších úprav.</p>
<!-- /wp:amicited/iconbox -->

Editor by měl zpřístupnit prohledávatelný výběr schválených ikon, nikoliv pole pro volný text. Jeho náhled přístupného názvu by měl ukazovat, zda je ikona skrytá nebo oznamovaná.

Příklady

Dobrý příklad

Toto funguje, protože symbol dokumentu odpovídá konceptu reportu, popisek pojmenovává konkrétní schopnost a tělo vysvětluje výstup a jeho praktický důsledek. Viditelný text je bez symbolu kompletní, takže symbol lze skrýt před asistenčními technologiemi.

Špatný příklad

Toto selhává na všech úrovních. Raketa je dekorativní, nikoliv přesný kategorický marker, popisek neobsahuje žádnou konkrétní schopnost a tělo neuvádí žádný mechanismus, hranice ani ověřitelný výsledek. Emoji může být také oznamováno nepředvídatelně. Nahraďte blok konkrétním tvrzením — co je rychlejší, jakým mechanismem, za jakých podmínek — nebo jej smažte.

Schema markup a přístupnost

Iconbox nemá vyhrazený typ Schema.org. Jeho popisek a tělo zůstávají obsahem nadřazené entity Article, TechArticle, WebPage, Product nebo jiné stránkové entity, pokud je toto markup jinak odůvodněné. Vizuální skupina není automaticky ItemList; použijte seznamové markup pouze tehdy, pokud je sada v obsahovém modelu úplná nebo uspořádaná. Stavový iconbox neodůvodňuje vlastnosti Review, Rating ani availability bez požadovaných podkladových dat.

Vykreslete neinteraktivní iconbox jako section, pokud je součástí hlavního argumentu, nebo jako aside, pokud je doplňkový. Poskytněte mu přístupný název prostřednictvím viditelného popisku. Použijte skutečný nadpis na správné úrovni; nevolte h3 jen proto, že jeho výchozí velikost písma vypadá správně. Opakované rovnocenné položky mohou být uvnitř seznamu, pokud skupina skutečně je seznam, přičemž každý iconbox je v jedné položce seznamu.

Většina ikon by měla být inline SVG s aria-hidden="true" a focusable="false", protože viditelný popisek opakuje jejich význam. To z nich redakčně nedělá dekoraci: stále pomáhají vizuálnímu rozpoznávání, ale oznamování stejného konceptu dvakrát přidává šum. Pokud ikona sděluje informaci, která v popisku chybí, poskytněte přístupný textový ekvivalent prostřednictvím mapování iconText komponenty. Ještě lépe, přepracujte viditelný popisek tak, aby všichni čtenáři obdrželi danou informaci.

Nikdy nespoléhejte pouze na barvu, pozici, pohyb nebo tvar ikony. Zelené zaškrtnutí potřebuje viditelný text jako „Prošlo“; zámek potřebuje „Omezeno“ nebo přesnou podmínku přístupu. Ikony vyžadují dostatečný kontrast vůči svému pozadí, ale barevné tokeny vlastní renderer. Dekorativní ozdoby, které nic nesdělují, by měly být odstraněny, nikoliv opatřeny podrobným alternativním textem. Vyhněte se alt="icon", názvům souborů, názvům Unicode glyfů a duplicitnímu textu jako „Štít, Ověřené zdroje.“

U varianty s odkazem má jeden iconbox jeden cíl. Interaktivní název musí tento cíl sdělovat, fokus klávesnice musí být viditelný a klikací oblast nesmí obsahovat jiný odkaz nebo tlačítko. Najetí myší nesmí odhalovat podstatný text. Pořadí čtení a klávesnice musí odpovídat pořadí zdroje při každé šířce viewportu.

Pravidla psaní

Napište popisek před výběrem ikony. Popisek by měl být konkrétní podstatné jméno nebo krátký výsledek: „Řízení přístupu na základě rolí,“ „Týdenní export“ nebo „Lidská revize.“ Udržujte popisky v rámci skupiny gramaticky paralelní. Vyhněte se obecným tvrzením jako „Výkonný,“ „Bezproblémový,“ „Inovativní“ a „Nejlepší ve své třídě,“ protože nepojmenovávají ani schopnost, ani rozhodnutí.

Použijte 2–6 slov a maximálně 55 znaků pro popisek. Použijte jeden odstavec těla o 12–60 slovech; kompaktní varianta by měla zůstat v rozmezí 12–30. Začněte konkrétním mechanismem, rozsahem nebo výsledkem. Udržujte klidný, faktický tón. Pokud kvalifikace mění příslib, uveďte ji ve stejném boxu, nikoliv ve vzdáleném drobném písmu.

Použijte dva až šest boxů na skupinu. Dejte každé položce srovnatelnou hloubku a zajistěte, aby odpovídaly na stejnou otázku. Řaďte podle priority čtenáře, logiky pracovního postupu nebo uvedené kategorie — nikoliv podle toho, která ikona vypadá nejlépe. Nepoužívejte stejnou ikonu pro různé významy v rámci jedné skupiny a nepoužívejte více vizuálních stylů nebo rodin ikon dohromady.

Nikdy neumísťujte do iconboxu:

• Dlouhý inventář funkcí, vícestupňový postup, vnořený odrážkový seznam, tabulku, formulář, reference, cenu nebo právní vyloučení odpovědnosti.
• Popisek tvořený pouze ikonou, nevysvětlenou zkratku nebo stav vyjádřený pouze barvou.
• Více než jeden odkaz, konkurenční výzvy k akci nebo tlačítko uvnitř celokaretního odkazu.
• Screenshot, video, graf, logo, fotografii nebo jiný iconbox.
• Důkaz, který se týká několika boxů, ale objevuje se pouze v jednom, čímž skupina působí nevyváženě nebo zavádějícím dojmem.

Pokud obsah překračuje tyto limity, povýšte jej na běžnou sekci. Pokud každá položka potřebuje stejné zaškrtnutí, odstraňte ikony a použijte seznam. Pokud popisky nedávají smysl bez svých obrázků, přepište popisky před publikováním.

Typy článků, které jej používají

Pole postTypes v frontmatter je zdrojem pro tuto tabulku. Uvedení znamená, že element je k dispozici, pokud obsah tvoří skutečnou skupinu rovnocenných položek, nikoliv že každá stránka daného typu by měla obsahovat iconboxy.

QA checklist

• Účelná ikona: Každá ikona má zřejmý vztah ke svému popisku; její odstranění by snížilo vizuální rozpoznání, nikoliv faktický význam.
• Kompletní viditelný text: Popisek a tělo sdělují celé tvrzení bez spoléhání na ikonu, barvu nebo pozici.
• Správný režim přístupnosti: Redundantní ikony jsou skryté; informativní ikony mají stručný textový ekvivalent a zdokumentovaný důvod.
• Skutečná rovnocenná skupina: Sourozenci odpovídají na stejnou otázku, mají srovnatelnou hloubku a používají paralelní gramatiku popisků.
• Bezpečný počet: Skupina obsahuje dvě až šest položek; větší sady jsou kategorizovány nebo přesunuty do vhodnější struktury.
• Přesný text: Popisky pojmenovávají konkrétní schopnosti, požadavky, stavy nebo výsledky; těla uvádějí mechanismus, rozsah nebo důsledek.
• Platný zdroj ikony: Každý klíč ikony existuje ve schváleném registru a není autorizováno žádné emoji, libovolné SVG, URL obrázku ani název třídy ikon-fontů.
• Správné umístění: Skupina následuje svůj rámující kontext a neodděluje tvrzení od zdrojů, kroky od výsledků ani varování od dotčených akcí.
• Bezpeční sousedé: Žádná mřížka karet, tabulka, zeď log, pás statistik ani více-sloupcová CTA nesedí přímo vedle skupiny.
• Přístupná struktura: Úrovně nadpisů odpovídají dokumentu, kontrast je dostatečný, stav má viditelný text a pořadí zdroje odpovídá pořadí čtení.
• Omezení interakce: Iconbox s odkazem má jeden cíl, popisný název, viditelný stav fokusu a žádný vnořený interaktivní ovládací prvek.
• Parita zápisu: Přenositelný Markdown, Hugo a WordPress zachovávají stejný klíč ikony, popisek, obsah, variantu a chování přístupnosti.
• Omezení schema: Komponenta nepřidává samostatné schema a neodvozuje vlastnosti ItemList nebo stav z vzhledu.
• Responzivní ověření: Při úzkých šířkách se boxy skládají v pořadí zdroje bez ořezávání, horizontálního scrollování nebo skrytého podstatného textu.

Odmítněte element, pokud je jeho ikona libovolná, popisek vágní nebo viditelný text závislý na symbolu. Jsou to vady obsahového modelu; změna mezer, barev nebo stylu ilustrací je nemůže napravit.

FAQ

Frontmatter FAQ pokrývá velikost skupiny, alternativní text, karty s odkazy, emoji a chování schema. Uchovávání schválených odpovědí ve strukturovaném frontmatteru umožňuje layoutu academy je konzistentně vykreslovat bez duplikování stejných otázek v těle článku.