Production-ready UI blocks for landing pages, dashboards, and web apps.
A lead hero: eyebrow, a serif headline that settles in word by word, an intro and dotted facts on the left, and a soft muted request form on the right with name, email and phone fields, a full-width sliding-marker pill and a privacy note.
A full-height not-found page: a faint oversized serif code, a serif heading that settles in word by word, a gentle explanation, a sliding-marker pill home and a row of small-caps links to the useful places.
Booking cancellation screen with the original booking summary, cancellation reason picker (radio list with optional notes), live refund breakdown based on cancellation policy, confirmation checkbox, and destructive cancel action.
Two-column guide with preparation tips and company commitments to candidates. Sets expectations for the hiring process with contact info.
A quiet hero for a candle maker on a dark, warm ground, built on the candle-flame component: a single flame drawn live in WebGL with a blue base, a white-gold core and an orange mantle, a slow flicker, warm light breathing on the room and the wax pillar, and a wisp of smoke now and then. The cursor is a breath that bends the flame away and makes it gutter on a quick pass. A serif headline, an intro, an Arrow Pill and an underline link sit beside it. Every flame setting passes through the candle prop.
Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips.
Asymmetric bento of capabilities: an image hero cell, accent cell and icon cells.
Looping carousel of capability cards with a centered media slot per card. Each slot accepts an image, video, or live registry-component asset.
Two-column split with an eyebrow, big heading, description, and CTA on the left and a checklist of capabilities with rounded check seals on the right.
Full-bleed monochrome hero with a giant display heading, short description, and a continuous bottom marquee of capability chips that pauses on hover.
An interactive feature where a hairline list of four capabilities swaps the image tile beside it, each one floating a different live asset with its own supporting paragraph.
Article wrapped in a bordered card container with featured image at top and tags integrated into header. Works well for curated collections or featured stories.
Single card that rotates through questions with progress dots and navigation buttons. Great for featured question rotation.
Three-column responsive grid of blog cards featuring author avatars, tag badges, and hover zoom effects. Clean card design with date and read time metadata.
Stat cards that start stacked on top of each other and fan out into a grid on scroll using framer-motion spring physics and staggered delays.
Question-answer cards with external link buttons below. Drives users to related resources or docs.
Career progression path with level indicators, role descriptions, and key skills. Shows growth framework from junior to principal level.
Vertical timeline showcasing career milestones with achievement icons, year badges, descriptions, and key metrics. Perfect for professionals displaying awards, launches, and growth achievements.
Centered careers intro with eyebrow, highlighted heading and supporting copy above a three-image gallery — one wide frame beside two portraits.
A hiring coming-soon section with a centered square eyebrow and heading, a working job-alert email form, and a list of upcoming roles with team and employment type.
A clinical overview with an eyebrow over a hairline rule, a two-column heading, and a bordered dashboard panel that composes a journeys stat, a retention ring, and a slim live-status strip, closing with a big-number outcomes row.
Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what is included, and a link into the full programme.
Full-width swipeable testimonial carousel with autoplay and dot navigation. Perfect for highlighting multiple customer quotes on landing pages.
Vehicle rental flow with pickup and return location fields, date range picker, car class grid (compact/suv/luxury) with image and specs, insurance tier selector, optional add-ons, and live price breakdown.
Process steps cascading in a diagonal staircase with connecting markers.
Case study with client details, metrics, team members, and results. Perfect for portfolio pieces and success stories.
Case study testimonial card with company logo, key metrics, and CTA button. Perfect for showcasing detailed customer success stories with measurable results.
A case study header with project metadata grid, service tags, and featured image. Perfect for agency portfolio pages showcasing client work details.
A portfolio with an eyebrow over a hairline rule and a two-column heading, then a full-width featured case card and a three-up grid, each an image with a gradient overlay carrying a client, headline result, and note.
Case study format with client info, overview box, metrics grid, sectioned content, and testimonial callout. Perfect for portfolio pieces.
Printed-catalogue layout pairing a numbered index of works with a sticky matted plate and its note, where an expand seal opens the plate alone on a dark ground with only its number and the arrows.
Release notes with changes grouped by type — Added, Changed, Fixed — using color-coded category labels.
Category collection grid with overlay images, item counts, and shop now links. Perfect for homepage category navigation and collection pages.
News categories grid with story counts, top story preview, and browse links.
A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it.
Product category cards with images and sales metrics showing units sold and growth percentage for each category.
Filterable blog grid with tab navigation for categories. Posts automatically filter by category selection with smooth content switching.
Responsive grid of category cards with icons and listing counts. Perfect for category browse, marketplace sections, or navigation options.
Centered article layout with floating table of contents button in bottom right corner. Ideal for mobile-first or single-column responsive designs.
Minimal centered 404 page with a large error code, a heading, a short explanation, two call-to-action buttons, and a divided row of popular page links underneath.
A centered call to action with an eyebrow pill, a large light heading, a short paragraph, and two accent buttons on a clean surface.
Centered layout featuring large pull quotes as visual breaks and prominent featured image. Ideal for essays or opinion pieces with strong statements.
Centered service-style block with optional badge, large heading, description, primary CTA buttons, and a row of icon-prefixed items below. Each item icon defaults to a check, and the row collapses to a stack on mobile.
Clean centered hero with clickable announcement banner pill above the heading with sparkle icon. Perfect for product launches and feature announcements.
Centered hero with three feature highlights displayed as icon cards with descriptions below the CTA. Perfect for platform and infrastructure products.
Centered hero with avatar stack and founder count text between buttons and featured image. Perfect for startup products and B2B SaaS.
Centered hero with gradient-highlighted heading text and trusted-by logo cloud below CTA buttons. Perfect for B2B SaaS and enterprise products.
Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages.