Achievement badge wall — all course badges displayed in a grid. Earned badges glow with indigo highlight and full colour emoji; locked badges are greyed and dimmed. Each badge checks its required_id against progress_store to determine earned status.
| Field | Type | |
|---|---|---|
| title | string. Section heading. Default "Achievements". | optional |
| columns | integer. Grid columns, max 6. Default 4. | optional |
| badges | array (required). Array of {id, label, icon, description, required_id} objects. required_id is the progress_store key to check for completion. | required |
{
"type": "badge_showcase",
"badges": [
{
"label": "TypeScript",
"color": "#3178c6"
},
{
"label": "React",
"color": "#61dafb"
},
{
"label": "A2UI",
"color": "#6366f1"
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:badge_showcase",
"displayName": "Badge Showcase",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/badge_showcase",
"capabilities": [
"apps-script-web",
"web",
"meet-stage"
],
"description": "Achievement badge wall \u2014 all course badges displayed in a grid. Earned badges glow with indigo highlight and full colour emoji; locked badges are greyed and dimmed. Each badge checks its required_id against progress_store to determine earned status.",
"representativeQueries": [
"show a achievement badge wall \u2014 earned badges glow, locked badges grey; status from progress_store",
"achievement badge wall \u2014 all course badges displayed in a grid. earned badges glow with indigo highl",
"render a badge showcase"
]
}The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy