Production-ready UI blocks for landing pages, dashboards, and web apps.
A when-to-visit section for a seasonal hotel: two smooth lines for sea temperature and daily sunshine draw across the twelve months under a bracket marking the open season, and hovering a month glides a marker along both lines while the large serif figures roll over and a short note says what that month is like at the house.
A gentle signs-to-notice section: a serif heading that settles in word by word, an intro, numbered ruled signs with serif titles that blur in as they arrive, a pill action and a safety notice, beside a sticky photograph drifting inside its frame.
Anonymous reporting and whistleblower protection policy with reporting channels, protection guarantees, and a secure report submission button. Required for corporate compliance programs.
Centered eyebrow and heading above a wide image card carrying a corner label and a glass overlay band that pairs a testimonial with a headline stat, followed by a three-up row of icon reasons.
Team stats band paired with benefit highlights.
A two-column comparison contrasting the Polaris way with a typical agency.
Cinematic image band carrying a pill label in its corner, followed by a ruled four-column row where each measured fact pairs an oversized figure with a sentence of testing context, with the outline pill CTA sitting on the heading line.
Centered header with wide panoramic image, product cards with layered attributes, and sourcing grid.
A centred hotel hero with a serif headline, a short line and two pills above a panoramic photograph that begins as a framed picture with soft corners and, as it scrolls towards the middle of the screen, widens edge to edge while the view eases back from a slight zoom, finished with two quiet captions.
Single-frame image reel that slides on a transform, driven by round arrow buttons in the header and a row of bar indicators beside the caption, with no hover behaviour on the image itself.
Photo-free hero that runs a display statement across the full width, drops the paragraph and pill CTAs onto one baseline beneath it, and closes with a ruled four-column row of studio facts.
Cards styled like OS windows with title bars and close buttons. Retro OS design aesthetic.
Elegant two-column wine menu with origin details, vintage years, and dotted price lines. Perfect for wine bars, sommeliers, and fine dining beverage menus.
Wine estate footer with wine collection categories, tasting room hours, experience links, award badges, and booking button. Perfect for wineries, vineyards, and breweries.
Saved items list with stock status, quick add to cart, and remove actions. Includes empty state with call to action. Perfect for user dashboards and saved items pages.
Accordion followed by a call-to-action card below. Great for converting users by offering additional contact options at the end.
A typographic travel-time table for a development: an eyebrow, heading and intro in the header grid, then a list of nearby places with their walking, cycling and driving minutes as three light figure columns that count up from zero as each row enters the viewport. Hairlines draw between the rows, which rise in order, and a footnote under the last hairline explains how the times were measured.
Footer with a CTA row, then a bordered card holding the brand, a statement heading, a back-to-top link, three link columns, copyright, and an oversized wordmark bleeding off the bottom edge.
A site footer with the brand, a short description and a contact email on the left and three link columns on the right, all on theme tokens. Below them a rounded band with a live wave effect carries a closing line and a large wordmark that scales with the band width. A copyright line and legal links close the footer, and the effect is a swappable background slot.
A minimal bar with the brand on the left and a single Menu word beside a CTA on the right; the word drops a full-width panel of three link columns over a bottom row of office locations and social links. The same panel serves every viewport and stays in the markup, toggled with CSS.
Full-width analytics card with four KPI tiles, a CSS bar chart of the last 30 days, and a top-workflows leaderboard with share bars.
Developer-facing split: copy on the left, tabbed code blocks on the right showing the API request, response, and webhook payload for a workflow.
Hero with a full canvas on the right showing a real workflow flow: trigger node, condition node, and two action branches connected with lines.
Onboarding card with a progress bar and a six-step checklist. Each step shows a completion state, a title, and a short hint.
Three pricing tiers tuned to workflow products: run quotas, workflow counts, and integration limits with a featured plan highlighted.
Tab navigation showing workflow stages with split image cards featuring stats overlays and descriptions. Perfect for demonstrating product workflow or development process stages.
Three-column stats strip where each metric is anchored by a real workflow piece: active runs, success rate, and approvals.
Full-bleed auto-scrolling marquee of studio projects with a header and view-all CTA.
Bento-style grid of work perks with featured image card and icon cards. Mixed layout showcasing PTO, wellness, equipment, and team events.
Three-column categorized preferences with checkmarks and X icons showing preferred vs non-preferred work styles. Perfect for freelancers clarifying ideal project types and engagement models.
Four-column numbered workflow section showing project phases like Discovery, Strategy, Design, and Deliver. Perfect for freelancers and agencies explaining their project methodology.
Interactive workshop selector with capacity tracking, attendee info form, and pricing summary. Perfect for paid workshops and training session signups.
Workshop cards with instructor profiles, skill levels, requirements, and live capacity tracking. Perfect for hands-on conference workshops and training sessions.
A settings panel with a section rail on the left and the chosen group on the right, laying out hairline preference rows with switches, a select for the group's default, and a save bar underneath.
A settings page with the heading, save and discard buttons held in a sticky left column and three collapsible groups of rows on the right: text inputs, selects, a segmented choice, switches, a masked API key with copy, a warning note and a destructive action. Rows are data, edits live in local state, and a counter beside the save button shows how many are unsaved.
Combined onboarding card for creating a workspace with name and URL slug, plus a team invite section with email inputs. Perfect for SaaS apps that require team collaboration setup.
Full-height workspace picker listing organizations with logo initials, member details, and a create-workspace row, plus a signed-in-as footer. Perfect for multi-tenant apps after sign-in.
Global news grid with color-coded region indicators, hot story badges, and source attribution.
Full-bleed monochrome closing CTA with a giant scrolling marquee behind a single centered seal button.
Releases grouped by year in collapsible accordion panels with release count indicators.
Alternating left-right content blocks building up to a final call-to-action. Perfect for narrative-driven conversion with progressive value reveal.
Centered header above three zigzag rows, each pairing a 4:3 image with a title, description, and tag chips on alternating sides.
Alternating rows of images and stats that swap sides. Each row pairs a photo with key metrics and descriptions.
Four-step zigzag flow that alternates a workflow piece between sides. Each row pairs a numbered step with the live asset it produces.
Justified rows of frames that grow to fill every line, opening a viewer whose picture doubles as the zoom control: clicking switches between fitting the screen and filling it, with the caption and controls on one closing rule.
A pinned scroll hero for a design hotel built on the zoom-parallax component: seven photographs sit in an asymmetric editorial collage under a centered headline, and as the page scrolls every photograph grows at its own pace while the center one glides forward to fill the whole frame and the others fly outward past the edges. Once the bay fills the screen, the semibold headline, an intro, an Arrow Pill and an underline link settle in at the lower left over a soft shade. The collage drifts gently with the cursor, and every collage setting passes through the collage prop. Reduced motion shows the full photograph with all copy.