97 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
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
label and value pairs in a compact grid
API endpoint method parameters and response docs returns, example
chronological event timeline
big number metric with directional change indicator or percentage
compact inline value with mini trend bar the direction of a
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.
styled link to an audio file
styled link to a downloadable document a document icon.
image with styled caption below
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.
multiple items rated across dimensions scores.
feature capability tick list per tier capability using checkmarks
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.
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
horizontal wrap of neutral content chip labels
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
icon + title + description feature grid — Tailwind UI pattern
labeled horizontal progress bars list — percent fill, per-bar color
icon + big number + label stat strip — more visual than metric_row
weighted tag cloud — variable size by weight, wrap layout
horizontal step progress — numbered circles, connecting lines, current step highlighted
light gradient hero — badge, large title, subtitle, CTA button
icon-circle list — emoji/icon per item, label + text, color per item
highlight box — gradient/solid/outline style, icon, title, text
horizontal metric strip — value, label, prefix/suffix, trend up/down
decorative numbered list — large background numbers or circular badges
app-style page header — title, subtitle, icon, accent, tag badge
section divider — optional centered label, solid/dashed/dots style
multi-column layout — 2–6 cols, each column holds atom blocks
person card — name, role, photo, bio, tags, email, linkedin
risk list — critical/high/medium/low with title, description, mitigation
action items table — action, owner, due date, status
asymmetric bento-box feature tile grid — MagicUI/shadcn pattern
full-width CTA banner with headline and buttons — Tailwind UI pattern
CSS repeating dot or grid pattern panel background
unlockable achievement badge with locked/unlocked state and optional date
end-of-exercise score card with correct/total, percentage, grade, and CTA
course-level progress card with per-module bars and aggregate completion ring
highlighted text passage with optional hover margin annotation note