Iconbox — Formato, Regole ed Esempi

Un iconbox abbina un’icona mirata a una breve etichetta e una spiegazione focalizzata. L’icona rende riconoscibile l’argomento, l’etichetta lo nomina e il testo spiega perché è importante. L’elemento funziona meglio come membro di un piccolo gruppo di pari, ad esempio tre capacità del prodotto o quattro requisiti — non come decorazione sparsa in una pagina.

Il simbolo di spunta è mirato: rafforza il concetto di verifica invece di riempire uno spazio vuoto. Poiché l’etichetta visibile esprime già lo stesso significato, il simbolo renderizzato è nascosto alla tecnologia assistiva. Un utente di screen reader riceve il messaggio completo da “Fonti verificate” e dalla sua spiegazione senza sentire output ridondanti dell’icona.

Perché questo elemento è importante

I lettori non elaborano ogni frase in ordine. Cercano punti di riferimento che rispondano a “Riguarda ciò di cui ho bisogno?”. Un iconbox crea uno schema di riconoscimento compatto: prima la forma, poi l’etichetta, poi la spiegazione. In un gruppo ben formato, i lettori possono scansionare le etichette, identificare una categoria rilevante e leggere solo il testo di supporto di cui hanno bisogno. Questo riduce lo sforzo di decifrare un paragrafo che contiene diverse idee ugualmente importanti.

Il valore psicologico deriva dal riconoscimento, dal raggruppamento e dalla coerenza. Uno scudo familiare può suggerire protezione, un orologio può suggerire tempo e un documento può suggerire reportistica prima ancora che il lettore finisca di leggere l’etichetta. L’etichetta poi rimuove l’ambiguità. La geometria ripetuta comunica al lettore che gli elementi hanno lo stesso rango editoriale. Questo segnale è utile solo quando il contenuto è veramente parallelo; una griglia di card non può trasformare affermazioni non correlate in un insieme coerente.

L’estraibilità automatica significa che il software può isolare un’unità di contenuto mantenendo il suo soggetto e la sua affermazione. Un iconbox strutturato espone un elemento nominato con un corpo conciso e una posizione stabile all’interno di un gruppo opzionale. I sistemi di recupero possono estrarre “Fonti verificate” insieme alla sua spiegazione invece di dover indovinare quale frase appartiene a quale simbolo visivo. L’icona in sé contribuisce poco all’estrazione, quindi le parole visibili devono veicolare l’intera proposizione.

L’icona deve comunque avere un significato editoriale. Una scintilla, un razzo o una forma astratta arbitrari aggiungono rumore per le persone e nessuna semantica utile per le macchine. “Mirata ma ridondante” è una modalità di accessibilità valida: un’icona può aiutare i lettori vedenti a riconoscere una categoria pur essendo nascosta alla tecnologia assistiva perché l’etichetta visibile ne fornisce già il significato. Segui le regole di scrittura degli elementi redigendo prima l’idea completa e selezionando l’iconbox solo nel passaggio strutturale successivo. I limiti specifici dell’elemento qui indicati hanno la precedenza per la scelta dell’icona, il raggruppamento e la mappatura dell’accessibilità.

Quando usarlo

Usa un iconbox quando il contenuto è un’idea concisa e nominata e un’icona del sistema approvato può rappresentare quell’idea senza incertezze. Un gruppo è appropriato quando da due a sei elementi rispondono alla stessa domanda implicita con profondità comparabile: “Cosa è incluso?”, “Quali garanzie si applicano?” o “Cosa produce questo flusso di lavoro?”. Ogni elemento dovrebbe rimanere comprensibile quando copiato come testo semplice.

Gli usi efficaci includono un riepilogo di funzionalità con un risultato per elemento, una panoramica dei requisiti prima di istruzioni dettagliate, un insieme di principi di servizio o una spiegazione compatta degli output del flusso di lavoro. L’icona è un aiuto al riconoscimento, non la prova. Dettagli come formati di file, finestre di risposta, sistemi supportati o responsabilità appartengono comunque all’etichetta e al corpo.

I casi quasi-corretti sono comuni:

• Usa un normale elenco puntato quando l’icona sarebbe la stessa spunta su ogni elemento. La ripetizione non trasmette alcun significato di categoria.
• Usa una tabella di confronto quando gli elementi devono essere giudicati secondo criteri condivisi. Iconbox separati rendono più difficile il confronto incrociato.
• Usa un elenco di passaggi quando l’ordine, il completamento o la dipendenza sono importanti. Una riga di iconbox implica elementi pari, non una sequenza.
• Usa un box di definizione quando un termine poco familiare necessita di un significato formale. Un’icona non rafforza una definizione precisa.
• Usa un avviso o una nota quando la gravità e l’interruzione sono i compiti principali. Un iconbox ha un peso strutturale neutro.
• Usa sezioni complete quando ogni elemento necessita di diversi paragrafi, prove, media o sottotitoli.

Non usare gli iconbox solo per rendere più accattivante una pagina ricca di testo. Se l’autore sceglie l’icona dopo aver cercato qualcosa di visivamente attraente piuttosto che semanticamente accurato, probabilmente il contenuto non ha bisogno di questo elemento.

Dove posizionarlo

Posiziona un iconbox singolo immediatamente dopo il paragrafo che supporta. Posiziona un gruppo di iconbox dopo un titolo e un paragrafo introduttivo che nomina la domanda condivisa. Questo contesto spiega perché gli elementi appartengono insieme; il gruppo fornisce quindi la risposta compatta. Segui il gruppo con dettagli, prove o la decisione successiva, invece di ripetere ogni box in prosa.

In un articolo, il primo gruppo dovrebbe apparire solo dopo la risposta diretta o la definizione iniziale. In una pagina commerciale, un gruppo di capacità può seguire l’affermazione del problema e del risultato, ma non deve precedere la proposta di valore solo per creare un eroe visivo. Nella documentazione, posiziona un gruppo di requisiti prima della procedura che governa, mantenendo la sequenza obbligatoria e i criteri di accettazione nelle istruzioni ordinarie.

Non posizionare un gruppo di iconbox direttamente accanto a un’altra griglia di card, una tabella di confronto, un logo wall, una banda di statistiche o un invito all’azione a più colonne. Griglie adiacenti appiattiscono la gerarchia informativa e fanno sembrare i fatti editoriali simili a promozioni. Inserisci prosa esplicativa o un confine di sezione tra di essi. Non mettere un iconbox tra un’affermazione e la sua fonte, tra un passaggio e il suo risultato atteso, all’interno di una cella di tabella o all’interno di un altro iconbox. Non posizionare mai due gruppi uno dietro l’altro.

Anatomia

Un iconbox contiene tre aree redazionali e una relazione contestuale. Lo screenshot etichetta le aree portatrici di significato piuttosto che i valori in pixel, in modo che il contratto sopravviva ai restyling visivi.

1. Area icona: Utilizza un’icona approvata il cui concetto corrisponde all’elemento. Non sostituisce mai le parole visibili.
2. Breve etichetta: Nomina la funzionalità, il requisito, il risultato o la categoria in linguaggio concreto.
3. Corpo del testo: Spiega la conseguenza, l’ambito o la prova in un paragrafo compatto.
4. Destinazione opzionale: Fornisce un passo successivo descrittivo quando viene utilizzata la variante collegata.
5. Contesto di gruppo: Un titolo precedente o un’etichetta di gruppo accessibile indica la domanda a cui rispondono tutti gli iconbox fratelli.

Bordi, sfondo, raggio, dimensione dell’icona, colore, colonne della griglia e breakpoint appartengono al renderer. Gli autori scelgono il contenuto semantico, l’identità dell’icona, l’ordine di origine e la modalità di accessibilità.

Esempi di design

L’elemento supporta quattro varianti di presentazione. Tutte preservano la stessa gerarchia icona-etichetta-corpo e lo stesso ordine di origine.

Standard: La card predefinita, singola o raggruppata. Usala quando il corpo necessita di 25–60 parole per spiegare un elemento.

Compatta: Utilizza un corpo di una frase di 12–30 parole. È adatta per concetti familiari, non per comprimere una qualifica articolata.

Collegata: Aggiunge una destinazione. Preferisci un link descrittivo visibile. Se l’intera card è interattiva, il renderer deve fornire un unico target di link e uno stato focus chiaro.

Stato: Comunica uno stato come disponibile, limitato, superato o in attesa. La parola dello stato deve essere visibile; né il colore né la forma dell’icona possono essere l’unico segnale.

Viewport stretto: Qualsiasi gruppo diventa una colonna nell’ordine di origine. Il renderer non deve riordinare i box per bilanciare le loro altezze.

La modalità di accessibilità è separata dalla variante di presentazione. Un’icona ridondante è nascosta alla tecnologia assistiva perché la sua etichetta porta lo stesso significato. Un’icona veramente informativa riceve un equivalente testuale programmatico, ma gli autori dovrebbero normalmente aggiungere quelle informazioni all’etichetta visibile invece di mantenere un fatto basato solo sull’icona.

Parametri

Il contratto mantiene il significato redazionale separato dalla presentazione. I limiti si applicano a ogni variante, salvo dove indicato un limite più restrittivo.

icon deve essere risolta tramite il registro delle icone approvate; gli autori non possono fornire SVG arbitrari, emoji, URL di immagini o nomi di classi di font di icone. Il Markdown limitato consente enfasi, codice inline e un link inline. Esclude titoli annidati, elenchi, tabelle, media, moduli, pulsanti, accordion e altri componenti. Quando il primo titolo del corpo fornisce label, l’adattatore rimuove quel titolo dal corpo e lo renderizza al livello corretto relativo alla pagina.

Sintassi ed esempi di codice

Ogni notazione corrisponde alla stessa icona, etichetta, corpo, variante e modalità di accessibilità. La chiave dell’icona è semantica e portabile; ogni piattaforma associa shield-check al proprio asset locale approvato.

Direttiva Markdown portabile

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Fonti verificate

Ogni affermazione fattuale collega a una fonte che un revisore può controllare, così le prove rimangono visibili durante la scrittura, l'approvazione e gli aggiornamenti successivi.
:::

Il primo titolo diventa label; il paragrafo rimanente diventa content. L’icona è ridondante perché “Fonti verificate” fornisce il significato completo nel testo visibile.

Shortcode Hugo

{{< iconbox icon="shield-check" label="Fonti verificate" iconMode="redundant" variant="standard" >}}
Ogni affermazione fattuale collega a una fonte che un revisore può controllare, così le prove rimangono visibili durante la scrittura, l'approvazione e gli aggiornamenti successivi.
{{< /iconbox >}}

L’adattatore utilizza solo parametri nominati. Deve rifiutare una chiave icona o una variante sconosciuta invece di visualizzare silenziosamente un fallback che potrebbe alterare il significato.

Blocco WordPress

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Fonti verificate","iconMode":"redundant","variant":"standard"} -->
<p>Ogni affermazione fattuale collega a una fonte che un revisore può controllare, così le prove rimangono visibili durante la scrittura, l'approvazione e gli aggiornamenti successivi.</p>
<!-- /wp:amicited/iconbox -->

L’editor dovrebbe esporre un selettore di icone approvate ricercabile, non un campo asset a testo libero. La sua anteprima del nome accessibile dovrebbe mostrare se l’icona è nascosta o annunciata.

Esempi

Esempio corretto

Funziona perché il simbolo del documento corrisponde al concetto di report, l’etichetta nomina una capacità concreta e il corpo spiega l’output e la sua conseguenza pratica. Il testo visibile è completo senza il simbolo, quindi il simbolo può essere nascosto alla tecnologia assistiva.

Esempio errato

Fallisce a ogni livello. Il razzo è decorativo anziché un indicatore di categoria accurato, l’etichetta non contiene alcuna capacità specifica e il corpo non fornisce alcun meccanismo, confine o risultato verificabile. L’emoji potrebbe anche essere annunciata in modo imprevedibile. Sostituisci il blocco con un’affermazione concreta — cosa diventa più veloce, con quale meccanismo, a quali condizioni — o eliminalo.

Markup schema e accessibilità

Iconbox non ha un tipo Schema.org dedicato. La sua etichetta e il suo corpo rimangono contenuto dell’Article, TechArticle, WebPage, Product o altra entità a livello di pagina che lo contiene, quando tale markup è altrimenti giustificato. Un gruppo visivo non è automaticamente un ItemList; usa il markup di elenco solo quando l’insieme è completo o ordinato nel modello di contenuto. Un iconbox di stato non giustifica proprietà di Review, Rating o disponibilità senza i dati sottostanti richiesti.

Rendering di un iconbox non interattivo come section quando fa parte dell’argomentazione principale o come aside quando è supplementare. Dagli un nome accessibile tramite l’etichetta visibile. Usa un titolo reale al livello corretto; non scegliere h3 solo perché la sua dimensione del carattere predefinita sembra giusta. Elementi pari ripetuti possono stare all’interno di un elenco quando il gruppo è veramente un elenco, con ogni iconbox in un elemento dell’elenco.

La maggior parte delle icone dovrebbe essere SVG inline con aria-hidden="true" e focusable="false", perché l’etichetta visibile ripete il loro significato. Questo non le rende editorialmente decorative: aiutano comunque il riconoscimento visivo, ma annunciare lo stesso concetto due volte aggiunge rumore. Se un’icona comunica informazioni assenti dall’etichetta, fornisci un equivalente testuale accessibile tramite la mappatura iconText del componente. Meglio ancora, rivedi l’etichetta visibile in modo che tutti i lettori ricevano l’informazione.

Non fare mai affidamento solo su colore, posizione, movimento o forma dell’icona. Un segno di spunta verde necessita di testo visibile come “Superato”; un lucchetto necessita di “Limitato” o della condizione di accesso esatta. Le icone richiedono contrasto sufficiente rispetto allo sfondo, ma il renderer gestisce i token di colore. Gli ornamenti decorativi che non trasmettono nulla dovrebbero essere rimossi, non dotati di testo alternativo verboso. Evita alt="icona", nomi di file, nomi di glifi Unicode e testo duplicato come “Scudo, Fonti verificate.”

Per la variante collegata, un iconbox ha una destinazione. Il nome interattivo deve comunicare quella destinazione, il focus della tastiera deve essere visibile e l’area cliccabile non deve contenere un altro link o pulsante. Il passaggio del mouse non può rivelare testo essenziale. L’ordine di lettura e della tastiera deve corrispondere all’ordine di origine a qualsiasi larghezza del viewport.

Regole di scrittura

Scrivi l’etichetta prima di selezionare l’icona. L’etichetta dovrebbe essere una frase nominale concreta o un risultato breve: “Accesso basato sui ruoli,” “Esportazione settimanale,” o “Revisione umana.” Mantieni le etichette grammaticalmente parallele tra pari. Evita affermazioni generiche come “Potente,” “Senza soluzione di continuità,” “Innovativo,” e “Miglior della categoria,” perché non nominano né una capacità né una decisione.

Usa 2–6 parole e non più di 55 caratteri per l’etichetta. Usa un paragrafo del corpo di 12–60 parole; la variante compatta dovrebbe rimanere entro 12–30. Inizia con il meccanismo, l’ambito o il risultato specifico. Mantieni un tono calmo e fattuale. Se una qualifica modifica la promessa, inseriscila nello stesso box anziché in caratteri piccoli distanti.

Usa da due a sei box per gruppo. Dai a ogni elemento profondità comparabile e falli rispondere alla stessa domanda. Ordina per priorità del lettore, logica del flusso di lavoro o una categoria dichiarata — non in base a quale icona sia più bella. Non usare la stessa icona per significati diversi all’interno di un gruppo e non usare più stili visivi o famiglie di icone insieme.

Non mettere mai questi elementi all’interno di un iconbox:

• Un lungo inventario di funzionalità, una procedura a più passaggi, un elenco puntato annidato, una tabella, un modulo, una testimonianza, un prezzo o un disclaimer legale.
• Un’etichetta composta solo da icona, un acronimo non spiegato o uno stato espresso solo dal colore.
• Più di un link, inviti all’azione concorrenti o un pulsante all’interno di un link che copre l’intera card.
• Uno screenshot, un video, un grafico, un logo, una fotografia o un altro iconbox.
• Prove che si applicano a più box ma appaiono in uno solo, rendendo il gruppo disomogeneo o fuorviante.

Se il contenuto supera questi limiti, promuovilo in una sezione normale. Se ogni elemento necessita della stessa spunta, rimuovi le icone e usa un elenco. Se le etichette non hanno senso senza le loro immagini, riscrivi le etichette prima di pubblicare.

Tipi di post che lo utilizzano

Il campo frontmatter postTypes è la fonte di questa tabella. L’inclusione significa che l’elemento è disponibile quando il contenuto forma un autentico insieme di pari, non che ogni pagina di quel tipo debba contenere iconbox.

Checklist QA

• Icona mirata: Ogni icona ha una relazione evidente con la sua etichetta; rimuoverla ridurrebbe il riconoscimento visivo, non il significato fattuale.
• Testo visibile completo: L’etichetta e il corpo comunicano l’intera proposizione senza dipendere dall’icona, dal colore o dalla posizione.
• Modalità di accessibilità corretta: Le icone ridondanti sono nascoste; le icone informative hanno un equivalente testuale conciso e un motivo documentato.
• Vero gruppo di pari: Gli elementi fratelli rispondono alla stessa domanda, hanno profondità comparabile e usano una grammatica dell’etichetta parallela.
• Conteggio sicuro: Un gruppo contiene da due a sei elementi; insiemi più grandi vengono categorizzati o spostati in una struttura più adatta.
• Testo preciso: Le etichette nominano capacità, requisiti, stati o risultati concreti; i corpi forniscono un meccanismo, ambito o conseguenza.
• Fonte icona valida: Ogni chiave icona esiste nel registro approvato e non vengono utilizzate emoji, SVG arbitrari, URL di immagini o nomi di classi di font di icone.
• Posizionamento corretto: Il gruppo segue il suo contesto di inquadramento e non separa le affermazioni dalle fonti, i passaggi dai risultati o gli avvisi dalle azioni interessate.
• Vicinanza sicura: Nessuna griglia di card, tabella, logo wall, banda di statistiche o CTA a più colonne si trova direttamente accanto al gruppo.
• Struttura accessibile: I livelli dei titoli seguono il documento, il contrasto è sufficiente, lo stato ha testo visibile e l’ordine di origine corrisponde all’ordine di lettura.
• Limitazione dell’interazione: Un iconbox collegato ha una destinazione, un nome descrittivo, uno stato focus visibile e nessun controllo interattivo annidato.
• Parità di notazione: Markdown portabile, Hugo e WordPress preservano la stessa chiave icona, etichetta, contenuto, variante e comportamento di accessibilità.
• Limitazione dello schema: Il componente non aggiunge schema autonomo e non deduce proprietà ItemList o di stato dall’aspetto.
• Verifica responsive: A larghezze ridotte, i box si impilano nell’ordine di origine senza tagli, scorrimento orizzontale o testo essenziale nascosto.

Rifiuta l’elemento se la sua icona è arbitraria, la sua etichetta è vaga o il suo testo visibile dipende dal simbolo. Questi sono difetti del modello di contenuto; modificare spaziatura, colore o stile dell’illustrazione non può ripararli.

FAQ

Il FAQ nel frontmatter copre la dimensione del gruppo, il testo alternativo, le card collegate, le emoji e il comportamento dello schema. Mantenere le risposte approvate nel frontmatter strutturato permette al layout dell’academy di renderizzarle coerentemente senza duplicare le stesse domande nel corpo dell’articolo.