Iconbox — Format, Regeln und Beispiele

Eine Iconbox kombiniert ein gezieltes Icon mit einer kurzen Beschriftung und einer fokussierten Erklärung. Das Icon macht das Thema erkennbar, die Beschriftung benennt es und der Text erklärt, warum es wichtig ist. Das Element funktioniert am besten als Teil einer kleinen gleichrangigen Gruppe, wie beispielsweise drei Produktfunktionen oder vier Anforderungen – nicht als Dekoration, die über eine Seite verstreut ist.

Das Häkchen-Symbol ist zweckgerichtet: Es verstärkt die Überprüfung, anstatt eine leere Ecke zu füllen. Da die sichtbare Beschriftung bereits dieselbe Bedeutung vermittelt, wird das gerenderte Symbol vor unterstützenden Technologien verborgen. Ein Screenreader-Nutzer erhält die vollständige Nachricht von „Geprüfte Quellen“ und deren Erklärung, ohne überflüssige Icon-Ausgabe zu hören.

Warum dieses Element wichtig ist

Leser verarbeiten nicht jeden Satz der Reihe nach. Sie suchen nach Orientierungspunkten, die beantworten: „Geht es hier um das, was ich brauche?“ Eine Iconbox schafft ein kompaktes Erkennungsmuster: zuerst die Form, dann die Beschriftung, dann die Erklärung. In einer gut strukturierten Gruppe können Leser die Beschriftungen überfliegen, eine relevante Kategorie identifizieren und dann nur den unterstützenden Text lesen, den sie benötigen. Dies reduziert den Aufwand, einen Absatz zu entschlüsseln, der mehrere gleich gewichtete Ideen enthält.

Der psychologische Wert ergibt sich aus Wiedererkennung, Chunking und Konsistenz. Ein bekanntes Schild kann Schutz signalisieren, eine Uhr Zeit und ein Dokument Berichterstattung – noch bevor der Leser die Beschriftung vollständig erfasst hat. Die Beschriftung beseitigt dann Mehrdeutigkeiten. Wiederholte Geometrie sagt dem Leser, dass die Elemente denselben redaktionellen Rang haben. Dieses Signal ist nur dann nützlich, wenn der Inhalt wirklich parallel ist; ein Kartenraster kann aus nicht zusammenhängenden Behauptungen keine kohärente Gruppe machen.

Maschinelle Extrahierbarkeit bedeutet, dass Software eine Inhaltseinheit isolieren kann, während sie deren Betreff und Aussage beibehält. Eine strukturierte Iconbox macht ein benanntes Element mit einem prägnanten Textkörper und einer stabilen Position innerhalb einer optionalen Gruppe zugänglich. Retrieval-Systeme können „Geprüfte Quellen“ zusammen mit der zugehörigen Erklärung extrahieren, anstatt raten zu müssen, welcher Satz zu welchem visuellen Symbol gehört. Das Icon-Asset selbst trägt wenig zur Extraktion bei, daher müssen die sichtbaren Wörter die vollständige Aussage tragen.

Das Icon muss dennoch eine redaktionelle Bedeutung haben. Ein willkürlicher Glitzerstern, eine Rakete oder eine abstrakte Form fügt für Menschen Rauschen hinzu und liefert keine nützliche Semantik für Maschinen. „Zweckgerichtet aber redundant“ ist ein gültiger Barrierefreiheitsmodus: Ein Icon kann sehenden Lesern helfen, eine Kategorie zu erkennen, während es vor unterstützenden Technologien verborgen wird, weil die sichtbare Beschriftung bereits die Bedeutung liefert. Befolgen Sie die Element-Schreibregeln , indem Sie zuerst die vollständige Idee formulieren und die Iconbox erst im späteren Strukturdurchlauf auswählen. Die hier genannten elementspezifischen Grenzen haben Vorrang bei der Icon-Auswahl, Gruppierung und Barrierefreiheitszuordnung.

Wann man es verwenden sollte

Verwenden Sie eine Iconbox, wenn der Inhalt eine prägnante, benannte Idee ist und ein Icon aus dem genehmigten System diese Idee ohne Rätselraten darstellen kann. Eine Gruppe ist angemessen, wenn zwei bis sechs Elemente dieselbe implizite Frage in vergleichbarer Tiefe beantworten: „Was ist enthalten?“, „Welche Schutzmaßnahmen gelten?“ oder „Was produziert dieser Workflow?“ Jedes Element sollte auch als Klartext kopiert verständlich bleiben.

Starke Einsatzfälle sind eine Funktionsübersicht mit einem Ergebnis pro Element, ein Anforderungsüberblick vor detaillierten Anweisungen, eine Reihe von Serviceprinzipien oder eine kompakte Erklärung von Workflow-Ergebnissen. Das Icon ist eine Wiedererkennungshilfe, nicht der Beleg. Details wie Dateiformate, Antwortzeiten, unterstützte Systeme oder Zuständigkeiten gehören weiterhin in die Beschriftung und den Textkörper.

Grenzfälle sind häufig:

• Verwenden Sie eine normale Aufzählungsliste, wenn das Icon bei jedem Element dasselbe Häkchen wäre. Wiederholung vermittelt keine Kategoriebedeutung.
• Verwenden Sie eine Vergleichstabelle, wenn Elemente anhand gemeinsamer Kriterien beurteilt werden müssen. Separate Iconboxes erschweren den Vergleich von Elementen.
• Verwenden Sie eine Schrittliste, wenn Reihenfolge, Abschluss oder Abhängigkeit wichtig sind. Eine Reihe von Iconboxes impliziert Gleichrangigkeit, keine Abfolge.
• Verwenden Sie eine Definitionsbox, wenn ein ungewohnter Begriff eine formale Bedeutung benötigt. Ein Icon stärkt keine präzise Definition.
• Verwenden Sie eine Warnung oder einen Hinweis, wenn Schweregrad und Unterbrechung die Hauptaufgaben sind. Eine Iconbox hat neutrales strukturelles Gewicht.
• Verwenden Sie vollständige Abschnitte, wenn jedes Element mehrere Absätze, Belege, Medien oder Zwischenüberschriften benötigt.

Verwenden Sie Iconboxes nicht nur, um eine textlastige Seite gestaltet aussehen zu lassen. Wenn der Autor das Icon auswählt, nachdem er nach etwas visuell Ansprechendem statt semantisch Korrektem gesucht hat, braucht der Inhalt dieses Element wahrscheinlich nicht.

Wo man es platziert

Platzieren Sie eine eigenständige Iconbox unmittelbar nach dem Absatz, den sie unterstützt. Platzieren Sie eine Iconbox-Gruppe nach einer Überschrift und einem einleitenden Absatz, der die gemeinsame Frage benennt. Dieser Kontext erklärt, warum die Elemente zusammengehören; die Gruppe gibt dann die kompakte Antwort. Lassen Sie auf die Gruppe Details, Belege oder die nächste Entscheidung folgen, anstatt jede Box in Prosa zu wiederholen.

In einem Artikel sollte die erste Gruppe erst nach der direkten Antwort oder der einleitenden Definition erscheinen. Auf einer kommerziellen Seite kann eine Funktionsgruppe dem Problem und der Ergebnisdarstellung folgen, darf aber nicht vor dem Wertversprechen stehen, nur um einen visuellen Hero zu schaffen. Platzieren Sie in Dokumentationen eine Anforderungsgruppe vor der Prozedur, die sie regelt, während die erforderliche Reihenfolge und Akzeptanzkriterien in normalen Anweisungen bleiben.

Platzieren Sie eine Iconbox-Gruppe nicht direkt neben einem anderen Kartenraster, einer Vergleichstabelle, einer Logo-Wand, einem Statistik-Block oder einem mehrspaltigen Call-to-Action. Benachbarte Raster ebnen die Informationshierarchie ein und lassen redaktionelle Fakten wie Werbung aussehen. Fügen Sie erklärende Prosa oder einen Abschnittswechsel zwischen ihnen ein. Setzen Sie keine Iconbox zwischen eine Behauptung und ihre Quelle, zwischen einen Schritt und sein erwartetes Ergebnis, innerhalb einer Tabellenzelle oder innerhalb einer anderen Iconbox. Positionieren Sie niemals zwei Gruppen hintereinander.

Anatomie

Eine Iconbox enthält drei verfasste Bereiche und eine kontextuelle Beziehung. Der Screenshot kennzeichnet bedeutungstragende Bereiche statt Pixelwerte, damit der Vertrag ein visuelles Redesign übersteht.

1. Icon-Bereich: Verwendet ein genehmigtes Icon, dessen Konzept zum Element passt. Es ersetzt niemals sichtbare Wörter.
2. Kurzbeschriftung: Benennt die Funktion, Anforderung, das Ergebnis oder die Kategorie in konkreter Sprache.
3. Textkörper: Erklärt die Konsequenz, den Umfang oder die Belege in einem kompakten Absatz.
4. Optionale Zielseite: Gibt einen beschreibenden nächsten Schritt an, wenn die verlinkte Variante verwendet wird.
5. Gruppenkontext: Eine vorausgehende Überschrift oder eine zugängliche Gruppenbeschriftung gibt die Frage an, die alle gleichgeordneten Iconboxes beantworten.

Rahmen, Hintergrund, Radius, Icon-Größe, Farbe, Rasterspalten und Breakpoints gehören zum Renderer. Autoren wählen den semantischen Inhalt, die Icon-Identität, die Quellreihenfolge und den Barrierefreiheitsmodus.

Gestaltungsbeispiele

Das Element unterstützt vier Präsentationsvarianten. Alle bewahren dieselbe Icon-Beschriftung-Text-Hierarchie und dieselbe Quellreihenfolge.

Standard: Die standardmäßige eigenständige oder gruppierte Karte. Verwenden Sie sie, wenn der Textkörper 25–60 Wörter benötigt, um ein Element zu erklären.

Kompakt: Verwendet einen Ein-Satz-Textkörper von 12–30 Wörtern. Geeignet für vertraute Konzepte, nicht zum Komprimieren einer differenzierten Qualifikation.

Verlinkt: Fügt ein Ziel hinzu. Bevorzugen Sie einen sichtbaren beschreibenden Link. Wenn die gesamte Karte interaktiv ist, muss der Renderer ein einzelnes Link-Ziel und einen klaren Fokus-Zustand bereitstellen.

Status: Kommuniziert einen Zustand wie verfügbar, eingeschränkt, bestanden oder ausstehend. Das Statuswort muss sichtbar sein; weder Farbe noch Icon-Form dürfen das einzige Signal sein.

Schmaler Viewport: Jede Gruppe wird in Quellreihenfolge zu einer Spalte. Der Renderer darf Boxen nicht neu anordnen, um ihre Höhen auszugleichen.

Der Barrierefreiheitsmodus ist von der Präsentationsvariante getrennt. Ein redundantes Icon wird vor unterstützenden Technologien verborgen, da seine Beschriftung dieselbe Bedeutung trägt. Ein wirklich informatives Icon erhält ein programmatisches Textäquivalent, aber Autoren sollten diese Information normalerweise zur sichtbaren Beschriftung hinzufügen, anstatt eine Icon-only Tatsache zu pflegen.

Parameter

Der Vertrag hält die verfasste Bedeutung von der Darstellung getrennt. Grenzen gelten für jede Variante, sofern nicht eine strengere Grenze angegeben ist.

icon muss über das genehmigte Icon-Register aufgelöst werden; Autoren können kein willkürliches SVG, Emoji, Bild-URLs oder Icon-Font-Klassennamen angeben. Eingeschränktes Markdown erlaubt Hervorhebungen, Inline-Code und einen Inline-Link. Es schließt verschachtelte Überschriften, Listen, Tabellen, Medien, Formulare, Schaltflächen, Akkordeons und andere Komponenten aus. Wenn die erste Textkörper-Überschrift die label liefert, entfernt der Adapter diese Überschrift aus dem Textkörper und rendert sie auf der korrekten seitenrelativen Ebene.

Syntax und Codebeispiele

Jede Notation verwendet dasselbe Icon, dieselbe Beschriftung, denselben Textkörper, dieselbe Variante und denselben Barrierefreiheitsmodus. Der Icon-Schlüssel ist semantisch und portabel; jede Plattform bildet shield-check auf ihr genehmigtes lokales Asset ab.

Portable Markdown-Direktive

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Geprüfte Quellen

Jede faktische Behauptung verlinkt auf eine Quelle, die ein Prüfer einsehen kann, sodass Belege während des Schreibens, der Freigabe und späterer Aktualisierungen sichtbar bleiben.
:::

Die erste Überschrift wird zur label; der verbleibende Absatz wird zum content. Das Icon ist redundant, weil „Geprüfte Quellen“ die vollständige Bedeutung im sichtbaren Text liefert.

Hugo Shortcode

{{< iconbox icon="shield-check" label="Geprüfte Quellen" iconMode="redundant" variant="standard" >}}
Jede faktische Behauptung verlinkt auf eine Quelle, die ein Prüfer einsehen kann, sodass Belege während des Schreibens, der Freigabe und späterer Aktualisierungen sichtbar bleiben.
{{< /iconbox >}}

Der Adapter verwendet nur benannte Parameter. Er muss einen unbekannten Icon-Schlüssel oder eine unbekannte Variante ablehnen, anstatt stillschweigend einen Fallback anzuzeigen, der die Bedeutung ändern könnte.

WordPress-Block

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Geprüfte Quellen","iconMode":"redundant","variant":"standard"} -->
<p>Jede faktische Behauptung verlinkt auf eine Quelle, die ein Prüfer einsehen kann, sodass Belege während des Schreibens, der Freigabe und späterer Aktualisierungen sichtbar bleiben.</p>
<!-- /wp:amicited/iconbox -->

Der Editor sollte einen durchsuchbaren, genehmigten Icon-Auswahldialog anzeigen, kein Freitext-Asset-Feld. Die Vorschau des zugänglichen Namens sollte zeigen, ob das Icon verborgen oder angesagt wird.

Beispiele

Gutes Beispiel

Dies funktioniert, weil das Dokumentensymbol zum Berichtskonzept passt, die Beschriftung eine konkrete Fähigkeit benennt und der Textkörper das Ergebnis und seine praktische Konsequenz erklärt. Der sichtbare Text ist ohne das Symbol vollständig, sodass das Symbol vor unterstützenden Technologien verborgen werden kann.

Schlechtes Beispiel

Dies scheitert auf jeder Ebene. Die Rakete ist dekorativ statt ein genauer Kategorie-Marker, die Beschriftung enthält keine spezifische Fähigkeit und der Textkörper liefert keinen Mechanismus, keine Grenze und kein überprüfbares Ergebnis. Das Emoji kann zudem unvorhersehbar angesagt werden. Ersetzen Sie den Block durch eine konkrete Aussage – was wird schneller, durch welchen Mechanismus, unter welchen Bedingungen – oder löschen Sie ihn.

Schema-Markup und Barrierefreiheit

Iconbox hat keinen eigenen Schema.org-Typ. Beschriftung und Textkörper bleiben Inhalt des umschließenden Article, TechArticle, WebPage, Product oder einer anderen seitenweiten Entität, wenn dieses Markup anderweitig gerechtfertigt ist. Eine visuelle Gruppe ist nicht automatisch eine ItemList; verwenden Sie List-Markup nur, wenn die Menge vollständig oder im Inhaltsmodell geordnet ist. Eine Status-Iconbox rechtfertigt keine Review-, Rating- oder Verfügbarkeitseigenschaften ohne die erforderlichen zugrundeliegenden Daten.

Rendern Sie eine nicht-interaktive Iconbox als section, wenn sie Teil des Hauptarguments ist, oder als aside, wenn sie ergänzend ist. Geben Sie ihr einen zugänglichen Namen durch die sichtbare Beschriftung. Verwenden Sie eine echte Überschrift auf der korrekten Ebene; wählen Sie nicht h3 nur, weil die Standardschriftgröße richtig aussieht. Wiederholte gleichrangige Elemente können innerhalb einer Liste sitzen, wenn die Gruppe wirklich eine Liste ist, mit jeder Iconbox in einem Listenelement.

Die meisten Icons sollten Inline-SVGs mit aria-hidden="true" und focusable="false" sein, da die sichtbare Beschriftung ihre Bedeutung wiederholt. Dies macht sie nicht redaktionell dekorativ: Sie helfen weiterhin der visuellen Erkennung, aber dasselbe Konzept zweimal anzukündigen, fügt Rauschen hinzu. Wenn ein Icon Informationen vermittelt, die in der Beschriftung fehlen, stellen Sie ein zugängliches Textäquivalent über das iconText-Mapping der Komponente bereit. Noch besser: Überarbeiten Sie die sichtbare Beschriftung, sodass alle Leser die Information erhalten.

Verlassen Sie sich niemals allein auf Farbe, Position, Bewegung oder Icon-Form. Ein grünes Häkchen benötigt sichtbaren Text wie „Bestanden“; ein Schloss benötigt „Eingeschränkt“ oder die genaue Zugriffsbedingung. Icons benötigen ausreichenden Kontrast zu ihrem Hintergrund, aber der Renderer besitzt die Farb-Token. Dekorative Verzierungen, die nichts vermitteln, sollten entfernt werden, nicht mit ausführlichem Alt-Text versehen werden. Vermeiden Sie alt="icon", Dateinamen, Unicode-Glyphennamen und doppelten Text wie „Schild, Geprüfte Quellen“.

Für die verlinkte Variante hat eine Iconbox ein Ziel. Der interaktive Name muss dieses Ziel kommunizieren, der Tastaturfokus muss sichtbar sein und der klickbare Bereich darf keinen weiteren Link oder keine Schaltfläche enthalten. Hover darf keinen wesentlichen Text preisgeben. Die Lese- und Tastaturreihenfolge muss bei jeder Viewport-Breite der Quellreihenfolge entsprechen.

Schreibregeln

Schreiben Sie die Beschriftung, bevor Sie das Icon auswählen. Die Beschriftung sollte eine konkrete Nominalphrase oder ein kurzes Ergebnis sein: „Rollenbasierte Zugriffe“, „Wöchentlicher Export“ oder „Menschliche Prüfung“. Halten Sie gleichrangige Beschriftungen grammatikalisch parallel. Vermeiden Sie allgemeine Behauptungen wie „Leistungsstark“, „Nahtlos“, „Innovativ“ und „Branchenführend“, da sie weder eine Fähigkeit noch eine Entscheidung benennen.

Verwenden Sie 2–6 Wörter und maximal 55 Zeichen für die Beschriftung. Verwenden Sie einen Textkörperabsatz von 12–60 Wörtern; die kompakte Variante sollte innerhalb von 12–30 bleiben. Beginnen Sie mit dem spezifischen Mechanismus, Umfang oder Ergebnis. Bewahren Sie einen ruhigen, sachlichen Ton. Wenn eine Einschränkung das Versprechen ändert, setzen Sie sie in dieselbe Box und nicht in entferntes Kleingedrucktes.

Verwenden Sie zwei bis sechs Boxen pro Gruppe. Geben Sie jedem Element vergleichbare Tiefe und lassen Sie sie dieselbe Frage beantworten. Ordnen Sie nach Leserpriorität, Workflow-Logik oder einer angegebenen Kategorie – nicht danach, welches Icon am besten aussieht. Verwenden Sie nicht dasselbe Icon für unterschiedliche Bedeutungen innerhalb einer Gruppe und verwenden Sie nicht mehrere visuelle Stile oder Icon-Familien zusammen.

Setzen Sie niemals Folgendes in eine Iconbox:

• Ein langes Funktionsinventar, eine mehrstufige Prozedur, eine verschachtelte Aufzählungsliste, Tabelle, Formular, Erfahrungsbericht, Preisangabe oder rechtlichen Haftungsausschluss.
• Eine Icon-only-Beschriftung, ein unerklärtes Akronym oder einen nur durch Farbe ausgedrückten Status.
• Mehr als einen Link, konkurrierende Calls-to-Action oder eine Schaltfläche innerhalb eines Ganzkarten-Links.
• Einen Screenshot, ein Video, Diagramm, Logo, Foto oder eine weitere Iconbox.
• Belege, die für mehrere Boxen gelten, aber nur in einer erscheinen, wodurch die Gruppe ungleichmäßig oder irreführend wirkt.

Wenn der Inhalt diese Grenzen überschreitet, stufen Sie ihn zu einem normalen Abschnitt hoch. Wenn jedes Element dasselbe Häkchen benötigt, entfernen Sie die Icons und verwenden Sie eine Liste. Wenn die Beschriftungen ohne ihre Bilder keinen Sinn ergeben, schreiben Sie die Beschriftungen vor der Veröffentlichung um.

Beitragstypen, die es verwenden

Das postTypes-Frontmatter-Feld ist die Quelle für diese Tabelle. Die Aufnahme bedeutet, dass das Element verfügbar ist, wenn der Inhalt eine echte gleichrangige Gruppe bildet, nicht dass jede Seite dieses Typs Iconboxes enthalten sollte.

QA-Checkliste

• Zweckgerichtetes Icon: Jedes Icon hat eine offensichtliche Beziehung zu seiner Beschriftung; das Entfernen würde die visuelle Erkennung reduzieren, nicht die faktische Bedeutung.
• Vollständiger sichtbarer Text: Beschriftung und Textkörper kommunizieren die vollständige Aussage, ohne sich auf Icon, Farbe oder Position zu verlassen.
• Korrekter Barrierefreiheitsmodus: Redundante Icons sind verborgen; informative Icons haben ein prägnantes Textäquivalent und einen dokumentierten Grund.
• Echte gleichrangige Gruppe: Geschwisterelemente beantworten dieselbe Frage, haben vergleichbare Tiefe und verwenden parallele Beschriftungsgrammatik.
• Sichere Anzahl: Eine Gruppe enthält zwei bis sechs Elemente; größere Mengen werden kategorisiert oder in eine geeignetere Struktur verschoben.
• Präziser Text: Beschriftungen benennen konkrete Fähigkeiten, Anforderungen, Zustände oder Ergebnisse; Textkörper geben einen Mechanismus, Umfang oder eine Konsequenz an.
• Gültige Icon-Quelle: Jeder Icon-Schlüssel existiert im genehmigten Register und es wird kein Emoji, willkürliches SVG, keine Bild-URL oder Icon-Font-Klasse verfasst.
• Sinnvolle Platzierung: Die Gruppe folgt ihrem rahmenden Kontext und trennt keine Behauptungen von Quellen, Schritte von Ergebnissen oder Warnungen von betroffenen Aktionen.
• Sichere Nachbarn: Kein Kartenraster, keine Tabelle, Logo-Wand, Statistik-Block oder mehrspaltiger CTA sitzt direkt neben der Gruppe.
• Zugängliche Struktur: Überschriftsebenen folgen dem Dokument, der Kontrast ist ausreichend, der Status hat sichtbaren Text und die Quellreihenfolge entspricht der Lesereihenfolge.
• Interaktionszurückhaltung: Eine verlinkte Iconbox hat ein Ziel, einen beschreibenden Namen, einen sichtbaren Fokus-Zustand und kein verschachteltes interaktives Steuerelement.
• Notationsparität: Portable Markdown-, Hugo- und WordPress-Notationen bewahren denselben Icon-Schlüssel, dieselbe Beschriftung, denselben Inhalt, dieselbe Variante und dasselbe Barrierefreiheitsverhalten.
• Schema-Zurückhaltung: Die Komponente fügt kein eigenständiges Schema hinzu und leitet keine ItemList- oder Status-Eigenschaften aus dem Erscheinungsbild ab.
• Responsive Überprüfung: Bei schmalen Breiten stapeln sich Boxen in Quellreihenfolge ohne Beschneidung, horizontales Scrollen oder verborgenen wesentlichen Text.

Lehnen Sie das Element ab, wenn sein Icon willkürlich ist, seine Beschriftung vage ist oder sein sichtbarer Text vom Symbol abhängt. Dies sind Inhaltsmodell-Mängel; Änderungen an Abstand, Farbe oder Illustrationsstil können sie nicht beheben.

FAQ

Das Frontmatter-FAQ behandelt Gruppengröße, Alternativtext, verlinkte Karten, Emojis und Schema-Verhalten. Die Aufbewahrung der genehmigten Antworten im strukturierten Frontmatter ermöglicht es dem Academy-Layout, sie konsistent darzustellen, ohne dieselben Fragen im Artikeltext zu duplizieren.