UI Patterns40

Windowed schedule grid

Rows of resources against a fixed time window, where each block is sized by its overlap with the window rather than by its own duration.

• schedule
• timeline
• grid
• flexbox

Benchmark progress bar

Places a raw figure on a scale of external benchmarks instead of printing it plain.

• progress
• benchmarks
• css-only
• data-viz

Cross-highlight matrix

A two-axis lookup table with both headers sticky, hover lighting the full row and column at once, and a durable click-to-pin selection for touch.

• table
• matrix
• sticky
• accessibility

Left-truncating paths

Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.

• truncation
• paths
• text-overflow
• breadcrumbs

Shape-mark sequence

A sequence compressed into a row of small marks whose shape carries the state.

• stepper
• sparkline
• series
• truncation

Linked month bars

A month-by-month volume timeline built from plain divs where every aggregate row links to the filtered view that produced it.

• timeline
• drill-down
• css-only
• data-viz

Glass vial meter

A vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck — all CSS, no images.

• meter
• skeuomorphic
• css-only
• reduced-motion

Partitioned stage bar

Progress for work with several possible endings, drawn as a census rather than a fraction.

• progress
• stacked-bar
• batch
• legend

Term-by-term derivation

A computed figure shown with the audit trail behind it — the number is the product and the derivation is the receipt.

• explainability
• calculator
• disclosure
• formula

Plan preview tree

A dry run shown as a before-and-after tree with counts now, after, and the difference.

• dry-run
• diff
• tree
• preview

Uniform slot shell

One card shell many independent sources render through, where the shell does the capping.

• dashboard
• widgets
• cards
• empty-state

Object-shaped cards

Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.

• cards
• css-only
• gradients
• variations

Adaptive tile mosaic

A container with no artwork draws one from up to four member tiles, grid tracks following tile count.

• css-grid
• css-only
• no-assets
• cards

Ground-scrimmed artwork

Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.

• layout
• css-only
• gradients
• contrast

Hairline stat strip

Stat tiles joined by hairlines that are grid gap, not borders.

Good for summary strip at the top of a detail page, dashboard KPI row, account usage overview

• stats
• css-grid
• css-only
• hairline

Annotated transcript

Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.

• conversation
• gutter
• status-roles
• contrast

Cork notice board

Pinned paper notes on a cork board where every texture is layered CSS gradients.

• skeuomorphic
• gradients
• no-assets
• cards

Hotspot marker layer

Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.

• hotspots
• pointer-events
• aspect-ratio
• container-query

Line-art empty states

Inline drawings for empty surfaces stroked in the inherited text colour.

• empty-state
• svg
• currentcolor
• illustration

Column-flow wall

Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.

• masonry
• columns
• break-inside
• reading-order

Scroll edge shadows

An inset shadow shown only on the edge that has more content behind it.

• scrolling
• affordance
• lists
• overflow

Frozen-batch deck

A one-card-at-a-time review queue whose batch is snapshotted at mount.

• queue
• review-flow
• animation
• keyboard

Controls beside the anchor

Per-card controls over a fully-linked card without nesting interactive elements in the anchor.

• cards
• accessibility
• keyboard
• focus-within

Pluggable canvas visualizer

One canvas, a registry of draw modes, each mode owning its entire frame.

• canvas
• visualization
• registry
• animation

Roving-grid board

A dense grid of state cells that is one tab stop with arrow-key navigation.

• keyboard
• roving-tabindex
• accessibility
• states

Section rail

Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.

• navigation
• toc
• responsive
• aria-current

Ledge-press buttons

Buttons on a solid ledge shadow that travel down onto it when pressed.

• buttons
• skeuomorphic
• press
• tokens

Guarded control

A blocked control stays focusable, carries the reason as text, and refuses in its handler.

• aria-disabled
• disabled
• preconditions
• keyboard

Polled job card

One card for every state a background job passes through.

• progress
• polling
• background-job
• indeterminate

Entry-transform motion

FLIP-style motion between two rendered states when the old DOM is already gone.

• animation
• transitions
• reflow
• reduced-motion

Slot-first picker

Assignment that starts at the destination slot, then narrows the catalogue.

• assignment
• picker
• aria-pressed
• filtering

Undo toast

A destructive action with no confirm dialog, held behind a toast and committed when it expires.

• undo
• toast
• destructive
• aria-live

Blast-radius confirm

A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.

• confirm-dialog
• destructive
• cascade
• dialog-element

Batch action bar

A bar that exists only while something is selected, states the count in words, caps at five actions.

• selection
• bulk-actions
• toolbar
• checkbox

Filtered to zero

The three empty states a list actually has, written as three different screens.

• empty-state
• filter
• search
• zero-results

Parsed query chips

A search box that echoes back how it read the text as removable chips.

• search
• query-syntax
• chips
• facets

Compound-value picker

One grouped select whose value carries both the kind and the id.

• select
• optgroup
• polymorphic
• forms

Ground-referenced color

Colors solved against the page's own ground token so they invert correctly between themes.

• color
• contrast
• color-mix
• accessibility

Single-property color variants

One custom property carries the hue; border, fill, spine and dot derive from it.

• color
• color-mix
• custom-properties
• theming

Controls on an unknown fill

Opaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside.

• contrast
• brand-color
• focus-ring
• opacity