28 atoms available on this surface
Sets page-level CSS custom properties (accent colours, block gap) for consistent theming across all atoms. Use as the first block in any payload.
A button that triggers window.print() to print or save the current page as PDF.
Embeds a Google Drive image by file ID or share URL, converting it to the correct export URL that works inside GAS iframes.
Embeds a Google Maps location search in an iframe. Suitable for event location, office address, field ops context.
A form that submits data to a named Google Sheet tab via google.script.run. Requires the GAS project to be bound to a Spreadsheet.
Wraps child blocks with entrance animations triggered on load. animation choices: fade_up, fade_in, slide_left, slide_right, scale_in, stagger.
CSS shimmer loading placeholder. type choices: text, card, avatar_row, image, list, table.
Infinite horizontal scrolling ticker. Items can be text strings, logos (image_url), or icon+label chips.
Pulsing status or attention indicator dot. Inline or block display.
Three-dot pulsing loader. Use during async content load or as a status indicator.
Animated SVG circular progress gauge. Animates from 0 to value on load.
JS confetti celebration effect. trigger load fires immediately, trigger button shows a clickable button.
CTA button with a CSS ripple click effect. Optionally links to a URL.
Animated SVG wave as a decorative section separator.
An emoji or icon that bobs up and down continuously. Great for CTAs and achievement moments.
Headline text with an animated shimmer/gloss sweep across a gradient. Use for hero taglines.
Slot-machine style digit reveal. Each digit flips in from above on load.
A content card where a radial gradient spotlight follows the cursor. Child blocks or content field.
Card or section with a rotating conic gradient border. Child blocks or content inside.
Circular SVG countdown that depletes as seconds tick down.
A single Material Symbol icon from Google Fonts CDN. Browse 2500+ icon names at fonts.google.com/icons.
Material Symbol icon inside a coloured circular badge. Good for stat rows and feature lists.
Horizontal strip of Material Symbol icon + label pairs. Good for feature/capability lists.
A single Google Workspace product logo from Google's official CDN (fonts.gstatic.com). Falls back to coloured letter badge for unknown apps.
Horizontal strip of Google Workspace product logos. Greyscale by default, restores colour on hover.
Grid of Google Workspace product logos with labels. Good for "Integrations" or "Works with" sections.
Feature grid using Material Symbol icons — better than emoji for Workspace UI contexts.
Checklist where each item has a Material Symbol icon (not just a check mark). Good for capability or requirements lists.