A not-found page block with a big code, search, and back-home.

A server-error block with retry, home, and an incident ID.

A document-style accessibility compliance statement — conformance badge, intro, a checklist of commitments, a feedback contact, and a review date.

Stacked expandable panels with keyboard support and an optional single-open mode.

A single collapsible header + panel to place inside an accordion; the panel body is a slot.

A bank account card with balance, masked number, and a trend delta.

An avatar dropdown with account info and menu items.

An achievement with icon, rarity, progress, and unlocked state.

An actor–verb–object activity row with a timeline rail and timestamp.

Concentric radial progress rings (move / exercise / stand) with a labelled goal legend.

A compact recent-activity feed with actor/action/target lines and timestamps.

A vertical log of calls, emails, notes, and meetings, each entry marked and colour-coded by type.

A card entry form with number, expiry, CVC, and set-default.

A dropdown button to add an event to Google/Apple/Outlook or download .ics.

A sticky bottom bar with product name, price, and an add-to-cart action.

An adoptable pet card with a photo or paw glyph, name, breed and age, shelter, a status badge, and a call-to-action button.

A gradient affordability gauge positioning a home against the buyer's budget.

A centered card that asks a visitor to confirm they meet a minimum age before entering.

A numbered, responsive row of process steps, each a tinted number badge over a title and short description.

An agenda/list day view grouping events under each date.

A compact contact card for an insurance agent - avatar, name, title, rating and call and email buttons.

A real-estate agent card with photo, rating, and call/message actions.

A single assistant reply with an AI avatar, message bubble, and a copy/rate/regenerate action row.

A code block with a language header, one-click copy, and an optional Run button for AI-generated snippets.

An AQI gauge with the value, category, and health advice.

A compact air-quality reading with a colour-coded AQI value, level label, and a scale bar.

An album cover card with title, artist, year, and a hover play button.

An inline alert that flags a message with a severity accent and optional dismiss.

An allergen information panel with icons and a cross-contamination note.

Alternating image/text feature rows down the page.

An icon + label grid of property or venue amenities.

A sticky horizontal in-page section nav that highlights the active section on scroll.

A grid of station tiles coloured by status - normal, call, fault or blocked - for a shop-floor andon display.

A small celebratory card marking a person's work anniversary with their years of service.

A dismissible full-width top strip for a promo or notice with an optional CTA.

A spike/drop flag on a metric with a change and investigate action.

A card that displays an API key masked, with reveal, copy, and rotate actions plus scope and created meta.

A small colour-coded pill showing an HTTP verb (GET, POST, PUT, PATCH, DELETE) for API docs and endpoint lists.

A list of API tokens showing each token's name, masked key with copy button, scope chips, meta, and a revoke action.

An app store-style row with an icon, name, rating, category, and install button.

The primary left-hand navigation rail for a SaaS app, with grouped, icon-led links.

The top bar of a SaaS app shell, with a menu toggle, global search, notifications, and a user avatar.

A fashion product card with image, price, color dots, and a wishlist button.

A compact row breaking down one appliance's energy use, with an icon, a share-of-total bar, kWh, cost, and an on or off status dot.

A job application form with fields, a resume attachment, and submit.

A hiring pipeline tracker showing an application's stage.

A provider appointment booker with day and time-slot selection.

A single bookable time slot with available/selected/booked states.

A pending-request row with the requester, request type and detail, an optional amount and date, and approve/deny buttons.

An area-chart widget with a gradient fill under a trend line.

A card-framed area-chart skeleton that fills under a precomputed series line, with an optional second area.

An article title block with category, subtitle, byline, and a hero image.

A lead story block with kicker, headline, standfirst, byline, and lead image.

An artist banner with verified badge, monthly listeners, and play/follow.

A tokenized SVG donut of portfolio allocation by asset class, rendered from caller-precomputed slice geometry, with a value legend.

An overlapping stack of task assignees with an optional "+N" overflow count.

An assignment card with due date, status pill, and a submit action.

A centered landing hero for an AI assistant - a big heading, a large prompt input, and example-prompt chips.

A single email attachment line showing a file-type icon, name, size and a download button.

A single-person time-and-attendance row with clock-in/out times, hours worked and a status pill.

A channel-contribution breakdown with a stacked bar and legend.

A standalone audio player with play/pause, progress scrubber, and time.

An animated bar visualizer shell for audio playback.

A waveform seek control with played bars highlighted and click-to-seek.

An author bio block with avatar, role, bio text, and follow/links.

A finance/lease payment calculator with price, down, APR, and term.

A search input with a floating popover of grouped, iconed suggestions that opens on focus and typing.

An if/then automation row with trigger and action chips and an enable switch.

A full-width single-slide hero rotator that auto-advances with dots, arrows and a progress bar, pausing on hover or focus.

A weekly availability editor with per-day toggles and time ranges.

A user image with an initials fallback, configurable size and shape.

An overlapping stack of avatars with an optional "+N" overflow count.

An avatar preview with upload and remove actions.

A single award line - year, award name and organization, with an optional category pill.

A small chart toolbar with a scale toggle, a gridlines switch, and optional zoom controls.

A scroll-aware floating button that appears after scrolling and returns to the top.

A single backlog row with a type icon, priority dot, title, optional tag, and an effort-estimate badge.

A small status/label pill with a severity or brand color variant.

A grid of earned and locked community badges with tier-coloured medallions and lock overlays.

A cabin/checked baggage allowance summary with included/not-included status.

A summary card for a ballot measure or proposition — title, ID, status, a neutral summary, and side-by-side arguments for and against.

A categorical bar-chart widget with hover values and category labels.

A card-framed vertical bar-chart skeleton driven by precomputed bar heights.

A card summarising a production batch - identifier, product, quantity, timing and process parameters with out-of-spec values flagged.

A tile showing a home battery's state of charge with a fill visual, its status, capacity, power flow, and backup runtime.

A side-by-side pair of before and after photos documenting completed field-service work.

A row showing a policy beneficiary, their relationship, allocated share percentage, and primary or contingent standing.

A single-select card of benefit plans, each with a tier, premium, feature list and a selected radio state.

An icon+label grid of job benefits and perks.

A dense grid of mixed-size tiles for an editorial or dashboard "bento" layout, where each child claims its own footprint.

A card projecting the current cycle's electricity bill, with usage so far, a trend versus last cycle, and days remaining.

A bill row with payee, due date, amount, and a pay action.

An invoices list container with an export-all action.

A billing summary pairing a current-plan card and a payment-method card, with an optional usage bar below.

A personal introduction hero - a portrait beside a name, role, rich intro text, and call-to-action buttons.

A celebratory card that greets a member on their birthday and highlights a reward with an expiry note.

A blog/article preview card with a cover image, category, title, excerpt, and byline.

A kanban column header with a card count and an optional WIP-limit pill that flags overages.

A boarding pass with route, passenger, boarding/gate/seat, and a barcode stub.

A responsive grid of body-measurement tiles - weight, BMI, body fat and more - each with an optional signed change.

A start/end date-range picker with a highlighted range and summary.

A trip booking summary with dates, guests, a price breakdown, and a reserve CTA.

A mobile bottom tab bar with icon-plus-label tabs, an active state, and optional badges.

A sponsorship card tracking deliverable status with a progress bar and payment note.

A hierarchical path of links with separators, ending in the current page.

An urgent breaking-news strip with a label, headline, and time.

A breed info card with a breed image or paw glyph, name, size, temperament chips, and lifespan.

A card-framed bubble-chart skeleton that plots precomputed x/y points sized by a third value.

A spent-vs-budget bar for a category with an over/warning status colour.

A report-an-issue form with a title, severity select, description, and a dashed file-attach dropzone.

A vehicle configurator step list with choices, prices, and a running total.

A selection bar showing the selected count and a row of batch action buttons.

A sprint-burndown card that draws a dashed ideal line against a precomputed actual remaining-work line.

A labeled action button with variant, size, and optional leading/trailing icon slots.

A segmented set of mutually-exclusive buttons with a single active state.

An author byline with avatar, name, date, and read time.

A byline that reveals an author bio card on hover or focus.

A single-day hour grid with positioned events.

A colored event pill for a calendar grid cell.

A 7-day time grid with positioned events per day column.

A daily calorie intake-vs-goal card with a headline figure, progress bar and macro breakdown.

A security-camera tile with a placeholder preview, a status badge, and a name caption.

A cause card with an image, title, progress bar, raised-of-goal line, days left, and a Donate button.

A retention cancel step showing losses and a stay offer.

A recruiter-view applicant card with match, tags, stage, and advance/reject.

A card-framed OHLC candlestick skeleton drawn from precomputed candle geometry.

A service checklist - an optional title over a list of capabilities, each with a success check and an optional note.

A CC on/off control with an optional language menu for video captions.

A rental vehicle card with specs (seats, transmission, bags) and daily price.

A card showing total CO2e for a period with a stacked bar and legend breaking it down by source.

A responsive grid container that lays out any child cards with configurable columns.

A simple horizontal scroll rail of fixed-width cards.

A horizontal snap slider that holds any cards, with prev/next controls.

A payment card visual with brand, masked number, holder, and expiry.

A list of care-team providers with roles and a message action.

A highly configurable horizontal carousel of preview cards — cards-in-view per breakpoint, peek, looping, arrows and pager.

A selectable shipping-option card showing a carrier, service level, delivery estimate and price.

A slide-in cart panel with line items, subtotal, and checkout.

A cart row with image, variant, quantity stepper, price, and remove.

A cashback card with a big total, this-month and pending stats, and an optional category breakdown bar with legend.

A mission banner with a background photo, dark scrim, optional fundraising progress, and a donate CTA.

A centered hero with an eyebrow, headline, subtext, and dual CTAs.

A completion certificate with recipient, course, date, and credential ID.

A fitness-challenge card with an optional cover image, meta row, and a join button that toggles to a joined state.

A reward-challenge card with a title, a progress bar toward a target, and a reward badge.

A single version changelog entry - a version pill, date, and a colour-tagged list of changes.

A channel banner with avatar, name, subscriber stats, and a subscribe toggle.

A standalone legend of colour swatches with labels and optional values, laid out in a row or a column, for pairing with any chart shell.

A small floating card that shows a hovered data point's category and its series values, for a chart library to position on hover.

A message input for AI chat with an auto-growing textarea, attach button, and empty-guarded send.

A conversation transcript of user and assistant messages as aligned, colour-coded bubbles.

A bill-splitting card with a column per guest, per-guest subtotals, a grand total, and split-by controls.

An online check-in progress stepper with the current step's title and help.

A checkbox with a label and optional help text.

An order summary with line items, totals, taxes, and a checkout CTA.

A chef profile with photo, specialty, and a short bio.

A compact selectable chip with an optional leading avatar or icon.

A numbered list of source citations backing an AI answer, each linking out with an optional snippet.

A checklist of the documents a claim requires, each with a status badge and upload action, plus a dashed dropzone.

A claim summary card with a monospace claim number, status pill, amount and a vertical progress timeline.

A continuously auto-scrolling strip of muted client logos that pauses on hover and respects reduced motion.

A map + clinic list panel with open/closed status and distance.

A read-only editor chrome with file tabs and a numbered gutter for displaying source code.

A tabbed multi-language code block - switch languages with an ARIA tablist and copy the active sample with one click.

A retention cohort table shaded by value, cohorts as rows and weeks as columns.

A retention cohort grid with a heatmap of per-period retention.

A temperature-monitoring card showing the current reading against a safe range with a recent-readings log.

Selectable garment color swatches with names and sold-out states.

A colour field pairing a native swatch, a hex text input and optional quick-pick preset swatches, kept in sync.

A build-your-meal selector with steps for main, side, and drink.

A typeahead select whose text input filters a keyboard-navigable listbox of options.

A searchable command launcher (⌘K) that filters grouped commands as you type.

A comment with avatar, author, timestamp, body, like/reply actions, and nested replies.

A comment section with a count, an optional composer, and a list of comments.

A live text-commentary stream with minute stamps and highlighted key moments.

An at-a-glance CRM account card with logo, industry, a size/revenue/open-deals stat row, and the account owner.

A perks/values grid showcasing what it's like to work somewhere.

A yes/no feature comparison matrix across options, with a highlighted column.

A card listing compliance requirements, each marked done, pending, or failed, with an optional summary count.

A message composer card with To and Subject fields, a body editor, a format toolbar and a Send button.

A tour date row with a date block, venue/city, and a tickets action.

A compact yes/no dialog for confirming an action, with a destructive variant.

A checkbox with an agreement statement and an optional inline link to a policy, for capturing legal consent in a form.

A consent panel with scrollable terms, an agree checkbox, and a signature area.

A privacy-consent panel with per-category toggles and locked essentials.

A person card with avatar, name, role, company, and email or phone action buttons.

A two-column contact call to action - heading, subheading and details on the left, a simple contact form on the right.

A single CRM contact row showing avatar, name, company, last-touch time, and a relationship-status pill.

A locked-content card with a blurred preview, a lock badge, benefits, and an unlock call to action.

A week strip of day columns, each listing its scheduled, published, or draft post chips.

A right-click contextual menu that opens at the pointer over a target area.

A key/button-to-action mapping legend.

A chat-history sidebar listing past conversations grouped by time, with a New chat button.

A funnel with per-stage counts, rates, and step drop-off.

A bottom consent banner with accept, reject, and settings actions and a policy link.

A granular cookie-consent card with per-category toggle switches and Accept all / Reject all / Save controls.

A monospace lat/long coordinate chip.

A button that copies a value to the clipboard and briefly confirms with a "Copied!" state.

An editorial correction note with a label and update date.

A promo banner with a live countdown timer to a deadline and a CTA.

A promo-code entry with an apply button and success/error feedback.

An online-course card with a thumbnail, instructor, lesson count, and progress bar.

A course Q&A thread with a question and voted answers, flagging instructors.

A course header with title, instructor, stats, and enroll, plus media.

A course progress card with percent complete and a continue-to-next action.

A card listing a policy's coverage lines with limits and an optional coloured usage bar per line.

A row for adding or removing an insurance coverage, with a name, optional description and price, and a state switch.

A center-stage carousel where the centred slide is full-size and emphasized while its neighbours scale down and dim.

An account credits tile with balance, note, and add-credit.

A semicircle credit-score dial with the score, band, and range.

A full-width hero rotator that cross-fades between stacked slides with dots and arrows, pausing on hover or focus.

A donut chart of crypto holdings with a legend of label, percentage, and value.

A candlestick price chart card with a segmented time-range selector.

A customer-satisfaction summary card with a headline score and a stacked satisfied/neutral/unsatisfied distribution bar.

A CTA over a blurred image-grid backdrop tinted with the primary colour.

A CTA band with an overlapping offset image on the trailing edge.

A scrollable row of cuisine chips with icons for filtering restaurants.

A currency converter with an amount, rate, and live converted result.

A current-conditions panel with temp, condition, and detail stats.

A sign-off card pairing a work summary with a signature canvas and Clear/Confirm controls.

A 7-day forecast list with icons, precip, and temperature range bars.

A bordered block that groups destructive account or project actions behind clear, individually labelled danger buttons.

A full app shell with a sidebar nav, a topbar, and a scrollable content area.

A dashboard page header with a title, filter controls, and actions.

A small annotated marker that pairs a coloured dot with a labelled value, for highlighting a single point on a chart.

A GDPR/DSAR form for a person to request access to, deletion, export, or correction of their data.

A sortable data table with clickable column headers and hover rows.

A date-range selector with quick presets and the current range shown.

An opportunity summary card with value, stage, owner, and an optional win-probability bar.

A horizontal stepper showing a single deal's position through ordered pipeline stages.

A dealership card with rating, address, open status, and call/directions.

A card showing progress toward a plan's deductible with an optional out-of-pocket maximum bar.

A single quality-defect entry showing the defect type, part, severity, station and time in a compact row.

A liquidity-pool list row showing the pair, TVL, APR, optional volume, and an add-liquidity action.

A term/description key-value list.

A danger-zone account deletion confirm gated by typing a confirm word.

A proof-of-delivery card pairing a drop-off photo and captured signature with the recipient, time and courier note.

An order delivery tracker with a map placeholder, ETA, and status steps.

A tinted banner announcing a grid demand response event, with an urgency level, a reward, and opt in / opt out actions.

A colour-coded pill marking a work item's dependency on another — blocks, blocked-by, or relates-to.

A tall image tile for a travel destination with a teaser and from-price.

A grouped-device tile with a device icon, an on/total count, and a master on/off switch.

An on/off smart-home device tile with a switch, icon, name, room, and status line.

A spelling-suggestion line that promotes a corrected query and offers to search the original instead.

Colour-coded dietary tags (vegan, gluten-free, spicy) for menu items.

A sellable-download card with a cover, type badge, price, sales and rating, and a Buy button.

A turn-by-turn directions list with origin, destination, and steps.

A stacked set of native expand/collapse disclosures for legal and policy text.

A promo/coupon strip with a code and apply action.

A dish detail with photo, description, option groups, and add-to-order.

A schematic dispatch board facade that plots technician pins by status over a gridded map with a legend.

A radius filter slider with a live value and result count.

A dividend line - symbol and name, the dividend amount and frequency, the yield, and the ex-dividend and pay dates.

A horizontal or vertical rule with an optional centered label.

A macOS-style floating app dock whose icons lift and reveal a tooltip on hover, with a dot marking the active app.

A grid of dock doors by time slot, each cell tinted by whether the slot is free, booked or loading.

A provider card with photo, specialty, rating, next availability, and book.

A grid of preset donation amount buttons with single selection and an optional custom amount.

A donation panel with preset amount buttons, a custom amount, a one-time/monthly toggle, and a Donate button.

A card listing recent donors with avatars, names, optional messages, amounts, and times.

A donut/pie breakdown widget with a center value and a legend.

A weight-based dose calculator that computes mg from mg/kg × weight.

A double-elimination bracket with separate winners and losers paths.

A file download row with a file-type icon, name, size, and a download button.

A card breaking a period's total machine downtime into its reasons with a stacked proportion bar and a legend.

A slide-in panel anchored to a screen edge, dismissed by backdrop/close/Escape.

A click-to-open dropdown menu of actions with dividers and destructive-item styling.

An actionable menu opened from any slotted trigger, with keyboard navigation.

A primary site header whose top links open dropdowns, and whose dropdown items open a third-level side flyout.

A small overlay badge showing a video's length, typically pinned to a thumbnail corner.

A digital event ticket with details and a scannable QR stub.

A single earnings-calendar entry - ticker, report date, time-of-day chip, EPS estimate, and a confirmed or estimated tag.

A vote-tally card with candidate bars, percentages, and a projected winner.

A short qualifying questionnaire with choice-button questions, a check button, and a success or warning result banner.

A full message view with subject heading, sender row, HTML body and an attachments strip.

A single inbox line showing sender, subject, snippet, time, plus star and unread state.

A single step in a sales email cadence, showing its order, subject, send delay, and delivery status.

A verify-your-email prompt with a resend action.

A row of big emoji faces for capturing a quick sentiment reaction to a question.

A compact profile card with an avatar, name, title, department, location and an availability status pill.

A no-messages empty state with a positive tone and optional CTA.

A no-content placeholder with an illustration, message, and optional call to action.

A single REST endpoint line - colour-coded method pill, monospace path, and a short summary - for API reference lists.

A tokenized SVG donut that breaks down where a home or grid's electricity came from, with a renewable share in the center.

A live power-usage card showing current watts, a usage bar, and today's energy and cost.

A creator metric tile with a value, a directional change, and an optional sparkline.

A course enrollment panel with price, perks, and an enroll button.

A card showing an epic's name, its stories-done count, and a completion bar.

A graphic equalizer with per-band vertical sliders and presets.

A serviced-asset card showing an equipment's name, model, serial, install date, warranty status and last service.

A reference table of API error codes - code, name, HTTP status and what each one means.

A ranked players/teams leaderboard with points, wins, and rank deltas.

A single-elimination bracket with rounds, match scores, and winners.

A small pill showing an estimated arrival with a clock icon, colour-coded by delivery health.

A card showing an EV charge session - battery state of charge, status, power, time remaining, and range added.

An electric-vehicle range readout with a battery charge gauge.

An event card with a prominent date block, title, time, venue, and a CTA.

A large day/hour/minute/second countdown to an event start.

An event banner with title, date, venue, and a get-tickets CTA over an image.

An inline new-event popover with title, time, and color.

An agenda by time with track filters and parallel sessions per slot.

A single exercise line in a workout list — a done toggle, name, sets by reps and optional weight.

A format + schedule export popover with a run action.

A garment material composition and care instructions panel.

A search results layout with a facet-filter sidebar beside a column of result cards.

A key-facts sidebar with label/value pairs.

An expandable FAQ list where each question toggles its answer.

A responsive grid of icon-badged feature cards that reflows from one to four columns.

A plans × features comparison grid grouped by category.

A guided coachmark with step, message, and next/skip.

A news/blog homepage layout with one large lead story spanning two columns and two rows beside a grid of smaller stories.

A social post with author, body, optional media, and like/comment/share actions.

A compact thumbs up/down control for rating an AI response, with a toggleable selected state.

A floating launcher button that opens a small panel to rate and send written feedback.

A pet meals card listing each feeding time with its food and amount, and a tap-to-check fed toggle per meal.

An image with a caption and optional credit line.

A drag-and-drop file upload area with a browse fallback and a file list.

A horizontal row of toggleable filter chips with a clear-all action.

A horizontal row of removable active-filter pills with a "Clear all" button.

A responsive card grid with a row of filter chips that show or hide cards by category.

A faceted filter sidebar with grouped checkboxes, counts, and clear-all.

A sizing/fit quiz question with selectable option cards.

Fixtures grouped by date, showing kickoff times or final scores.

A flippable term/definition card for study and recall.

A vehicle status card for a fleet dashboard, showing driver, live state, location and fuel level.

A flight search result with airline, times, duration, stops, and price.

A compact route/dates/passengers summary bar with an edit action.

A circular floating primary-action button, optionally expanding into a speed-dial of secondary actions.

A floor-plan panel with a level toggle and room tags with areas.

A breakpoint-free responsive grid whose column count is derived from the available width and a chosen minimum card width.

A first-notice-of-loss form card - incident type, date of loss, description, photo dropzone and submit.

A vertical mailbox folder list with per-folder icons and unread count badges.

A follow/unfollow toggle with an optional follower count.

A full site footer with a brand block, link columns, and a copyright line.

A responsive multi-column grid of grouped footer links.

A password-reset request form with email and a back-to-sign-in link.

A grouped error summary linking to each invalid field.

A wrapping row of toggleable topic tag pills, each with an optional thread count, that filter a forum.

A suspicious-activity notice with confirm and freeze-card actions.

A hamburger button that opens a full-screen overlay of large navigation links.

A goal thermometer card showing the amount raised, percent of goal, a progress bar, and an optional donor count.

A conversion funnel with per-stage counts, bars, and step conversion rates.

A store game card with cover, genre, rating, discount, and price.

A game store hero with trailer/buy actions and a spec panel over key art.

A player profile with rank, level, key stats, and earned badges.

A tier emblem with a rank label and points (SR/MMR).

A single timeline row with a coloured bar positioned by precomputed left and width percentages.

A segmented control of three gas-fee tiers (Slow, Normal, Fast), each showing its cost and estimated wait.

A radial semicircle gauge for a single value against a threshold tone.

A single search result — optional thumbnail, breadcrumb URL, linked title, two-line snippet and a meta row.

A colored genre card with a name and a decorative art corner.

An area-alert setting with a title, radius, and on/off switch.

An objective row with an owner, an overall progress bar and percentage, a status pill and optional key-result mini-bars.

A widget of goals each with a current/target figure and a progress bar.

A booking card for an office visit with office details, a date-and-time-slot grid, and a Book button.

A checklist of required documents, each with a status badge and an upload button, above a dashed dropzone.

A multi-step official form with a numbered stepper header, a current-step field area, and Back/Next controls.

A gradebook table of assignments with weights, scores, and grades.

A card summarising the electricity grid's state - stable, strained, or outage - with frequency and load.

A pet grooming service card showing the service, groomer, date and time, add-on chips, price, and a Book button.

A responsive overview grid of all groups with mini standings and qualification shading.

A group table with P, W, D, L, GF, GA, GD, Pts and qualification shading.

A headcount tile with a large count, a direction-coloured change, and an optional per-team breakdown row.

A single themed heading at a chosen level (1-6) with matching visual size.

A patient history timeline of visits, labs, prescriptions, and vaccines.

A card showing current bpm and zone plus a five-segment zone bar with the active zone raised and ringed.

A GitHub-style contribution heatmap of activity intensity over time.

A portfolio holding row with ticker, shares, value, and change.

A horizontal milestone timeline with done/upcoming markers.

A hotel search result with photo, score, amenities, and price per night.

A scrollable hourly forecast strip with icon, temp, and precip.

A smart-home hub tile showing online/offline state, paired-device count, offline count, and signal strength.

An inline SVG wrapper with a configurable size and optional accessible label.

An icon-only button with a required accessible label for screen readers.

A full-bleed background-image hero with a dark scrim and centered content.

A before/after image slider with a draggable, keyboard-accessible reveal handle.

A card for a single AI-generated image - the picture, its prompt, model and size, and quick actions.

A full-screen image viewer modal with previous/next navigation and captions.

A bold "amount equals outcome" statement translating a donation into concrete impact.

A dismissible in-app promo/announcement card with an optional image and CTA.

A bordered, divided list of email rows with sender, subject, snippet, time, star and unread state.

A detail card documenting an insurance incident - reference and date, location, narrative, involved parties, and photo thumbnails.

A load-more trigger that dispatches a loadmore event when it scrolls into view, with a spinner and an end-of-list state.

An inline mid-article newsletter signup prompt with an email field.

A compact single-question poll that flips from clickable options to a results view with share bars.

A pass/fail/na inspection checklist card with a passed-of-total header and per-item result markers.

An instructor profile with bio, rating, and teaching stats.

A digital health insurance card with plan, member name, and member ID.

A compound-interest calculator with principal, rate, and term inputs.

A list of upcoming interviews with date/time, format, and a join action.

A stock-bin row showing a material, SKU, on-hand quantity, a fill bar against the reorder point, and its stock status.

An inline email-plus-role invite form that emits an event with the address and chosen role on submit.

A full invoice with parties, line items, and totals.

An invoice list row with number, date, amount, status, and download.

A day-by-day trip schedule with timed activities down a connecting line.

A job listing card with title, company, location, salary, and tags.

A job description with a summary and titled requirement/benefit sections.

A compact work-order card summarising an assigned field-service job with priority, arrival window, technician and status.

A faceted filter sidebar for job search (type, location, experience).

A job posting header with role, company, tags, salary, and apply/save.

A horizontal board of workflow columns, each stacking task mini-cards with a tag, priority dot, and assignee avatar.

A kitchen display board of open order tickets, each colour-coded by status so line cooks can read the pass at a glance.

A team's route through the knockout stage as a vertical timeline of ties.

A grid of KPIs with value, target progress, and ahead/behind status.

A compact KPI tile with a label, value, and colored delta.

A lab test row with value, reference range, and a normal/high/low flag.

A small coloured pill that tags an email with a named label like Work, Personal or Urgent.

A locale selector dropdown showing the current language and a menu of alternatives.

A small pill marking a lead as hot, warm, or cold with an optional numeric score.

A ranked leaderboard row with avatar, name, score, and a rank-change arrow.

A full standings table with a form guide and qualification-zone markers.

A modular course curriculum with lessons and per-lesson progress.

A lesson row with number, title, duration, and complete/current/locked state.

A small pill mark for a software license or compliance standard, optionally linking to its terms.

A dimmable smart-light tile with a power switch, a brightness slider, and an optional colour swatch.

A line-chart widget with a headline value, period toggle, and a filled trend line.

A card-framed line-chart skeleton that draws a precomputed series path with axes and gridlines.

A pitch with players positioned by formation lines from goalkeeper to forwards.

A festival lineup poster with headliners and supporting acts.

A property listing hero with a photo gallery mosaic and key facts.

A colour-coded status pill for a property listing (for sale, pending, sold…).

A pulsing red LIVE indicator for streams and real-time content.

A timestamped live-blog update with an optional key-update flag.

A live match card with a pulsing indicator, minute clock, score, and scorers.

A horizontal strip of compact live scores with minute and a live indicator.

A stream player overlay frame with a LIVE badge, viewer count, streamer identity, a category chip, and a control-bar facade.

A live-stream player with a pulsing LIVE badge, viewer count, and latency indicator.

A freight load row showing origin, destination, equipment, weight, pickup date and rate with a Book action.

A responsive card grid that shows a first batch of items and reveals more, a step at a time, from a Load more button.

A translucent veil with a spinner that covers its container while content loads.

A placeholder card with a shimmering media block and text lines.

A weapons/gear loadout summary with slots and an equip action.

A map pin popup card with photo, rating, address, and directions/save.

A smart-lock tile showing locked or unlocked state with a colour-coded icon and a toggle button.

A sign-in form with social providers, email/password, and remember me.

A grid or slider of partner/client logos (images or wordmarks) for social proof.

An editorial outfit/product grid container for a lookbook.

A fashion campaign hero with an eyebrow, title, and shop CTA over an image.

A reward reveal card with a rarity glow, item, and equip/continue.

A high-visibility alert card for a missing pet, with photo, details, last-seen location, reward and contact actions.

A punch-card style loyalty tracker with filled and empty stamps.

A membership tier card with points, progress to the next tier, and perks.

A synced lyrics view highlighting the active line.

A compact tile showing a machine's name, ID, live operating status and its OEE and uptime figures.

A check-your-email confirmation for a passwordless sign-in link.

A single mailbox folder row with an icon, label, and unread count badge.

A down-for-maintenance page with an ETA and status link.

A single preventive-maintenance task row showing asset, task, due date, interval, technician and a status pill.

A single line on a shipping manifest showing the item, SKU, quantity, weight and a colour-coded handling status.

A full-bleed map shell with a search bar, category chips, pins, and zoom.

A symbol key for a map with dot/line/area swatches.

A split map + result list panel with price pins for property search.

A two-button segmented control that switches search results between a list view and a map view.

A margin-usage card showing buying power used as a tone-coloured progress bar with available and maintenance figures.

An order-book depth panel - two columns of bids and asks with price, size and precomputed depth bars.

A continuously auto-scrolling horizontal loop of logos or text pills that pauses on hover and respects reduced motion.

A Pinterest-style masonry column layout that holds cards of varying heights.

A pre-match lobby showing players' ready-state, host, and open slots.

A finished-match card showing the final score with the winner emphasized.

A head-to-head match statistics panel with comparison bars.

A goals/cards/subs event timeline with home and away events on either side of a center line.

A horizontal date/round selector for switching between matchdays.

A day's meals broken into food items with per-meal and whole-day calorie totals.

A thumbnail strip with a large active preview that swaps on thumbnail click.

A daily dose timeline grouped by time of day with taken/pending states.

A propose-and-confirm time picker showing when everyone is free.

A navbar variant where primary links can reveal a grouped mega-menu dropdown panel.

A digital loyalty membership card with the member's name, number, tier, and a scannable barcode facade.

A tier card listing membership perks with included checks and excluded crossed-out rows.

An @mention notification showing who mentioned you, where, and a context snippet.

A menu dish row with name, description, price, dietary tags, and image.

A titled menu section grouping menu-item rows under a heading.

A grid of tappable POS menu buttons, each showing an item name and price with an optional colour tint.

A desktop application menu bar whose top-level items each open a dropdown of actions with optional shortcuts and dividers.

A merch release card with a product image, price, an optional sold-through bar, a status badge, and a buy or notify button.

A chat message bubble aligned by sent/received with a timestamp.

A compact list row for a single utility meter reading with its ID, type, value, date, and change.

A metric card comparing the current value to a previous period.

A dashboard metric tile with an icon, value, and colored trend delta.

A grid of uniform square tiles with optional 2x2 feature tiles, for a metro or app-launcher layout.

An odometer or efficiency pill for a vehicle.

A small dated milestone chip with a diamond icon coloured by status - done, upcoming, or missed.

A compact month picker with today, selected, and event dots.

A compact player widget with cover, title, progress, and play/pause.

A minting panel with a quantity stepper, live total, supply progress, and a mint button.

A centered dialog with a backdrop, header, body, and footer, dismissed by backdrop/close/Escape.

A small "model wears size" fit note for a product photo.

A dropdown for choosing which AI model handles a conversation, with per-model descriptions and badges.

A compact moderation toolbar of labelled action buttons (Pin, Lock, Move, Remove) that dispatch events.

A card of grouped, selectable option chips for customising a menu item with modifiers.

A month grid calendar with weekday headers, today, and event dots.

A live mortgage calculator with price, down payment, rate, and term inputs.

A row-justified image gallery whose tiles of varying aspect ratio flush-fill each row at a uniform height.

A ranked list of popular stories with big rank numbers.

A movie poster card with rating badge, title, year, runtime, and genre chips.

A wizard form with a step indicator, a current-step panel, and back/continue.

A site header with a logo, primary links, trailing actions, and a mobile toggle.

An icon-only vertical app rail that expands to reveal labels on hover or focus.

A responsive grid container for nearby place cards.

Walk/transit/bike/school scores for a property's neighborhood, with bars.

A chain-select dropdown - a trigger showing the active network and a menu of chains with a check on the current one.

A horizontal news item with a thumbnail, category, timestamp, and headline.

A pull quote with an attributed source and role.

A centered email capture block with title, description, field, and fine print.

A centered, email-width content block with a header, hero, body, CTA, and footer.

A card that lists a single NFT with its artwork, name, collection, and price.

A responsive grid of NFT tiles, each showing artwork, name, collection, and price.

A search empty state with the query, guidance, and suggestions.

An empty-search state that echoes the failed query and offers alternative searches plus optional tips.

A compact quick-note input for CRM timelines, with mention and attach affordances and a Save action.

An unread count (or dot) badge overlaid on the corner of an icon.

A persistent full-width severity banner with an optional action and dismiss.

A full notifications panel with filter tabs, grouping, and mark-all-read.

A "you're all caught up" placeholder shown when there are no notifications.

A small date/section header that groups rows within a notification list.

A dropdown/drawer panel listing notifications with an unread count and mark-all-read.

A notification row with an actor avatar, message, timestamp, and read/unread state.

A matrix of notification types against Email, Push, and SMS channels, each cell a toggle switch.

A full playback bar with track, transport controls, and a seek progress.

A Net Promoter Score survey with a 0-10 recommend scale and an optional follow-up reason.

A compact calories and macros panel for a dish.

A radial gauge showing an overall equipment effectiveness percentage with its availability, performance and quality sub-metrics.

A bordered public-notice strip with a seal icon, a title and message, and an optional action link, in info, warning, or alert levels.

A no-connection notice with a retry action.

A compact on-site invoice card with a status pill, line items, a totals block and a Collect payment button.

A grouped new-hire task checklist with a progress header and completed items shown checked and struck through.

A setup task list with progress and per-task actions.

A who's-online card listing members with avatars and a presence dot coloured by status.

A list of upcoming open-house viewing slots with RSVP and full states.

A columnist opinion piece card with kicker, headline, and byline.

A single options-chain line - strike, bid and ask, volume and open interest in the mono face, tinted when in-the-money.

A mono price ladder showing resting bid sizes on the left, ask sizes on the right, and a highlighted spread row in the middle.

A ticket purchase confirmation with order lines, total, and view-tickets.

An order line with quantity, item, modifiers, and price.

A horizontal rail of order pipeline stages - New, Preparing, Ready, Served - each with a live count and the current stage highlighted.

A receipt-style kitchen ticket listing ordered items, their modifiers, and a kitchen status.

A buy/sell order ticket - a green/red side toggle, order-type select, quantity and price inputs, an estimated cost and a place-order button.

A horizontal order-status stepper from placed to delivered.

A manager node with an avatar and a connected row of direct-report mini-cards, one branch of an org chart.

A one-time-code input with per-digit cells and auto-advance.

A card pairing a stylized schematic map facade of affected regions with an outage list, each coloured by restoration status.

A mix-and-match outfit builder with slots, prices, and a running total.

An image card with a gradient scrim and overlaid title, subtitle, and CTA.

A compact one-line parcel summary with carrier, tracking number, a colour-coded status pill and an ETA.

A page-number list with previous/next controls and "…" truncation for long ranges.

An itemised list of parts used on a job, with SKU, quantity, price, stock status and a total.

A squad invite prompt with accept/decline actions.

A password field with a strength meter and a live rules checklist.

A patient banner with identity, key facts, and allergy alerts.

A saved card row with brand, last-4, expiry, and edit/remove.

A card-reader terminal panel showing the charge amount and its state - tap or insert card, processing, approved or declined.

A creator payout card breaking a period's earnings into revenue sources with a paid/pending status.

A pay-period card summarising gross and net pay with itemised earnings and deductions lists.

A subscribe-to-read gate with a fade, offer, and subscribe/sign-in.

A shootout tracker showing scored/missed kicks per team with the running score.

A review summary card with an overall rating, per-competency rating bars and a goals list with status pills.

A this-vs-previous-period metric with a delta.

A responsive grid of member perk tiles, each with an icon and label, where locked perks dim and show a lock badge.

A grant-access prompt with allow/deny actions.

A vertical care-history timeline for a pet, colour-coding each entry by type (vaccine, visit, med, note).

A summary card for a pet insurance policy, showing plan, status, policy number, coverage percentage and deductible.

A card for a pet's medication with dosage, schedule, the next dose highlighted and a row of markable dose times.

A compact pet summary card with a photo or paw glyph, name, breed, and a stat row for age, weight, and gender.

A compact card showing a pet's latest weight, its change since last weigh-in, healthy range and a mini trend line.

A petition card with a running signature count, optional goal progress, and a quick name/email sign form.

A captioned image sequence for visual storytelling.

A tokenized SVG donut chart skeleton that renders from caller-precomputed slice geometry, with a legend.

A pill-style segmented navigation where the active item sits raised on the surface.

A highlighted, stuck-to-top forum post with a pin marker, title, author meta and optional excerpt.

A horizontally scrolling kanban of deal stages, each column holding stacked deal mini-cards.

A place search result with marker, rating, category, distance, and directions.

A single pricing plan column with price, features, and a CTA.

A player card with squad number, position, nationality, and key stats.

A playlist hero with cover, title, description, meta, and play/save.

A single pledge tier showing an amount, description, benefits checklist, backer count, and a confirm button.

A podcast episode card with cover, meta, excerpt, and an inline audio player with scrub.

A podcast episode with cover, description, play button, and listen progress.

A card showing a loyalty member's points total, tier, and any points about to expire.

A single ledger row for a points transaction - description, date, a signed delta coloured by direction, and a running balance.

A compact summary card for a single insurance policy - type, number, status pill and key terms.

A tinted banner announcing an upcoming policy renewal with its date, days remaining, and a renew action, scaled by urgency.

A numbered, sticky contents list for a legal or policy document that tracks the current section on scroll.

A vote poll with options and live result bars.

Allergen pollen levels with per-allergen bars.

An anchored floating panel toggled from a trigger, for richer content than a tooltip.

A filterable grid of work tiles with a row of category chips that show or hide projects client-side.

A target-vs-actual allocation panel - per holding a bar of actual weight with a target marker and a drift pill when off-target.

A portfolio total with today's change and an allocation bar + legend.

A numeric entry keypad with a readout and an Enter action for POS amount and quantity input.

A holding summary card - symbol and shares, market value, a coloured profit/loss figure with percent, and average cost vs current price.

A full forum post card with the title, author identity, timestamp, rendered body, and a footer of vote, reply, share and save actions.

Hourly rain-probability bars with percentages.

A premium breakdown card showing the headline total, a line-item list, an optional discount, and a pay action.

A medication card with dosage, refills, prescriber, and next refill.

A list of people with avatars and colored presence status dots.

A month grid showing the fare for each day, colour-coded by price band.

A table of a property's price events (listed, reduced, sold) with changes.

A multi-tier feature comparison pricing table.

A formatted price display with an optional struck-through original price.

A continuously scrolling horizontal tape of market quotes (symbol, price, change) that pauses on hover and respects reduced motion.

A single pricing plan card with price, feature list, CTA, and a featured variant.

A request-a-quote card - title, optional starting price and description, an included-features checklist, and a primary CTA.

A pricing section with a monthly/annual toggle and a row of plan cards.

A monthly/annual billing switch with a savings note.

A small flag icon and label that signals a task's priority level by colour.

An e-commerce product card with image, brand, price, rating, and add-to-cart.

A product image gallery with a main image and a thumbnail strip.

A responsive product listing grid (2→3→4 columns) for product cards.

A modal product preview with image, price, description, and add-to-cart.

A horizontal view of a production line's stations, each a status-coloured node with its throughput, connected in sequence.

A centered person card with avatar, name, role, short bio, and social links.

A setup-progress card showing a completion percentage over a bar and a checklist of done and remaining steps.

An edit-profile form with fields, helper text, and save/cancel.

A linear progress indicator with a value from 0-100 and an optional label.

A circular/radial progress indicator with a centered percentage value.

Step/carousel dots with an elongated active dot.

A side-by-side before/after photo tile with labelled dates for tracking physical change.

A circular progress ring with a center percentage and a label/caption.

A compact labeled multi-step progress indicator with connectors.

A long-form case-study layout with a hero, a Problem/Solution/Result narrative, and an outcome metrics row.

A card summarising a project's health status, a one-line note, and a few key metrics.

A wrapping row of starter-prompt chips that prefill an AI composer when clicked.

A real-estate listing card with photo, price, location, and beds/baths/area specs.

A side-by-side property comparison table with photo/price headers.

A grid of key property facts (beds, baths, area, year) as icon tiles.

A mid-cycle plan change note with a prorated charge breakdown.

A leave-request form with a type select, start and end dates, a reason field and a balance note that emits a pto:request event.

A list row for a public record — document icon, title and type, a mono date, an access badge, and a View or Request action.

An emphasized inline quotation with an accent left border and optional citation.

A stamp-card showing earned and remaining punches toward a reward.

A card prompting the user to enable browser/push notifications, with allow and dismiss.

A card-framed QC inspection checklist where each step shows a pass, fail or pending result marker.

A quest/objective card with reward, progress, and reset timer.

A playback queue showing now-playing and up-next tracks.

A quiz question with lettered answer options and correct/wrong states.

A quiz score summary with pass/fail and a per-question answer review.

A quote table of line items with a subtotal, optional tax, and grand total block.

A large decorative pull-quote card with an oversized quotation mark and attribution.

A responsive set of side-by-side insurance quote columns with premium, deductible, coverage and a feature list.

A tokenized SVG radar chart skeleton that renders a data polygon over a spoked grid from caller-precomputed geometry,.

A group of radio options as selectable cards with descriptions.

A min/max range filter with a visual selected-segment track, two draggable-looking handles and numeric min/max inputs.

A labeled range slider with a live value readout.

A compact meter showing API calls used against a quota, with a coloured fill bar and reset time.

A compact card that asks users to rate an experience on an interactive star row.

A range slider with a floating value bubble above the thumb for score, rating and NPS-style inputs.

An emoji reaction selector with per-emoji counts and an add-reaction control.

A tiny check-mark indicator showing whether a message was sent, delivered, or read.

A fixed corner badge showing the percent of an article read, between a start and finish marker.

A top scroll progress bar that fills as the reader moves through an article.

A live active-users number with a pulse and a mini activity spark.

A history block of recent-query chips, each with a clock icon and remove button, plus a clear-all action.

A recipe card with a photo, prep time, servings, and a difficulty badge.

A pill segmented control that switches a gift between one-time and monthly, with an optional recurring-impact note.

A repeat-frequency builder with interval and weekday selection.

A single loyalty redemption entry - reward, date, points spent, and status.

A refer-a-friend widget with a reward and a copyable referral link.

A card inviting a member to share a referral code for a bonus, with one-click copy.

A grid of related posts with image, category, and title.

A horizontal, scrollable rail of recommended products.

A card showing the current renewable share of energy against a target, with a goal marker and an optional source breakdown.

A tap-to-count card with a big count display, a large +1 button, and a reset, with an optional target cap.

A compact reply editor — an avatar beside a bordered field with a small formatting toolbar and a primary Reply button.

A compact report-an-issue form — category select, description textarea, optional location, and a submit button that dispatches the report.

A dimensions/measures filter bar with active-filter chips.

A report masthead with title, date-range switch, and export.

A flag-content form with a radio list of reasons, an optional details field and submit/cancel actions.

A profile card for an elected official — photo or initials, office and district, party pill, and a row of contact icon buttons.

A karma summary tile showing a member's points, level, progress to the next level and a points breakdown.

Side-by-side request and response panes for an HTTP call - method pill, URL, headers/body, and a colour-toned status line.

A table-booking widget with party size, date, and time selection.

A panel with a draggable edge handle that resizes its width or height.

A per-resource booking timeline across the day.

A restaurant card with cuisine, rating, and delivery time/fee.

A notify-when-available email capture for an out-of-stock variant.

A drag-drop resume uploader with a dropzone and an uploaded-file state.

A retention-over-time curve shell with a filled area and day labels.

A dashed-border RMA label card with the return number, order and reason, a barcode facade and carrier.

An earnings overview card with a headline total, a row of stats with coloured deltas, and an optional mini bar chart.

A product review with a star rating, title, body, author, and verified badge.

A prominent review score with a qualitative label and review count.

An average rating with per-star breakdown bars and total review count.

A card for a redeemable loyalty reward with its image, points cost, and a Redeem button.

Renders a trusted blob of HTML as tokenized, themed body copy.

A compact formatting toolbar of grouped icon buttons that emit format commands for a rich-text editor.

A card summarising an overall risk level with an optional score and a list of contributing factors, each with an impact chip.

A role-by-permission matrix of checkboxes.

A room-by-room overview of smart devices, each room a card of device chips that highlight when on.

A hotel room type with photo, beds, perks, and nightly rate.

A stylized route facade showing numbered, connected stops on a schematic map panel with a distance and time summary.

A technician's day laid out as a vertical timeline of scheduled stops with per-stop status.

A route summary with time, distance, mode, and traffic, plus a start action.

A going/maybe/no RSVP selector with an attendee count.

A compensation range pill with period and an optional note.

A quota-versus-pipeline card with headline figures and horizontal bars for committed, best-case, and pipeline.

A tokenized SVG Sankey diagram skeleton that draws stage nodes and flow ribbons from caller-precomputed geometry,.

A row of saved search-filter presets as toggleable pills, with a button to save the current query as a new preset.

A list of bookmarked roles with company, tags, salary, and a remove action.

A saved-search row with its criteria, new-match count, and a notify toggle.

A savings goal with a progress ring, saved-of-target figures, and add-funds.

A card-framed scatter-plot skeleton that dots precomputed x/y point positions with axes.

A tappable smart-home scene card that activates a group of devices at once.

A device automation tile showing on/off times, a weekday strip, and an enable switch.

A recurring report entry with schedule, format, and an enable toggle.

A parameters/fields reference table - name, type, required flag and description with optional defaults.

A list of nearby schools with ratings, level, and distance.

A big match header with both teams' crests, the scoreline, and status.

A vertical section-tracking side nav whose active link follows the section currently in view.

An install command with package-manager tabs (npm, pnpm, yarn, pip) and one-click copy.

A search input with a filtered suggestions dropdown and keyboard navigation.

A search input with a leading icon and a clear button.

A prominent centered search block with a headline, large input and popular-query suggestion chips.

An inline text span that highlights the matched search term within a result label using a marked run.

A horizontal coursing timeline - Appetizer to Entree to Dessert - with a status dot and dish hints for each course.

A team-seats panel with usage, add/invite, and a members list.

A selectable aircraft seat grid with available/selected/taken states.

A padded page section with an eyebrow, heading, description, and content slot.

An audience rule builder with match logic and a live size estimate.

An iOS-style single-select switch of pill segments for toggling between a few mutually exclusive views.

A labeled select dropdown field with help text.

A settings row pairing a label and help text with a native select of options.

A severity-tinted banner announcing a sensor reading that breached its threshold, with an acknowledge action.

A compact sensor tile showing a labelled value and unit, colour-coded by status.

A regional server list with ping and online/busy/down status.

A booking card for a scheduled service visit, with date, time window, technician and confirm or reschedule actions.

A service or capability card with a tinted icon tile, a title, a short blurb, and an optional "Learn more" link.

A find-a-service search panel with a prominent search bar, category tiles, and popular quick links.

A maintenance records timeline with date, mileage, and service.

An agenda session with time, title, speaker, track, and room.

A list of active device sessions with revoke actions.

A vertical, grouped navigation for the sections of a settings area, with an active highlight.

A titled settings group that wraps related setting rows in a bordered, divided card.

A weather warning card with severity, detail, and expiry.

A beauty shade matcher with undertone and depth selection plus a match card.

Social share buttons plus a copy-link action for an article.

A Share button that opens a popover of social share targets plus a Copy link action.

A card summarising shift-to-shift handover notes, with flagged items highlighted and a sign-off footer.

A staff × days grid of work shifts.

An end-of-shift sales summary card - a shift header, a grid of headline figures, and an optional payment-method breakdown bar with legend.

A weekly staff-by-day grid where each cell holds an optional coloured shift chip.

A vertical stop-by-stop shipment timeline from origin scan to delivery, with a tracking number and status header.

A video reel block - a poster still with a dark overlay, a big centered play button, and an optional title and duration.

A content + sidebar two-column responsive layout that stacks on mobile.

A collapsible vertical navigation with grouped, headed sections of links.

An email signature with a name, role, and linked contact details beside an avatar.

A framed canvas field for drawing a signature with a mouse, pen or finger, with Clear and Done controls.

A registration form with fields, a terms checkbox, and a sign-in link.

A headline + single CTA conversion band.

A single-elimination knockout bracket with rounds, matches, and winner highlight.

A measurement table mapping sizes to body/garment measurements.

Selectable size chips with sold-out states and a size-guide link.

An earned skill token with an optional level.

A fit-percentage ring with matched and missing skills for a job.

A cosmetic item card with rarity-colored border, price, and buy/owned state.

An SLA countdown card showing time remaining and a fill bar coloured by on-track, at-risk or breached status.

A card showing total sleep with a stacked stage bar (deep, light, REM, awake) and a labelled legend.

A playback sleep timer with preset durations and a live countdown.

A brief bottom message with a single optional action, such as Undo.

A snooze-until dropdown listing preset times plus a custom "Pick date & time".

Provider sign-in buttons (Google, Apple, GitHub) in a stack or row.

A single-panel card showing live solar output in kW with today's energy, peak, and self-consumption.

A writers/producers credits list for a track.

A results toolbar with a count, a native sort dropdown and a grid/list view toggle.

A result-sorting selector with the current option shown and a checkable menu.

An invisible wrapper that adds padding and margin around any component from a fixed set of choices.

A metric card with a value, delta, and an inline sparkline trend line.

An event speaker card with photo, role, and their session.

A trim-by-trim spec comparison table with a recommended column.

A category spending donut with a total and a legend of amounts and shares.

A rotating loading spinner with a configurable size and accessible label.

A primary action button with an attached caret that opens a menu of related actions.

A two-column hero with text on one side and media on the other.

A resizable two-pane layout with a draggable divider between a start and an end pane.

A two-pane layout with a variable width split that stacks top/bottom on mobile.

Tiered sponsor logos (platinum/gold/silver) as wordmarks.

A brand-deal card showing the sponsor, campaign, deal value, a status pill, and a deliverables count.

A sprint summary bar showing the sprint name, date range, story-point progress, and days remaining.

A card summarizing a staking position - APY, staked amount, rewards, and stake/unstake actions.

A star rating display with a configurable max and value, and a filled/empty state per star.

An interactive star rating control with hover preview and full keyboard support.

A single-metric card with a big value and a colored trend delta.

A single-metric tile showing a value, its label, and a period-over-period change.

A statement period row with closing balance and a download action.

A responsive band that lays out a row of stat cards under an optional heading.

A colored status dot with an optional label for presence (online/away/busy/offline).

A single service status row - a coloured status dot, the service name, and optional uptime.

A multi-step progress indicator with complete, current, and upcoming step states.

A scroll-aware sticky header that gains a shadow once the page scrolls.

A map + store list locator with markers, hours, and directions.

A news list row with category, time, headline, and a thumbnail.

A day-streak counter with a flame badge, a large streak number, and a week row of completed-day dots.

A daily-streak card with a flame headline, a week of check dots, and the next reward milestone.

A live streamer thumbnail with a live badge, viewers, and streamer info.

An assistant streaming indicator with an AI avatar, bouncing typing dots or partial text with a blinking caret, and a Stop button.

A hero heading whose trailing phrase types and retypes in an accent colour and mono font.

A board summary row with an icon tile, name and description, topic and post counts, and an optional latest-post preview.

A dropdown menu where some entries open a cascading flyout submenu to the right.

A membership tier card with price, benefits checklist, subscriber count, and a subscribe button.

A plan summary with status, renewal, details, and manage actions.

A card of subtask rows with a segmented progress bar and a done/total count, striking through completed items.

A completed-confirmation with a check, summary, and next actions.

A daylight arc with the sun's position, sunrise, and sunset times.

A paid, highlighted live-chat message with an avatar, sender name, amount pill, and tier tint.

A thank-you wall of top supporters, each a tile with an avatar, name, amount or tier, and an optional message.

A step "Question X of Y" indicator with a precomputed completion bar for multi-step surveys and quizzes.

A single survey question with selectable option rows for single, multi, or scale answers.

A token swap interface - a From panel, a To panel, a flip button between them, a rate line and a primary Swap action.

An expandable course syllabus grouped into sections of lessons.

A single symptom-checker question with selectable answer options.

A compact open-tab card showing the guest, item count, and running total.

Reservation time-slot chips with available and unavailable states.

A stylized restaurant floor-plan facade of table tiles colour-coded by occupancy status.

A sticky in-article contents nav that tracks the active section on scroll.

A horizontal ARIA tablist with arrow-key navigation that toggles matching content panels.

A small content keyword/tag label, optionally removable.

A wrapping list of topic tag links.

A side-by-side comparison of energy tariffs with rate, standing charge, features, and a Switch button per plan.

A compact task tile with a tag, title, coloured priority pill, subtask progress, due date, and assignee avatar.

A CRM follow-up task row with a completion checkbox, title, related contact, and a due-date pill that flags overdue.