Renders child atom blocks inside a colored background container. Use to visually group content with tint, solid, or dark style.
| Field | Type | |
|---|---|---|
| accent | string (optional, hex, default "#6366f1") | optional |
| style | string (optional, "tint"|"solid"|"dark"|"light", default "tint") | optional |
| padding | string (optional, css, default "24px") | optional |
| grid | boolean (optional, default false, added 2026-07-24). Layers a faint 32px graph-paper grid (tinted by accent) on top of the base colour — for technical/blueprint-style sections. | optional |
| max_width | string (optional, css length/%, added 2026-07-24). Caps and centres the section (e.g. "90%") so a wide section doesn't run the full column width; omitted → full width. | optional |
| blocks | array (required, atom blocks rendered inside) | required |
{
"type": "color_section",
"blocks": [
{
"type": "body",
"text": "Example content."
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:color_section",
"displayName": "Color Section",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/color_section",
"capabilities": [
"web",
"google-apps-script-web",
"mcp-apps"
],
"description": "Renders child atom blocks inside a colored background container. Use to visually group content with tint, solid, or dark style.",
"representativeQueries": [
"show a colored background wrapper \u2014 tint/solid/dark, renders child atom blocks",
"renders child atom blocks inside a colored background container. use to visually group content with",
"render a color section"
]
}The renderer is an open-source Google Apps Script web app. 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 a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy