Web App

Gradient Headline Hero

A centered opening statement that pairs a high-contrast headline with supporting copy, announcement context, and conversion actions.

Feature Card Grid

A responsive icon-card grid that makes a capability set easy to compare without turning every feature into a separate page.

Counter Bar

A compact metric bar that turns a small set of measured outcomes into an animated, readable proof row.

Stats Showcase

A quiet statistics presentation for trust-sensitive surfaces where the numbers should carry the visual emphasis.

Testimonial Carousel

A keyboard-navigable testimonial rotation that pauses on interaction and turns customer voice into a focused proof moment.

Trust Signals

A compact row of certification badges and measured claims for health, finance, legal, and service contexts.

FAQ Accordion

An accessible expandable Q&A section with single- or multi-open behavior for resolving objections near the end of a page.

Gradient CTA

A closing call-to-action with a restrained gradient field, clear hierarchy, and explicit primary and secondary paths.

Newsletter CTA

A low-friction email capture section that shows pending, success, and failure states without leaving the page.

Capabilities Bento

A mixed-size capability grid that gives the primary feature the largest visual weight while keeping supporting capabilities scannable.

Sticky Sidebar Content

A documentation-shaped section with a sticky table of contents and scroll-spied content blocks for long-form reading.

Split Media Hero

A two-column opening layout that balances concise positioning copy with a responsive media surface.

Spec Comparison

A side-by-side specification grid that gives a product decision concrete, aligned evidence instead of a loose feature list.

Full-Bleed Media

An edge-to-edge image section with a positioned text overlay and scrim that keeps the message legible over visual media.

Logo Marquee

A trust strip that moves partner marks as a CSS loop and degrades to a static, accessible logo group under reduced motion.

Product Options CTA

A plan or product option comparison that makes the recommended choice visually explicit while keeping alternatives scannable.