Production-ready UI blocks for landing pages, dashboards, and web apps.
Centered hero with avatar stack, partial star ratings display, and review count above the featured image. Perfect for products with strong user reviews.
4-column grid of feature icons with titles and descriptions below. Perfect for capability highlights, feature icons, or simple feature grid.
A minimal navbar with a lowercase wordmark, absolutely centered uppercase text links, an accent call to action, and a collapsing mobile menu.
Symmetric navbar with links on the left, a square-mark wordmark centered and a seal CTA on the right, plus a tile-grid mobile menu.
Symmetrical navbar with centered logo flanked by navigation links on both sides and dropdown menus. Perfect for fashion brands and lifestyle sites wanting balanced visual hierarchy.
Centered manifesto with a very large multi-line statement heading, muted emphasis phrases, a closing line, and a single CTA.
Minimal centered call-to-action with heading, description, and action buttons. Perfect for newsletter signups and conversion sections.
A centered newsletter hero that puts one reader quote in a bordered card between the headline and the email row, and swaps the row for a confirmation line once it is submitted.
Full-bleed photographic hero with a centered statement, paragraph and outline pill CTA over a tinted scrim, closed by a ruled client logo strip rendered inverted so the marks read on the dark image.
A centered hero with an eyebrow pill, a large light heading, a supporting paragraph, two accent buttons, and a wide image tile below that floats a live product micro-asset.
Centered product showcase with a large image on a muted stage, product name and tagline, a row of key specs, and an editorial learn-more link.
Minimalist single testimonial with centered quote and author details. Perfect for hero sections or standalone social proof elements.
Full-height centered sign-in screen with social login providers, email and password fields, a show/hide password toggle, remember-me checkbox, and forgot-password link. Perfect for SaaS apps, dashboards, and member portals.
Full-height centered registration card with social providers, name, email, and password fields (with show/hide), a terms checkbox, and a sign-in link. Perfect for SaaS sign-up pages that don't need a split layout.
Vertically stacked footer with centered logo, navigation links, social media icons, and copyright. Perfect for portfolios and personal brands wanting a symmetrical layout.
Full-width centered stats section with badge, heading, description, and a dynamic grid of icon stats with animated counters. Adapts grid columns based on stat count.
Center-aligned large stat display with minimal spacing and minimal decoration. Perfect for impressive scaling statistics or key performance numbers.
A simple centered hero for the Auralis set: a parenthetical eyebrow badge above a balanced heading, a short description, and a pair of animated seal buttons.
A feature that runs a hairline down the middle of the section and alternates its stages either side of it, dropping an image tile with a live phone frame onto the step worth showing.
The classic single-column FAQ: a centred serif heading that settles in word by word, a ruled accordion with serif questions and plain answers, and a closing line with a sliding-marker pill for the question that is not on the list.
A compact centred footer: the serif wordmark, a one-line serif statement and a sliding-marker pill, a single row of small-caps links, and a ruled bottom row with the copyright and social links.
A full-height photographic hero with everything centred: the photograph zooms out on load and drifts slower than the page under a dark scrim and film grain, beneath an eyebrow, a serif headline that settles in word by word, an intro and two sliding-marker pills.
The plainest hero in the language: a centred eyebrow, a serif headline that settles in word by word, an intro, two sliding-marker pills and an avatar trust line, with no image at all.
A sticky, frosted navbar with the serif wordmark in the centre, uppercase letter-spaced links split to either side that underline from the left on hover, a small sliding-marker pill, and a full-height light mobile menu whose links settle in one after another.
Centered hero with checklist of recent updates showing new badges and completion icons. Perfect for changelog pages and product update announcements.
Release feed cards with aligned change labels, summaries, and optional CTA buttons.
Version history cards with version badges, dates, and update type labels (Feature, Improvement, Fix). Perfect for product update pages and release notes.
Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history.
Full-height change-password screen with current, new, and confirm password fields (show/hide toggles), a forgot-password link, and a cancel option. Perfect for account security settings.
A pinned studio image beside a numbered, chaptered about story.
Full-bleed monochrome hero with a giant bottom-left heading and a row of equal-width chapter tabs. The active chapter's thin track fills left to right over the interval, then auto-advances and crossfades the background image. Each tab links to its href.
A pinned scroll feature section for a furniture workshop built on the scroll-rail component: the heading, intro, an Arrow Pill and an underline link open a long editorial story that travels sideways as the page scrolls. Five chapter spreads follow, each with a large photograph that moves slower than its frame, a faint oversized chapter numeral drifting behind the text, and a short title and paragraph that brighten as the spread reaches the middle. Portrait and landscape spreads alternate with the photograph above or below the text, and a quiet closing line with its own button ends the rail. Reduced motion turns the rail into a plain horizontal scroll.
Message-style bubbles simulating a chat interface. Perfect for a friendly, conversational tone in your FAQ section.
Real-time chat interface with message bubbles, online status, read receipts, emoji picker, and file attachments. Perfect for messaging apps and customer support chats.
Chat interface with image attachment previews, file upload indicators, and image gallery display within messages. Supports both user-uploaded images and AI-generated image responses.
2-column grid of checklist items with checkbox icons and strikethrough styling. Great for progress tracking, launch checklists, or task lists.
Interactive pricing with checkbox feature selection and real-time price updates. Perfect for customizable service packages.
Call-to-action with a vertical list of benefit checkmarks and action buttons. Perfect for highlighting value propositions before conversion.
Two-column layout with checklist highlights on the left, featured image and testimonial quote on the right, plus a full-width stats row.
A benefits split: a portrait photograph drifting inside its frame on the left, and on the right a serif heading that settles in word by word, an intro, a two-column list of ringed check benefits that arrive one by one, and a sliding-marker pill.
Grid cards with green checkmarks emphasizing answers. Positive confirmation visual for affirmative FAQs.
Full-height confirmation screen shown after a magic link is sent, with a mail icon, the destination email, an open-email button, a live resend countdown, and a change-email link. Perfect for passwordless and email-link flows.
Alternating layout showcasing dishes with large images, chef's notes as blockquotes, and pricing. Perfect for highlighting signature items and chef recommendations.
COPPA-compliant children's privacy notice with age restrictions, parental consent details, and data handling practices for minors. Required for services accessible to children under 13.
A clinician picker whose hairline list of practitioners, each showing their next opening, swaps an image tile floating a live availability card alongside their focus, background, and sites.
Full-height plan selection step with a monthly/annual billing toggle and selectable plan cards that update their pricing live, plus a continue button. Perfect for paid sign-up and upgrade flows.
CI/CD pipeline monitor with build stages, status indicators, and branch/commit tracking. Shows multiple pipeline runs with success, failed, running, and pending states.
Interactive seat selection grid for cinemas, theaters, and events. Row/column layout with an aisle gap, tier-based pricing (standard/premium/VIP), occupied seats, a live selection summary, and a legend. Includes screen indicator at the top.