Categories.

Full-width openers for a landing page — headline, supporting copy and a primary action, often paired with generative or animated backdrops. Reach for one when a page needs a first screen that states what it is before anything else loads.

Buttons and other single-action controls, including destructive actions that need a deliberate confirmation step. Use these where a click or tap triggers an immediate, named effect rather than navigation.

Text fields, selects, switches, steppers, date pickers, file drops and the other controls a form is built from. Reach for these when a page needs to collect or edit structured input, not just display it.

Menus, tabs, breadcrumbs, docks, command palettes and tree views — the controls that move a visitor between views. Use these for wayfinding inside an app or site, as opposed to actions that change data.

Charts, sparklines, tables, KPIs, timelines and other components that render a data set or a live feed. Reach for one when the job is showing numbers or records, not collecting them.

Toasts, progress bars, loaders, empty states, alerts and other components that report what the system is doing right now. Use these to confirm an action succeeded, show that something is in progress, or explain why a view is empty.

Sections built around scroll position — parallax, scroll-triggered reveals and step-through narratives. Reach for these when content should unfold as a visitor scrolls, rather than all at once.

Headlines and body text with a reveal, distortion or other typographic treatment applied to them. Use these where the words themselves are the visual focus of a section.

Dialogs, popovers, tooltips, hover cards and onboarding tours — surfaces that sit above the page rather than in its flow. Reach for one when content needs to interrupt or float over what's already on screen.

Image galleries, coverflows, comparison sliders and other components built around a photo or video. Use these when the content itself is visual media rather than text or data.

Full-bleed canvas and generative backdrops — terrain, topographic lines, ASCII fields — meant to sit behind other content rather than carry it. Reach for one to add ambient motion or texture without competing with the foreground.

Content cards and feature grids: a bordered or textured surface holding a title, supporting copy and often a link, laid out in a row or grid. Reach for these when a page needs to present several comparable things at once. For a surface that floats above the page instead, see Overlays.

Testimonial walls, quote rotators and logo clouds: the components that show who already uses or vouches for a product. Reach for one when a page needs third-party evidence rather than its own description.

Larger layout blocks — pricing tables, changelogs, kanban boards, accordions and split panes — that structure a page rather than perform one action. Use these as the building blocks between a hero and a footer.