Production-ready UI blocks for landing pages, dashboards, and web apps.
A workflow that states one trigger on an inverted full-width panel, then forks into two equally weighted condition branches whose outcomes sit in nested cards carrying the share of cases they account for.
A contact section that asks a branching set of questions instead of one long form: a rail lists the steps that currently apply and lets you jump between them, and answering the first question adds or removes the steps below it.
A four-column footer with a wide brand column carrying a parenthetical eyebrow, an oversized wordmark, a two-line tagline and labelled social links, beside three ruled link columns with an inline mail address and a centered copyright bar.
Centered eyebrow, heading, and description above a grid of borderless brand cards — each with a square, colorable logo plate, a title and short description, and a full-width animated seal detail button.
For product families: the brand is a button with an up-down chevron that drops a floating switcher of sibling products, each with an initial-letter mark, a name, a one-liner and a check on the current one, followed by links and buttons. On a phone the menu is a left drawer that opens with the product switcher on top, then the links and the buttons. Panels stay in the markup and are toggled with CSS.
Two-row navbar with main navigation and secondary breadcrumb bar for hierarchical content paths. Perfect for e-commerce product pages and documentation with deep category structures.
Animated breaking news ticker with live indicator, category badges, and auto-rotating headlines.
Schedule cards for coffee breaks, lunch, and social events with timing, locations, and activity highlights. Perfect for showing networking opportunities.
A brochure request for a development: heading and lead on the left over a numbered contents list of six chapters with their page counts and a total, hairlines between the rows; on the right a 4:3 photograph of the dining room at dusk opens from the top once it has loaded, with the email field, submit pill and note under it as a one-line GET form, so the two columns balance.
Centered hero section with heading, CTA buttons, and a realistic browser chrome mockup displaying product screenshots. Perfect for SaaS landing pages showcasing web app interfaces.
Split layout with stacked stats on the left and a browser window mockup displaying a screenshot on the right.
Centered hero with perspective browser mockup, floating notification cards at corners, and star rating badge. Perfect for SaaS products and web apps.
Questions as clickable pills with answers expanding below. Bubble-shaped buttons for interactive selection.
Budget-based plan selector with slider control that highlights the best matching plan. Perfect for helping users find the right tier.
A construction timeline for a development: eyebrow, heading and lead, then a vertical list of milestones along a hairline spine that draws downwards as you scroll, each with a dot that fills in turn, a date figure, a title and a line; the current stage carries a primary dot, a primary date and a short tag, and a register button closes the block.
Customizable pricing with base plan and selectable add-ons that update total dynamically. Perfect for modular products with optional features.
A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.
Bundle breakdown with chunk list showing size, gzip, and module counts. Large chunk warnings, percentage bars, and change indicators for tracking growth.
JavaScript bundle analysis with chunk breakdown. Visual size bars, module lists, and gzip comparisons. Color-coded by type: app code, vendor, assets.
Three long buyer testimonials stacked under a header grid, each row opening with a hairline that draws across and a small line-drawn quotation mark, the quote set large in the middle columns and the buyer's name, the type they bought and the month on the right. The rows rise one after another as they scroll into view and a closing hairline carries a permission note.
A hero that sets its position and paragraph against a seal button held at the right edge of the same row, then runs a captioned wide photograph beneath it and closes on one portrait card per writer.
A narrow signup where the reader first picks how often they want to hear from you, the paragraph underneath rewriting itself for the choice, before the single email row is filled in.
Event calendar sync with multiple export options including Google Calendar, email invite, and ICS download. Perfect for event reminders and schedule syncing.
Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps.
Speaker submission CTA with submission deadline, benefits checklist, and proposal guidelines. Perfect for conferences seeking talk proposals.
Release feed with prominent callout blocks highlighting the most impactful change per release.
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.
A hero built as one borderless stage filled with a live sea and sky effect. On desktop the effect dissolves toward the left, where the eyebrow, heading, description and two buttons sit on the page color, and a glass session player with a waveform floats over the water on the right. On small screens the player sits on the effect at the top and the text follows below, where the effect has faded out.
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.