Article Hero

Live preview

Article Hero

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

Surfaces

webgoogle-apps-script-webmcp-appsandroid

Degraded on

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

Fields

Field	Type	Required
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",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "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"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

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

Full deploy guide →