Iconbox — Formaat, Regels en Voorbeelden

Een iconbox combineert één doelgericht icoon met een kort label en een gerichte uitleg. Het icoon maakt het onderwerp herkenbaar, het label benoemt het en de tekst legt uit waarom het belangrijk is. Het element werkt het beste als één lid van een kleine gelijkwaardige groep, zoals drie productmogelijkheden of vier vereisten — niet als decoratie verspreid over een pagina.

Het vinkje is doelgericht: het versterkt verificatie in plaats van een lege hoek op te vullen. Omdat het zichtbare label dezelfde betekenis al aangeeft, wordt het weergegeven symbool verborgen voor ondersteunende technologie. Een schermvoorlezergebruiker ontvangt de volledige boodschap van ‘Geverifieerde bronnen’ en de uitleg zonder overbodige icoonuitvoer te horen.

Waarom dit element belangrijk is

Lezers verwerken niet elke zin in volgorde. Ze zoeken naar herkenningspunten die antwoord geven op de vraag: ‘Gaat dit over wat ik nodig heb?’ Een iconbox creëert een compact herkenningspatroon: eerst vorm, dan label, dan uitleg. In een goed gevormde groep kunnen lezers de labels scannen, een relevante categorie identificeren en vervolgens alleen de ondersteunende tekst lezen die ze nodig hebben. Dit vermindert de moeite om een alinea te ontleden die verschillende even belangrijke ideeën bevat.

De psychologische waarde komt van herkenning, chunking en consistentie. Een bekend schild kan bescherming signaleren, een klok kan tijd signaleren en een document kan rapportage signaleren voordat de lezer het label uitleest. Het label verwijdert vervolgens de dubbelzinnigheid. Herhaalde geometrie vertelt de lezer dat de items dezelfde redactionele rang hebben. Dat signaal is alleen nuttig wanneer de inhoud echt parallel is; een kaartenraster kan geen verband houden van ongerelateerde beweringen tot een samenhangende set.

Machine-extraheerbaarheid betekent dat software een content-eenheid kan isoleren met behoud van het onderwerp en de bewering. Een gestructureerde iconbox stelt een benoemd item bloot met een beknopte body en een stabiele positie binnen een optionele groep. Retrievalsystemen kunnen ‘Geverifieerde bronnen’ samen met de uitleg extraheren in plaats van te raden welke zin bij welk visueel symbool hoort. Het icoon zelf draagt weinig bij aan extractie, dus de zichtbare woorden moeten de volledige propositie bevatten.

Het icoon moet nog steeds redactionele betekenis hebben. Een willekeurige glitter, raket of abstracte vorm voegt ruis toe voor mensen en geen bruikbare semantiek voor machines. ‘Doelgericht maar overbodig’ is een geldige toegankelijkheidsmodus: een icoon kan ziende lezers helpen een categorie te herkennen terwijl het wordt verborgen voor ondersteunende technologie omdat het zichtbare label de betekenis al geeft. Volg de schrijfregels voor elementen door eerst het volledige idee op te stellen en pas in een latere structurele stap de iconbox te selecteren. De elementspecifieke limieten hier hebben voorrang bij icoonkeuze, groepering en toegankelijkheidstoewijzing.

Wanneer te gebruiken

Gebruik een iconbox wanneer de inhoud één beknopt, benoemd idee is en een icoon uit het goedgekeurde systeem dat idee kan weergeven zonder giswerk. Een groep is geschikt wanneer twee tot zes items dezelfde impliciete vraag beantwoorden met vergelijkbare diepgang: ‘Wat is inbegrepen?’, ‘Welke waarborgen zijn van toepassing?’ of ‘Wat levert deze workflow op?’ Elk item moet begrijpelijk blijven wanneer het als platte tekst wordt gekopieerd.

Sterke toepassingen zijn onder meer een functiesamenvatting met één resultaat per item, een overzicht van vereisten voorafgaand aan gedetailleerde instructies, een reeks serviceprincipes of een compacte uitleg van workflowresultaten. Het icoon is een herkenningshulpmiddel, niet het bewijs. Specifieke zaken zoals bestandsindelingen, reactietijden, ondersteunde systemen of eigenaarschap horen nog steeds in het label en de body thuis.

Bijna-goede gevallen komen vaak voor:

• Gebruik een gewone opsommingslijst wanneer het icoon op elk item dezelfde vink zou zijn. Herhaling geeft geen categoriebetekenis.
• Gebruik een vergelijkingstabel wanneer items moeten worden beoordeeld op gedeelde criteria. Aparte iconboxes maken vergelijking tussen items moeilijker.
• Gebruik een stappenlijst wanneer volgorde, voltooiing of afhankelijkheid van belang is. Een rij iconboxes impliceert gelijkwaardigen, geen volgorde.
• Gebruik een definitiebox wanneer een onbekende term een formele betekenis nodig heeft. Een icoon versterkt geen precieze definitie.
• Gebruik een waarschuwing of opmerking wanneer ernst en onderbreking de belangrijkste functies zijn. Een iconbox heeft neutraal structureel gewicht.
• Gebruik volledige secties wanneer elk item meerdere alinea’s, bewijs, media of subkoppen nodig heeft.

Gebruik iconboxes niet alleen om een tekstrijke pagina er ontworpen uit te laten zien. Als de auteur het icoon kiest na te zoeken naar iets visueel aantrekkelijks in plaats van semantisch nauwkeurigs, heeft de inhoud dit element waarschijnlijk niet nodig.

Waar te plaatsen

Plaats een zelfstandige iconbox direct na de alinea die deze ondersteunt. Plaats een iconboxgroep na een kop en één inleidende alinea die de gedeelde vraag benoemt. Deze context verklaart waarom de items bij elkaar horen; de groep geeft vervolgens het compacte antwoord. Volg de groep met details, bewijs of de volgende beslissing in plaats van elke box in proza te herhalen.

In een artikel moet de eerste groep pas verschijnen na het directe antwoord of de openingsdefinitie. Op een commerciële pagina mag een capaciteitengroep volgen op de probleem- en resultaatstelling, maar mag deze niet voorafgaan aan de waardepropositie alleen om een visuele hero te creëren. Plaats in documentatie een vereistengroep vóór de procedure die deze regelt, terwijl de vereiste volgorde en acceptatiecriteria in gewone instructies blijven.

Plaats een iconboxgroep niet direct naast een ander kaartenraster, een vergelijkingstabel, een logomuur, een statistiekenbalk of een meerkolommige call-to-action. Aangrenzende rasters maken de informatiestructuur vlak en laten redactionele feiten op promoties lijken. Voeg verklarend proza of een sectiegrens tussen beide in. Plaats geen iconbox tussen een bewering en de bron, tussen een stap en het verwachte resultaat, in een tabelcel of in een andere iconbox. Plaats nooit twee groepen rug aan rug.

Anatomie

Een iconbox bevat drie geschreven gebieden en één contextuele relatie. De schermafbeelding labelt betekenisvolle gebieden in plaats van pixelwaarden, zodat het contract visuele herontwerpen overleeft.

1. Icoongebied: Gebruikt één goedgekeurd icoon waarvan het concept overeenkomt met het item. Het vervangt nooit zichtbare woorden.
2. Kort label: Benoemt de functie, vereiste, uitkomst of categorie in concrete taal.
3. Tekstbody: Legt het gevolg, de reikwijdte of het bewijs uit in één compacte alinea.
4. Optionele bestemming: Geeft één beschrijvende volgende stap wanneer de gelinkte variant wordt gebruikt.
5. Groepscontext: Een voorafgaande kop of toegankelijk groeplabel geeft de vraag aan die alle zuster-iconboxes beantwoorden.

Rand, achtergrond, radius, icoonformaat, kleur, rasterkolommen en breekpunten behoren tot de renderer. Auteurs kiezen semantische inhoud, icoonidentiteit, bronvolgorde en toegankelijkheidsmodus.

Ontwerpvoorbeelden

Het element ondersteunt vier presentatievarianten. Alle behouden dezelfde icoon-label-body-hiërarchie en dezelfde bronvolgorde.

Standaard: De standaard zelfstandige of gegroepeerde kaart. Gebruik dit wanneer de body 25–60 woorden nodig heeft om een item uit te leggen.

Compact: Gebruikt een body van één zin van 12–30 woorden. Het is geschikt voor bekende concepten, niet voor het samenvatten van een genuanceerde kwalificatie.

Gelinkt: Voegt één bestemming toe. Geef de voorkeur aan een zichtbare beschrijvende link. Als de hele kaart interactief is, moet de renderer één linkdoel en een duidelijke focusstatus bieden.

Status: Communiceert een status zoals beschikbaar, beperkt, geslaagd of in behandeling. Het statuswoord moet zichtbaar zijn; noch kleur noch icoonvorm mag het enige signaal zijn.

Smalle viewport: Elke groep wordt één kolom in bronvolgorde. De renderer mag boxes niet herordenen om hun hoogtes in evenwicht te brengen.

Toegankelijkheidsmodus is gescheiden van presentatievariant. Een overbodig icoon wordt verborgen voor ondersteunende technologie omdat het label dezelfde betekenis draagt. Een werkelijk informatief icoon krijgt een programmatisch tekstequivalent, maar auteurs moeten die informatie normaal gesproken aan het zichtbare label toevoegen in plaats van een icoon-only feit te onderhouden.

Parameters

Het contract houdt de betekenis van de auteur gescheiden van de presentatie. Limieten gelden voor elke variant, tenzij een striktere limiet wordt vermeld.

icon moet worden omgezet via het goedgekeurde icoonregister; auteurs kunnen geen willekeurige SVG, emoji, afbeeldings-URL’s of icoonlettertype-klassenamen aanleveren. Beperkte Markdown staat nadruk, inline code en één inline link toe. Het sluit geneste koppen, lijsten, tabellen, media, formulieren, knoppen, accordeons en andere componenten uit. Wanneer de eerste body-kop het label levert, verwijdert de adapter die kop uit de body en geeft deze weer op het juiste paginarelatieve niveau.

Syntax en codevoorbeelden

Elke notatie verwijst naar hetzelfde icoon, label, body, variant en toegankelijkheidsmodus. De icoonsleutel is semantisch en draagbaar; elke platform wijst shield-check toe aan het goedgekeurde lokale asset.

Draagbare Markdown-richtlijn

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Geverifieerde bronnen

Elke feitelijke claim linkt naar een bron die een beoordelaar kan inzien, zodat bewijs zichtbaar blijft tijdens het schrijven, de goedkeuring en latere updates.
:::

De eerste kop wordt label; de resterende alinea wordt content. Het icoon is overbodig omdat ‘Geverifieerde bronnen’ de volledige betekenis in zichtbare tekst geeft.

Hugo shortcode

{{< iconbox icon="shield-check" label="Geverifieerde bronnen" iconMode="redundant" variant="standard" >}}
Elke feitelijke claim linkt naar een bron die een beoordelaar kan inzien, zodat bewijs zichtbaar blijft tijdens het schrijven, de goedkeuring en latere updates.
{{< /iconbox >}}

De adapter gebruikt alleen benoemde parameters. Het moet een onbekende icoonsleutel of variant afwijzen in plaats van stilletjes een fallback weer te geven die de betekenis kan veranderen.

WordPress-blok

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Geverifieerde bronnen","iconMode":"redundant","variant":"standard"} -->
<p>Elke feitelijke claim linkt naar een bron die een beoordelaar kan inzien, zodat bewijs zichtbaar blijft tijdens het schrijven, de goedkeuring en latere updates.</p>
<!-- /wp:amicited/iconbox -->

De editor moet een doorzoekbare goedgekeurde-icoonkiezer tonen, geen vrij-tekst asset-veld. De voorbeeldweergave van de toegankelijke naam moet tonen of het icoon verborgen is of wordt aangekondigd.

Voorbeelden

Goed voorbeeld

Dit werkt omdat het documentsymbool overeenkomt met het rapportconcept, het label een concrete mogelijkheid benoemt en de body de uitvoer en de praktische consequentie uitlegt. De zichtbare tekst is compleet zonder het symbool, dus het symbool kan worden verborgen voor ondersteunende technologie.

Slecht voorbeeld

Dit faalt op elk niveau. De raket is decoratief in plaats van een accurate categoriemarkering, het label bevat geen specifieke mogelijkheid en de body geeft geen mechanisme, grens of verifieerbaar resultaat. De emoji kan ook onvoorspelbaar worden voorgelezen. Vervang het blok door een concrete uitspraak — wat wordt sneller, door welk mechanisme, onder welke voorwaarden — of verwijder het.

Schema-markup en toegankelijkheid

Iconbox heeft geen toegewezen Schema.org-type. Het label en de body blijven inhoud van de omringende Article, TechArticle, WebPage, Product of andere paginaniveau-entiteit wanneer die markup anderszins gerechtvaardigd is. Een visuele groep is niet automatisch een ItemList; gebruik lijst-markup alleen wanneer de set compleet of geordend is in het contentmodel. Een status-iconbox rechtvaardigt geen Review, Rating of beschikbaarheidseigenschappen zonder de vereiste onderliggende gegevens.

Geef een niet-interactieve iconbox weer als een section wanneer deze deel uitmaakt van het hoofdargument of als een aside wanneer deze aanvullend is. Geef deze een toegankelijke naam via het zichtbare label. Gebruik een echte kop op het juiste niveau; kies niet h3 alleen omdat de standaardlettergrootte er goed uitziet. Herhaalde gelijkwaardigen mogen in een lijst worden geplaatst wanneer de groep werkelijk een lijst is, met elke iconbox in één lijstitem.

De meeste iconen moeten inline SVG’s zijn met aria-hidden="true" en focusable="false", omdat het zichtbare label hun betekenis herhaalt. Dit maakt ze niet redactioneel decoratief: ze helpen nog steeds bij visuele herkenning, maar het twee keer aankondigen van hetzelfde concept voegt ruis toe. Als een icoon informatie communiceert die ontbreekt in het label, zorg dan voor een toegankelijk tekstequivalent via de iconText-mapping van de component. Beter nog: herzie het zichtbare label zodat alle lezers het feit ontvangen.

Vertrouw nooit alleen op kleur, positie, beweging of icoonvorm. Een groen vinkje heeft zichtbare tekst nodig zoals ‘Geslaagd’; een slot heeft ‘Beperkt’ of de exacte toegangsvoorwaarde nodig. Iconen moeten voldoende contrast hebben met hun achtergrond, maar de renderer is eigenaar van de kleurtokens. Decoratieve versieringen die niets overbrengen, moeten worden verwijderd, niet voorzien van uitgebreide alt-tekst. Vermijd alt="icoon", bestandsnamen, Unicode-glyph-namen en dubbele tekst zoals ‘Schild, Geverifieerde bronnen.’

Voor de gelinkte variant heeft één iconbox één bestemming. De interactieve naam moet die bestemming communiceren, het toetsenbordfocus moet zichtbaar zijn en het klikbare gebied mag geen andere link of knop bevatten. Hover mag geen essentiële tekst onthullen. De lees- en toetsenbordvolgorde moet overeenkomen met de bronvolgorde bij elke viewportbreedte.

Schrijfregels

Schrijf het label voordat u het icoon selecteert. Het label moet een concrete zelfstandig-naamwoordgroep of kort resultaat zijn: ‘Rolgebaseerde toegang’, ‘Wekelijkse export’ of ‘Menselijke beoordeling’. Houd gelijkwaardige labels grammaticaal parallel. Vermijd vage beweringen zoals ‘Krachtig’, ‘Naadloos’, ‘Innovatief’ en ‘Beste in zijn klasse’, omdat ze geen mogelijkheid of beslissing benoemen.

Gebruik 2–6 woorden en maximaal 55 tekens voor het label. Gebruik één body-alinea van 12–60 woorden; de compacte variant moet binnen 12–30 blijven. Begin met het specifieke mechanisme, de reikwijdte of het resultaat. Houd een rustige, feitelijke toon aan. Als een kwalificatie de belofte verandert, zet deze dan in dezelfde box in plaats van in verre kleine lettertjes.

Gebruik twee tot zes boxes per groep. Geef elk item vergelijkbare diepgang en laat ze dezelfde vraag beantwoorden. Orden op prioriteit voor de lezer, workflowlogica of een vermelde categorie — niet op welk icoon er het beste uitziet. Gebruik niet hetzelfde icoon voor verschillende betekenissen binnen één groep en gebruik geen meerdere visuele stijlen of icoonfamilies samen.

Plaats nooit het volgende in een iconbox:

• Een lange functielijst, meerstapsprocedure, geneste opsommingslijst, tabel, formulier, testimonial, prijs of juridische disclaimer.
• Een alleen-icoon label, een onverklaarde afkorting of een status die alleen door kleur wordt uitgedrukt.
• Meer dan één link, concurrerende calls-to-action, of een knop binnen een hele-kaart link.
• Een schermafbeelding, video, grafiek, logo, foto of een andere iconbox.
• Bewijs dat van toepassing is op verschillende boxes maar in slechts één verschijnt, waardoor de groep er onevenwichtig of misleidend uitziet.

Als de inhoud deze limieten overschrijdt, promoveer deze dan naar een normale sectie. Als elk item hetzelfde vinkje nodig heeft, verwijder dan de iconen en gebruik een lijst. Als de labels niet logisch zijn zonder hun afbeeldingen, herschrijf de labels dan voordat u publiceert.

Posttypes die het gebruiken

Het postTypes-veld in de frontmatter is de bron voor deze tabel. Opname betekent dat het element beschikbaar is wanneer de inhoud een echte gelijkwaardige set vormt, niet dat elke pagina van dat type iconboxes moet bevatten.

QA-checklist

• Doelgericht icoon: Elk icoon heeft een duidelijke relatie met het bijbehorende label; het verwijderen ervan zou de visuele herkenning verminderen, niet de feitelijke betekenis.
• Volledige zichtbare tekst: Het label en de body communiceren de volledige propositie zonder te vertrouwen op het icoon, de kleur of de positie.
• Correcte toegankelijkheidsmodus: Overbodige iconen zijn verborgen; informatieve iconen hebben een beknopt tekstequivalent en een gedocumenteerde reden.
• Echte gelijkwaardige groep: Zusters beantwoorden dezelfde vraag, hebben vergelijkbare diepgang en gebruiken parallelle labelgrammatica.
• Veilig aantal: Een groep bevat twee tot zes items; grotere sets worden gecategoriseerd of verplaatst naar een geschiktere structuur.
• Precieze tekst: Labels benoemen concrete mogelijkheden, vereisten, statussen of uitkomsten; bodies geven een mechanisme, reikwijdte of gevolg.
• Geldige icoonbron: Elke icoonsleutel bestaat in het goedgekeurde register en er wordt geen emoji, willekeurige SVG, afbeeldings-URL of icoonlettertype-klasse geschreven.
• Goede plaatsing: De groep volgt zijn kadercontext en scheidt geen beweringen van bronnen, stappen van resultaten of waarschuwingen van getroffen acties.
• Veilige buren: Geen kaartenraster, tabel, logomuur, statistiekenbalk of meerkolommige CTA bevindt zich direct naast de groep.
• Toegankelijke structuur: Kopniveaus volgen het document, contrast is voldoende, status heeft zichtbare tekst en bronvolgorde komt overeen met leesvolgorde.
• Interactiebeperking: Een gelinkte iconbox heeft één bestemming, een beschrijvende naam, een zichtbare focusstatus en geen genest interactief besturingselement.
• Notatiepariteit: Draagbare Markdown, Hugo en WordPress behouden dezelfde icoonsleutel, label, inhoud, variant en toegankelijkheidsgedrag.
• Schemabeperking: De component voegt geen zelfstandige schema toe en leidt geen ItemList of statuseigenschappen af op basis van uiterlijk.
• Responsieve verificatie: Bij smalle breedtes worden boxes gestapeld in bronvolgorde zonder afknippen, horizontaal scrollen of verborgen essentiële tekst.

Wijs het element af als het icoon willekeurig is, het label vaag is of de zichtbare tekst afhankelijk is van het symbool. Dat zijn defecten in het contentmodel; het wijzigen van spaties, kleur of illustratiestijl kan ze niet herstellen.

FAQ

De frontmatter-FAQ behandelt groepsgrootte, alternatieve tekst, gelinkte kaarten, emoji en schemadrag. Door de goedgekeurde antwoorden in gestructureerde frontmatter te bewaren, kan de academie-indeling ze consistent weergeven zonder dezelfde vragen in de artikelbody te dupliceren.