Blocks

Marketing hero sections: centred, split, search, form, video, stats, screenshot and more; the centred hero takes a switchable backdrop.

A centered marketing hero with eyebrow badge, headline, subcopy, dual call-to-action, an optional stats row, and a switchable decorative backdrop (aurora, beams, geometric, gradient, prism, liquid, dots).

Search-led discovery hero with an eyebrow badge, large headline, a prominent card-style search bar with inline input and button, and popular-destination chips.

Two-column hero with eyebrow badge, headline, dual CTAs and an avatar trust row on the left, and a faux-browser product screenshot mock on the right.

A centered product hero with eyebrow badge, headline, dual call-to-action, a top brand glow, and a dashboard screenshot framed in a browser mockup.

A split hero pairing copy and dual call-to-action with an iPhone mockup app screen over a brand glow.

A centered 'spotlight' marketing hero: an announcement pill, a two-line headline with an emphasised second line, a muted subheading, a dual call-to-action, and a bordered browser-window product screenshot lit by a soft glow.

A centered hero whose primary call-to-action is an inline email-capture form, with an announcement pill, headline, reassurance line and an avatar social-proof row.

A centered hero with a large bordered video poster, a circular play button with a reduced-motion-safe pulse ring, a duration chip and dual call-to-action buttons.

A centered hero with an integrated trust-stats band below the call-to-action buttons, rendered as a four-up description list with vertical dividers on desktop.

A centered hero with a large product-screenshot frame shown below the copy, lifted by a soft glow and faded into the page, with dual call-to-action buttons.

A personal / portfolio bio hero — a profile avatar, headline, short bio, primary and secondary actions and a social-links row. Composes the avatar, button and social-links primitives.

A full-bleed, cinematic lifestyle-image hero for marketing and ecommerce: a tall section whose backdrop is a full-cover image layer with a token scrim for legibility, and bottom-start foreground content with an eyebrow badge, a large headline, a subline, and primary plus secondary call-to-action buttons.

A full-width rotating storefront hero carousel of three slides, each with a muted cover layer, token scrim, eyebrow badge, headline, subcopy, and primary call-to-action. Inline Alpine drives wrap-around previous/next icon controls, a row of dot indicators that reflect and jump to the active slide, and an optional gentle auto-advance that pauses on hover, never starts under prefers-reduced-motion, and offers an explicit pause/play toggle.

A centered, social-proof marketing hero: eyebrow badge, headline, subcopy, and a dual call-to-action, anchored by a trust cluster of overlapping customer avatars, a 4.9-star rating, and a 'Rated 4.9/5 by 2,000+ founders' summary line, with an optional strip of partner wordmarks.

A boxed island marketing hero: on a subtle muted backdrop sits a single large centered card with a strong rounded-3xl border, holding a small avatar trust strip, an eyebrow badge, a large headline, muted subcopy, a primary and secondary call-to-action pair, and a reassuring footnote line.

Site headers — a navbar (bar or floating pill shape), dropdown nav, a mega-menu and a product-site header with grouped panels.

A responsive top navigation bar with brand, links, a call-to-action, and an Alpine-powered mobile menu, in a full-width bar or a detached floating pill shape.

A sticky backdrop-blurred site header with a brand wordmark, a desktop navigation-menu dropdown plus inline links, log in and get started actions, and a collapsible Alpine mobile panel.

A sticky site header with a multi-column mega-menu, a featured promo card, secondary nav links, and a mobile hamburger panel.

A sticky header with a centered wordmark, navigation on the start side, and an auth + primary call-to-action pair on the end side, with a mobile menu.

A marketing site header with a prominent inline search field and keyboard-shortcut hint between the brand nav and sign-in and get-started actions.

A site header with a slim primary announcement strip stacked above a navbar with brand, links and sign-in and get-started actions.

An off-canvas header: a slim top bar with brand, optional inline desktop nav, and a primary call-to-action, plus a hamburger that opens an Alpine-powered slide-in side drawer. The drawer pins to the inline-start edge, lists the full navigation (with optional badges) above a separator and CTA, dims the page behind a click-to-close backdrop, and closes on Escape.

A product-site header — brand, a navigation menu with plain links and hover/focus panels of icon-tiled entries (description, count, badge, active state), a search trigger slot, utility actions, a primary CTA, and an end-side sheet for the mobile menu.

Announcement bars — a slim dismissible top-of-page announcement on the primary surface, static or auto-rotating.

A slim full-width announcement bar with an eyebrow pill, a message, an inline call-to-action link and an end-aligned dismiss button on the primary surface.

A slim full-width announcement bar that auto-rotates through several short messages on the primary surface — each with an optional inline call-to-action link. Includes prev/next chevrons for manual stepping, dot indicators, pause-on-hover, an aria-live region for screen readers, and an end-aligned dismiss button.

Site footers — a columns layout, a newsletter lead, a centered minimal, a wide mega footer and a CTA-led footer.

A multi-column site footer with brand, link columns, newsletter signup, and a copyright bar.

A footer led by a newsletter subscribe form, followed by multi-column link groups with a brand column and a bottom bar with copyright and social icon links.

A centered minimal footer with a large wordmark, a wrapping nav-link row, social icon links, an 'all systems operational' status line, a separator, and a muted copyright line.

A wide mega footer with a brand column (wordmark, blurb, version badge, app-store download buttons) beside four link-group columns, plus a bottom bar with copyright, social icons, and a language selector menu.

A single-row minimal footer with brand wordmark, copyright, legal links, and social icon buttons separated by a rule.

A CTA-led footer headed by an oversized call-to-action (heading, supporting line, primary and ghost buttons), then a brand column with blurb and social links beside compact link-group columns, a copyright bottom bar, and an oversized brand wordmark flourish.

A marketing footer featuring App Store and Google Play download badges beside link columns, with a social-icon row in the bottom bar.

A centered, social-forward minimal footer with a brand mark, a single nav row and a prominent row of outline social icon buttons.

A footer-ready closing section sitting above a raw WebGL plasma background: a full-screen quad runs a layered, domain-warped noise plasma with atmospheric grain, optional sparkle and an edge vignette, themed from the design tokens (--background/--foreground/--primary). A smoothed pointer uniform lets the cursor warp the flow when interactive. DPR-aware, ResizeObserver-driven, context-loss safe, and renders a single static frame under reduced motion.

Feature sections — icon grids, bordered cards, alternating media rows, bento layouts, a services variant and an industries grid.

A centered eyebrow, heading, and intro above a responsive three-column grid of token icon-tile feature items separated by a structural divider.

A centered feature grid where each item stacks a centred icon tile above a title and description.

Centered heading with a responsive grid of feature cards, each with an icon tile, title, description, and a Learn more link.

Alternating feature rows pairing an eyebrow, heading, muted copy, check-icon checklist and button with a token-gradient faux-UI media panel that reverses side on each row.

A centered feature section with a bento grid: one large hero tile showing a faux analytics dashboard plus smaller icon-led feature tiles.

A feature section whose media panel stays pinned while the feature story scrolls beside it; media side is configurable.

A features section with a centered eyebrow, heading, and intro above an accessible tab bar that switches between feature panels, each a two-column copy-plus-skeleton-visual layout.

A two-column feature section pairing an intro column with a compact two-up checklist of icon-chip feature cards, scannable rather than card-heavy.

A two-column feature section with an expandable accordion of feature items beside a synced media preview panel, stacking on mobile.

A feature section whose cards each lead with a headline metric and up-trend badge above an icon, title and description — features proven by numbers.

A feature section with one large highlighted feature tile and a decorative preview beside a set of smaller supporting feature cards in a bento layout.

A centered eyebrow, heading and lead above a single bordered card divided into three feature cells, each with a token icon tile, title and description.

A heading and subheading beside prev/next controls, above a horizontally scrolling, scroll-snapping track of feature cards. Each card carries an icon tile, optional badge, title, and body. Native horizontal scroll keeps it usable without JS; inline Alpine wires the prev/next buttons to scroll the track, and chevrons flip under RTL.

A horizontal row of expanding feature panels (an image accordion): each tall muted panel carries a title, icon, and badge label, and on large screens the active panel grows on hover/focus to reveal its body copy and a Learn more button while the others shrink, stacking fully open on mobile.

An annotated product showcase: a heading and subheading above one large app-window screenshot placeholder (window chrome with three tokened dots over a muted screen area), overlaid on desktop with numbered feature pins positioned by percentage. The same callouts render below as a numbered grid of cards with an icon, title, and one-line caption, so the section stays fully usable on mobile where the absolute pins collapse, plus an optional primary CTA button.

An editorial Monogram feature-cards section — an asymmetric header with an uppercase eyebrow and large light display heading above a refined grid of generously spaced cards, each with an index label, a token media chip, a font-heading title, a short description, and an editorial link.

A centered eyebrow, heading, and subheading above a responsive 1-to-3-column grid of service cards, each with a rounded icon chip, title, description, optional highlight badge, and a RTL-aware "Learn more" ghost button.

A services section as alternating media rows, each pairing a media panel with an icon, title, sub-point list and learn-more link.

A services section with a sticky intro and call-to-action column beside a stacked column of compact service cards.

An editorial marketing bento mixing a big-stat headline tile, a media placeholder, an integrations logo grid, a testimonial quote, and a CTA tile across varied spans.

A product-focused bento centered on a dominant hero screenshot placeholder with a badge, supporting capability tiles, and a big-numbers metrics strip.

A feature-focused bento grid with a wide highlighted workflow tile, a tall deployments tile and several standard feature tiles.

An 'Industries we serve' section with a heading, lead paragraph, and a responsive grid of industry cards, each with an icon, name, and one-line value proposition.

Chat showcase sections — an iMessage-style conversation framed in a phone mockup beside marketing copy.

A two-column marketing showcase: eyebrow, heading, supporting copy and a check-icon feature list on one side, and an iMessage-style conversation framed in an iPhone mockup on the other, with CSS-only staggered message reveal and a trailing typing indicator.

A retro LED display-board hero section built around an animated dot-matrix screen, with an eyebrow badge, headline, live status chips and call-to-action buttons.

Hover-reveal index lists — large rows that swap a preview image on hover or focus.

An interactive two-column index list for portfolios, services, or menus: the left column is a vertical stack of large numbered rows (index, bold title, a category badge, and a chevron) separated by borders, and the right column is a sticky floating preview panel whose image swaps to the currently hovered or focused row. Each row is a real keyboard-focusable link that drives the reveal on hover and focus, the active title brightens and nudges, and on mobile every row shows its own inline thumbnail while the floating panel is hidden. Includes a heading, muted subline, and a View all button.

3D flip-card grids — icon/title fronts that flip to a description, stat and link.

A marketing feature grid of 3D flip cards: a centered heading and subheading above a responsive 1-to-2-to-3-column grid. Each card's front face shows a tokened icon tile, a title, a short teaser, and a 'Hover to flip' chevron hint; the back face flips in on a distinct primary surface with a fuller description, a stat badge, and a 'Learn more' button. Cards flip on hover for pointers and on click or Enter for touch and keyboard, with aria-pressed toggles, equal-height faces, RTL-aware chevrons, and reduced-motion support.

Alternating media-and-content sliders — paired image + text slides stepped by controls and dots.

An editorial media-and-content slider that steps through single slides, each pairing a media placeholder with an alternating text block (eyebrow, display title, copy and optional CTA), driven by inline Alpine prev/next controls and a dot rail.

Pricing sections — from a simple three-tier table (with an optional billing-period toggle) to gradient and elevated cards, tinted and horizontal layouts, and a tabbed switcher.

A responsive three-tier pricing section built from card, badge, separator, and button primitives, with an optional Alpine monthly/annual billing toggle.

Usage-based pricing section with a monthly/annual billing toggle (20% discount), three metered tier cards showing API call and storage limits, feature checklists, and a highlighted Pro tier.

Three-tier pricing with a centered heading and a grid of cards, the middle plan highlighted with a primary ring, Most popular badge, check-bulleted feature list, and a full-width CTA per card.

A centered single-plan pricing card with a features checklist above a muted price panel, a full-width CTA, a Best value badge, and a money-back guarantee line.

Three-tier pricing with a gradient-bordered featured plan, a Most Popular badge, a decorative cursor accent, ring-bordered side plans, check-bulleted features, and a full-width CTA per plan.

Asymmetric three-tier pricing with an elevated, framed center plan, a Best Value badge, check-bulleted features, a security/trust footer note, and a CTA per plan.

Three tinted pricing cards with category badges, a Perfect-for line, a monthly credits row, a monthly/annual billing toggle with reactive prices, and a full-width CTA per plan.

A horizontal list-style pricing layout where each plan pairs a gradient accent panel with a feature list, strikethrough original price, an optional Recommended badge, and a CTA.

A tabbed pricing section with a pill switcher between audience segments, each showing plan cards with a blurred-blob header panel, a squircle avatar orb, strikethrough prices, a feature list, and a CTA.

A single enterprise pricing card split into two columns — name, price, CTA and includes line beside a feature checklist and a row of trusted-customer wordmarks.

A three-column product comparison table with a recommended plan, per-feature check or cross indicators, and choose-plan actions.

Comparison sections — a two-column us-vs-them layout contrasting your product with the alternative, and feature-comparison tables across your own plans or against competitors.

A two-column us-vs-them comparison with a highlighted recommended card of checked benefits beside a muted alternative card of crossed-out drawbacks, in a brand or success/destructive semantic tone, with an optional closing line and optional CTA footers.

A feature comparison table pitting your highlighted product against named competitors across many rows of checks, dashes and values, scrollable on mobile.

A single-card two-column comparison checklist contrasting your product with the alternative, with a score summary and call-to-action.

A competitor switcher comparison: the visitor picks which alternative to compare against via a tablist of buttons, and the live two-column table swaps its 'them' column — a highlighted, always-winning 'Us' column versus per-competitor check/cross marks toggled client-side, all pre-rendered server-side.

A feature-comparison pricing table with three plan columns, per-feature check/dash cells, a subtly highlighted recommended column, and horizontal scroll on mobile.

A two-column call-to-action card pairing a headline and benefit checklist with a tinted offer panel showing price, note and a primary button.

Awards and recognition — a grid of award cards with a decorative laurel/trophy icon, award name, awarding organisation and a year badge.

Awards and recognition section: eyebrow, heading and lead above a responsive grid of award cards, each with a decorative laurel/trophy icon, award name, awarding organisation and a year badge.

A security-trust section — reassurance copy beside a grid of compliance certification cards, with a row of trust stats below.

A two-column security trust section: reassurance heading and copy beside a responsive grid of compliance certification cards (SOC 2, GDPR, HIPAA, ISO 27001, CCPA, PCI DSS), with a row of trust stats below.

Social-proof sections — grids, a single hero quote, a masonry wall, marquees and a carousel.

A centered heading above a responsive 2-to-3-column grid of testimonial cards, each with a quote-mark icon, blockquote, and an avatar with name and role.

A single centered testimonial with company wordmark, readonly 5-star rating, a large balanced blockquote, and an avatar with name, role, and company.

A staggered masonry wall of testimonial cards laid out in CSS columns, each with a quote, avatar, name and role, framed by top and bottom gradient fade masks.

A heading over two infinite marquee rows scrolling in opposite directions, each made of fixed-width testimonial cards with a quote, avatar, and name.

A centered heading above a horizontally scrollable carousel of testimonial cards, each pairing a quote with an avatar, name, and role, plus previous/next controls.

A social-proof section pairing a metric stats band (big numbers in a definition list) with a grid of featured testimonial cards, each a starred blockquote with an avatar, name, and company.

A two-column testimonials section with a sticky intro, customer logos and aggregate rating beside a stack of rich quote cards with avatars.

A grid of video testimonial cards, each with a play-button thumbnail and duration chip above a pull-quote and an avatar author footer.

A spotlight testimonial with an avatar switcher: one large featured blockquote with author name, role, and company badge, plus a labelled row of selectable customer avatars and prev/next controls that swap the active quote. The quote region is aria-live, the active avatar gets a ring/scale and aria-pressed state, and all interactivity is inline Alpine.

A tweet-styled testimonial wall: a heading and subheading above a responsive masonry of <x-ui.twitter-card> posts (non-interactive, no view count), each with an optional verified-buyer badge slotted in.

Compact trust bars — avatar stacks, star ratings and headline stats.

A compact trust bar: an overlapping avatar stack, a five-star rating with review count, headline, and a row of headline stats.

Trusted-by logo clouds — a bordered grid (with an optional cursor-spotlight reveal), a marquee, an inline-heading row and an animated group cycler.

A trusted-by logo cloud with a centered muted heading and a bordered-cell grid of monochrome token wordmarks that brighten on hover, with an optional cursor-following spotlight reveal.

A centered muted heading above a single continuously scrolling marquee row of company wordmark logos with edge fade and pause-on-hover.

An inline-heading logo cloud pairing an eyebrow heading and badge with a wrap row of monochrome token wordmark logos above a separator.

An animated trusted-by logo cloud that cycles through groups of wordmark chips with a staggered blur-and-fade transition between groups.

A trusted-by logo cloud where each customer logo sits inside its own bordered card and lifts from muted to full colour on hover.

Frequently-asked-question sections — an accordion, a two-column split, a static grid and grouped categories.

A frequently-asked-questions section built on the interactive accordion primitive.

Two-column FAQ with a sticky intro column (eyebrow, heading, supporting copy, contact-support button) beside an accordion of questions and answers.

A static two-column FAQ grid with a centered eyebrow badge, heading, and a separator above bold question / muted answer pairs.

A centered FAQ section that groups questions into labelled categories, each rendered as its own accordion stacked with generous spacing.

An FAQ accordion paired with a still-have-questions contact card featuring a support-agent avatar stack and chat and email actions.

An FAQ section with a prominent search field and an article count above an accordion of grouped questions.

A centered FAQ section with a row of category tabs (Billing, Shipping, Returns, Account) that switch which accordion of questions is shown. Each tab carries a question-count badge, tabs and panels are wired with roving tabindex and aria-controls/aria-labelledby, and only the active category's accordion is visible.

An editorial, category-grouped FAQ section — a header column (eyebrow, large light display heading, intro and contact line) beside an inline Alpine accordion of question rows separated by thin hairline dividers, with uppercase wide-tracked category labels.

A workspace projects panel — a status-grouped kanban board behind a By status / Active / Completed / All filter row.

A "Projects" section heading, a client-side view-pill filter row (By status, Active, Completed, All), and a kanban board of project cards grouped by status — each with a folder icon, an assignee, a date range and an amount.

Product roadmap sections — Now / Next / Later columns of votable feature cards.

A product roadmap in Now, Next and Later columns of feature cards, each with a status pill, description, upvote count and target quarter.

A product roadmap as a horizontal quarter timeline (vertical rail on mobile) of milestone cards with status badges.

Changelog / release-notes sections — a version-rail timeline, a card grid, and a date-rail timeline with per-entry media.

A changelog/release-notes timeline with a sticky version and date rail beside each release. A release carries one category tag, title, summary and bullet list, or typed sections (Added, Changed, Fixed, …) each with its own list; an opt-in search field filters the changes client-side.

A changelog as a responsive grid of release cards, each with a version badge, category tag, summary and change count.

A release / changelog timeline with sticky date markers on the start rail and an optional image per entry. Composes the badge primitive for the version tag.

How-it-works sections — a horizontal step row and a vertical numbered timeline.

A how-it-works section with a heading, lead paragraph, and numbered steps laid out horizontally with a connector line on desktop, stacking on mobile, each step composing a card with a numbered badge chip, icon, title, and description.

A vertical how-it-works timeline of numbered steps connected by a dashed rail, each step a card with an icon, title, duration badge and description.

Integration sections — a card grid, a split layout, a marquee and an orbit diagram.

A centered heading with a responsive grid of integration cards, each showing a logo tile, name, description, a Popular badge, and a Connect/Installed outline button.

Two-column integrations section with eyebrow, heading, body and CTA on the left and a scattered cluster of rounded logo tiles on the right.

An integrations section with a heading, muted intro, and two auto-scrolling marquee rows of bordered logo chips with edge fade and pause-on-hover.

A centered integrations diagram with a primary brand node ringed by two concentric orbits of integration logo chips and a slow CSS rotation.

A masked card holding a divided vertical list of integration rows — each with an icon tile, name, description and a connect button — above a heading, lead and call-to-action.

Closing call-to-action sections — a centred band with a switchable backdrop, a screenshot-strip media CTA and a split card.

A centered closing call-to-action with eyebrow badge, heading, subcopy, dual buttons, an optional note, a switchable frame (none, card, bordered) and a switchable decorative backdrop (grid, glow, aurora, beams, geometric, gradient, prism, liquid, dots).

Bottom-of-page conversion CTA with urgency badge, bold headline, dual action buttons, and a horizontally scrollable screenshot strip with edge fade masks.

A split closing call-to-action on a rounded card: a left column with an eyebrow badge, headline, supporting line, and a trust row, beside a right column with a compact work-email sign-up form, a full-width primary button, and a sign-in link.

Conversion paywalls — inline plan upgrade, gated article content and a focused subscription card with billing toggle.

Centered plan-upgrade paywall card with icon tile, benefit checklist, plan chips, social proof, and primary/ghost CTA pair.

Gated article paywall with readable opener paragraphs, blurred faux content behind a gradient mask, and a centered subscribe overlay card.

Focused subscription card with Alpine-driven monthly/yearly toggle, live price display, feature checklist, and trust footer.

Centered waitlist capture section with a Coming soon badge, heading, lead, inline email form, and avatar-stack social proof.

An inline newsletter call-to-action banner pairing an icon, heading and copy with an email subscribe form and privacy note.

Promo countdown bands — a headline with a live days/hours/minutes/seconds timer and CTA.

An editorial full-width promo band with an uppercase eyebrow, a large display headline, a supporting line, a live Days/Hours/Minutes/Seconds countdown and a CTA — set on an inverted surface for seasonal launches and limited-time offers.

A promo countdown band whose Days/Hours/Minutes/Seconds units render as split-flap flip-clock card tiles that animate on each tick, paired with an eyebrow, a display headline, a supporting line and a CTA.

Resource/download lists — file-type rows with title, description, format/size meta and a download link.

An editorial storefront downloads section — a font-heading heading over a thin-bordered list of resource rows, each pairing a decorative file-type icon, title, short description, a file meta line (format and size) and a download link.

Team sections — a card grid, a split-lead layout, list rows, a photo grid, a minimal grid and a carousel.

A centered heading and subheading above a responsive 2-to-4-column grid of member cards, each with a large avatar, name, role badge, one-line bio, and a row of aria-labelled social icon buttons.

Responsive team grid with live department filter pills — click a category to reveal matching member cards (avatar, role badge, bio, social links) with smooth Alpine transitions.

A featured lead member presented large in a prominent card on the start side — big avatar, name, role badge, longer bio, and social buttons — beside a 2-column grid of the remaining members as compact cards; stacks on mobile, splits lead | grid on large screens.

The roster as full-width horizontal directory rows — avatar at the start, name with role badge and a one-line bio in the middle, and aria-labelled social icon buttons at the end — each row separated by a bottom border, the last row borderless.

A photo-grid team section: tall rounded portrait tiles in a responsive 2-to-3-column grid, each with a token photo placeholder, a bottom gradient overlay carrying the member name and role, and aria-labelled social icon buttons revealed on hover and keyboard focus.

A minimal team section: a tight, centered grid of small circular avatars with name and role only, up to six per row on large screens, and aria-labelled social icon buttons revealed on hover and keyboard focus.

A centered heading and subheading above a carousel of member cards — one slide per member on mobile, peeking multiple on larger screens — each with a large avatar, name, role badge, one-line bio, and aria-labelled social icon buttons, plus keyboard-accessible previous/next controls.

A team portrait grid where each member card reveals social links in a hover overlay over the bottom of the portrait.

A team section grouped by department — each labelled group is a bordered grid of members with an avatar, name and role badge.

A careers section — a culture blurb and perk badges above a divided list of open roles grouped by department.

A careers section with a culture blurb, perk badges, and a divided list of open roles grouped by department, each showing department/location/type meta and an Apply button.

About-us sections — a story column with a values list paired with a card collage and a stat grid.

A split About Us section with an eyebrow, heading, story paragraphs, a check-icon values list and a primary CTA on the left, beside a card collage of a large mission card and a 2-up stat grid on the right.

An about section led by big company stats — a copy column beside a media panel above a four-up stat-card band.

An about section presenting company milestones as a vertical year-tagged timeline with a continuous rail.

Creative-work showcases — a filterable grid of project cards with gradient media and a hover-revealed view action, plus divided-row and card-grid case-study layouts.

A centered eyebrow, heading and subheading above a row of category filter chips and a responsive 2-to-3-column grid of project cards, each with a gradient media area, pinned category badge, title, client line, and a hover overlay revealing a View project button.

A portfolio section as a CSS-columns masonry wall of varied-height project tiles with hover captions.

A portfolio section as case-study rows — each with a thumbnail, title, client, result metrics and a read-case-study link.

A case-studies grid with heading and lead above responsive cards, each showing a category badge, a headline result metric, an excerpt, the client name, and a Read case study link.

Link-in-bio layouts — a centered mobile-first column with avatar, bio and a stack of full-width link buttons.

A centered mobile-first link-in-bio column on a soft gradient backdrop with a large avatar, verified display name, handle, bio, a vertical stack of full-width link buttons with leading icons and trailing arrows, and a social icon row.

A link-in-bio card with an avatar, verified name, bio, a two-column grid of link tiles and a social-icon row.

A link-in-bio card with a gradient cover banner, overlapping avatar, stacked link buttons and a social-icon row.

A résumé/CV work-history section — a vertical list of roles, each with the company mark, job title, dates and a short summary.

A résumé/CV work-history section: a vertical list of roles, each with the company mark, job title, company, a date-range, and a short summary.

A join-the-community section with a row of total stats and a responsive grid of channel cards (Discord, GitHub, X, Forum), each with a glyph, member count, and a join/follow button linking out.

Metric sections — a centered grid of headline numbers and a split layout pairing copy with trend cards.

A centered intro above a responsive grid of headline metric cards, each with a large number, label, supporting line and an optional trend badge, marked up as a description list.

A two-column stats section pairing a heading, lead and call-to-action with a 2x2 grid of metric cards that each show a value, label and up/down trend indicator.

A bold stats band on a filled primary panel — an eyebrow, heading and lead above a four-up description list with dividers.

Blog sections — a dashed list, a card grid (with an optional image panel), a magazine layout and a single-article post header.

A responsive blog grid of cards, each with an optional 16/9 gradient panel and overlaid category badge (or an in-body category badge), title, excerpt, and an author avatar with read time or date.

A single-column blog index with dashed dividers, each row showing date, category badge, a linked title, excerpt, and an author avatar with read time.

A magazine-style blog index with a large featured post beside a stacked list of secondary articles.

A blog section pairing one large featured article with media, excerpt and author meta beside a compact divided list of recent posts.

A single-article header with a back link, category badge, balanced title, read-time and date meta, and a multi-author byline. Composes the badge and avatar primitives.

An editorial 'journal' blog grid — a wide-tracked section heading over refined article cards, each with a bg-muted media placeholder, uppercase category tag, font-heading title, date meta, excerpt, and a Read more link.

Long-form prose sections — an article, policy or terms body with headings, lists and a pull-quote.

A centered long-form prose section (terms, policy or article body) with topic tags, a title and lead above a $sections prop of typed content blocks (paragraph, heading, list, quote) — the default value keeps the original privacy-policy copy.

A long-form article with a sticky on-this-page table of contents beside the prose, headings, lists and pull-quotes.

Oversized editorial type statements — a large display message with optional emphasis and CTA.

An oversized editorial text banner — a large light display statement with one emphasized key word, a short supporting line and an optional inline CTA link, set in calm whitespace.

Editorial "about" sections — a media column beside intro copy and a set of collapsible accordion rows.

An editorial two-column 'about' section pairing a full-bleed media placeholder with an eyebrow, display heading, intro copy and a set of inline collapsible accordion rows for materials, craftsmanship and care detail.

Contact sections — a split info+form (with optional icon tiles and socials), method cards, a map pairing and a compact strip.

Two-column contact section with an intro, a details list (icon-tiled rows with social links, or a plain definition list) and a card-wrapped POST form.

A centered heading and intro above a responsive grid of contact-method cards, each with an icon tile, title, muted detail line, and a link-style action button.

Editorial two-column contact section pairing a POST contact form in a card with a faux gridded map panel, pin marker, and an overlaid address chip.

A compact horizontal contact strip in a bordered card with inline phone, email, and office items separated by vertical dividers and a primary call-to-action button, stacking on mobile.

An open, whitespace-led editorial contact section pairing an eyebrow, light display heading, intro and contact details with a refined card-less form.

Image galleries — a masonry wall and a uniform grid with a lightbox.

A CSS-columns masonry image gallery with an eyebrow badge, heading, and varying-height tiles that reveal a caption overlay on hover.

A uniform square-grid gallery of token-gradient image tiles with hover captions that open an enlarged lightbox dialog.

A swipeable media gallery built on the carousel primitive, showing multiple token-styled image figures per view with title and category captions and accessible prev/next controls.

An image gallery with a category filter pill bar above a responsive grid of tiles that reveal a title and category badge on hover.

A split gallery pairing one large featured slide with caption and working prev/next controls beside a two-column strip of thumbnails that jump straight to a slide, composing the carousel primitive.

A Flickr-style justified image gallery: tiles flow in horizontal rows that fill the width flush to both edges and share a consistent row height, with a category badge and caption revealed on hover. Clicking any tile opens the dialog primitive as a lightbox — a real focus trap with focus return — and previous/next swap the subject in place inside the open dialog.

A two-column scroll-reveal — a sticky media panel that swaps as the reader scrolls through numbered content parts.

A two-column scroll-reveal: a sticky media panel that swaps as the reader scrolls through numbered content parts, with the active part emphasised and a vertical accent line. Reduced-motion safe.

Shoppable social feeds — a profile header over a grid of post tiles with shop-this overlays.

A shoppable Instagram-style social feed: a header row with the brand avatar, handle, follower count, and a Follow button; a 'tag us' subheading; and a responsive 2-to-6-column grid of square post tiles. Each tile composes the dialog primitive as its trigger, opening a real focus-trapped lightbox with the larger image and a 'Shop the post' button.

Image-and-text content sections — a 50/50 row, a text-over-image band and an editorial overlapping card.

A single, self-contained 50/50 content row pairing a muted media panel with copy — an eyebrow badge, heading, body paragraph, an optional token check-icon checklist and a primary + secondary button CTA pair. A reverse prop flips the image side (RTL-safe). The workhorse marketing/ecommerce content section.

A short, embeddable text-over-image content band: a rounded, overflow-hidden strip with a muted (optionally image) cover layer under a directional token-gradient scrim, and a max-w-xl copy panel — eyebrow badge, heading, body line, and button CTA — anchored to the inline-start or inline-end edge for legible storytelling mid-page.

An editorial image-with-text section where a copy card overlaps the inline-start edge of a large rounded image panel for a layered, magazine feel. The lifted card carries an eyebrow badge, heading, body copy, and a primary CTA; on desktop it crosses onto the image, and on mobile it stacks cleanly below — distinct from a plain 50/50 row.

Scroll-pinned storytelling — a sticky text column beside a scrolling media gallery.

A scroll-pinned editorial section — one column with a display heading, copy and CTA stays sticky while the adjacent column of token-placeholder media tiles scrolls past, collapsing to a single column on mobile.

Open Graph social-card templates (1200×630) — minimal, editorial, product, profile, stat, quote and more — token-themed and ready to screenshot in an OG route.

A minimal, centered Open Graph card with an eyebrow badge, title, description and a bottom brand mark.

A full-bleed dark Open Graph card with dashed grid guide lines, a top-start title and description, and a bottom-end brand mark.

A light, editorial Open Graph article card with a category badge, headline, excerpt, an author row with avatar, and a top-end brand mark.

A dark Open Graph release card with a version badge and date, a large title, a checklist of up to four items, and a top-end brand mark.

A dark testimonial Open Graph card with a giant decorative quote mark, a blockquote and an author row composed from the avatar primitive.

A full-bleed photo Open Graph card with a token scrim, a bottom-aligned outline label badge, large title and brand mark.

A dark two-column product Open Graph card with a brand mark, title, description, a price pill badge and a product image panel.

A dark Open Graph portfolio card with a large circular avatar, name, role, bio and a website pill.

A dark Open Graph launch/event card with a dotted label badge, brand mark, large title and a date/location footer.

A dark Open Graph metric card with an uppercase label, an oversized value, an optional trend pill, a caption and a brand mark.

A centered brand Open Graph card with a large logo or monogram tile, a wordmark and a tagline pill on a soft token gradient field.

A minimal technical Open Graph card with a top brand mark and a huge uppercase headline above an optional code-pill caption.

A poster-style Open Graph card on a light editorial surface with a giant ghost word, a kicker pill, a massive display title and a bordered brand/meta footer.

An Open Graph card with a centered headline and subtitle over a faux browser window previewing an analytics dashboard.

A clean, minimal Open Graph card with a circular logo and a bottom row pairing the brand with an article title.

A light Open Graph card with an eyebrow and bold headline, a brand mark, and a bottom row of three photos.

In-app structural headers and footers — page and section headers, a searchable resource toolbar, and a form action footer.

An application page header with a breadcrumb trail, a title and status badge, export and new-project actions, and an underlined tab navigation row.

A compact application section header: a title with an optional count badge and description beside filter and add actions, divided from the content below.

A server-ready resource toolbar with a page title, result count, GET-backed search, status filter, sort control, active-filter chips, and a primary create action.

A form or section footer action bar with a save-status indicator or step dots, an optional destructive action, and cancel and save buttons that stack on mobile.

An application page header with a title, subtitle and actions above an inline four-up KPI stat row with trend deltas.

In-app top navigation bars — brand, primary links, search, notifications and a user avatar menu.

An in-app top navigation bar with a brand mark, primary links, a search field, a notification button with a count badge and a user avatar menu.

An in-app top bar built around a prominent command/search field, with a brand mark, a New action, notifications and a user avatar.

A two-row in-app navbar — brand, notifications and user menu above an underlined section-tab bar.

Dashboard analytics cards — a traffic trend card with a range control, a KPI performance row with sparklines, a sales-by-channel distribution, a weekly-traffic heatmap and a spending breakdown with a segmented bar and table.

An analytics dashboard card showing API/request traffic over a range, with a headline value, a trend badge, a range selector and a token-themed area chart.

A financial-performance KPI card showing revenue, average order value and conversion as stat cells with deltas and inline sparklines, plus a header actions menu.

A sales-by-channel distribution card listing acquisition channels with values, share percentages and token-themed horizontal bars.

A weekly-traffic heatmap card showing intensity by weekday and time-of-day bucket, with a token-themed colour scale and a low-to-high legend.

A spending-breakdown panel: a tray frame holding a headline total with a delta, a segmented bar of categories with a dot/label legend, and a small table listing each category's share and amount.

In-app activity feeds — a timeline of events with avatars, action text and timestamps.

An application activity feed — a card-wrapped vertical timeline of events with avatars, action text, target badges, timestamps and quoted snippets.

An activity feed grouped under day headers, each day a rail of avatar/icon events with target badges and times.

A dense audit-log feed of colour-coded type rows with a message, optional meta badge and a monospace timestamp.

System cards — a repository/CI status tile and a storage gauge with a system info table.

A compact repository status tile with avatar, live running indicator, commit/branch/firewall rows, and a Visit action.

A system status widget pairing a radial usage gauge with a labelled database info table.

A compact 'Transactions' tray panel — merchant avatar, type, signed amount and relative time.

A compact 'Transactions' dashboard panel: a tray frame with a swap icon and 'View all' action around a divided list of merchant rows — avatar, name, type, signed amount and relative time. The at-a-glance companion to the full data-tables-transactions table.

Chart compositions on the chart-card shell: a KPI metric with a headline figure, a dual-axis column/line combo, a waterfall bridge and a grid of liquid gauges. One chart in a card is chart-card plus a chart example. Comparison instead frames a two-series bar chart in a tray, with a range select swapping the bundled dataset client-side.

A KPI chart card leading with a headline figure and a delta badge over an animated single-series trend line.

A chart card overlaying a percentage line on value columns across two opposite y-axes, each axis titled and themed from the muted token.

A chart card bridging a running total across rising and falling steps to a net figure, turning a list of deltas into floating range bars.

A chart card holding a responsive row of liquid-fill gauges, each with its own value, tone and caption, for reading several utilisation levels at once.

A two-series revenue/expense bar chart framed in a tray, led by a large chart-legend headline with a square marker, value and delta per series, compact-USD axis/tooltip ticks, and a range select that swaps the whole dataset client-side.

Interactive MapLibre maps — analytics overview, logistics network, geographic heatmap and live delivery tracking.

Real-time web-analytics overview: a live visitor count with trend, a globe of traffic arcs from a hub to top countries, and a country + device breakdown.

US distribution network overview with a live hub map, freight lanes and a network-stats sidebar.

Geographic density heatmap of seismic activity around the Pacific Ring of Fire.

Live delivery tracking card with a routed MapLibre map, courier ETA, progress, and an itemised order summary.

Pre-composed business data tables — recent transactions, CRM deal pipeline and LMS course progress.

Recent-transactions finance table with filter chips, Export button, merchant avatar, category badge, signed amount, and Completed/Pending/Failed status badges.

CRM deal pipeline table with Total value / Won / Open summary chips, company avatar, owner avatar, deal value, stage badge, and close date.

LMS course-progress table with thumbnail placeholder, lesson count, progress bar, enrolment date, and Earned/In progress/Locked certificate badges.

A Pro user-management screen: an invite slot, an admin-table with the admin list toolbar and footer, a role select per row, impersonation behind a confirm dialog, bulk suspend, resend-invite and remove on the selection, and an audit trail of every change.

Detail panels — key/value information rendered as a semantic description list with a status badge and attachments.

A detail card presenting key and value information as a semantic description list, with a status badge row and an attachments list, plus an edit action.

A description list rendered as clean ruled rows without a card, with a heading, edit action, status badge and a tags row.

A description list split into grouped section cards (personal, contact, billing, preferences), each a key/value list with an edit action.

Account profile view with a gradient cover band, overlapping avatar, name/handle/role badge, bio, action buttons and a posts/followers/following stat row, above a two-column About details card and a recent-activity list.

Account settings screens — a grouped account form, a notification-preferences matrix and a connected-apps integrations list.

A grouped account settings form with profile fields and toggle-based notification preferences.

A notification-preferences settings card with grouped fieldsets, a channel header row, and per-preference Email/Push/SMS switch toggles.

A connected-apps settings card with a search header and a list of integration rows, each showing an app glyph, name, description, connection status badge, and a connect/disconnect action.

A billing settings screen — a current-plan card with a usage meter, a payment-method row, and a billing-history invoice table.

A security settings screen — a password form, a two-factor toggle, an active-sessions list and a destructive danger zone.

A passkey settings screen: each passkey with its created and last-used dates, removal behind a confirmation dialog, and a named Add passkey form that runs the WebAuthn registration.

A Pro billing page that composes the open billing settings block and adds a proration preview before a plan change, a seat stepper, a failed-payment recovery banner, tax and billing-details fields, usage meters, and PDF links per invoice.

A Pro server-backed notification center: route filters over a Notification shape, optimistic mark-read and mark-all persistence through markReadUrl and markAllUrl, a digest-preferences link, empty state, and pagination.

A server-ready onboarding wizard with per-step browser validation, restored values, resumable step input, submit progress, server feedback, and unsaved-change protection.

Card-based radio selection group for choosing an account or workspace, with selection ring and check-circle indicator.

A reusable create and edit form with validation, responsive actions, custom field slots, and destructive confirmation.

A reusable create and edit form with Laravel validation, submit progress, unsaved-change protection, outcome feedback, responsive actions, and destructive-action confirmation.

Role and permission assignment with server-owned locked and inherited states.

A server-ready role and permission matrix with grouped permissions, bulk role selection, locked and inherited states, validation, progress, and unsaved-change protection.

A server-ready multipart upload workflow with validation and request states.

A server-ready multipart upload flow with Dropzone selection, validation feedback, progress state, unsaved-file protection, and success or failure feedback.

Time and calendar views — a Gantt schedule, a weekly grid and a year overview.

A Gantt-style resource schedule: rooms down the side, hours across the top, and category-coloured session blocks placed on a shared time axis with a legend.

A weekly availability designer: day columns and hour rows with multi-hour green availability spans, diagonal-striped unavailable regions and dimmed weekends.

A static full-year overview: a header with the year and an event count, plus 12 lightweight mini-month grids in a responsive 1-to-4 column layout. Highlights today and marks event dates.

Decorative calendar cards — a per-day pricing grid, a week picker with tasks, and a day agenda with accent bars.

A month calendar widget whose day cells show a per-day price, with deal prices highlighted in the success token.

A week calendar widget with a coloured header band, a seven-day picker strip, and a list of scheduled tasks with avatars.

A day-agenda calendar widget with a large date heading and an event list using coloured accent bars and category badges.

404 sections — a bold centered layout, a masked oversized numeral, and one with a search field and helpful links.

A centered 404 page with a badge, large heading, muted explanation, and a dual home/support button row with an RTL-flipping back arrow.

A centered 404 page with an enormous token-gradient masked numeral, a lost-in-space heading, muted copy, and primary home plus outline search calls to action.

A 404 section with an oversized numeral, a search field and a grid of helpful destination links, each an icon row with title, description and arrow.

Empty-state sections — a general first-use prompt and a no-search-results variant.

A centered empty-state with icon, message, and primary/secondary actions for first-run experiences.

An application no-search-results empty state with an icon tile, message referencing the query, clear and browse actions, and suggestion chips.

A first-run create empty state with an icon, heading, primary and import actions, and a row of starter-template cards.

Full-page loading, empty, error, and ready state contracts.

A full-page state contract for stable loading skeletons, actionable empty states, recoverable errors, and ready content.

A cookie-consent banner pinned to the bottom of the viewport, composing the consent-manager primitive: Accept all / Reject all / Manage preferences with per-category switches, localStorage persistence and Global Privacy Control honoured.

AI tool surfaces — text writer, image generator, code generator, an assistant chat, a full-height inbox rail, and a model playground, each with live output panels.

Interactive AI writing tool with tone and length controls, a live output panel, and copy/regenerate actions.

Interactive AI image tool with style and aspect-ratio chips, a 2×2 shimmer-to-result grid, and per-tile download/copy actions.

Interactive AI code tool with language selector, a window-chrome code panel, and inline copy/run actions.

A complete chat panel: a header with model selector, a scrollable conversation with a streaming reply and feedback row, prompt-suggestion pills, and a composer pinned to the bottom.

A full-height assistant rail for the side of an app: a header, a scrollable conversation that starts with a quiet empty state and suggestion chips, and a composer pinned to the bottom with link/image actions and a "Connect apps" footer strip.

A two-column model playground: a settings rail with model selector, temperature, system prompt, token counter, and usage ring beside a conversation that shows chain-of-thought, a tool call, a stop reason, and the prompt composer.

An agent side panel that reports a run on a document: a header with title and close action, a scrollable body (an activity summary, the answer as prose, and a milestone progress list), and a composer pinned to the bottom.

Filterable conversation inbox sidebar with presence indicators, unread badges, and active-row highlight.

A compact chat panel: a card with an avatar/status header, a sided-bubble conversation (via chat-thread) and a static composer.

A living design-token style guide — documents colour, typography, radius, spacing, elevation, motion and numeric tokens (plus WCAG contrast grades) using the token components, all driven by real semantic tokens so it re-themes with your app.

platejs.org-inspired rich-text editors — a full document surface, a compact composer, a commented document and an AI-assisted draft.

A full-page document editor demo with a fixed formatting toolbar, floating selection toolbar, rich seeded content covering every supported element, and an inline info alert note.

A compact inline comment composer with a slim formatting toolbar, a short editable area, a markdown-hint footer, and a primary submit button.

A kitchen-sink rich text editor — formatting toolbar, floating toolbar, an inline mention, an editable table with row/column handles, a resizable media figure and a drag drop-indicator.

A collaborative document editor with a side-by-side comments panel — editor surface on the left, threaded comment cards on the right, stacks vertically on mobile.

An AI-assisted writing editor with an inline AI command panel — showcases the editor-ai-menu floating over the selected paragraph for rewriting, summarising, and tone adjustments.

Pick a base brand colour and derive a full semantic palette (primary, accent, muted + readable foregrounds) live, with per-swatch copy and a Copy-CSS button — the paletteui core as an installable block.

A theme showcase generated from the portable brand-token catalog. Each card shows primary, secondary, and accent colors and can re-skin a scoped live component preview in light or dark mode.

Storefront navigation bars — utility strip, category links, search and wishlist/account/cart actions with a cart count.

An e-commerce store navigation bar with a utility shipping strip, brand, category links with a sale badge, search, and wishlist, account and cart icons with a cart count.

Storefront navbar with a promo strip, primary nav links, and an interactive full-width mega-menu flyout with category columns, a featured product card, and locale selector.

A minimal store navbar with a centered wordmark, icon-only search, account and cart actions, and a centered category-link row beneath.

An editorial monochrome storefront navbar with a thin announcement strip, a centered prominent wordmark, an uppercase wide-tracked primary nav row with a full-width mega-menu flyout (category columns + featured tile), an end cluster (account, locale select, cart count), and a focus-managed mobile drawer.

Storefront heroes — an editorial collection opener with headline, supporting copy and call-to-action over a dominant product image.

Editorial two-column product hero with sale badge, headline, dual CTAs, trust row, a dominant product placeholder with floating price chip and add-to-cart button, and secondary collage tiles.

A full-bleed editorial storefront hero — a single dominant media placeholder under a soft scrim with a bottom-start overlaid copy block (uppercase eyebrow, large light display headline, supporting line, dual CTAs), a top-start collection tag and a quiet scroll cue.

A full-bleed background-video storefront hero — a tall autoplay muted loop video (or a token placeholder when no source is set) under a foreground scrim, with centered overlaid editorial copy: uppercase eyebrow, large display headline, a supporting line and dual CTAs; reduced-motion users see the poster instead of the moving video.

Storefront footers — newsletter signup, multi-column link lists, social icons, locale/currency selector and payment-method chips.

Commerce mega-footer with a newsletter subscription row, responsive multi-column link grid, brand column with social icons, and a bottom bar with locale selector and payment-method chips.

A minimal editorial storefront footer — a large centered wordmark and brand line, a centered newsletter invitation row, an uppercase wide-tracked multi-column link grid, and a quiet bottom bar with a locale selector, payment-method chips, social icons and a copyright line.

Promotional sale sections — a bold gradient panel with countdown pills, dual CTAs and a discount code, and a dismissible full-width promo bar with a copyable code.

A bold promotional sale section on a token gradient panel with an eyebrow badge, headline, countdown unit pills, dual call-to-action buttons and a discount-code chip.

A full-width horizontal sale strip on the primary surface with an eyebrow, headline, inline countdown chips, a discount code and a contrast call-to-action.

A slim full-width urgency bar on the primary surface: an announcement message, a live days/hours/minutes/seconds countdown to the deadline, a one-click copyable promo-code badge with a copied confirmation, a contrast call-to-action, and a dismiss button. Stacks vertically on mobile and collapses to a single row on desktop.

A full-width gradient promotional banner with an eyebrow badge, headline, copyable promo code chip, primary CTA, and dismiss control.

A four-up incentives band highlighting shipping, returns, secure checkout, and support with tokened icon tiles.

Promotional discount modals — a two-pane dialog pairing a bold offer panel with an email-capture form.

A centered promotional offer modal on a muted backdrop with a top-end close button: a decorative gradient panel showing a big discount on the left, and a content pane on the right with a limited-time badge, heading, muted subline, an email subscribe form, a dismiss link, and fine print.

Age-verification gates — a full-screen dialog confirming legal age before entry.

A full-screen age-verification gate on a muted backdrop with a centered dialog card: a brand logo chip, an age question heading, a short subline, a "Remember me on this device" checkbox, two prominent side-by-side confirm/deny buttons, and legal fine print. Choosing No swaps the card body to a polite "you must be 21+" refusal with a Go back link that resets the gate. Configurable minimum age, heading, and logo.

Gamified discount wheels — an SVG prize wheel with email capture and a spin reveal.

A centered spin-to-win discount promo in a two-pane card: the left pane is an inline-SVG prize wheel of equal token-coloured wedges with a fixed top pointer that spins on demand, and the right pane has a heading, subline, a required email capture field, and a SPIN button that disables while spinning and reveals the won prize with a single-use code and a claim button.

Single-product spotlights — a hero product with media, variant swatches and add-to-cart.

An editorial featured-product spotlight — a single hero product presented with a large media placeholder beside a brand eyebrow, large display name, price, short description, selectable colour swatches and dual add-to-cart / secondary CTAs.

Category pages — a banner with a faceted filter sidebar (categories, price, swatches) and a product grid.

An ecommerce category page with a slim banner showing breadcrumb, title and result count, a sticky filter sidebar (category checkboxes, price chips, colour swatches separated by dividers), and a responsive 2-to-3-column grid of product cards with badge, rating and an Add to cart button.

Editorial category mosaic with an asymmetric CSS grid, a dominant hero tile, gradient overlays, hover-scale thumbnails, and item-count badges.

An editorial shop-by-category section in the Monogram language: an uppercase wide-tracked eyebrow and a light font-heading title above a calm equal 3-up grid of image-link cards. Each card is a token bg-muted aspect-[4/5] placeholder with a subtle reduced-motion-safe hover-scale and a caption set below the image (font-heading category name, item count, and a quiet RTL-aware Shop cue).

An editorial boutique collection page with a slim header (eyebrow, display title, result count and sort), a faceted filter rail (category checkboxes, min/max price range, material checkboxes and token-only colour swatches) that collapses into a mobile drawer, and a responsive grid of borderless editorial product cards with placeholder, name, price and an optional sale badge.

Shop grids — a sort/results toolbar above a responsive grid of product cards with sale badge, rating and add-to-cart.

An ecommerce shop grid with a results count and sort dropdown toolbar above a responsive 2-to-4-column grid of product cards, each composed from the product-card primitive with a sale badge, wishlist heart, name, star rating with review count, price with optional compare-at, and an add-to-cart button.

An e-commerce product listing in a list/row layout — a sort toolbar above divided product rows with thumbnail, rating, price and add-to-cart.

An e-commerce product listing as a horizontal snap-scroll carousel of product cards with prev/next controls, sale badges, ratings and add-to-cart.

An editorial horizontal product carousel with a font-heading section title and prev/next controls that scroll a snap-aligned track of product cards (placeholder media, name, price, optional sale badge), RTL-aware and keyboard accessible.

Quick-view dialog panels — a compact modal-style product card with image, pricing, rating and add-to-cart.

A centered quick-view dialog panel on a muted backdrop with a top-end close button, a square product image on the left, and details on the right: title, badge, price, rating, description, size selector, quantity stepper, add-to-cart button, and a view-full-details link.

A quick-view modal panel with an image gallery and thumbnail strip beside product info, colour and size selectors and add-to-cart.

Product-listing page headers — breadcrumb, category title and result count beside sort, view-mode and filter controls.

A product-listing page header with a breadcrumb, category title, result count and description beside sort, grid and list view, and filter controls with active-filter chips.

A compact single-row product-list header with a category title and result-count badge beside filter and sort controls.

Storefront filter toolbars — a horizontal bar of filter dropdowns, a view toggle, sort control and active-filter chips.

A horizontal product-filter toolbar with result count, filter dropdown buttons, a grid/list view toggle, a sort control and removable active-filter chips.

A vertical filter sidebar with collapsible groups for category, price, colour swatches, size and rating, plus an apply action.

Shoppable lifestyle imagery — hotspot pins on a photo that reveal product popovers.

An ecommerce shop-the-look section with a heading and subheading above a large lifestyle product image, overlaid with interactive hotspot pins whose animated halos open a small product popover card showing a thumbnail, title, price, and add-to-cart and view buttons, plus a hover-free product list rendered as cards alongside for mobile.

An editorial shop-the-look lookbook — an asymmetric gallery of full-bleed lifestyle scenes, each scrimmed with an overlaid eyebrow/title/shop-now caption and interactive hotspot pins whose pulsing halos open a small product popover card (thumbnail, name, price, view and add buttons), with one pin open at a time and Escape to close, above a highlights rail of product cards.

A shop-by-category storefront hero: a centered headline, subcopy, and primary call-to-action above a responsive grid of category cards. Each card is a real keyboard-accessible link with a muted image placeholder, category name, item-count badge, and a 'Shop {category}' arrow that flips under RTL. An optional feature tile spans two columns for editorial rhythm. Composes the card, button, and badge primitives with semantic tokens only.

Tabbed product grids — accessible tabs that swap between grids of product cards.

An editorial tabbed product grid where a row of accessible tabs (New In, Bestsellers, On Sale) swaps between grids of Monogram product cards with sale badges and add-to-bag actions.

Shoppable video-reel rows — tall portrait reel cards with play/mute controls and tagged product popovers.

A shoppable video reels section with a heading above a horizontally scrolling row of tall 9:16 portrait reel cards, each a token media placeholder (or optional muted autoplay video) with a centered play/pause affordance, a mute toggle, a corner tag badge, and a bottom product chip that opens a popover card with thumbnail, name, price, and add-to-cart and view actions.

Product detail (PDP) layouts — an image gallery beside title, rating, price, colour/size selectors and add-to-cart.

A two-column product detail page with a square image gallery and thumbnail row on the left, and brand badge, title, rating, price, colour swatches, size tiles, quantity stepper, add-to-cart and wishlist buttons, and a shipping feature list on the right.

A product detail layout with a vertical thumbnail rail beside a large image, and product info with colour and size selectors, quantity and add-to-cart.

A product detail layout with an image, buying options, and a below-the-fold tabbed description with a specifications table.

An editorial Monogram product detail page with a large image gallery and thumbnail strip, brand eyebrow, font-heading title, price, rating, colour swatches, size tiles, a quantity stepper, add-to-cart and wishlist buttons, and collapsible Details and Shipping & Returns rows.

Review sections — an average-score summary with a rating-distribution breakdown beside a list of individual customer reviews.

A product reviews section with a sticky summary panel showing the average score, a readonly star rating, total review count, a 5-to-1 rating distribution of progress bars with percentages, and a write-a-review button, beside a wider column of individual review cards each with an avatar, reviewer name, verified-purchase badge, star rating, date, title, body, and a helpful-vote footer.

A write-a-review form with an accessible star-rating fieldset, title and body fields with a character hint, a recommend choice and reviewer identity fields.

A detailed customer-review list with average score, per-review avatars, verified badges, photos and helpful voting.

Build-your-own-bundle pickers — selectable products with a running total and unlock-a-discount progress.

An interactive build-a-box bundle builder with a responsive grid of selectable product cards on the left (image placeholder, title, price, and an add/remove toggle) and a sticky summary aside on the right showing a progress bar toward the target bundle size, a running item count, subtotal, discount, and total, plus an add-to-cart button that stays disabled until the minimum is reached.

Cross-sell upsells — frequently-bought-together bundles with a toggleable, live-totalling checklist.

A 'Frequently bought together' cross-sell panel inside a card: a top row of product thumbnails joined by plus signs that equal a running total beside a primary 'Add all to cart' button, over a checklist where each item has a checkbox (checked by default), a thumbnail, its name ('This item:' for the first, '+' for the rest), and price. A 'Save' badge highlights the bundle discount; unchecking an item dims its plus thumbnail and live-updates the total and the cart button count via inline Alpine.

Sticky add-to-cart bars — a pinned purchase bar with variant, quantity and add-to-cart.

A product page excerpt — square image placeholder, title, rating, price with optional compare-at, and description — followed by filler detail copy and a sticky bottom purchase bar that spans the width. The translucent, blurred bar carries a small thumbnail, the compact product title and price, a size variant select, a minus/value/plus quantity stepper, and a primary add-to-cart button; it stacks to a full-width button on mobile.

Product-finder quizzes — multi-step recommenders that end on a matched product.

A centered multi-step product finder quiz card that recommends a product from the shopper's answers: an eyebrow badge, heading, and live step indicator in the header; one question per step with 2–4 selectable option cards (icon, label, description, and a selected ring) as a keyboard-accessible radiogroup; Back and Next/See results buttons that disable until the step is answered; and a final result step recommending a product with an image placeholder, name, price, and a Shop now button. Driven entirely by inline Alpine.

Size guides — a unit-toggle measurements table with a how-to-measure panel.

An ecommerce size guide with a cm/in unit toggle: a segmented control flips every measurement between centimetres and inches in place. An accessible table lists sizes (XS-XXL) down the side with Chest, Waist, Hip and Sleeve columns, each row carrying both unit values and rendered via the active unit. A side panel walks through three illustrated 'how to measure' steps with a fit note, plus a Slim/Regular/Relaxed fit badge row.

Ingredient and spec breakdowns — icon-tile ingredient cards with a full-list accordion and trust claims.

A "What's inside" ingredients and specs breakdown for a product page: a centered heading and reassurance subheading, a responsive grid of ingredient cards each with a tokened icon tile, the ingredient name, a one-line benefit, and an amount/percentage badge. Below the grid an accordion reveals the full INCI / nutrition-style ingredient list, followed by a centered row of trust badges (vegan, cruelty-free, no parabens).

Cross-sell strips — a "you may also like" grid of recommended product cards.

A static "you may also like" recommendations strip — an editorial font-heading heading above a responsive 2-to-4-column grid of product cards with a tall media placeholder, optional sale badge, name, price with optional compare-at, and a quick add-to-cart action.

Checkout pages — a contact/shipping/payment form beside a sticky order-summary card with promo code and totals.

A two-column checkout page with a contact, shipping, delivery and payment form beside a sticky order summary card with promo code, totals and a place-order button.

Two-column subscription checkout with a monthly/annual billing toggle, live price recalculation, payment fields, and a sticky order summary card.

A multi-step checkout with a four-stage progress indicator above the current step's form beside a sticky order-summary card.

A single-column express checkout with wallet pay buttons, a card form and a total, in a compact card.

Cart pages — a list of editable line items with quantity steppers beside a sticky order-summary card with a promo field and totals that recompute live.

A two-column shopping cart page with a heading and live item count, a wider list of line items each with a square media thumbnail, name, variant, unit price, a number-field stepper clamped 1–10, live line total, and remove button, beside a sticky order-summary card with subtotal, shipping, estimated tax, a promo-code input with apply button, a bold total, a full-width checkout button, and a continue-shopping link — all totals recompute live as quantities change.

A slide-over mini-cart drawer with a backdrop, scrollable line items with quantity steppers, an optional order-note field, and a totals footer with checkout actions.

A shopping cart in a table layout with product, price, quantity and total columns, a promo-code field and an order-summary block.

An editorial Monogram cart page that lays line items out as an airy separator-divided list with uppercase wide-tracked labels, a media placeholder, variant, unit price, a number-field stepper clamped 1–10, live line total and remove link, beside a borderless order-summary column with subtotal, a shipping note, an optional order-note textarea, a large total, a full-width checkout button and a continue-shopping link — totals recompute live as quantities change.

Gift-card purchase layouts — a live gradient card preview beside an amount/recipient/message form.

A two-column gift-card purchase section: a token-gradient gift-card face on the left that live-previews the chosen amount, and a card form on the right with amount chip buttons, a custom amount, recipient email, sender name, message, delivery date, and an add-to-cart button that reflects the selected amount.

A gift-card balance checker — a card-number and PIN form with a result panel showing the available balance and card details.

Saved-item wishlists — a card grid and a data-dense table layout.

Saved-items wishlist grid with stock badges, ratings, pricing and move-to-cart actions.

Data-dense table layout for saved wishlist items with thumbnail, price comparison, stock badge, and per-row add-to-cart and remove actions.

An account settings card listing saved payment cards with default badge, edit/remove actions, and an add-card button.

Account address book with a responsive grid of saved address cards, default and label badges, edit/delete actions, and an add-new placeholder.

An account orders card listing past orders with status badges, item thumbnails, totals, and per-order actions.

Order confirmation cards — a success state with line items, totals, shipping address and tracking actions.

A centered order-confirmation card with a success-check chip, line items, totals breakdown, shipping address, an estimated-delivery badge, and track/continue actions.

An order-tracking card with a four-stage shipment progress tracker, a latest-updates scan timeline and a carrier footer.

A printable order receipt/invoice card with billing and shipping addresses, itemised lines, totals, payment method and download/print actions.

Authentication screens — sign in / sign up with split brand panels, testimonial sidebars and patterned backdrops, plus two-factor, password-recovery and email-verification cards.

A centered login card with email/password fields, remember-me, social sign-in, and sign-up link.

Magic-link sign-in form — email field with no password, plus Google and GitHub OAuth fallbacks.

A centered registration card with name, email, password fields, terms consent, and sign-in link.

Full-height two-column auth layout with a gradient brand panel and a centered sign-in card featuring social buttons, an email/password form, and remember-me.

Two-column auth split: a token-gradient testimonial sidebar with a customer quote and avatar beside a sign-up card with name/email/password fields, social button, and terms.

Centered single-card sign-up over a full-bleed dot-pattern backdrop with social buttons, a separator, and an email/password form.

A centered sign-in card whose one primary action runs the passkey (WebAuthn) ceremony, with a status line for every outcome and a link to the other sign-in method.

A centered two-factor authentication card with a shielded icon chip, 6-digit OTP input, a full-width verify button, and resend/alternate-method links.

A forgot-password card with an email field, a success status, a bot-check slot, a full-width reset-link button and a back-to-sign-in link, as its own centred page or as a card in a host layout.

A set-new-password card with the reset token and email, a new-password field with a live strength meter and configurable rules, a confirm field, a refused-link error with a request-new-link action, and a back-to-sign-in link, as its own centred page or as a card in a host layout.

A centered verify-email card with a mail icon chip, open-email-app and resend buttons, a divider, and a change-email link.

The authorization screen of an OAuth server: the requesting app with an optional logo and unverified warning, the redirect host, the signed-in account with a switch link, every requested scope with a plain description and sensitive flag, and equal Deny and Approve forms.

Centered auth card inviting a user to join an organisation, showing the org avatar, inviter, role badge, an access-list divided by a separator, and accept/decline actions.

A ranked leaderboard card with a top-three podium and a numbered list of entries showing avatar, name, team badge, score, and a movement indicator.

A task list card with a progress summary, an add-task input row, and a list of checkbox task rows with priority badges and due dates.

A boarding-pass style flight status card with airline, flight number, status badge, origin/destination route, an animated plane gliding along the flight path, gate/terminal/boarding/seat details, and a perforated divider with a barcode strip.

Compact weather cards — current conditions, minimalist, extended with high/low, metric tiles, hourly strip, four-day forecast and a wide metrics dashboard.

A square weather widget with a large condition icon, current temperature, and location footer.

A minimal square weather widget with a city and small icon header above a large centered temperature.

A square weather widget showing current and feels-like temperature with a high/low footer marked by up and down arrows.

A square weather widget pairing the current temperature with feels-like and humidity metric rows and a time header.

A weather widget with current and high/low temperatures above a five-hour forecast strip of icons and temps.

A weather widget listing a four-day forecast with weekday, condition icon, and min and max temperatures per row.

A wide weather widget with a hero temperature and location above a 2x2 grid of wind, feels-like, precipitation, and humidity tiles.

Live clocks — an analog dial with arabic/roman/no numerals and a multi-city world clock.

A live-ticking analog clock widget inside a square card: a bordered dial with optional arabic, roman, or no numerals, a thick hour hand, a minute hand, a thin destructive-toned second hand, and a centre dot, all driven from the local time in inline Alpine.

A world-clock widget card listing four cities, each row showing the city name and its UTC-offset label alongside the live local time and a sun or moon icon reflecting day or night, all computed from one local time instance in inline Alpine.

Live and final sports cards — football scoreboard, live match, fixtures list, cricket scorecard and commentary, and a basketball period breakdown.

Compact football full-time scoreboard widget with league header and two team score columns.

Live football match widget with a pulsing status dot, three-column score layout, and a pulsing minute badge.

Upcoming fixtures widget listing home and away teams with the date and time of each match.

Cricket match-summary widget with two team innings rows and a chase target footer.

Live cricket commentary widget with batter and bowler rows separated by a divider and a chase target footer.

Basketball widget with each team's total and a per-period scoring breakdown table.

Market cards — a single ticker with an area sparkline, a multi-ticker watchlist, and a price grid.

Single stock ticker card with a trend triangle, change percentage, area sparkline, and the current price.

Watchlist card listing several tickers with a trend triangle, company name, current price, and coloured change percentage per row.

Compact grid of stocks, each cell showing a circular monogram avatar, ticker, and current price.

Focus tools — a pomodoro timer, a habit-streak card, a time-allocation ring panel, and a day planner.

A compact focus-timer widget with a MM:SS countdown readout and start/pause and reset controls.

A single-habit tracker card showing a streak count with a check button that marks the day complete.

A focus-breakdown widget with a stats row and four labelled circular-progress rings for time allocation.

A day-planner widget with a tasks-done summary and a scrollable checklist of timed tasks.

Audio players — a spinning vinyl record, a transport-control card, horizontal and vertical Spotify-style cards, and an album crate.

A spinning vinyl record music player: the album art is the record's center label and a blurred background fill, a stylized tonearm swings onto the record while playing, and the record spins. Click the record to toggle play/pause; wires a real <audio> element when a source is given.

A polished music player card with album art, track metadata, a seekable progress bar with elapsed/total times, prev/play-pause/next transport controls, and a volume control.

A horizontal Spotify-style music card with a blurred album-art backdrop, album cover, track metadata, a seekable progress bar, transport controls, and a vinyl disc that slides out and spins while playing.

A tall vertical Spotify-style music card with a progressive blur-fade album cover that blends into a dark controls panel holding track metadata, a seekable progress bar, and transport controls.

A stacked row of album covers that lift on hover (dimming their neighbours), pop a spinning vinyl disc when clicked, and cast a CSS-only album-art reflection.

Player widgets — a circular radial control pad and a now-playing card with a scrollable playlist.

A wide now-playing media card with album art, scrubber and transport controls beside a scrollable up-next playlist.

A circular donut control pad with four arc segments (volume up/down, skip back/forward) around a centre play/pause toggle.

Pro document workspaces — upload, viewing, citations, splitting and signing.

A Pro document dropzone that accepts a single PDF and previews it inline in a paged viewer.

An admin document workspace pairing a thumbnail rail sidebar with a toolbar and a main PDF viewer that navigates in sync.

A PDF viewer with overlaid bounding-box citations cross-linked to an extracted-fields panel.

A Pro admin workspace for splitting one PDF into multiple output documents, with a live split count and export controls.

An admin workspace that previews an .xlsx workbook and splits it into one output document per selected sheet.

An experimental Pro admin workspace that renders a .docx into an editable surface with a formatting toolbar.

A Pro document signing workflow that previews a PDF beside a card to capture the signer's name, email, and electronic signature.

A Pro admin document-library workspace pairing a search/upload toolbar with a browsable file-finder tree.