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 |
| 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",
"apps-script-web"
],
"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 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