257 atoms available on this surface
series link or transparency note at article top
prose paragraph block
H2 section title
H3 subsection title
pull quote or blockquote with attribution
syntax-highlighted fenced code block
left-to-right step flow diagram
unordered list with optional bold label per item
horizontal visual section break
responsive 16:9 YouTube embed
single image with optional caption
two images side by side with captions
D2 or SVG architecture diagram
styled GitHub repo link list
article closing paragraph with hashtags
coloured tip info warning or danger highlight box
numbered step-by-step instruction sequence
data table with header row on mobile
tabbed content panels
label and value pairs in a compact grid
side-by-side code or content before and after comparison approach
API endpoint method parameters and response docs returns, example
two videos side by side
horizontally scrollable card carousel
chronological event timeline
code block with numbered callout bubbles on specific lines explanation list below
single KPI value with label delta and accent colour indicator
labelled horizontal progress bar with percentage
row of coloured label badges
inline SVG trend line chart general trends.
grid heatmap coloured by intensity value are represented as colors in a matrix.
7x24 grid of glowing activity bubbles representing hourly commits
curved dual-column gradient flow diagram for financial or pipeline streams
triangular cohort retention grid with continuous color-scale rendering
CSS ring chart with centre value and percentage its proportion or progress.
big number metric with directional change indicator or percentage
glassmorphic structured checklist with priority and assignee badges
meeting sentiment analyzer with index arc and timeline chart
compact inline value with mini trend bar the direction of a
navigation breadcrumb trail structure.
page number controls
CSS animated vertical step sequence with checkmark draw and active pulse
horizontal tab navigation bar typically leading to different sections or pages.
in-page anchor navigation links document or to external URLs.
collapsible FAQ question and answer list the question is clicked.
definition term with explanation more details.
numbered footnote reference at the bottom of a section or page.
testimonial quote with avatar and attribution
large display number pulled from prose for emphasis descriptive label.
single collapsible section with toggle by clicking its header, using only CSS.
hover tooltip on a trigger element over a specified trigger element, using only CSS.
rich hover card revealed on mouse over specified trigger element, using only CSS.
expandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.
pure-CSS modal dialog triggered by checkbox controlled purely by CSS without JavaScript.
inline audio player with controls
styled link to an audio file
embedded PDF preview panel PDF.
styled link to a downloadable document a document icon.
clickable video thumbnail with play button and a link to the video source.
video with title description and metadata to the video source.
server-side unified diff view with green additions and red removals
two code blocks side by side without diff highlighting diff highlighting.
device-framed screenshot with optional caption browser, phone).
image with styled caption below
full-width status alert strip optional action.
animated placeholder skeleton while content loads indicating active data fetching.
zero-data empty state with icon and call to action image, message, and an optional call to action.
loading spinner indicator operation is in progress.
coloured status pill badge an item.
inline success error or warning message for validation feedback or hints.
star rating display stars, or displaying a static rating.
CSS stroke-dashoffset animated SVG progress arc with centre percentage
prominent card prompting a required user action user attention,
features versus plans comparison matrix
single pricing plan card with features list an optional call to action.
side-by-side pricing plan comparison different subscription plans.
two-column pros and cons comparison a single subject.
two items compared spec by spec and values side-by-side.
product specifications in a clean table a single product.
multi-item attribute comparison grid often using icons or checkmarks to indicate presence.
head-to-head two-option versus card "VS" separator.
multiple items rated across dimensions scores.
feature capability tick list per tier capability using checkmarks
CSS toggle switch input
truncated text with read more expand toggle more content.
card that flips on hover to reveal back content
image with clickable annotated hotspot overlays hover.
pure-CSS dropdown navigation menu
interactive star rating input
mutually exclusive option selector strip as a single control.
image with click-to-zoom lightbox
styled checkbox group input
CSS-only slide-in panel drawer activation.
customer testimonial with photo name and quote an optional avatar.
read-only star rating with score and count total review count.
stacked user avatar group with overflow count or community.
list of contributors with avatar and role community, with their
grid of customer or partner logos
social proof strip with stats and logos achievement.
press or media mention with logo and quote
expert quote with credentials and photo name, and credentials.
highlighted customer review excerpt by a star rating.
embedded social media post or feed or Instagram post.
grid of named color swatches with hex values
side-by-side performance benchmark comparison bars
metric card comparing current vs previous period
compact grid of multiple labeled sparklines
grid of service status indicators with color states
30-day uptime timeline with per-day status blocks
single search result card with title snippet URL
copy-to-clipboard button with inline code and feedback
pipeline conversion funnel with step tapering and leak markers
radial SLA gauge with glowing pointer and large metric value
stacked area chart with overlapping glowing translucent gradients
coordinate scatter plot with regression trend line
visual summary board of call sentiments moods and active themes
SVG GitHub-style contribution grid and activity tracker
labelled form with fields and submit button
single labelled input field
labelled dropdown select with options
radio button group for single-option selection
checkbox group for multi-option selection
group of labelled toggle switches
numeric range slider input
date or date-range picker input
modal dialog overlay with title and content
clickable follow-up suggestion chips
card-style option selector with icon, title, description per card
thumbs or star rating feedback collection widget
named resource rows with avatar, status badge, and meta
LLM prompt with highlighted {variable} slots and copy button
AI model spec card with context window, pricing, and capability badges
user prompt and AI response as chat bubbles
keyboard shortcut cheat-sheet grid with key combos and labels
star rating histogram with percentage bars per star level
quarter-based product roadmap with status-tagged milestones
persistent notification inbox list with unread indicators
inline icon-plus-text alert embedded in content flow
horizontal wrap of neutral content chip labels
CSS radio card group for variant or option picking
GFM markdown string rendered to HTML inline
multi-slice pie or donut SVG chart with legend
lightweight tinted inline tip or note block no icon
numbered RAG source card with title excerpt and URL
side-by-side multi-model output comparison table
labelled probability bar with colour-coded confidence fill
context window token usage meter with capacity warning colours
product card with image, price, status badge, and tags
e-commerce order card with status badge and line item list
inventory table with SKU, stock levels, and low-stock row highlight
Jira issue card with type icon, status lozenge, priority, and assignee
kanban sprint board with named columns and compact issue cards
Atlassian-semantic status pill with defined appearance variants
enterprise data grid with typed columns, row selection, and
recursive hierarchical tree with expand/collapse per node
calendar month heatmap with date-value density colouring
searchable filterable dropdown — shadcn/Headless UI pattern
chip-style multi-value select input — shadcn pattern
Auto-detecting YouTube/Loom/Slides/Vimeo embed with skeleton
Real-time comparative bars for votes, counts, or percentages
Multi-option vote buttons in pill, neon, or default style
CSS confetti/trophy/pulse celebration overlay triggered by name
Dark shimmer skeleton loader in card/list/media/chat variants
infinite CSS-animated horizontal marquee of text or logo items
CSS typewriter animation that reveals text character by character
card with CSS rotating gradient animated border
animated aurora borealis gradient blob background, CSS-only
CSS repeating dot or grid pattern panel background
button with CSS background-position shimmer sweep animation
CSS-fanned stack of 2–4 cards with rotation and opacity tiers
CSS-animated diagonal falling meteor streaks on a dark panel
CSS blur-to-focus fade-in container reveal
CSS box-shadow state-signalling button with disabled/ready/fired glow
CSS stroke-dashoffset animated SVG beam between two labelled nodes
CSS steps() scramble-to-reveal text animation
CSS steps() vertical word carousel in an overflow-hidden inline container
CSS concentric ring pulse animation for attention signalling
CSS character-by-character typewriter reveal with optional cursor
Slot-machine digit-column flip to target number
Three-dot bouncing chat typing indicator bubble
Flip-clock countdown timer display (static tiles, data-driven ticking)
Animated gradient-fill heading text via CSS background-clip
CSS steps() left-to-right character scramble-to-reveal
SVG stroke-dashoffset self-drawing path animation
show/hide hint disclosure using HTML details/summary — no JS
unlockable achievement badge with locked/unlocked state and optional date
end-of-exercise score card with correct/total, percentage, grade, and CTA
animated XP/points progress bar with level label and level-up flash
course-level progress card with per-module bars and aggregate completion ring
highlighted text passage with optional hover margin annotation note
unread count badges for Gmail labels
user avatar, display name, email and domain — live on GAS, static fields elsewhere
Drive storage quota progress bar — live on GAS, or pass used_gb/total_gb for static
task checklist — live via Tasks API on GAS, items[] array on other surfaces
ambient glowing orb that lerp-follows the cursor with screen blend
chain of fading dots following the cursor with worm physics
click anywhere to burst coloured gravity particles from click point
dark overlay with cursor-following circular cutout — torch effect
content that drifts toward cursor and springs back with overshoot
3D perspective tilt card with glare highlight driven by cursor position
gradient-fill standalone heading
typographic pull quote with decorative mark and attribution
two-column stat + text keynote layout with neon glow
auto-play word-by-word fade-up reveal animation
uppercase section marker with glowing accent pill
animated count-up number stat with cubic ease, auto-plays on load
prose sentence with **marked** words highlighted in accent colour
clip-path sweep-in reveal line, auto-plays on load
animated particle plexus with proximity lines and mouse repulsion
interactive mass-spring physics graph with drag-to-pin nodes
rotating 3D isometric mesh with height-colour mapping and drag-rotate
Toulouse TMA radar canvas with animated flights, HUD overlay, and live METAR ticker
single CTA link to a named page — appends from= automatically for back-button support
swipeable Gmail inbox carousel — live on GAS, items[] or api connector on web/meet
swipeable Drive files carousel — live on GAS, items[] or api connector on web/meet
Drive folder grid — live on GAS via folder_id, items[] or api connector on web/meet
single Drive file card — static on all surfaces; live name/type lookup via file_id on GAS
invisible LMS state connector — Sheet on GAS, localStorage on web; exposes window._A2UI_STORE
course curriculum grid — module cards with live locked/available/complete status from progress_store
inline comprehension pulse — single question, instant feedback, no score pressure
end-of-quiz result — score %, pass/fail, question dots, writes to progress_store
branching scenario — situation + choices + consequence reveal with good/neutral/bad outcome
content lock — hides until requires module id is complete in progress_store
completion certificate — locked until requires id complete in progress_store; earner from GAS session
SVG radar/spider chart of skill competency levels — optional before/after growth overlay
achievement badge wall — earned badges glow, locked badges grey; status from progress_store
course entry path chooser — role/level cards, writes selection to progress_store, optional navigation
YouTube video with pausing quiz checkpoints — learner must answer to continue
instructor cohort table — per-learner module completion + scores; live on GAS
reflection textarea — saves to progress_store; restores on revisit
annotated body text — click highlighted terms to reveal inline explanations
guided onboarding steps — completes to progress_store, restores on revisit
structured case study — situation, data points, questions, optional model answer reveal
Pomodoro focus/break timer with SVG ring — session only, no persistence
assessment rubric table — criteria rows × performance level columns
flip flashcard with confidence rating 1-5 — writes SRS interval to progress_store
ranked score leaderboard — live on GAS from Sheet, static on web; medal top 3
named-page nav bar — generates ?nav= URLs at runtime from _A2UI_NAV; active page auto-highlighted
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.
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.
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.