Glass Card

Frosted-glass card with backdrop-filter blur. Use for dark-theme highlight boxes, callouts, or content wrappers. Content is raw HTML string.

Surfaces

webgoogle-apps-script-webmcp-apps

Live preview

Fields

Field	Type
title	string. Card heading text.	optional
content	string. Inner HTML content of the card.	optional
blur	integer. Backdrop blur in px. Default 18.	optional
bg	string. Background colour (rgba). Default rgba(255,255,255,0.05).	optional
border	string. Border colour (rgba). Default rgba(255,255,255,0.1).	optional
padding	string. CSS padding. Default 28px.	optional
radius	string. Border radius. Default 16px.	optional

Example payload

{
  "type": "glass_card"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:glass_card",
  "displayName": "Glass Card",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/glass_card",
  "capabilities": [
    "web",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Frosted-glass card with backdrop-filter blur. Use for dark-theme highlight boxes, callouts, or content wrappers. Content is raw HTML string.",
  "representativeQueries": [
    "show a frosted-glass card with blur backdrop \u2014 dark-theme highlight box",
    "frosted-glass card with backdrop-filter blur. use for dark-theme highlight boxes, callouts, or conte",
    "render a glass card"
  ]
}

← 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 →