Article Hero — A2UI Atomic Catalog

Renders a prominent visual header displaying title, metadata, and background cover imagery.

Surfaces

webapps-script-web

Degraded on

Surface	Note
googlechat	Cover visuals drop, returning unformatted markdown headers.
email	Complex layout positioning and custom fonts break down.

Fields

Field	Type
title	string. Main showcase headline text.	required
subtitle	string. Optional accompanying summary text.	optional
image_url	string. URL to header background media.	required

Example payload

{
  "type": "article_hero",
  "title": "Article Hero",
  "image_url": "https://example.com"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:article_hero",
  "displayName": "Article Hero",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/article_hero",
  "capabilities": [
    "web",
    "apps-script-web"
  ],
  "description": "Renders a prominent visual header displaying title, metadata, and background cover imagery.",
  "representativeQueries": [
    "show a display prominent introductory headline and banner media",
    "renders a prominent visual header displaying title, metadata, and background cover imagery.",
    "render a article hero"
  ]
}

Deploy your own renderer

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

Full deploy guide →