Two to four cards stacked with CSS transform rotate and translateY, creating a fanned deck effect. The front card shows full title and body; back cards are progressively rotated and faded. No JavaScript — purely presentational. Useful for showcasing multiple items with a premium layered feel.
| Surface | Note |
|---|---|
| CSS transform may not render correctly in all PDF engines | |
| googlechat | Absolute positioning and transforms may collapse in Chat card layout |
| Field | Type | |
|---|---|---|
| cards | array. Each card: {title, body, accent}. Max 4 cards. | required |
| background | string. Card background colour. Default "#1e293b". | optional |
| border_color | string. Card border colour. Default "rgba(255,255,255,0.08)". | optional |
| height | integer. Card height in px. Default 160. | optional |
{
"type": "card_stack",
"cards": [
{
"title": "Card 1",
"body": "First card content."
},
{
"title": "Card 2",
"body": "Second card content."
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:card_stack",
"displayName": "Card Stack",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/card_stack",
"capabilities": [
"web",
"meet-stage",
"apps-script-web"
],
"description": "Two to four cards stacked with CSS transform rotate and translateY, creating a fanned deck effect. The front card shows full title and body; back cards are progressively rotated and faded. No JavaScript \u2014 purely presentational. Useful for showcasing multiple items with a premium layered feel.",
"representativeQueries": [
"show a CSS-fanned stack of 2\u20134 cards with rotation and opacity tiers",
"two to four cards stacked with css transform rotate and translatey, creating a fanned deck effect. t",
"render a card stack"
]
}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