B
Beste UI
Team & Missionabout1Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.
Bento Grid Aboutabout10Asymmetric bento grid combining a mission card, team photo, stats, and stacked avatars. A modern, compact about section.
Hero Banner with Avatarsabout11Wide hero image with gradient overlay text, inline stats, and a stacked avatar strip of team members.
Process Stepsabout12Four-column numbered process cards showing how your company works. Each step has a large number, title, and description.
Company Profileabout13Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages.
Stats Bar with Story Cardabout14Horizontal stats row at the top followed by a centered story card with heading, body text, and CTAs.
Letter from the CEOabout15Editorial-style open letter with paragraphs, a personal signature with avatar, and a call-to-action. Great for founder stories.
Vision Mission Valuesabout16Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning.
Awards & Recognitionabout17Vertical list of awards and accolades with icons, titles, organizations, and years. Ideal for press and credibility sections.
Office Locations Gridabout18Four-column grid of office cards with city, country, address, and team size. Ideal for global companies.
Company At a Glanceabout19Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing pages.
Values with Team Photoabout2Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.
Team Photo & Listabout20Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.
Checklist & Image Splitabout21Two-column layout with checklist highlights on the left, featured image and testimonial quote on the right, plus a full-width stats row.
Q&A About Usabout22Asymmetric two-column layout with heading on the left and question-answer pairs on the right. A conversational way to introduce your company.
Story, Image & Team Rowabout23Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.
Company Heritage & Featuresabout24Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands.
Animated Stats & Value Cardsabout25Side-by-side intro with animated number counters on scroll, expanding accent bars, and hover-lift value cards. For impact-driven companies.
Interactive Pillar Tabs & Imageabout26Centered header with interactive hover tabs that crossfade a side image. Accordion descriptions and sliding accent line. For studios and agencies.
Split Intro & Animated Timelineabout27Left intro with image, right vertical timeline with staggered scroll-reveal animation. Numbered steps with sliding content. For startup journeys.
Marquee Stats & Team Splitabout28Full-width animated marquee stats ticker, split layout with intro text and leadership avatars on the left, full-height image on the right. For SaaS and product companies.
Wide Banner & Product Cardsabout29Centered header with wide panoramic image, product cards with layered attributes, and sourcing grid.
Timeline & Milestonesabout3Two-column layout with company stats on the left and a vertical timeline of milestones on the right. Ideal for company history and growth stories.
Banner Split & Process Stepsabout30Panoramic image with split header showing numbered process steps alongside. For studios and creative agencies.
Hero Overlay & Suite Cardsabout31Dark-overlay hero image with heading, suite/room cards with temperature and capacity badges. For hotels and hospitality.
Two Image Layoutabout32Centered heading with description, followed by two images side-by-side. Configurable image ratio (equal, left larger, right larger). Always horizontal on mobile.
About With Stats Bandabout33About section with an eyebrow label and read-more action on the left, a bold heading with two side-by-side images on the right, and a four-column stats band below.
About Stats Gridabout34About section: eyebrow label, two-tone heading, two portraits beside a 2x2 stats grid.
About Media Reelabout35About section with eyebrow, stacked stats and a read-more CTA beside a media card with a watch-reel play button.
Edge Label Aboutabout36Asymmetric about with a bleeding image, vertical edge label, offset copy and an inline stats row.
Index Columns Aboutabout37Three uneven columns: a studio fact index, an oversized statement, and a portrait with signature.
Overlap Heading Aboutabout38About where a large heading overlaps a portrait, with a paragraph, CTA and a bottom stat ribbon.
Numeral Aboutabout39About anchored by an oversized numeral with a paragraph and a horizontal image strip.
Founder Quote & Teamabout4Founder blockquote with avatar, followed by a horizontal team member row. Ideal for leadership pages and company introductions.
Interleaved Aboutabout40Magazine about where copy is interleaved between two staggered offset images.
Story Rail Aboutabout41Sticky eyebrow rail beside a story column and an offset captioned image.
Framed Studio Cardabout42About composed inside a bordered studio card with header marks, portrait and a stats strip.
Heading Hero Aboutabout43An oversized about statement hero above three heterogeneous zones: portrait, values and a CTA with stats.
Marquee Accent Aboutabout44Layered about over a faint scrolling studio-word marquee with offset images and stats.
Founder Quote Aboutabout45A founder-led pull-quote about with a portrait, signature and a facts strip.
About Stripabout46An about intro followed by a horizontally scrollable strip mixing image, stat, quote and values cards.
Split Panel Aboutabout47A hard light/dark split about panel: dark statement side and a light image-and-facts side.
Principles Aboutabout48About pairing a sticky studio statement and image with a numbered list of operating principles.
Founder Statement Aboutabout49About built around a dark founder portrait card with a pull-quote, signature, and supporting stats.
Image & Text Splitabout5Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right.
Chaptered Aboutabout50A pinned studio image beside a numbered, chaptered about story.
Beliefs Aboutabout51A statement heading over a belief list punctuated by intermittent inline thumbnails.
Spec Sheet Aboutabout52About styled as a technical spec sheet with coordinate marks, a data column and a portrait.
Pinned Photos Aboutabout53About with two subtly rotated, captioned studio photos clustered beside the statement.
Inset Card Aboutabout54A cinematic wide image with an overlapping inset content card and a stat ribbon.
Four Parts Aboutabout55A type-led about with an oversized statement and a four-part Who/What/How/Why grid.
Showcase Hero With Videoabout56Large heading with dual CTAs and a rating card, a playable video with floating metric cards, and a labelled about block with large paragraphs.
Values And Mission Statementabout57Two centered statements on a dark surface, each with an accent heading, an uppercase paragraph, and a small label beneath.
About Statement Cardabout58About section on a soft muted card with a monospace parenthetical eyebrow, a bold studio wordmark, a large centered statement, a logos strip, and a four-column stats band.
About Statement With Pillarsabout59Centered parenthetical eyebrow and a large statement heading, followed by a three-up row of icon pillars pairing a circular icon with a title and one-line description.
Numbered Principlesabout6Asymmetric two-column layout with heading on the left and numbered company principles on the right. Clean and editorial.
Team Member Gridabout60Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).
Belief Statement Valuesabout61Two-column about section with a sticky eyebrow and big heading on the left and a long belief paragraph above a border-separated values list on the right.
Milestone Timelineabout62About section with a header and a vertical timeline of milestones on a left rail, each marked by a year, title, and description.
Studio Story Splitabout63Image-led about split with a tall portrait, an offset statement heading, supporting copy, mono studio facts, and a seal CTA.
Principles Card Gridabout64Principles section with a header and a three-column grid of six bordered cards, each pairing a circular icon with a title and description.
Centered Manifestoabout65Centered manifesto with a very large multi-line statement heading, muted emphasis phrases, a closing line, and a single CTA.
About with Stats Gridabout66Two-column about with a tall image on one side and an eyebrow, heading, description, and 2x2 stats grid on the other.
Founder Statementabout67Founder statement with a large blockquote followed by an avatar, name, role, and a monospace signature line.
Team Portrait Gridabout68A team section with an eyebrow over a hairline rule, a two-column heading, and a grid of portrait cards each with a name and role.
Mission Band With Principlesabout69A company story section that runs a two-column heading over a wide photo band, then sets three founding principles as numbered hairline columns underneath.
Team Cards with Biosabout7Three-column grid of team member cards with avatars, roles, and short bios. Great for leadership and team pages.
Company History Rowsabout70A company story told as hairline rows keyed by a light year figure, set against a media column that sticks while they scroll and stacks an image tile floating a live growth metric over a captioned photograph.
Founders' Letterabout71A long-form company letter set in a wide reading column with an accent-ruled pull quote and signed off by avatar bylines, beside a narrower column of captioned portraits.
Open Company Factsabout72An about section on a soft surface that opens on a light statement, then lays out eight company facts as a two-column hairline definition list beside an image tile floating a live locations card.
Colophon Definition Rowsabout73A colophon written as a definition list, each hairline row naming one part of how the site is made, the choice itself, why it was made, and an optional link into the detail.
Philosophy Statementabout74An about section that opens on a serif statement settling in word by word, then pairs a portrait photograph drifting inside its frame with two paragraphs, a pill action and a ruled list of principles.
Practitioner Portraitsabout75A team section: a serif heading that settles in word by word beside the intro and a pill action, then three portrait photographs that drift inside their frames as the page scrolls, each with a serif name, a small-caps role and a short bio.
Slow Timelineabout76A history told down a single rule: a sticky column with a serif heading that settles in word by word, an intro and a pill action, beside a timeline whose ink line draws itself down as the page scrolls past serif years, titles and short descriptions.
The Rooms Gridabout77A studio tour: a serif heading that settles in word by word beside the intro and a pill action, four photographs of the rooms in an uneven, offset grid that each drift at their own pace as the page scrolls, and a ruled row of visiting details.
Manifesto Linesabout78A manifesto set as numbered serif lines that each blur in as they reach the viewport, ruled from one another, beside a sticky photograph that drifts inside its frame as the page scrolls, closed by a sliding-marker pill.
Founder Letterabout79An about section written as a letter: a portrait drifting inside its frame on the left, and on the right a serif opening line that settles in word by word, three paragraphs, a ruled signature with the founder's name and role, and a sliding-marker pill.
Stats with Descriptionsabout8Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections.
Story Splitabout80The classic about split: a serif heading that settles in word by word, two paragraphs, a sliding-marker pill and three ruled figures that count up on the left, and a portrait photograph drifting inside its frame on the right.
Three Valuesabout81A values section: a serif heading that settles in word by word beside the intro and a pill action, then three soft muted cards with a round icon, a serif title and a description that rise into view in turn.
Band and Figuresabout82An about section built around a wide photograph that drifts inside its frame: a serif heading that settles in word by word above it, then an intro with a sliding-marker pill beside four ruled serif figures that count up as they arrive.
Linked Resource Cardsabout83A sticky intro beside four resource cards on a muted fill, each one a whole link that inverts to ink on hover, carrying a ringed icon, a serif title, a line of context and a meta value beside its arrow.
Studio Process With Offset Photo Pairabout84An about section for a photography and retouching studio laid out as two equal columns. The left column holds the eyebrow, heading and description above the first photo stage, while the right column starts with the second stage and ends with a short note and two buttons, so the two stages sit offset from each other. The first stage relights one photograph across a whole day and the second is a magnifier for inspecting retouched detail, each with a title and a short paragraph. Both stages are borderless and share one aspect ratio.
Mission & Trust Logosabout9Centered mission statement with a logo strip of trusted partners below. Ideal for building credibility on landing and about pages.
Case Study Heroagency10A case study header with project metadata grid, service tags, and featured image. Perfect for agency portfolio pages showcasing client work details.
Studio Manifestoagency11Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.
Studio Valuesagency12Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.
How We Thinkagency13Sticky studio intro with a portrait beside a stack of numbered principles.
Studio Teamagency14A studio team grid of member portraits with names and roles.
Awards Listagency15Editorial list of studio awards by year with project and recognition details.
Studio At A Glanceagency16Studio overview pairing facts, copy and highlight stats with a clean studio image.
Principles Selectoragency17Interactive principle list that swaps a detail panel with image as each is hovered.
Studio Ethosagency18A bold ethos statement beside a list of concrete studio commitments.
Why Polarisagency19A two-column comparison contrasting the Polaris way with a typical agency.
Clients & Outcomesagency20Client logo cloud paired with measurable engagement outcomes.
Capabilities Accordionagency21Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips.
Horizontal Process Timelineagency22A connected left-to-right sequence of numbered project phases with a ruled timeline and step dots.
Numbered Services Listagency23A services section with an eyebrow over a hairline rule, a two-column heading, and an editorial list of monospace-numbered service rows split into title and description.
Studio Brief With Changing Plateagency24A four-step studio brief where the tall photograph beside it changes with the question on screen, each with its own caption, and sending the brief swaps the plate for the studio and the form for a ledger of the answers.
Services With Published Starting Pricesagency25A hairline service list that puts the starting price on the page, each row carrying the engagement name with its duration underneath, one line of scope, and the figure aligned right.
Centered Sign In Cardauth1Full-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.
Face ID Sign Inauth10Full-height biometric sign-in with an animated face-scan viewfinder that runs through idle, scanning, and recognized states, plus a continue action and a password fallback. Perfect for Face ID and biometric authentication.
Account Type Selectionauth11Full-height onboarding step where the user picks an account type from selectable radio cards with icons and descriptions, then continues. Perfect for tailoring sign-up flows by persona or plan.
Email Confirmed Successauth12Full-height success screen with a large confirmation check, a heading and message, a primary continue button, and a support link. Perfect for the final step after email verification or account activation.
Centered Sign Up Cardauth13Full-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.
Enterprise SSO Sign Inauth14Full-height single sign-on screen with a work-email field, a continue-with-SSO button, and Google and Microsoft providers below a divider. Perfect for B2B and enterprise apps that authenticate via identity providers.
Phone Number Sign Inauth15Full-height phone-based sign-in with a country-code select paired to a phone number input, a send-code button, and an email fallback link. Perfect for SMS one-time-code authentication flows.
Team Invitation Acceptauth16Full-height invitation acceptance screen showing the inviter's avatar and team name, a pre-filled disabled email, and name and password fields to set up the account. Perfect for team onboarding and invite-link flows.
Signed Out Confirmationauth17Full-height signed-out screen with a centered icon, a heading and message, a sign-back-in button, and a return-home link. Perfect for logout confirmations and expired-session pages.
New Sign-In Security Alertauth18Full-height security notification screen listing the device, location, and time of a new sign-in, with confirm-it-was-me and secure-my-account actions. Perfect for suspicious-login alerts and account safety prompts.
OAuth Authorize Appauth19Full-height OAuth consent screen showing the requesting app, the permissions it needs as a scope list, and authorize and cancel actions. Perfect for third-party app authorization and developer platform connect flows.
Split-Screen Sign Upauth2Two-column registration screen pairing a sign-up form (social providers, name, email, password with show/hide, terms checkbox) with a full-bleed image showcase and customer testimonial. Includes a left/right image position toggle.
Check Your Inboxauth20Full-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.
Passkey Sign Inauth21Full-height passwordless sign-in screen with a fingerprint icon, a continue-with-passkey button, and a password fallback below a divider. Perfect for WebAuthn and biometric authentication flows.
Recovery Codesauth22Full-height two-factor backup screen that displays single-use recovery codes in a grid with copy and download actions, a warning callout, and a confirmation checkbox that gates the continue button. Perfect for 2FA setup and account recovery.
Account Lockedauth23Full-height lockout screen shown after too many failed attempts, with a live mm:ss countdown, a retry button that unlocks when the timer ends, and a reset-password link. Perfect for rate-limited sign-in protection.
Complete Your Profileauth24Full-height profile setup step with an avatar uploader, a display name field, and a bio textarea, plus a skip option. Perfect for the post-sign-up onboarding step where users personalize their account.
Claim Your Usernameauth25Full-height username picker with a prefixed input group, a live availability indicator, suggestion chips when a handle is taken, and a submit button that unlocks only when the name is free. Perfect for onboarding handle selection.
Choose Your Planauth26Full-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.
Sign-In Errorauth27Full-height authentication error screen with a warning icon, an explanation, an optional error code, and try-again, back, and contact-support actions. Perfect for failed sign-in and OAuth callback errors.
Link Expiredauth28Full-height expired-link screen with a broken-link icon, an explanation, a request-a-new-link button, and a back-to-sign-in link. Perfect for stale magic links, password resets, and email confirmation tokens.
Terminal Sign Inauth29Full-height terminal-style sign-in rendered as a CLI window with a command prompt, a monospace email input, and a send-link action. Perfect for developer tools and CLI-first products.
Email Verification Codeauth3Full-height OTP verification screen with a centered icon, segmented six-digit code input, a verify button that unlocks once the code is complete, and a live resend countdown timer. Perfect for two-factor auth, magic links, and email confirmation flows.
PIN Keypad Unlockauth30Full-height numeric keypad lock screen with PIN dots, a biometric shortcut, and a backspace key. Perfect for mobile app locks and quick re-authentication.
QR Code Device Loginauth31Full-height cross-device sign-in with a scannable QR code, a manual fallback code, and a live waiting-for-confirmation indicator. Perfect for signing in on desktop by scanning with a phone app.
Editorial Split Sign Inauth32Two-column editorial sign-in pairing an oversized typographic brand panel with a clean email and password form. Stacks the panel above the form on mobile. Perfect for brands that want a minimal, editorial first impression.
Multi-Step Sign Up Wizardauth33Full-height multi-step registration with a numbered progress stepper that advances as the user moves through account, profile, and workspace steps, with back and continue controls. Perfect for guided onboarding sign-up.
Email-First Sign Inauth34Full-height progressive sign-in that asks for the email first, then reveals the password step with the chosen email shown and editable. Perfect for modern email-first and adaptive authentication flows.
Number Match Approvalauth35Full-height push-approval screen that shows a large number to match in your authenticator app, with a live waiting indicator and a cancel option. Perfect for number-matching two-factor authentication.
Workspace Switcherauth36Full-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.
Connect Walletauth37Full-height web3 sign-in that lists wallet providers with icons, details, and a detected badge, plus a what-is-a-wallet helper link. Perfect for crypto and decentralized app authentication.
Pattern Lock Unlockauth38Full-height pattern unlock screen with a tappable 3x3 dot grid that draws connecting lines as dots are selected, plus clear and unlock controls. Perfect for app lock screens and quick re-authentication.
Enable Two-Factorauth39Full-height security setup step where the user picks a two-factor method from selectable cards (authenticator app, SMS, or security key), with a skip option. Perfect for guiding users through enabling 2FA.
Forgot Password Requestauth4Full-height password recovery screen with a centered icon, single email field built on the shadcn Field primitives, a send-reset-link button, and a back-to-sign-in link. Perfect for the first step of any password reset flow.
Change Passwordauth40Full-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.
Delete Accountauth41Full-height destructive confirmation screen that lists the consequences and requires the user to type a confirmation word before the delete button enables. Perfect for account deletion and other irreversible actions.
Invite Code Gateauth42Full-height invite-only gate with a centered code field and a request-an-invite link. Perfect for closed betas, early access, and gated launches.
Join the Waitlistauth43Full-height waitlist capture with an email field, a join button, a social-proof line, and a sign-in link for existing users. Perfect for pre-launch and early-access landing gates.
Redirecting to SSOauth44Full-height loading screen shown while redirecting to an identity provider, with a spinner and a manual-continue fallback link. Perfect for SSO and OAuth handoff states.
Human Verificationauth45Full-height CAPTCHA-style check with an animated I'm-not-a-robot control that runs through verifying and verified states and unlocks the continue button. Perfect for bot protection before sign-in.
Confirm It's Youauth46Full-height step-up authentication screen that re-asks for the password before a sensitive action, showing the signed-in account and a cancel option. Perfect for protecting billing, security, and destructive actions.
Recovery Phrase Entryauth47Full-height account recovery screen with a numbered grid of word inputs and paste-to-fill support, plus a restore button that unlocks once every word is entered. Perfect for seed phrase and recovery-phrase restore flows.
Security Question Setupauth48Full-height security question setup with a question select and an answer field, plus a skip option. Perfect for account recovery setup and identity verification fallbacks.
Split Sign In With Quoteauth49A hairline sign-in panel with a lowercase wordmark, email and password fields, an inline forgot link, a remember toggle, and an SSO fallback, set beside a full-height photo carrying a gradient customer quote.
Set New Passwordauth5Full-height reset-password screen with new and confirm password fields (each with a show/hide toggle) and a live requirements checklist that ticks off rules as the user types. Perfect for the final step of a password reset or invite flow.
Split Sign Up With Proofauth50A hairline sign-up panel carrying a lowercase wordmark, name, work email, and password fields with an SSO fallback and terms note, beside a soft column of checked benefits over an image tile that floats a live customer quote card.
Passwordless Code Sign Inauth51A centered passwordless card that advances in place from a work email step with an SSO fallback to a monospace one-time-code entry with resend and go-back controls.
Password Reset With Live Strengthauth52A centered password reset card whose segmented strength meter and checked requirement list update as the field is typed, with a confirmation field and a breach-check note underneath.
Passwordless Sign-In Cardauth53A single narrow card that asks only for an email, then replaces itself in place with a sent state that echoes the address back and offers to start again with another one.
Quiet Sign Inauth54A full-height sign-in split: wordmark, a serif greeting that settles in word by word, email and password fields with a full-width sliding-marker pill and a switch-to-booking line on the left, and a photograph that zooms out on load, then drifts slower than the page, with a serif reassurance over its foot on the right.
Magic Link Sign Inauth6Full-height passwordless sign-in screen with a single email field, a send-magic-link button, a helper note, and social login providers below a divider. Perfect for passwordless and email-link authentication flows.
Account Chooserauth7Full-height account picker that lists saved accounts with avatars, names, and emails, plus a use-another-account row. Perfect for multi-account apps, SSO hubs, and returning-user sign-in.
Welcome Back Unlockauth8Full-height re-authentication screen showing the signed-in user's avatar, name, and email with a single password field, a forgot-password link, and a use-a-different-account option. Perfect for session unlock and returning-user prompts.
Split-Screen Sign Inauth9Two-column sign-in screen pairing a full sign-in form (social providers, email, password with show/hide, remember me) with a brand panel that lists product highlights. Includes a left/right panel position toggle.
Studio Bento Gridbento1A hand-tiled monochrome bento grid mixing a statement, a stat, an image, a quote, and a CTA into one composition.
Visit The Studio Bentobento10Location mosaic mixing photographic tiles captioned on their own scrim with an inverted address tile carrying a directions link, a soft opening-hours tile and a full-width bordered visit row whose pill CTA sits opposite the copy.
Product Surface Mosaicbento11A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list, and a captioned photograph.
Evidence Mosaicbento12A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card, and a soft note on method.
Onboarding Mosaicbento13A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile, and a capture card holding a working email row.
Publication Hub Mosaicbento14A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.
Practice Bentobento15One mosaic of six tiles: a large photograph that drifts inside its tile, an ink quote tile with film grain, a serif figure that counts up, a small photograph, an hours sheet and a call-to-action tile with a sliding-marker pill, each rising into view in turn.
Isometric Scene Bentobento16An asymmetric bento grid of cards whose media areas are live isometric scenes. One large lead cell sits beside two stacked cells, and a closing row of two wide cells places the scene next to its text. Every cell takes its scene, title and one sentence from the items prop.
Studio Summary Bentobento2Studio mosaic whose lead tile floats a mood-board media piece over a dotted field between its own eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile, a soft quote tile and a bordered CTA tile.
Selected Work Bentobento3Work mosaic on a six-column track mixing photographic tiles that carry their caption inside on a gradient scrim with a soft statement tile and an inverted figure tile, the lead project spanning four columns and two rows.
Service Bento With Figurebento4Service mosaic whose lead tile floats a photo-strip media piece over a dotted field between its eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile and three soft icon tiles.
Phase Bento With Photographsbento5Process mosaic where the opening phase fills a two-row photographic tile with its eyebrow, explanation and duration on the scrim, beside an inverted summary tile and three smaller phase tiles carrying only their label and length.
Object Study Bentobento6Product mosaic pairing a two-row hero photograph captioned on its scrim with a tall specification tile, then two square macro tiles that carry their caption inside and an inverted figure tile closing the row.
Studio People Bentobento7Team mosaic where portraits carry their name and role inside the tile on a scrim, interleaved with an inverted quote tile and a wide soft tenure figure tile that closes the grid flush.
Figures On Photographs Bentobento8Metrics mosaic where every figure sits on the photograph it came from behind a tinted scrim, the lead result spanning four columns and two rows, closed by a soft methodology tile explaining where the numbers come from.
Editorial Issue Bentobento9Magazine mosaic whose cover story fills a two-row photographic tile with its category and page count on the scrim, beside an inverted figure tile, a bordered publication note and three soft article tiles.
Alternating Feature Cardsblog10Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.
Compact Thumbnail Listblog11Two-column compact blog list with small square thumbnails. Space-efficient design showing many posts at once with minimal metadata.
Masonry Pinterest Gridblog12Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths.
Sidebar with Categoriesblog13Main content area with horizontal post cards plus sidebar. Categories show post counts and popular tags section with clickable badges.
Grid with Newsletter Cardblog14Four-column grid mixing blog cards with an integrated newsletter signup card. Email input and subscribe button embedded in the layout.
Minimal Text Listblog15Clean text-only blog list with arrow icons. No images, just titles, dates, and authors. Lightweight design with hover arrow animation.
Month-Grouped Archiveblog18Blog archive organized by month with compact list entries. Small thumbnails and formatted dates create a scannable chronological view.
Full-Width Stacked Cardsblog22Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase.
Split Image with Listblog25Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects.
Polaroid Photo Galleryblog26Playful polaroid-style cards with random rotations and white borders. Cards straighten on hover for a fun, casual photo gallery feel.
Newspaper Editorial Styleblog27Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers.
Card Grid with Authorsblog3Three-column responsive grid of blog cards featuring author avatars, tag badges, and hover zoom effects. Clean card design with date and read time metadata.
Hover Reveal Overlayblog30Grid of image cards with gradient overlays. Summaries expand on hover with smooth max-height animation. Titles always visible with white text.
Full-Width Hero Bannersblog31Wide cinematic banners with centered text overlay. Large bold titles on semi-transparent backgrounds. Immersive visual storytelling format.
Tutorial Series Cardsblog36Multi-part tutorial series with numbered parts. Book icon, part count, and progress-style list. Perfect for step-by-step learning content.
Featured Hero with Gridblog4Large featured article with side-by-side image and content, followed by a three-column grid of secondary posts. Read more buttons and author details included.
Timeline Year Archiveblog42Vertical timeline archive organized by year and month. Calendar icon with border line connecting entries. Compact text-only format.
Editorial Article Gridblog43A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.
Newsroom Lead and Indexblog44A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.
Press Room Digestblog45A press room listing with a square eyebrow, a bold heading and intro over a hairline rule, a wide lead release with a panoramic image, and the remaining releases stacked as ruled rows that pair a date column with a release type, headline, dek, and a square arrow chip.
Front Page Columnsblog46A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards.
Bulletin Columnsblog47A 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.
Quad Gridblog48A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.
Quad Ledgerblog49An image-free newsroom index with a square eyebrow, a two-column heading band over a hairline rule, four linked release cards that each pair an accent counter with a kicker, headline, dek, and byline, and a seal button to the full archive.
Horizontal List with Iconsblog5Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges.
Magazine Mosaicblog50A six-slot magazine mosaic with a parenthetical eyebrow and a large heading, pairing a dominant two-by-two tile with a tall tile, wide tiles, and unit tiles that each caption their photo over a graded scrim.
Mixed Tile Mosaicblog51A six-slot mosaic under a parenthetical eyebrow and a large heading, mixing full-bleed photo tiles with flat text tiles on muted and inverted surfaces, where the treatment belongs to the slot and every tile advances one story through a larger article pool on a timer, staggered 100 milliseconds apart so the refresh reads as a wave running left to right, pausing on hover, focus, hidden tabs, and reduced motion.
Newsroom Masonryblog52A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm.
Mixed Release Masonryblog53A press office masonry wall under a parenthetical eyebrow and a large heading, mixing photo cards with image-free release cards on soft muted surfaces, each release card closing on a read-through line with a corner arrow.
Pinned Lead Newsroomblog54A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive.
Press Release Wallblog55A three-column wall of image-free press release cards on soft muted surfaces under a parenthetical eyebrow and a large heading, each card pairing a release type and date with a headline, dek, byline, and a ruled category row.
Category Mosaicblog56A 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.
Journal Lead And Indexblog57Editorial journal preview pairing one lead entry with a wide image, category, title, excerpt and date against a ruled index of three shorter entries, headed by an eyebrow, a display heading and an outline pill CTA.
Ruled Writing Indexblog58Image-free article index where every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, stacking to a readable block on mobile.
Journal Card Trioblog59Three linked journal cards, each with a four-by-three image, a category, a display title, an excerpt and a ruled byline pinned to the bottom of the card so uneven excerpts still align.
Featured Article With Recent Listblog60A blog section pairing one linked feature with a hover-zoom image, category label, and byline against a hairline list of five recent posts stamped with their date.
Filterable Archive Indexblog61A dense blog archive whose subject pills are derived from the posts themselves and carry live counts, filtering a two-column list of hairline rows stamped with a date and a reading time.
Newsletter Panel With Back Issuesblog62A blog section splitting a bordered container between the newsletter pitch with a cadence line on a hairline and an image tile holding a working subscribe row, over three linked back issues.
Topic Hub Card With Resource Listblog63A topic hub card whose left third is a photo panel with the topic title set on a scrim over it, next to a two-column body: a short summary on one side and the posts belonging to the topic listed by title alone on the other.
Curated Reading List With Thumbnailsblog64A curated reading list under a left-aligned header, laid out as two columns of linked rows where a wide thumbnail sits beside the article title and nothing else competes with it.
Lead Story With Thumbnail Railblog65A lead article carrying its own wide image, excerpt and byline next to a rail of further posts reduced to a thumbnail and a title, so one story clearly outranks the rest.
Topic Cards With Resource Countsblog66Three tinted topic cards, each stamped with how many pieces sit behind it, the topic name, and an image filling the lower half, alongside a link out to the full topic index.
Series Index With Standing Stateblog67An index of writing that was planned as runs rather than posts, pairing each series and how far along it is with its numbered parts in the column beside it.
Slow Journalblog68A journal listing: a serif heading settling in word by word beside a pill action, then three staggered article cards whose photographs drift inside their frames, each with a small-caps category and date, a serif title, an excerpt and a read link.
Long Read and Shortsblog69A journal section with one featured essay, its wide photograph drifting inside the frame, small-caps category and date, a large serif title and an excerpt, beside a ruled list of recent shorter pieces, under a serif heading that settles in word by word and a pill action.
Post Index Rowsblog70An image-free journal index: a sticky column with a serif heading that settles in word by word and a pill action, beside ruled rows that each carry a small-caps category, a serif title, the date and reading time, and an arrow that lifts on hover.
Category Tabs Filterblog8Filterable blog grid with tab navigation for categories. Posts automatically filter by category selection with smooth content switching.
Date & Time Pickerbooking1Split-panel booking interface with interactive monthly calendar on the left and time slot grid on the right. Features today highlight, disabled dates, selected state, morning/afternoon grouping, and booking summary footer.
Meeting Room Bookingbooking10Coworking meeting room reservation with room cards showing capacity, equipment icons, hourly pricing, time range selector, attendee count, and total cost. Office and coworking space booking flow.
Price Calendarbooking11Google Flights-style price calendar with per-day pricing, cheapest day highlights, expensive day indicators, date range selection, and best deal summary banner. Universal for hotels, flights, car rentals, and vacation bookings.
Search Bar Herobooking12Airbnb/Booking.com-style search bar with location autocomplete, date range picker, guest counter dropdown, and search CTA. Responsive — inline on desktop, stacked on mobile. The universal booking hero section.
Live Social Proof Barbooking13Booking.com-style social proof ticker with rotating messages: live viewers, recent bookings, scarcity alerts, and location-based activity. Animated transitions, urgency indicators, and trust signals that boost conversion.
Activity Experience Bookingbooking14Tours and experiences booking card with hero image overlay, rating, duration, difficulty badge, date picker, traveler counter, language selector, highlights list, and reserve CTA. Perfect for guided tours, classes, and local experiences.
Booking Confirmation Receiptbooking15Post-booking success screen with animated check icon, confirmation number, booking summary (service, date/time, location, total), scannable QR code ticket, action buttons (calendar, receipt, directions), and email confirmation note.
Home Cleaning Service Bookingbooking16Residential cleaning service booking with service type tabs (standard/deep/move-out), bedroom/bathroom selectors, recurring frequency pills, add-ons checklist, date picker, estimated duration, and price breakdown footer.
Ride Bookingbooking17Ride-share style booking with pickup/dropoff address inputs, schedule now/later toggle, ride class selector (economy/comfort/xl) with ETA and fare, payment method row, and confirm ride CTA. Perfect for taxi, transfer, and shuttle apps.
Cinema Seat Pickerbooking18Interactive 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.
Multi-step Booking Wizardbooking19Stepper-based booking flow with numbered progress dots, animated progress bar, and four steps: service selection, schedule, contact details, and review. Back/Next navigation, per-step validation, and a live summary.
Reservation Summarybooking2Booking confirmation card with service details, date/time, provider info with avatar, price breakdown with subtotal/tax/discount/total, promo code input, cancellation policy, and confirm CTA.
Car Rental Bookingbooking20Vehicle 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.
Weekly Class Schedulebooking21Gym or studio weekly schedule with day tabs, class list per day (instructor avatar, duration, spots remaining, difficulty), and quick reserve action. Tap a day to see its classes, tap a class to book a spot.
Spa Day Package Builderbooking22Multi-service booking composer. Customers assemble their own wellness day by adding services across categories (massage/facial/body/nails/add-ons), with live package summary, duration totals, animated bundle-discount progress bar, quick-start presets, and remove-from-package controls.
Cancellation Flowbooking23Booking 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.
Service And Slot Pickerbooking24An interactive appointment picker: a hairline panel pairing a selectable service list with a scrollable day strip and a time slot grid that marks unavailable times, beside a full-height provider photo with a gradient name card, closing on a live summary bar and confirm action.
Booking Confirmedbooking25A confirmation screen with an accent eyebrow, a two-column hairline table of the appointment details, a checked list of what to bring, and a sticky tile floating the live phone view the member also receives.
Minimal Service Pickerbooking26A quiet booking picker whose left column lists each service as a single hairline row carrying only its length and price, swapping a sticky panel that floats a live week strip above the chosen service's detail and its book action.
Choose Your Clinicianbooking27A 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.
Waiting List Capturebooking28A no-availability state that answers with three hairline figures and a numbered explanation of how offers are made, beside a sticky square tile floating a live panel of the waiting list itself and an urgent fallback.
Appointment Intake Matchbooking29Three intake questions that land on a real appointment type instead of a drop-down: the answers pick a route with its length, its facts, and the clinician you will sit with, and the image tile beside them swaps its floated availability card to match.
Appointment Listbooking3Upcoming and past appointments list grouped by date, with service name, provider avatar, time, duration, status badges (confirmed/pending/cancelled), and reschedule/cancel action buttons.
Session Requestbooking30A booking section: a serif heading that settles in word by word over the intro, a ruled contact sheet and a practitioner avatar line, beside a calm request form with name and email fields, pill choices for session type and preferred time, a message box and a sliding-marker pill to send.
Visit Sheetbooking31A visit-us section: a photograph drifting inside its frame on the left, and on the right a serif heading that settles in word by word, an intro, a ruled sheet with the serif address, directions and opening hours, a sliding-marker pill and a text link.
Plain Contactbooking32The classic contact section: a serif heading that settles in word by word, an intro and a ruled contact sheet on the left, and a plain form with name, email and message fields and a sliding-marker pill on the right, with no panel around it.
Session Pickerbooking33A booking chooser: a serif heading that settles in word by word and an intro, then a ruled list of session types on the left that swaps, with a soft blur, the muted detail card on the right showing a serif title, a description, a fact row and a sliding-marker pill.
Service Selectorbooking4Service selection grid with category filter tabs, service cards showing icon, name, description, duration, price, and selected state. Ideal for spa, salon, clinic, and fitness booking flows.
Provider Pickerbooking5Staff/provider selection cards with avatar, name, specialty, star rating, review count, availability badge, experience years, and selected state. Grid layout with "Any Provider" option.
Restaurant Reservationbooking6Restaurant table reservation with guest count selector, date/time picker, seating preference (indoor/outdoor/bar), special requests textarea, and booking summary. Fine dining reservation flow.
Hotel Room Bookingbooking7Hotel room selection with room type cards showing images, amenity icons, guest capacity, price per night, check-in/check-out date picker, guest counter, and total price summary.
Flight Bookingbooking8Flight search results with airline logos, departure/arrival times, duration, stops, class selector (economy/business/first), baggage info, and price comparison. Airline ticket booking flow.
Event Ticket Bookingbooking9Event ticket selection with event banner, date/venue info, ticket tier cards (General/VIP/Backstage) with perks list, quantity selector, and order total. Concert and conference ticket flow.
Job Listings Listcareers1Job listings section with role cards showing department, location, and employment type. Clean list layout with hover effects and apply buttons.
Hiring Process Timelinecareers10Step-by-step hiring process timeline with numbered stages. Shows candidates the interview journey from application to onboarding.
Culture & Valuescareers11Company values grid with icon cards and employee testimonial quote. Showcases team culture and work philosophy.
Career Growth Laddercareers12Career progression path with level indicators, role descriptions, and key skills. Shows growth framework from junior to principal level.
Office Locations Gridcareers13Global office locations grid with city photos, team size, and role taglines. Showcases company presence worldwide.
Meet the Team Gallerycareers14Team member photo grid with names and roles. Square portrait layout for showcasing leadership and team composition.
Day in the Life Timelinecareers15A typical workday timeline with time stamps, activity icons, and descriptions. Shows candidates what daily life looks like at the company.
Employee Testimonialscareers16Employee testimonial cards with quotes, avatars, and roles. Social proof grid showcasing team member experiences and company culture.
Job Application Formcareers17Job application form with input fields, file upload area, and position summary sidebar. Complete apply page layout for career sites.
Department Overview Gridcareers18Department cards with team lead, headcount, open roles badge, and links. Helps candidates explore teams before applying.
Internship Programcareers19Internship program section with highlights, mentorship details, program summary card, and apply CTA. For recruiting early-career talent.
Job Openings Gridcareers2Job openings grid with department badges, location tags, and apply buttons. Card-based layout for career pages.
Diversity & Inclusioncareers20Diversity and inclusion section with representation stats and initiative cards. Showcases company commitment to equity and belonging.
Compensation & Total Rewardscareers21Transparent compensation philosophy with salary, equity, bonus, and perks cards. Shows total rewards approach with highlighted details.
Employee Spotlight Storycareers22Featured employee profile with portrait photo, personal quote, and career milestone timeline. Showcases real growth stories.
Employee Referral Programcareers23Referral program section with step-by-step process, bonus highlight card, and submit CTA. Encourages employee referrals.
Onboarding Journey Previewcareers24First 90 days onboarding timeline with phase cards and activity checklists. Shows new hires what to expect from orientation to ownership.
Remote Work Setupcareers25Work environment section with equipment provisions and work policies. Two-column layout showing what the company provides and how the team operates.
Hiring by the Numberscareers26Recruitment statistics dashboard with key metrics, trends, and detailed hiring process stats. Transparent data-driven hiring showcase.
Speculative Application CTAcareers27Bottom-of-page careers CTA for general applications with email, action buttons, and company highlight badges. Captures candidates without matching roles.
Learning & Developmentcareers28Professional development program cards with conference budget, courses, mentorship, and tech talks. Highlights company investment in employee growth.
Team Events Gallerycareers29Photo gallery of company events, offsites, and team activities in masonry layout. Visual showcase of team culture and community.
Department-Grouped Positionscareers3Department-grouped job listings with minimal row layout. Jobs organized by team with location and type indicators.
Team Blog Highlightscareers30Engineering and team blog article preview cards with images, excerpts, and authors. Showcases technical depth and knowledge sharing culture.
Role Comparison Tablecareers31Side-by-side role comparison grid showing team, skills, experience, and salary for different positions. Responsive table-to-card layout.
Alumni Network Showcasecareers32Former employee showcase with career progression from company role to current position. Demonstrates the company as a career launchpad.
HR Job Posting Detailcareers33Formal HR job posting with responsibilities, qualifications, benefits, and sidebar summary. Corporate-style position detail page with apply CTA.
Engineering Principlescareers34Numbered engineering principles list with large counters and descriptions. Showcases team philosophy on shipping, ownership, and simplicity.
Salary Bands Tablecareers35Transparent salary bands with level, role, visual range bars, and equity details. Pay transparency table with responsive card fallback.
Hiring Manager Profilescareers36Team lead profiles with photos, bios, and department badges. Introduces future managers to candidates with detailed backgrounds.
Job Alerts Signupcareers37Email subscription form for job alerts with trust indicators. Captures candidate interest for future openings with clean card layout.
Work Perks Bento Gridcareers38Bento-style grid of work perks with featured image card and icon cards. Mixed layout showcasing PTO, wellness, equipment, and team events.
Candidate Experience Guidecareers39Two-column guide with preparation tips and company commitments to candidates. Sets expectations for the hiring process with contact info.
Perks & Open Positionscareers4Combined perks and job listings section with benefits grid and open positions list. Ideal for complete career pages.
Open Rolescareers40A studio jobs list with role meta, salary and apply arrows.
Benefits & Perkscareers41Studio benefits grid with an accent highlight and icon cards.
Studio Culturecareers42Culture statement and tenets beside a three-image studio-life collage.
Hiring Processcareers43The studio's interview process as a connected, numbered step flow.
Roles By Departmentcareers44Department-tabbed open roles list using shadcn Tabs.
Life At The Studiocareers45A captioned masonry photo wall of studio life with an intro and a roles CTA.
Role Spotlightcareers46A full featured-role posting with responsibilities, requirements and a sticky apply card.
Why Join Uscareers47Team stats band paired with benefit highlights.
Join The Studiocareers48Sticky employer-value intro beside a scrollable open-roles list.
Benefits Breakdowncareers49Categorized studio benefits with checklists per category.
Featured Role with Positionscareers5Highlighted featured position card with a compact list of additional openings below. Great for showcasing priority roles.
Careers Gallery Headercareers50Centered careers intro with eyebrow, highlighted heading and supporting copy above a three-image gallery — one wide frame beside two portraits.
Filterable Open Roles Listcareers51A light editorial careers section with a monospace eyebrow over a hairline rule, a two-column heading, and a sticky culture photo with a gradient caption beside team filter pills and hairline job rows showing location, contract type, and a hover arrow.
Single Role Detailcareers52A job description laid out as a reading column with checked responsibility lists and a candid caveat panel, against a sticky rail carrying the published salary band, level, and location alongside the apply action.
Hiring Process In Fullcareers53An interview process published as numbered hairline stages carrying length, who you meet, and an accent chip where the work is paid, closing on a soft promises panel beside a live card for the person who runs it.
Benefits And Honest Omissionscareers54A working-here section pairing a six-item icon benefits grid and a captioned full-bleed photograph with two closing cards that set what you get against what the company deliberately does not offer.
Published Pay Bandscareers55A pay transparency table whose track pills swap the band column while the levels, their scope, and the headcount at each stay in place, closing on the written rules that govern the numbers beside a soft panel carrying the call to action.
Role Fit Findercareers56A hiring section that answers three questions instead of listing a job board: the answers land on one open role with its team, its location, and its published pay band, and the photograph beside it changes to the part of the studio that role sits in.
Open Roles With Published Bandscareers57A short roles list where the pay band sits on the row rather than behind an application, with a written empty state for when nothing is open and a speculative line underneath.
Fourth Chair Rolescareers58A careers section: a serif heading that settles in word by word, an intro, a pill action and a photograph drifting inside its frame on the left, beside ruled open roles with serif titles and small-caps type and place that lift an arrow on hover, and a note on how applications are answered.
Tab-Filtered Job Boardcareers6Tabbed job board with department filters using shadcn Tabs component. Browse positions by team with location and type details.
Culture Stats with Positionscareers7Team culture stats bar followed by detailed job position cards. Combines social proof with open roles listing.
Job Detail Pagecareers8Single job posting detail with responsibilities, requirements, nice-to-haves, and apply CTA. Full position description layout.
Employee Benefits Gridcareers9Benefits and perks showcase with icon cards in a responsive grid. Highlights company offerings like health, remote work, and growth opportunities.
Dense Inline Release Logchangelog10Compact single-line release rows with color-coded type dots, version tags, and a legend footer. Optimized for dense, scannable API changelogs.
Two-Column Date Changelogchangelog11Minimal two-column layout with fixed-width date column on the left and version heading with change list on the right.
Large Version Changelogchangelog12Poster-style changelog with oversized version numbers as visual anchors, followed by date, heading, and description text.
Accordion Release Changelogchangelog13Collapsible accordion changelog where each release expands to reveal description and change list.
Year-Grouped Accordion Changelogchangelog14Releases grouped by year in collapsible accordion panels with release count indicators.
Stacked Release Cardschangelog15Stacked release cards with heading, description, change list, and version footer. Clean vertical feed for product updates.
Visual Release Noteschangelog16Alternating split layout with feature screenshots on one side and release content on the other. Ideal for marketing-focused product update pages.
Team Update Feedchangelog17Author-attributed changelog feed with avatars, roles, rich descriptions, change lists, and tags.
Full-Width Showcase Changelogchangelog18Full-width hero images with rich release content below. Marketing-focused changelog for major product announcements.
Developer Changelog with Codechangelog19Technical changelog with code blocks showing API changes, migration examples, and usage snippets alongside release notes.
Split Milestone Changelogchangelog2Split-layout changelog with milestone context, highlights, metrics, and action buttons.
Roadmap Status Changelogchangelog20Hybrid roadmap and changelog with shipped, in-progress, and planned items. Includes status dots, tags, and optional feature images.
Kanban Board Changelogchangelog21Three-column kanban board grouping changes by type — Features, Fixes, and Improvements — with stacked cards.
Terminal Git Log Changelogchangelog22Dark terminal window styled as a git log output with commit hashes, version tags, color-coded change prefixes, and a blinking cursor.
Striped Table Changelogchangelog23Structured table view with column headers, alternating row backgrounds, color-coded type badges, and optional links.
Callout Highlight Changelogchangelog24Release feed with prominent callout blocks highlighting the most impactful change per release.
Newspaper Changelogchangelog25Broadsheet newspaper layout with masthead, featured headline story, sidebar briefs, and numbered patch notes in flowing columns.
Version Rail Release Timelinechangelog26A release feed with a sticky version rail that filters the list, and hairline entries carrying a version and date line, tone-coded tags, an accent-bulleted highlight list, and an optional release note link.
Latest Release Spotlightchangelog27A changelog that gives the newest version a split of its own, pairing a checked highlight list and two actions with an image tile floating live post-release figures, over the earlier versions as hairline rows.
Full Release Notes By Monthchangelog28A complete changelog grouped by month, each version on a hairline row beside its entries, every line tagged added, changed, fixed, or removed with its own tone.
Shipped Building Next Declinedchangelog29A roadmap board of four hairline columns carrying state icons, running from what shipped through what is building to what was turned down, crediting the practice that asked where there was one.
Changelog Release Feedchangelog3Release feed cards with aligned change labels, summaries, and optional CTA buttons.
Deprecations And Removalschangelog30A deprecation register listing what is being withdrawn on hairline rows with a tone-coded stage chip, the removal date, how many are still affected, and the replacement, closing on the written notice policy.
Editorial Revision Logchangelog31A revision log for writing rather than software, each entry dating the change, linking the piece it belongs to, stating what was altered and, where it exists, the reason on an accent rule.
Ruled Changelogchangelog32A changelog page section with a serif headline that settles in word by word and a sliding-marker pill at the right end of the header, then a ruled list of releases. Each release keeps its version number and date pinned on the left while the title, summary and a plain dotted list of changes settle in on the right.
Month Index Changelogchangelog33A changelog grouped by month with a sticky index on the left: each month is a button that scrolls the page to its group, a short rule grows beside the current one, and the index follows as you scroll. Entries on the right show the day, a title and a plain dotted list of changes. Serif headline settles in word by word, one sliding-marker pill in the header.
Drawn Line Changelogchangelog34Releases as points on a vertical line that draws itself in ink as the page scrolls: version and date on the left of the line, a serif title, a paragraph and a plain dotted list of changes on the right. Serif headline settles in word by word with a sliding-marker pill at the header's right end.
Latest and Earlierchangelog35The newest release gets a full row: a photograph that blurs in and drifts on scroll beside its version, date, serif title, paragraph, plain change list and a sliding-marker pill. Earlier releases follow as compact ruled rows (version, date, title, one line) that link out and tint on hover.
Grouped Changelog Boardchangelog4Month-grouped changelog board with aligned labels, release details, and optional links.
Milestone Changelog Timelinechangelog5Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history.
Minimal Text Changelogchangelog6Ultra-minimal text-only changelog with version headers and dash-prefixed change lists. No badges, no cards, just clean typography.
Categorized Release Noteschangelog7Release notes with changes grouped by type — Added, Changed, Fixed — using color-coded category labels.
Featured Release Changelogchangelog8Latest release highlighted in a featured card with full details, followed by a compact list of previous releases.
Release Card Gridchangelog9Responsive card grid of releases with version badges, descriptions, and optional links. Great for browsable release archives.
Floating Chat Widget with Expandable Windowchat10Compact floating chat bubble that expands into a mini chat window. Features smooth expand/collapse animation, pulsing notification dot, and a complete mini chat interface inside. Ideal for customer support overlays.
Complete AI Chat Interfacechat11Full-featured chatbot window with message thread, AI and user avatars, timestamp display, typing indicator, and rich input area with send button. Suitable as the primary chat experience.
Conversational Thread with Reactionschat12Chat message thread with rich formatting, copy and thumbs-up/down action buttons on AI messages, and time-grouped message sections. Features hover-revealed action bars and smooth animations.
AI Reasoning Steps with Collapsible Thinkingchat13Claude-style thinking and reasoning display with collapsible thought process sections, numbered step indicators, elapsed time badges, and a polished final answer below.
Side-by-Side AI Model Comparisonchat14Compare responses from two different AI models side by side. Features a shared prompt input, dual response panels with model badges, and rating buttons for each response.
Chat with Image Attachmentschat15Chat interface with image attachment previews, file upload indicators, and image gallery display within messages. Supports both user-uploaded images and AI-generated image responses.
Multi-Agent Chat with Personaschat16Chat interface featuring multiple AI agents with distinct personas, colored avatars, and role badges. Each agent has a unique personality and expertise area, creating a panel discussion experience.
AI Search Herochat17Centered hero section with a prominent AI search/prompt input bar and clickable suggestion pills. Perfect for AI product landing pages inspired by ChatGPT and Perplexity.
AI Prompt Hero with Statschat18Landing page hero with a prominent AI prompt input, trust stats bar, and a grid of popular prompt example cards. Designed for AI product homepages.
AI Use Case Tabschat19Tabbed showcase section where each tab displays a different AI use case with a prompt and response preview. Demonstrates AI versatility for landing pages.
AI Prompt Playground Herochat20Two-column hero with marketing copy on the left and an interactive prompt playground on the right. Users can type or click example prompts to see mock AI responses.
AI Capabilities Feature Gridchat21Feature grid section showcasing AI capabilities. Each card includes an icon, title, description, and a mini chat bubble preview demonstrating the capability.
Member Inbox And Threadchat22A two-pane messaging panel: a selectable conversation list with unread dots on the left, and the chosen thread on the right with member and staff bubbles, timestamps, and a composer row.
Messaging Overview Splitchat23A messaging section pairing a light heading, a hairline table of response figures, and two actions with an image tile that floats a live conversation thread.
Support Channels Gridchat24A support section listing four linked contact channels as a hairline matrix, each with an icon tile, its response time, and its hours, beside a soft panel floating a live card for whoever is on shift.
Ask Your Data Spotlightchat25An assistant section where question pills swap the image tile beneath them, each floating a live answer card that cites the records it read, closing on three hairline guarantees and one action.
Shared Inbox Triagechat26A shared inbox laid out as hairline rows carrying the member, the subject, an assignee avatar, how long they have waited, and a tone-coded status pill, filtered by status chips with live counts.
Inverted Out Of Hours Panelchat27A support section built as one dark panel, with a light heading, three hairline promises about who answers, two actions, and a bordered column floating a live on-call conversation.
Conversation Handover Trailchat28One member conversation walked through as timestamped hairline rows inside a bordered panel, each naming what happened and either the person who picked it up or the step that ran on its own.
Saved Reply Librarychat29A messaging section where a hairline list of saved replies, each with what it is for and how often it is used, swaps a bordered preview card showing the message and the fields it fills in from the record.
Message Automation Ruleschat30An automation section listing each trigger against the message it sends on hairline rows with live switches, striking through the volume of any rule turned off and totalling the rest in a soft summary panel.
Two Sides Of One Conversationchat31A messaging section splitting a hairline matrix between the staff view and the member view, each half floating its own live asset above a title and a list of what that side gets.
Rich Prompt Input with Smart Suggestionschat4Sophisticated AI prompt input area with auto-expanding textarea, attachment and image upload buttons, model selector, and a grid of contextual prompt suggestion cards. Inspired by ChatGPT and Claude home screens.
AI Streaming Response with Live Typingchat5Simulated streaming AI response with word-by-word typewriter animation, blinking cursor, skeleton loading state, and stop generating button. Demonstrates real-time AI output patterns.
AI Response with Cited Sourceschat6Perplexity-style AI response with inline numbered citation markers, a source panel showing referenced URLs with favicons and titles, and expandable source previews. Perfect for RAG-powered chat applications.
Code Generation Chat with Syntax Highlightingchat7Developer-focused chat interface with syntax-highlighted code blocks, language badges, copy-to-clipboard buttons, and file name tabs. Optimized for code generation and programming assistance.
AI Prompt Starter Gridchat8Beautiful grid of prompt template cards with icons, categories, and descriptions. Features category tabs for filtering and hover animations. Ideal for chat home screens and prompt libraries.
AI Agent Profile Cardchat9Showcase card for an AI agent or assistant with avatar, name, description, capability badges, sample conversation preview, stats row, and action buttons. Perfect for agent directories and AI product pages.
Countdown Timer Launchcomingsoon1Coming soon section with a live countdown timer showing days, hours, minutes, and seconds until launch. Perfect for product launches, event announcements, or building anticipation for new features.
Dev Log Feedcomingsoon10Coming soon section with a chronological development log feed showing recent updates, commits, and milestones. Perfect for building in public and keeping the community engaged.
Notification Channel Pickercomingsoon11Coming soon section with selectable notification channel cards for email, Slack, Twitter, and more. Perfect for letting users choose how they want to be notified at launch.
Before vs After Comparisoncomingsoon12Coming soon section with a side-by-side comparison table showing current limitations versus upcoming improvements. Perfect for SaaS upgrades and product relaunches.
Launch FAQ Accordioncomingsoon13Coming soon section with an expandable FAQ accordion addressing common questions about the upcoming launch. Perfect for reducing pre-launch support queries and building user confidence.
Early Access Tierscomingsoon14Coming soon section with tiered early access plans showing benefits, features, and availability for each level. Perfect for building a monetized waitlist with founding member perks.
Waitlist Coming Sooncomingsoon15A centered pre-launch section with an eyebrow, a large light heading, a paragraph, an image tile holding a working email-capture form with a success state, and a social-proof note.
Image Split Waitlistcomingsoon16A two-column pre-launch section with a monospace parenthetical eyebrow, an oversized headline, a working rounded email-capture form with a success state, an avatar social-proof row, and a tall full-bleed image carrying a floating launch label.
Waitlist Queue Positioncomingsoon17A centered post-signup confirmation card on a soft muted surface with a monospace parenthetical eyebrow, an oversized queue-position number, a progress-to-front bar, and a referral row with a copy-invite pill button.
Launch Season Revealcomingsoon18A full-bleed image pre-launch hero with a dark overlay, a monospace parenthetical eyebrow, a small kicker, an oversized launch-date headline, a supporting line, and a light outline pill notify button.
Pre-Launch Manifestocomingsoon19A pre-launch manifesto section on a soft muted card with a monospace parenthetical eyebrow, a large statement heading, and a three-column ruled list of numbered building principles above a follow-along pill button.
Development Progress Milestonescomingsoon2Coming soon section with a progress bar and milestone tracker showing development stages like Design, Backend, Frontend, and Testing. Perfect for keeping users informed about product development progress.
Maintenance Back Sooncomingsoon20A centered scheduled-maintenance section with a pulsing status dot, a monospace parenthetical eyebrow, a large heading, a reassuring paragraph, a ruled key-value list of status details, and a status-page pill button.
Waitlist Signup Countercomingsoon21A centered waitlist section with a square eyebrow, a bold accent-highlighted heading, a working rounded email-capture form with a success state, and an avatar row with a live signup counter.
Coming Soon Notify Pagecomingsoon22A centered coming-soon launch page with a brand wordmark, a square eyebrow, an accent-highlighted heading, a working email notify form with a success state, a launch note, and a row of social links.
Founding Member Offercomingsoon23A bordered pre-launch offer card with a square eyebrow, a heading, a checked benefit list, a seats-claimed progress bar, and a working rounded email-capture form with a success state.
Mobile App Pre-Registercomingsoon24A two-column mobile-app pre-launch section with a square eyebrow, a heading, platform chips, and a dark seal pre-register button beside a portrait app preview tile carrying a floating pre-registration counter.
Launch Day Announcementcomingsoon25An editorial launch-date announcement with a square eyebrow, a kicker, an oversized date headline paired with a supporting note and a dark seal remind-me button, above a three-column ruled list of launch facts.
Countdown Studio Cardcomingsoon26A pre-launch countdown on a soft muted card with a monospace parenthetical eyebrow, a bold wordmark, a heading, a live four-unit ruled countdown to a target date, and a reserve-seat pill button.
Launch Roadmap Columnscomingsoon27A pre-launch roadmap laid out as three now-next-later columns with a monospace parenthetical eyebrow, a heading and changelog pill button on top, and ruled entry lists under each column header.
Early Tester Quotecomingsoon28A quote-led pre-launch section on a soft muted card with a monospace parenthetical eyebrow, a large early-tester pull quote, an author row with avatar, and an invite pill button with a supporting note.
Upcoming Writing Gridcomingsoon29A newsletter-forward pre-launch section with a monospace parenthetical eyebrow, a heading and subscribe pill button on top, and a three-card grid of upcoming articles each with a kind label, title, and summary.
Social Connect Launchcomingsoon3Coming soon section featuring social media links with icons for Twitter, GitHub, LinkedIn, and Email in pill-style buttons. Perfect for building a community and keeping followers engaged before launch.
Interest Selector Waitlistcomingsoon30A centered full-bleed image waitlist section with a dark overlay and light text, a monospace parenthetical eyebrow, a heading, a set of toggleable interest chips, and a working rounded email-capture form with a success state.
Typographic Wordmarkcomingsoon31A monumental full-bleed image pre-launch statement with a dark overlay, a monospace parenthetical eyebrow, an oversized centered wordmark, a single supporting tagline, and a light outline notify pill button.
Trusted By Waitlistcomingsoon32A centered pre-launch section with a monospace parenthetical eyebrow, a statement heading, a supporting paragraph, a waitlist pill button, and a captioned grayscale logo strip of early partners.
Video Teaser Revealcomingsoon33A full-bleed image pre-launch teaser with a dark overlay, a monospace parenthetical eyebrow, a central play button that opens the teaser video in a modal, a heading and supporting line, and a light outline waitlist pill button.
Invite Code Accesscomingsoon34An invite-only pre-launch card on a soft muted surface with a monospace parenthetical eyebrow, a heading, a working invite-code redemption form with a success state, and a fallback waitlist pill button.
Add To Calendar Remindercomingsoon35A centered launch-reminder section with a monospace parenthetical eyebrow, a kicker, an oversized launch-date heading, a supporting line, an add-to-calendar pill button, and a row of calendar-provider links.
Countdown Clock Waitlistcomingsoon36A centered pre-launch section with a square eyebrow, an accent-highlighted heading, a large colon-separated live countdown clock, a working email-capture form with a success state, and an avatar social-proof row.
Referral Leaderboardcomingsoon37A pre-launch referral leaderboard with a square eyebrow, a heading, and a bordered ranked list of members with avatars and invite counts, one row highlighted as the viewer, above a dark seal share button.
Private Beta Applycomingsoon38A two-column private-beta section with a square eyebrow, a heading, a supporting paragraph, and a dark seal apply button beside a bordered card listing accent-checked tester benefits.
Feature Voting Roadmapcomingsoon39A pre-launch feature-voting section with a centered square eyebrow and heading, and a list of upcoming feature cards each with a title, description, and an interactive upvote control that updates the count.
Animated Icons Previewcomingsoon4Coming soon section with floating animated icons and a pulsing status indicator using Framer Motion animations. Perfect for creating visual excitement and a dynamic atmosphere before a product launch.
New Location Openingcomingsoon40A two-column location-launch section with an accent-badged image tile beside a square eyebrow, a city heading, a supporting line, a ruled details grid of opening facts, and a dark seal notify button.
Pricing Plan Explorercomingsoon41An interactive pricing-preview section with a centered square eyebrow and heading, a plan switcher that swaps a detail card showing a locked blurred price, accent-checked features, and a dark seal notify button.
Podcast Launch Teasercomingsoon42A two-column podcast-launch section with an accent-badged square cover image beside a square eyebrow, show title, description, a dark seal subscribe button, platform links, and a ruled list of first episodes.
Survey Waitlistcomingsoon43A pre-launch survey card with a square eyebrow, a heading, a single-choice question with selectable radio options, and a working rounded email-capture form with a success state.
Founder Note Waitlistcomingsoon44A personal pre-launch section with a square eyebrow, a statement heading, a short founder note in paragraphs, and a signature row with avatar beside a dark seal waitlist button.
Animated Waitlist Statscomingsoon45A centered pre-launch section with a square eyebrow, a heading, a supporting line, a row of accent statistics that count up when scrolled into view, and a dark seal claim-seat button.
Split Screen Launchcomingsoon46A full-height split coming-soon page with a dark brand panel carrying a wordmark, a monospace parenthetical eyebrow, a heading and a working email notify form, beside a full-bleed image with a floating launch label.
Marquee Launch Herocomingsoon47A coming-soon hero with an oversized looping background marquee behind a centered monospace parenthetical eyebrow, a bold wordmark, a tagline, and a working email notify form with a success state.
Bento Launch Gridcomingsoon48A coming-soon bento grid with a large panel holding a wordmark, a monospace parenthetical eyebrow, a heading and a working email notify form, an image tile, and a dark social-proof tile with an avatar stack and waitlist count.
Framed Editorial Launchcomingsoon49A two-column coming-soon section with a vertical monospace edge label, an oversized wordmark, a tagline and a working email notify form, beside a framed portrait image tile.
Sneak Peek Feature Gridcomingsoon5Coming soon section with a grid of blurred sneak-peek feature cards and lock overlays that tease upcoming features. Perfect for building anticipation by showing what's coming without revealing full details.
Launch Readiness Progresscomingsoon50A coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a launch-readiness percentage that counts up with an animated progress bar, a build-status row, and a working email notify form.
Launch Pass Ticketcomingsoon51A coming-soon section styled as a launch pass ticket with a square eyebrow, a heading and a working email notify form on the main stub, and a perforated tear-off stub carrying an admit-one tag, a barcode, and a pass code.
Image Mosaic Notifycomingsoon52A coming-soon section with a full-bleed image mosaic background under a dark overlay and a centered card holding a square eyebrow, a heading, a description, and a working email notify form with a success state.
Next Issue Magazinecomingsoon53A two-column coming-soon section styled as a magazine launch with an accent-badged cover image, a masthead, a square eyebrow, a heading, a numbered contents list, and a working email subscribe form.
Locked Product Previewcomingsoon54A two-column coming-soon section with a square eyebrow, a heading and a working email notify form, beside a browser-window mockup showing a blurred, lock-badged product preview.
Image Notify Barcomingsoon55A full-bleed image coming-soon hero with a bottom gradient and light text, a square eyebrow, a large heading and a supporting line, beside a solid notify card holding a working email form with a success state.
Restaurant Opening Sooncomingsoon56A hospitality coming-soon section with an interior image beside a venue name, a square eyebrow, a heading, an opening details grid with icons, and a working email list form with a success state.
Event Tickets Coming Sooncomingsoon57An event coming-soon section with a square eyebrow, an event name and heading, a date and venue meta row with icons, a working ticket-alert email form, and a speaker avatar row.
Store Drop Coming Sooncomingsoon58An e-commerce coming-soon section with a square eyebrow, a heading, a drop-date card, a grid of product teaser cards with blurred prices, and a working email notify form with a success state.
App Waitlist Splitcomingsoon59An app pre-launch split card with a muted panel holding a wordmark, a monospace parenthetical eyebrow, a heading, a working email waitlist form and platform chips, beside a full-bleed image covering the other half.
Waitlist with Avatarscomingsoon6Coming soon section with an email waitlist input, stacked subscriber avatars, and a live join count. Perfect for building early traction and social proof before launch.
Portfolio Under Constructioncomingsoon60A personal coming-soon page with a monospace parenthetical eyebrow, an oversized name, a role and tagline, an email contact pill button, a row of social links, and an availability status line.
Community Launch Waitlistcomingsoon61A community coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a working email waitlist form, a secondary outline community pill button, and an avatar row with a member count.
Course Enrollment Waitlistcomingsoon62An education coming-soon section with a square eyebrow, a course heading, a start/length/format details grid, a working waitlist email form, and a syllabus card listing numbered lessons.
Product Pre-Order Teasercomingsoon63A product launch coming-soon section with a full-height product image beside a monospace parenthetical eyebrow, a product name, a tagline, a ship date, a working notify email form, and a spec grid.
Under Construction Contactcomingsoon64A B2B coming-soon section with a studio name, a square eyebrow, a heading, an icon contact-details list, and a working name, email, and message contact form with a success state.
What Happens Next Waitlistcomingsoon65A waitlist coming-soon section with a monospace parenthetical eyebrow, a heading, a working email notify form, and a three-step numbered process explaining what happens after signing up.
Property Register Interestcomingsoon66A real-estate coming-soon section with an accent-badged development image beside a project name, a square eyebrow, a heading, a key-facts grid, and a working register-interest email form.
Fitness Studio Founding Listcomingsoon67A fitness coming-soon section with a studio name, a square eyebrow, a heading and a working founding-membership email form, beside a card previewing a week of the class schedule.
Album Release Pre-Ordercomingsoon68A music release coming-soon section with a square cover image beside an artist name, a monospace parenthetical eyebrow, a title, a release date, a working pre-order email form, and a numbered tracklist.
Careers Job Alertscomingsoon69A 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.
Launch Roadmap Timelinecomingsoon7Coming soon section with a vertical timeline showing launch phases, dates, and status indicators. Perfect for communicating a clear release plan and keeping users informed about upcoming milestones.
Newsletter Sample Issuescomingsoon70A newsletter coming-soon section with a centered monospace parenthetical eyebrow, a heading, a working subscribe email form, and a three-card grid previewing upcoming issues.
Referral Rewards Tierscomingsoon71A referral coming-soon section with a centered square eyebrow and heading, a referral progress bar, a list of reward tiers with locked and unlocked states, and a dark seal share button.
Exhibition Opening RSVPcomingsoon72An art exhibition coming-soon section with an artwork image beside a monospace parenthetical eyebrow, a show title, an artist line, a preview and dates list, and a working RSVP email form.
Sign The Wall Waitlistcomingsoon73An interactive waitlist coming-soon section with a monospace parenthetical eyebrow, a heading, a name and email form, and a live wall of member name chips that prepends your own entry on submit.
Version Two Relaunchcomingsoon74A relaunch coming-soon section with a centered square eyebrow and heading, a working early-access email form, and a grid of what's-new feature cards with icons.
Launch Party RSVPcomingsoon75A launch-event coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a when and where row, a working RSVP email form, an outline add-to-calendar pill button, and an attendee avatar row.
Coming Soon Client Marqueecomingsoon76A client wall with the clients withheld. Instead of logos, an oversized ghost-type marquee repeats a coming soon label behind edge fades, under a centered eyebrow, heading and note, with scroll direction and speed as props.
Full-Bleed Launch Countdowncomingsoon77A pre-launch section on a full-bleed photograph under a dark gradient, with a light display heading, four oversized countdown figures between hairline rules, and a working email capture card.
Public Roadmap Coming Sooncomingsoon78A pre-launch section that publishes remaining work instead of a date, with an image tile floating a live release tracker over hairline rows marked shipped, in testing, or queued.
Maintenance Window Noticecomingsoon79A scheduled downtime notice with a light heading, a hairline table of what is affected and what is not, two actions, and an image tile floating a live uptime strip.
Readiness Status Dashboardcomingsoon8Coming soon section with a status dashboard displaying service readiness with color-coded indicators for ready, in-progress, and planned states. Perfect for transparent launch communication.
Second Address Countdowncomingsoon80A full-height coming-soon page on a photograph that drifts slower than the page under a scrim and film grain: a serif headline settling in word by word, an intro, a live serif countdown to the opening date, and a rounded email field with a light sliding-marker pill.
Quiet Waitlistcomingsoon81A light full-height waitlist page: the wordmark in the corner, a centred eyebrow, a serif headline that settles in word by word, an intro, a rounded email field with a sliding-marker pill, a reassurance line and an avatar count of the names so far.
Bento Stats Dashboardcomingsoon9Coming soon section with a bento-grid of live build stats like commits, test coverage, uptime, and team size. Perfect for building in public with transparent engineering metrics.
Contact Details, Form and Mapcontact7A two column contact section. Labeled groups for address, phone numbers, fax and email sit on the left, and a form with first and last name side by side, email, subject, message and a full width send button sits on the right. A wide embedded Google Map runs underneath.
Token Price Herocrypto1Hero section with token price card showing live market stats. Price change indicator, market cap, volume, and circulating supply grid. Trending up/down icons.
DAO Governance Proposalscrypto24Governance proposal cards with for/against vote bars and quorum progress. Status badges (active, passed, rejected), countdown timers, and proposer addresses.
Airdrop Claim Cardcrypto29Token airdrop claim interface with eligibility checklist. Shows allocation amount, criteria met count, expiration timer, and claim button with wallet connection.
Contract Address Listcrypto35Smart contract addresses with copy-to-clipboard and explorer link buttons. Verified badge indicator, chain name, and truncated addresses with monospace font.
Newsletter CTA with Social Proofcta10Call-to-action with avatar stack, subscriber count, and testimonial quote for building trust and boosting conversions.
Founder Quote CTActa100A centred call to action built on a founder's words: a long serif quote that settles in word by word over a slowly drifting soft light, the founder's portrait and role beneath it, then a sliding-marker pill and a text link.
Soft Panel CTActa101The simplest call to action in the language: one soft muted panel with a centred eyebrow, a serif heading that settles in word by word, an intro and two sliding-marker pills.
Ruled Proof CTActa102A call to action between two hairline rules: a serif heading that settles in word by word and an intro on the left, a sliding-marker pill with an avatar cluster, a star row and a proof line on the right.
Ink Band CTActa103A dark ink band with film grain and no photograph: an eyebrow and a wide serif heading that settles in word by word on the left, an intro, a light sliding-marker pill and an underlined text link on the right.
Photo Button CTActa104A call to action with the text above the picture: a centred serif heading that settles in word by word and an intro, then a wide rounded photograph drifting under a light scrim and film grain with a single large sliding-marker pill at its centre.
One Line CTActa105The most compact call to action in the language: a single serif line that settles in word by word with an underlined text link beneath it, and a sliding-marker pill at the other end, all between two hairline rules.
Effect Panel Call to Actioncta106A rounded panel inside the container with a live gradient effect as its background. The heading sits at the lower left in white, with one sentence and two buttons at the lower right. The effect is a swappable background slot, filled with a dark mesh gradient in the demo.
Isometric Scene Call to Actioncta107A wide borderless panel that splits into text and artwork. The left half holds an eyebrow, a heading, one sentence and two buttons; the right half shows an animated isometric scene standing on a patterned ground plane that dissolves into the panel toward the text. On small screens the text sits above the scene.
Uptime Proof Call to Actioncta108A tall borderless band filled with a live ridgeline plot that dissolves into the page at the bottom. One glass card floats in the middle of the band and holds an eyebrow, a heading, one sentence and two buttons. At the foot of the card a 30 day uptime strip with hover details serves as proof.
Growing Grove Call to Actioncta109A wide borderless panel with a centered eyebrow, heading, one sentence and two buttons above a grove of three ink trees. Each tree grows from a single point at its own pace, with its own shape, fullness and blossom color, and all three stand on the same ground line along the bottom of the panel. The trees take their ink from the theme, so the panel reads in light and dark.
Banner CTActa11Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.
Pool Water Band With Glass Booking Cardcta110One wide borderless band filled with sunlit pool water over a tiled floor that fades into the page at the bottom. A glass card floats on the left of the band and holds the eyebrow, heading, one short paragraph, a compact price widget with its label, and two buttons. On small screens the card fills the band width.
Stats CTActa12Call-to-action section with impressive statistics and trust indicators above action buttons. Perfect for data-driven conversion sections.
Multi-Card CTActa13Multiple action cards with different tiers or options side by side. Perfect for offering multiple paths like free trial, demo booking, and enterprise contact.
Checklist CTActa14Call-to-action with a vertical list of benefit checkmarks and action buttons. Perfect for highlighting value propositions before conversion.
Minimal CTActa15Ultra-minimal call-to-action with a single bold heading and action button. Perfect for clean, distraction-free conversion sections.
Logo Cloud CTActa16Call-to-action with trusted-by logo cloud and action buttons. Perfect for building credibility with brand recognition before conversion.
Split Comparison CTActa17Side-by-side comparison cards showing before and after or free vs pro tiers with action buttons. Perfect for upgrade and upsell sections.
Fullwidth Image CTActa18Full-width call-to-action with background image overlay, heading, and action buttons. Perfect for bold, visually striking conversion sections.
Steps CTActa19Three-step process visualization with numbered steps and call-to-action. Perfect for showing how easy it is to get started.
Quote-Led CTActa20Large testimonial quote as the hero element with call-to-action buttons below. Perfect for social proof driven conversion.
Notification CTActa21Compact notification-style call-to-action card with icon, message, and inline action button. Perfect for subtle inline conversion prompts.
Highlight Card CTActa22Card-style call-to-action with value-driven highlight metrics in a bordered grid. Perfect for data-backed conversion sections.
Two-Tier CTActa23Stacked two-tier call-to-action with primary offer on top and secondary alternative below, separated by a divider. Perfect for presenting main and fallback conversion paths.
Split Text CTActa24Asymmetric two-column layout with large heading on the left and description with buttons on the right. Perfect for editorial-style conversion sections.
Testimonial Grid CTActa25Grid of short testimonial quotes with centered call-to-action below. Perfect for social proof driven conversion.
Countdown CTActa26Urgency-driven call-to-action with countdown numbers and limited-time offer messaging. Perfect for launches and time-sensitive promotions.
Pill Tags CTActa27Call-to-action with scattered topic pills and tags showing what subscribers receive. Perfect for newsletter and content subscription sections.
Big Number CTActa28Single massive statistic as the visual centerpiece with supporting text and action buttons. Perfect for impact-driven conversion sections.
Dual CTActa29Two equal side-by-side call-to-action cards offering different paths. Perfect for segmenting audiences like developers vs designers or free vs paid.
FAQ Inline CTActa30Expandable FAQ questions paired with an inline call-to-action. Perfect for addressing objections before conversion.
Newsletter Preview CTActa31Preview card showing a sample newsletter issue with subscribe call-to-action. Perfect for giving visitors a taste of content before subscribing.
Metric Bars CTActa32Horizontal progress bars with metric labels showing platform performance alongside call-to-action. Perfect for data-driven trust building.
Compact Bar CTActa33Single-line compact call-to-action bar with inline text and button. Perfect for subtle, non-intrusive conversion prompts between content sections.
Bordered Stack CTActa34Vertically stacked bordered sections with alternating content and a final call-to-action. Perfect for storytelling-driven conversion.
Avatar Wall CTActa35Dense grid of subscriber avatars with centered heading overlay and call-to-action. Perfect for community-driven conversion.
Accent Sidebar CTActa36Card with colored accent left border and inline call-to-action. Perfect for attention-grabbing inline conversion prompts.
Feature Table CTActa37Simple feature comparison table with checkmarks and call-to-action button below. Perfect for quick plan or feature comparison sections.
Aurora Spotlight CTActa38Interactive call-to-action card with animated aurora gradient blobs and mouse-following spotlight effect. Creates an immersive, eye-catching conversion section.
Objection Buster CTActa39Call-to-action addressing common objections with question-answer pairs and conversion button. Perfect for overcoming hesitation.
Bento CTActa40Bento grid layout with mixed content cards surrounding a central call-to-action. Perfect for showcasing multiple value props in a visually dynamic grid.
Zigzag CTActa41Alternating left-right content blocks building up to a final call-to-action. Perfect for narrative-driven conversion with progressive value reveal.
Quote Carousel CTActa42Rotating testimonial quotes with author info and persistent call-to-action buttons. Perfect for social proof that stays fresh.
Numbered List CTActa43Numbered reasons or benefits list with large ordinals and call-to-action at the bottom. Perfect for persuasive, structured conversion arguments.
Image Marquee CTActa44Eye-catching call-to-action with two rows of images scrolling in opposite directions. Creates a dynamic film-strip effect around centered content.
3D Tilt Card CTActa45Interactive call-to-action card with 3D perspective tilt on mouse move, image background with zoom effect, and a sweeping shine animation on hover.
Before/After Slider CTActa46Interactive image comparison slider with draggable handle for before and after views. Supports both mouse and touch input.
Stacked Photo Deck CTActa47Split layout with a hoverable stacked photo deck that fans out on interaction. Includes shimmer sweep animation on each card for a polished reveal effect.
Animated Border CTActa48Split layout with a floating image wrapped in a rotating conic gradient border. Includes a soft glow backdrop and hover zoom for a premium, modern feel.
Video Hero CTActa49Cinematic call-to-action with a looping background video, gradient overlay, and bottom-aligned content for an immersive hero section.
Diagonal Split Image CTActa50Split layout with two images divided diagonally, each slowly panning in opposite directions. Creates a bold editorial feel with smooth animation.
Vertical Marquee CTActa51Two vertical image columns scrolling in opposite directions frame the centered call-to-action content. Creates a dynamic gallery wall effect.
Media Accordion CTActa52Interactive horizontal strips mixing images and videos that expand on hover, revealing labels and descriptions with staggered slide-up animation. Smooth flex-based transitions.
Video Background CTActa53Looping background video behind a frosted glass content card with badge, heading, description, and action buttons. Creates an immersive, cinematic feel.
Split Video CTActa54Two-column layout with content on the left and a looping video on the right. Features badge, heading, feature list, and action buttons alongside an embedded video panel.
Cinematic Video Hero CTActa55Ultra-wide cinematic video background with a dark gradient overlay. Content is positioned over the video for an immersive, movie-trailer-style hero section.
Media Card Showcase CTActa56Three media cards (images and videos) in a row, each with a hover-reveal label overlay. CTA content sits above the grid for a portfolio-style showcase section.
Floating Video Circle CTActa57Large circular video mask with a gentle floating animation alongside CTA content. The clipped video creates an eye-catching organic focal point.
Video Grid Background CTActa58A 2x2 grid of looping videos playing simultaneously behind a semi-transparent overlay card. Creates a dynamic, energetic backdrop for the call-to-action.
Video Ticker Strip CTActa59Centered CTA content above a continuously scrolling horizontal strip of looping video thumbnails. Creates an energetic, dynamic showcase feel.
Video Blinds Reveal CTActa60Staggered horizontal bars slide away in alternating directions on hover, revealing a looping video behind them like opening window blinds. Text transitions to white for readability over the video.
Animated Border Video CTActa61Split layout with a video card featuring a rotating conic gradient border and gentle floating animation. A glowing backdrop adds depth behind the video.
Diagonal Video Split CTActa62Two videos divided by a diagonal clip-path line with a frosted glass content card overlaid in the center. Bold, cinematic composition.
Video Bento Grid CTActa63Asymmetric bento-style grid with one large video spanning two rows alongside two stacked smaller videos. CTA content sits above the grid.
Statement CTActa64Bold full-width call to action on a dark panel with dual buttons.
Newsletter CTActa65Split card with a subscribe form beside an image.
Marquee CTActa66Centered call to action over a faint scrolling word-marquee background.
Image CTActa67Cinematic full-bleed image CTA with an overlaid content panel.
Contact CTActa68Centered contact call to action with an availability badge and big headline.
Worth Keeping CTActa69Full-bleed monochrome closing CTA with a giant scrolling marquee behind a single centered seal button.
Editorial Asymmetric CTActa70An oversized editorial CTA with a left-weighted heading, a pinned seal button, and a ruled baseline with monospace index marks.
Framed Studio Callcta71A quiet, gallery-like CTA centered inside a bordered frame with corner tick marks, eyebrow, oversized heading, and a single pill action.
Newsletter Letter Bandcta72A monochrome newsletter CTA band pairing an oversized statement with an inline email-capture form and a reassurance note.
Closing CTA Panelcta73A closing call to action on a soft panel, pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live agenda micro-asset.
Centered Closing CTActa74A centered call to action with an eyebrow pill, a large light heading, a short paragraph, and two accent buttons on a clean surface.
Split CTA With Threadcta75A split call to action pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live team message thread.
Plan-Led Centered CTActa76A centered call to action led by a floating plan price card on an image tile, followed by an eyebrow, a large light heading, a paragraph, two accent buttons, and a reassurance note.
Demo Request Split Formcta77A closing call to action that pairs a soft panel of promises, separated by hairlines, with an inline demo request form carrying name, work email, and team size fields plus fine print under the submit action.
Studio Booking Split CTActa78Closing call to action splitting a tall photo against an oversized heading, a short pitch, a pill CTA beside a plain email link, and a ruled two-column row stating reply time and next availability.
Dark Contact Bandcta79Inverted closing panel on a solid dark surface: an oversized invitation on the left, a paragraph and outline pill CTA on the right, then a ruled row of linked email, phone and studio address.
Centered Newsletter CTActa8Minimal centered call-to-action with heading, description, and action buttons. Perfect for newsletter signups and conversion sections.
Two Path Closing CTActa80Closing section that offers two routes side by side, each a ruled column with a title, a short pitch, a dotted-rule list of what to expect and its own pill CTA, one solid and one outline.
Launch Countdown CTActa81A closing call to action with centered copy above two image tiles, one floating a live countdown and the other an inline email capture, closing on a line of fine print.
Inverted Closing Bandcta82A full-width dark closing band with a light display heading, a paragraph, two actions, and three reassurances sitting under a hairline rule.
Two-Path Closing Cardscta83A closing call to action offering two routes as side-by-side cards, each with an icon tile, a short kicker, a checked list on hairlines, and its own action, with the recommended route outlined in the accent.
Photo Band Story CTActa84A closing call to action set on a photographic panel with a directional gradient, pairing an eyebrow badge, light heading, and two actions with a live customer quote card.
Migration Process CTActa85A closing call to action on a soft section that puts a live step tracker between centered copy and three hairline notes, then lands on a single action with its fine print.
Contact And Availability CTActa86A closing call to action splitting a bordered container between a hairline contact table and an inverted dark column that floats a live card naming the person you will meet above the booking action.
Resource Rows CTActa87A closing call to action that offers three downloadable resources as full-width hairline rows, each a link with a short kicker, a format note, and an arrow that shifts on hover.
Slim Closing Barcta88A short closing call to action held in one soft bar, with an eyebrow badge, a compact light heading and paragraph on the left, and the actions aligned to the right.
Plain Terms Billing CTActa89A closing call to action held in one bordered container, with the promise and action across the top and a hairline split below pairing an image tile that floats a live payment card with a full table of billing terms.
Split Layout Newsletter CTActa9Two-column call-to-action with decorative image on one side and feature list with action buttons on the other. Perfect for visually rich conversion sections.
Multi-Site Coverage CTActa90A closing call to action on a soft section that sets an image tile floating a live coverage card against three labelled columns of places, with the action under a hairline.
Handheld Reminder CTActa91A closing call to action that leads with a narrow portrait tile floating a live phone frame, then sets centered copy and two actions beneath it over three hairline promises.
Tailored Subscriptioncta92A newsletter CTA that asks before it asks for an address: subjects, then cadence, then the email, and the column swaps itself for a confirmation that reads back exactly what was chosen.
Share This Panel With Copy Linkcta93A closing panel that asks the reader to forward the piece rather than subscribe, pairing a read-only link field and a copy button that confirms in place with a row of send destinations.
Cadence Picker Signupcta94A 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.
Parallax Panel CTActa95A closing call to action on a rounded photographic panel: the photo drifts under the panel as the page scrolls, soft light and film grain sit over it, and a centred serif heading settles in word by word above the intro, a pill button, an email link and a star rating line.
Half Photo CTActa96A two-panel call to action inside one rounded frame: a soft muted panel with a serif heading that settles in word by word, an intro, a sliding-marker pill and dotted reassurances, beside a photograph that drifts inside its half as the page scrolls.
Full Bleed Band CTActa97An edge-to-edge photographic band whose image drifts under a dark scrim, drifting soft light and film grain, with a centred serif heading that settles in word by word, an intro and two sliding-marker pills.
Monthly Letter CTActa98A newsletter call to action on a light page with a drifting soft light: a serif heading that settles in word by word and an intro on the left, a rounded email field with a full-width sliding-marker pill and a reader avatar line on the right.
Two Paths CTActa99A call to action that offers two doors: under a serif heading that settles in word by word, two soft muted cards each with a serif title, a description and a sliding-marker pill, the first topped by a photograph that drifts inside its frame as the page scrolls.
Admin Shelldashboard1A full admin dashboard shell: collapsible icon sidebar, topbar with a ⌘K command palette and account menu, a greeting header, a three-up KPI row with trend badges, and a recent-orders data table. The frame the rest of the dashboard blocks drop into.
Support Inboxdashboard10A three-pane helpdesk inbox: an icon rail, a searchable ticket list with status filters and unread markers, and a live conversation pane. Clicking a ticket loads its thread, and the composer actually appends replies (⌘/Ctrl+Enter to send).
Fitness Overviewdashboard11A health dashboard with a top navigation bar (no sidebar): three activity-ring radial gauges, a steps area chart and a heart-rate line chart, and a recent-workouts list. A Today/Week/Month segmented control live-swaps the chart data and totals.
Service Monitoringdashboard12An observability console with an icon rail and a live status ribbon: a service-health grid with status dots and latency/uptime, a latency line chart, a request-volume area chart, a 30-day uptime bar strip, and a recent-events feed. A 1h/24h/7d tab control live-swaps the chart data.
Account Settingsdashboard13A settings dashboard with a vertical section nav that live-switches panels: an editable profile, security with a two-factor toggle and active sessions, notification switches, a billing panel with plan/payment/invoices, and a team list with per-member role selects.
Service Reliability Overviewdashboard14A status dashboard with a top bar and two scroll areas: the main column stacks four readout figures, a list of services with daily uptime strips, a response time chart beside a week over week comparison, and a deploy heatmap. A side column holds the incident and deploy activity feed, and drops under the main column on small screens.
Customers Tabledashboard2A customers management section powered by the data-table engine: avatar cells, status badges, sortable columns, keyword search, row selection with a live selected count, per-row action menus, pagination, and an export / add-customer toolbar.
Commerce Analyticsdashboard3An e-commerce analytics dashboard: sidebar + search topbar, a four-up KPI row with period deltas, a net-profit area chart, a repeat-rate radial gauge, a busiest-weekday bar chart, and a best-selling products data table.
Project Workspacedashboard4A project-management dashboard: sidebar + search topbar, a four-up project stats row with one highlighted card, a weekly project-analytics bar chart, a reminder card with a start-meeting action, a team-collaboration list, a project-progress radial gauge, and a focus time-tracker card.
Booking Workspacedashboard5A split booking dashboard: a left panel with a top nav, functional tab bar, a Manage menu, a bento of revenue/occupancy/metric tiles and an image, toggleable active-booking cards, and a room-availability timeline; a right rail with a real month calendar (selectable days, booked-day dots) and a time-slotted day agenda.
Talent Sourcingdashboard6A project detail dashboard for staffing: sidebar + action topbar with a project actions menu, a project header with status pills, a five-up stat strip with project meta, functional pipeline sub-tabs, a search / recently-active toggle / filters-menu toolbar that live-filters the grid, and a responsive grid of nine talent cards with wishlist and invite toggles.
Traffic Analyticsdashboard7A web-analytics console: sidebar + search topbar, a live realtime strip, an hourly sessions area chart, a daily-goal radial gauge, a channel-audience radar chart, a new-vs-returning line chart, and a sortable top-pages table.
Finance Overviewdashboard8A personal-finance dashboard: sidebar + search topbar, a dark total-balance hero with account tiles, a budget radial gauge, income/expense/savings KPIs, a cashflow bar chart, a spending-mix donut, and a colored transactions table.
Sales Pipelinedashboard9A sales-CRM dashboard: sidebar + search topbar, pipeline KPIs, a four-stage kanban board of deal cards with owners and hot-lead flags, a revenue-vs-forecast area chart, a team-quota radial gauge, and a rep leaderboard with progress bars.
API Endpoint Explorerdevtools1Interactive REST API endpoint reference with method badges, expandable parameter details, and response types. Grouped by resource.
Cron Job Schedulerdevtools10Scheduled task manager showing cron expressions, last/next run times, duration, and active/paused/failed status indicators.
Audit Activity Logdevtools11Filterable audit trail showing user actions with create, update, delete, and access type indicators. Includes resource, user, and timestamp info.
Rate Limit Dashboarddevtools12API rate limit monitor with color-coded usage bars per endpoint. Shows current usage, limits, and visual threshold indicators.
Environment Config Viewerdevtools13Tabbed environment variable viewer for comparing configuration across production, staging, and development environments.
JSON Formatter Tooldevtools14Interactive JSON editor with format, minify, and real-time validation. Valid/invalid status badge, copy button, and syntax error display.
Package Dependency Healthdevtools15Dependency version tracker with update availability, security fix indicators, and version comparison arrows.
Queue Monitordevtools16Background job queue monitor showing processed, pending, and failed counts with healthy, warning, and critical status indicators.
Service Health Boarddevtools17Infrastructure status board showing service health with operational, degraded, and down indicators. Displays uptime percentages and latency metrics.
Performance Waterfalldevtools18Network request waterfall chart with cascading timing bars. Color-coded by duration — green for fast, amber for medium, red for slow.
Keyboard Shortcuts Referencedevtools19Grouped keyboard shortcuts with styled keycap visuals. Shows key combinations with shadow-styled kbd elements and descriptions.
Webhook Event Streamdevtools2Real-time webhook event log with delivery status indicators, expandable JSON payloads, and response time tracking.
Code Diff Viewerdevtools20Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.
Multi-Language Code Tabsdevtools3Code block with language tabs (JavaScript, Python, cURL, Go) and Shiki syntax highlighting. Dark theme with copy-to-clipboard and active tab indicator.
Network Request Monitordevtools33Real-time HTTP request interceptor with recording controls. Method badges, status codes, duration timing, size info, and filterable by method/type.
Load Test Dashboarddevtools37API performance testing interface with start/stop controls and progress bar. Metric cards for RPS, success rate, P95/P99 latency, and error count.
API Usage Analyticsdevtools38API analytics dashboard with endpoint usage table. Stats cards for requests, latency, error rate, and active users. Trend indicators and method badges.
Error Monitoring Feeddevtools4Application error tracking feed with severity indicators, occurrence counts, and source locations. Summary pills show error distribution.
Code Coverage Reportdevtools49Test coverage dashboard with expandable file tree. Coverage metrics for statements, branches, functions, and lines with color-coded progress bars.
Feature Flags Managerdevtools5Interactive feature flag management with toggle switches, rollout progress bars, and environment badges.
Bundle Size Analyzerdevtools52JavaScript bundle analysis with chunk breakdown. Visual size bars, module lists, and gzip comparisons. Color-coded by type: app code, vendor, assets.
Database Schema Explorerdevtools56Database table browser with expandable schema views. Shows columns, types, primary/foreign keys, and relationships. Row counts and nullable indicators.
Application Log Viewerdevtools6Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels.
API Response Examplesdevtools7API documentation cards showing response examples with color-coded status badges. Headers section, JSON body with copy button, success/error variants.
API Key Managerdevtools8API key management panel with masked credentials, reveal/copy controls, scope badges, and active/revoked status indicators.
Database Migration Timelinedevtools9Timeline-style database migration tracker with applied, pending, and failed status indicators. Shows migration names, descriptions, and timestamps.
Bundle Chunk Analyzerdevtools92Bundle breakdown with chunk list showing size, gzip, and module counts. Large chunk warnings, percentage bars, and change indicators for tracking growth.
CI/CD Pipeline Statusdevtools93CI/CD pipeline monitor with build stages, status indicators, and branch/commit tracking. Shows multiple pipeline runs with success, failed, running, and pending states.
API Endpoints With Sample Calldevtools94A developer section that lists common endpoints as hairline rows pairing tone-coded method chips with monospace paths, beside a dark code panel holding a full sample request and its response.
Feeds And Archive APIdevtools95A hairline list of every way to follow a publication, each row naming the feed, what it carries and its address, over a copyable one-line request that stands in for the whole API.
Quiet API Referencedevtools96An API reference section: a serif headline that settles in word by word with a sliding-marker pill at the right end of the header, then a ruled list of endpoints on the left (method, path, a dot marker on the selected row) and on the right the chosen call's title, description and an ink code panel with a copyable request and its response, swapped with a soft blur.
Product Card Gridecommerce1Responsive product grid with ratings, sale badges, and add to cart buttons. Perfect for shop pages and product catalogs.
Size Guide Tableecommerce11Measurement chart table with chest, waist, hips, and length columns. Perfect for clothing product pages and sizing reference.
Related Products Gridecommerce14Product recommendations grid with images, prices, and add to cart buttons. Perfect for cross-selling and upselling on product pages.
Shipping Info Cardsecommerce15Icon cards displaying shipping, delivery, tracking, and returns policies. Perfect for product pages and checkout information.
Payment Methods Displayecommerce16Payment options grid showing credit cards, digital wallets, and bank transfers. Perfect for checkout pages and footer trust signals.
Order History Listecommerce17Order cards with status badges, dates, and item counts with view details links. Perfect for customer account dashboards and order tracking.
Gift Card Redemption Formecommerce19Code input form with loading states, validation, and balance display on success. Perfect for checkout pages and account credit sections.
Product Detail with Variantsecommerce2Product page hero with color and size selectors, quantity picker, and wishlist button. Perfect for detailed product pages with multiple variants.
Sale Countdown Timerecommerce23Live countdown with days, hours, minutes, and seconds in default, compact, or banner variants. Perfect for flash sales and limited-time promotions.
Product Detail with Galleryecommerce26Product page with thumbnail image gallery, color swatches, size buttons, and feature icons. Perfect for premium product showcases.
Category Cards Gridecommerce27Category collection grid with overlay images, item counts, and shop now links. Perfect for homepage category navigation and collection pages.
Featured Products Gridecommerce28Product cards with hover wishlist buttons, quick add to cart overlay, and star ratings. Perfect for featured sections and bestsellers.
Deal of the Day Heroecommerce29Featured product with live countdown timer, discount badge, feature list, and large CTA. Perfect for daily deals and promotional landing pages.
Shopping Cart with Summaryecommerce3Cart page with item cards, quantity controls, and order summary with shipping calculation. Perfect for checkout flows and cart review pages.
Outfit Builderecommerce31Mix-and-match product selector organized by category with running total and add all to cart. Perfect for fashion lookbooks and curated outfits.
Shop by Brand Gridecommerce32Brand logo cards with product counts and hover effects linking to brand pages. Perfect for multi-brand stores and brand discovery.
Collection Showcase Gridecommerce33Featured collection card with supporting collection tiles, image overlays, and product counts. Perfect for homepage collection highlights.
Gift Finder by Budgetecommerce34Budget filter tabs with curated gift cards, wishlist buttons, and quick add to cart. Perfect for gift guides and seasonal shopping pages.
Product Reviews Gridecommerce35Review cards with star ratings, product thumbnails, verified badges, and helpfulness counts. Perfect for social proof and testimonial sections.
Trust Badges Sectionecommerce36Icon badges for shipping, returns, security, and support in default, compact, or detailed variants. Perfect for building trust near checkout buttons.
Shop the Lookecommerce37Lifestyle image with clickable product hotspots and bundled add-all-to-cart pricing. Perfect for fashion editorial and styled outfit pages.
Back in Stock Notificationecommerce38Product availability alerts with email and SMS signup options. Displays waitlist counter to create urgency and social proof. Perfect for out-of-stock product pages and inventory waitlists.
Loyalty Program Dashboardecommerce39Customer rewards interface showing tier progress, redeemable benefits, points balance, and earning opportunities. Perfect for member portals and gamified retention programs.
Shop by Category Gridecommerce4Product category browsing with image cards, product counts, and featured badges. Responsive grid layout with hover effects. Perfect for storefront navigation and collection showcases.
Gift Card Balance Checkerecommerce40Gift card management interface with balance lookup, transaction history display, and quick reload functionality. Perfect for gift card landing pages and customer service portals.
Product Detail Pageecommerce41Complete product view with image gallery thumbnails, variant selection controls, pricing, and add to cart functionality. Perfect for main product pages and quick view modals.
Interactive Size Guideecommerce42Clothing size selector with body measurement inputs, personalized fit scoring, and comprehensive size chart reference table. Perfect for apparel and footwear product pages.
Product Information Tabsecommerce43Tabbed product details with description, feature list, specifications table, customer reviews with ratings, and shipping information. Perfect for comprehensive product pages with detailed information.
Flash Sale Countdownecommerce44Limited-time deal showcase with live countdown timer, stock progress indicator, and discount pricing. Creates urgency with sold/available tracking. Perfect for daily deals and time-sensitive promotions.
Advanced Variant Selectorecommerce45Customizable product configurator with color swatches, size selection, material options, and dynamic pricing. Real-time stock tracking per combination. Perfect for configurable products and custom merchandise.
Product Finder Quizecommerce46A finder that replaces a filter sidebar: three questions score every product against the traits the answers ask for, and the winner takes over the plate beside them with its photograph, its price, and the reasons it came out on top.
Featured Product Showcaseecommerce5Full-featured product presentation with pricing, ratings, feature list, and add to cart. Split layout with configurable image position. Perfect for highlighting premium products and limited editions.
Product Reviews Sectionecommerce6Customer reviews with star ratings, verified badges, helpful voting, and load more functionality. Displays average rating summary. Perfect for building trust and social proof on product pages.
Wishlist Managerecommerce7Saved 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.
Order Confirmation Pageecommerce8Post-purchase success screen with order summary, email confirmation, estimated delivery, and order tracking actions. Perfect for checkout completion and order receipt pages.
Institutional Quick Factseducation100A quick facts grid displaying key institutional statistics with values, labels, and descriptions. Perfect for university at-a-glance pages and prospective student information.
Academy Course Cardseducation101An academy section with an eyebrow over a hairline rule, a two-column heading, and three course cards that each float a live progress checklist above a category, title, and lesson count.
Lesson Check Quizeducation102An end-of-lesson knowledge check: a two-column header, a three-figure strip for questions, pass mark, and attempts, a graded quiz that swaps itself for a score and a per-question review, and a list of readings for whatever went wrong.
Learning Roadmap Accordioneducation103A learning roadmap laid out as a numbered vertical rail, where each stage is an accordion row that opens into its summary and a grid of linked lessons, with one stage able to carry a position badge.
Long Guide Chapter Indexeducation104A pillar guide hub whose sticky left column carries the pitch, three facts on hairlines and a seal button, while the right column lists every chapter in numbered rows grouped by part.
Course Bento With Tall Curriculum Celleducation105A header with one button on the right sits above a bento grid for a course platform. One tall cell holds a course progress ring, and two wide cells beside it hold a learning streak and a graded project card. Each cell sits on its own gradient background with glass cards. Every cell pairs its piece with a title and a sentence, and the grid stacks on phones.
Video Lesson Heroeducation12A video lesson hero section with course info, thumbnail with play button, and lesson navigation. Perfect for online courses and video-based learning platforms.
Lesson Content Readereducation13A rich text lesson reader with structured content blocks including headings, paragraphs, lists, quotes, and code snippets. Perfect for text-based courses and educational documentation.
Course Certificate Displayeducation17A certificate showcase card with course name, issuer, completion date, skills earned, and credential ID. Perfect for celebrating course completions and displaying verifiable credentials.
Faculty Profile Spotlighteducation22A faculty spotlight featuring professor photo, biography, research interests, publications count, and inspirational quote. Perfect for showcasing instructors and academic staff.
Learner Leaderboardeducation25A gamified leaderboard displaying top learners with rankings, scores, and badges across weekly, monthly, and all-time periods. Perfect for competitive learning platforms and student engagement.
Study Streak Trackereducation26A gamified streak tracker showing current and longest streaks with a visual weekly activity calendar. Perfect for habit-forming learning apps and student motivation.
Study Abroad Heroeducation48A study abroad hero section with destination image cards, program duration badges, and key features. Perfect for universities and international exchange programs.
Professional Development Heroeducation53A professional development hero with certification programs list, success stats, and call-to-action buttons. Perfect for corporate training and upskilling platforms.
Faculty Testimonials Grideducation78A grid of faculty testimonials with instructor photos, quotes about their teaching philosophy, and years of experience. Perfect for building trust in educational institutions.
Education Social Proofeducation79A social proof section displaying key stats like ratings, enrollment numbers, and completion rates alongside a featured student testimonial. Perfect for course landing pages and enrollment campaigns.
Social Media Links Grideducation86A social media connection section with platform cards showing handles and follower counts. Perfect for university marketing and student community building.
Mission and Vision Statementeducation91A mission and vision statement section with side-by-side text blocks and an inspirational leadership quote. Perfect for university about pages and institutional branding.
Global Partnerships Grideducation99A global partnerships section showcasing partner institutions with location details and exchange statistics. Perfect for universities highlighting international collaborations.
Centered 404 Messageerror1Minimal 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.
Fullscreen 404 With Backgrounderror10Screen-height 404 with a full-bleed background photo under a dark overlay, centered white messaging, and a solid plus outline button pair sized for marketing sites.
404 With Product Recommendationserror11Store 404 for dead product URLs: the message and shopping buttons sit above a four-up product grid with square imagery, prices, and optional strikethrough compare-at prices.
404 With Popular Articleserror12Blog 404 that turns a dead post URL into reading: centered messaging above a three-up article grid with cover images, category badges, dates, and read times.
404 With Site Directoryerror13404 page that doubles as a sitemap: left-aligned messaging over four columns of grouped section links, so visitors on a large site can jump straight to the area they wanted.
Editorial 404 Section Indexerror14Editorial 404 with a square eyebrow and status code over a hairline rule, an oversized accent-highlighted headline, and a ruled index of the sections visitors reach for next.
500 Incident Reporterror15Server error page with a square eyebrow and status code over a hairline rule, a bold accent headline, a bordered incident table of reference, timestamp and service rows, and a retry seal button beside a status page link.
403 Access Requesterror16Permission-denied page for team apps: an accent lock chip and bold headline on the left, the signed-in account card with an account switch link and a square-bullet list of access requirements on the right.
Maintenance Window Noticeerror17Planned downtime page with a square eyebrow and status code, a bold accent headline, three bordered cells for the maintenance window, a working notify-me email form with a success state, and a live progress link.
Expired Link Recoveryerror18Expired magic-link page with a square eyebrow and status code, a bold accent headline, the expiry timestamp in a bordered strip, a seal button that swaps to a sent confirmation, and a square-bullet list explaining the expiry.
Typographic 404 Indexerror19Monochrome 404 built on oversized display type: a parenthetical eyebrow, a display headline with a muted emphasis clause, a pill call to action, and a ruled index of every section on the site.
404 With Site Searcherror2Search-first 404 page: a controlled search field with a submit handler, plus a bordered list of suggested pages with titles, descriptions, and hover arrows.
Editorial 404 With Portrait Imageerror20Two-column 404 in a quiet monochrome language: a parenthetical eyebrow, a two-line display headline, a pill call to action and an oversized report-the-link email on the left, a tall captioned photograph on the right.
Server Error Recorderror21Monochrome server-error page: a parenthetical eyebrow over a display headline, a retry pill beside a status link, and a ruled two-column record of the reference, timestamp, subsystem and state.
Planned Downtime Windowerror22Monochrome maintenance page: a parenthetical eyebrow over a display headline, the downtime window as a ruled three-column record, and a rounded notify-me field with a confirmed state.
Invitation Only Accesserror23Monochrome permission page: a display headline over a request pill that swaps to a sent confirmation, a ruled record of the project, owner and visibility, and an overlapping avatar row of current members.
404 With Featured Workerror24Studio 404 that recovers a dead project URL: a square eyebrow and status code over a hairline rule, an accent headline and seal button, then two large project cards with category lines and hover arrow chips.
Rate Limit Cooldownerror25Too-many-requests page with a square eyebrow and status code, an accent headline, three bordered usage cells, and a live cooldown counter that swaps itself for a retry seal button when it reaches zero.
Payment Required Lockouterror26Billing lockout page: an accent card chip and headline with an update-payment seal button on the left, an unpaid invoice table and a square-bullet list of what stays untouched on the right.
Session Expired Sign Inerror27Timed-out session page: an accent headline over an account strip showing the avatar, address and sign-out timestamp, an autosave reassurance line, and a sign-in seal button beside an account switch link.
Region Unavailable Noticeerror28Geo-restriction page: an accent globe chip and headline, the detected region in a bordered strip, a two-column ruled list of markets with their rollout status, and a notify-me seal button.
Oversized Numeral 404error29Monochrome 404 led by the status code set as an oversized numeral, with the statement and pill call to action on one side of a hairline rule and the explanation plus display-type links on the other.
Split 404 With Imageerror3Two-column 404 page with the error code, heading, explanation, buttons, and a small note on one side, and a full-bleed image that scales on hover on the other. The image side can be flipped with a prop.
Search Led 404error30Monochrome 404 that hands the visitor a search field: a display headline with a muted emphasis clause, a rounded search bar with a circular submit seal wired to a callback, and a ruled list of the most travelled routes.
Offline Sync Queueerror31Offline screen built around a live sync queue: a display headline with a retry pill and a self-restarting countdown that raises the attempt number, beside a soft panel listing every change held on the device with a pulsing listening indicator.
404 With Recent Writingerror32Monochrome 404 for a renamed article: a display headline and pill call to action above three recent entries, each a full-colour image tile with a plain date line and a bold title.
Retired Page Recorderror33Monochrome page for deliberately removed content: a display headline, a ruled record of when it was published, retired and why, then a pill link to the replacement beside an archive link.
Editorial Not Found Spliterror34A calm not-found page with an error eyebrow, an oversized light heading and recovery actions on the left, beside a hairline list of the destinations people usually need instead.
Server Error With Live Statuserror35A calm server-error page with a monospace code, an oversized light heading, recovery actions, an image tile floating a live uptime strip, and a hairline table carrying the incident reference.
Not Found With Searcherror36A not-found page that offers a way forward rather than a way back, pairing an oversized light heading with an image tile floating a live search panel and a two-column hairline list of likely destinations.
Access Denied With Request Patherror37A permissions error that names the missing role, lists the people who can grant it with their portraits, and floats a live access request card on an image tile beside the copy.
Missing Piece With Archive Searcherror38A not-found page for a publication, offering a search field as the first action and the month's most read pieces underneath, with a line committing to link permanence.
Calm 404error39A 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.
404 With Destination Cardserror4404 page that recovers the visit with a grid of destination cards, each with an icon, title, description, and hover arrow, followed by a centered row of fallback buttons.
404 Support Panelerror5Card-style 404 panel that echoes the requested URL in monospace, pairs a browser-history back button with link actions, and closes with a support and status link row.
Inline 404 Lineerror6The smallest possible 404: the status code and the message sit on one line separated by a vertical rule, stacking on mobile, with a single outline button underneath.
404 Notice Carderror7Compact bordered 404 card with a circular icon, status label, heading, one-line explanation, and stacked full-width buttons. Sized for app shells and modals as well as full pages.
404 With Redirect Countdownerror8404 page that counts down to an automatic redirect and calls onRedirect once it reaches zero, with a cancel button that stops the timer and a manual go-now link.
404 Did You Meanerror9Left-aligned 404 for documentation and marketing sites: the requested path is shown struck through in monospace above a did-you-mean box linking to the closest matching page.
Event Hero with Social Proofevent10Event hero displaying attendee count, speaker numbers, and country reach statistics with trusted company logos. Perfect for enterprise summits and industry conferences.
Event Recap Reportevent100A post-event write-up opening on four hairline figures, then a three-photo row at mixed heights with captions, a soft panel carrying an attendee quote, and what was promised in the room.
Slot By Slot Day Builderevent101A programme picker that builds the day beside the questions: one choice per time slot drops a session card with its room, its length, and its photograph into a running plan, and the hours left open stay on the page instead of being hidden.
Open Hours Session Rowsevent102Upcoming sessions as hairline rows, each opening with the date set as a figure, then the session and what it covers, with its seat state and a booking link on the end.
Seasonal Gatheringsevent103An events list under a serif heading that settles in word by word beside the intro and a pill action: ruled rows that blur in one by one, each with a large serif day and small-caps month, a serif title and description, place and availability, and a reserve link.
Keynote Speaker Profileevent13Featured speaker spotlight with large portrait, bio, session topic, and social media links. Perfect for highlighting conference keynote presenters.
Speaker Sessions Scheduleevent14Speaker cards displaying multiple sessions per presenter with times, locations, and session types. Perfect for multi-track conferences with recurring speakers.
Featured Keynotes Galleryevent15Visual speaker grid with full-height portrait images, gradient overlays, and keynote topics. Perfect for showcasing headline speakers at major conferences.
Panel Discussion Sectionevent16Panel session card featuring moderator highlight, panelist grid, discussion topic, and scheduled time. Perfect for industry panels and expert roundtables.
Event Hosts Sectionevent17Host profiles with photos, bios, and social media links displayed in a two-column grid. Perfect for introducing conference MCs and event directors.
Past Speakers Galleryevent19Image gallery of previous conference speakers with year badges, topics, and hover zoom effects. Perfect for showcasing event history and alumni speakers.
Call for Speakersevent20Speaker submission CTA with submission deadline, benefits checklist, and proposal guidelines. Perfect for conferences seeking talk proposals.
Featured Sessions Gridevent25Session cards displaying talk titles, speakers, times, locations, and remaining capacity. Perfect for conference agendas and session discovery.
Workshop Registration Listevent26Workshop cards with instructor profiles, skill levels, requirements, and live capacity tracking. Perfect for hands-on conference workshops and training sessions.
Breaks and Networking Scheduleevent27Schedule cards for coffee breaks, lunch, and social events with timing, locations, and activity highlights. Perfect for showing networking opportunities.
Live Session Now Playingevent28Real-time session display with live indicator, viewer count, current speaker, and upcoming sessions queue. Perfect for conference live streams and virtual events.
Personal Schedule Builderevent29Interactive session picker with add/remove toggles, personal schedule summary, and calendar export. Perfect for multi-track conferences where attendees build agendas.
Calendar Integration Sectionevent30Event calendar sync with multiple export options including Google Calendar, email invite, and ICS download. Perfect for event reminders and schedule syncing.
Team Discount Calculatorevent33Interactive pricing calculator with quantity selector, tiered discounts, and real-time savings display. Perfect for group ticket sales and team registrations.
Ticket Selection Cartevent36Multi-ticket type selector with quantity controls, availability tracking, and checkout total. Perfect for event ticketing with multiple pass options.
Sold Out Waitlist Formevent38Waitlist signup form with email capture, queue position display, and similar events opt-in checkbox. Perfect for sold-out events and high-demand tickets.
Conference Hero with Imageevent4Split-layout event hero displaying conference details with date, location, attendee count, and featured image. Perfect for developer conferences and tech summits.
Conference Bundle Pricingevent40Bundle pricing cards showing included items, savings percentages, and feature lists. Perfect for conference packages combining passes, workshops, and recordings.
Minimal Event Heroevent5Centered event hero with oversized typography, event date, and call-to-action buttons. Perfect for design conferences and annual summits.
Become a Sponsor CTAevent53Two-column sponsorship pitch with benefit highlights, audience reach statistics, and contact CTAs. Perfect for attracting event sponsors and partners.
Sponsorship Tiers Comparisonevent54Tiered sponsorship packages with pricing cards and feature comparison matrix showing benefits per level. Perfect for sponsor prospectus and partnership pages.
Featured Partner Spotlightevent58Two-column partner showcase with company logo, description, highlights, and testimonial quote. Perfect for highlighting platinum sponsors and key partners.
Workshop Registration Formevent66Interactive workshop selector with capacity tracking, attendee info form, and pricing summary. Perfect for paid workshops and training session signups.
Event Hero with Ticket Pricingevent7Centered event hero featuring prominent ticket price display with early bird discount and original price strikethrough. Perfect for tech summits and paid conferences.
Code of Conduct Sectionevent79Community standards display with principle cards covering respect, inclusion, and safety with issue reporting contact. Perfect for event policies and community guidelines.
Live Stream Player Sectionevent93Video player section with thumbnail preview, live indicator, viewer count, and multi-platform streaming links. Perfect for virtual events and conference live streams.
Featured Session Scheduleevent94An events section that opens with a split featured card pairing a photo with date, time, and format lines, then lists the rest of the schedule as rows separated by hairlines, each with a bordered date tile, host meta, seat count, and register action.
Filterable Day Agendaevent95A conference agenda whose track pills are derived from the sessions and carry live counts, narrowing a timed list of hairline rows that align the slot, the session, and its speaker and room.
Event Detail With Countdownevent96A single event page opening on a full-bleed photo band with a live countdown anchored into it, then pairing the pitch and two actions with a hairline table of practical facts and a speaker list.
Recorded Sessions Archiveevent97A past events archive leading with an image tile that floats a recording card, then listing every earlier session as linked hairline rows with its date, place, and running time.
Multi-City Tour Datesevent98A tour schedule listing each city as a linked hairline row with its venue, date, and remaining seats, muting the sold-out stops, beside a sticky tile that floats a live locations card.
Webinar Registration Splitevent99A live session sign-up splitting a bordered container between the pitch, a hairline table of when and how long, and a checked takeaway list, beside a soft column holding a working registration card and the hosts.
Tabbed Categoriesfaq10Sidebar navigation with category tabs and accordion content. Perfect for organizing large FAQ sets across multiple topics.
Searchable Accordionfaq11Search input with accordion items that filter in real-time. Essential for FAQs with many questions that users need to quickly locate.
Grouped Sectionsfaq12FAQs organized into titled sections with accordions underneath. Excellent for presenting related questions grouped by topic.
Side-by-Side Imagefaq13Accordion paired with a large image on left or right. Use when you want visual context alongside your FAQ answers.
With CTA Cardfaq14Accordion followed by a call-to-action card below. Great for converting users by offering additional contact options at the end.
Modal Dialog Cardsfaq15Clickable question cards that open answers in a modal dialog. Perfect for card-based layouts that need expanded views.
Numbered Listfaq16Questions displayed with numbered badges and answers below. Ideal for step-by-step guides or priority-ordered FAQs.
Two Column Q&Afaq17Questions on left, answers on right in a two-column grid layout. Works well for balanced, side-by-side presentation.
Timeline Layoutfaq18Alternating left-right cards connected by a vertical line. Great for creating a narrative flow through related questions.
Chat Conversationfaq19Message-style bubbles simulating a chat interface. Perfect for a friendly, conversational tone in your FAQ section.
Tabbed Cardsfaq20Horizontal tabs with card-based content below for each category. Clean for organizing FAQs by topic tabs.
Icon Grid Cardsfaq21Cards in a grid with icons and short answers. Ideal for highlighting key features or benefits with visual elements.
Search with Gridfaq22Search input with results displayed in a two-column grid. Best for knowledge bases with searchable, card-based results.
Horizontal Scroll Cardsfaq23Cards that scroll horizontally with fade edges. Good for mobile-friendly carousels of FAQ items.
Split View Listfaq24Question list on left, selected answer on right with image. Effective for visual answers with image headers.
Terminal Windowfaq25Terminal-style interface with commands and outputs. Perfect for developer FAQs or technical documentation.
Sticky Notesfaq26Colorful rotated note cards in a grid. Creates a playful, informal design for casual FAQs.
Card Carouselfaq27Single card that rotates through questions with progress dots and navigation buttons. Great for featured question rotation.
Glassmorphism Cardsfaq28Frosted glass effect cards in a two-column grid. Modern aesthetic for sleek, contemporary designs.
Magazine Columnsfaq29Two-column layout with left accent borders and different styling. Print-magazine inspired for balanced layouts.
Blur Reveal on Hoverfaq30Question with blurred answer that unblurs on hover. Interactive approach for answers that unfold visually.
Kanban Columnsfaq31Three vertical columns with icons and card stacks. Useful for organizing FAQs into distinct categories like a kanban board.
Quote Style Cardsfaq32Cards with quote icons in corners, arranged in a grid. Elegant design for emphasizing key points with typography.
Timeline Stepsfaq33Vertical timeline with alternating content and numbered dots. Perfect for onboarding or journey-based FAQs.
Minimal Plus-Minusfaq34Simple accordion using plus/minus icons with minimal styling. Clean, distraction-free accordion approach.
Emoji Icon Gridfaq35Grid cards with emoji icons and short answers. Fun, visual approach with emoji-based categorization.
Large Number Listfaq36Questions with large faded numbers and answers. Prominent numbering creates strong visual hierarchy.
AI Chat Interfacefaq37Chat-style bubble interface with AI assistant styling. Great for modern conversational FAQ experiences.
Left Border Accentfaq38Accordion items with colored left border on active state. Subtle visual indicator of expansion.
Slide-Out Panelsfaq39Questions that slide open to reveal answers with bottom border separator. Smooth reveal animation.
Markdown Code Blockfaq40FAQ displayed as code documentation in a terminal-style block. Perfect for developer-focused content.
Photo Cardsfaq41Cards with images and text below in a grid. Ideal when each answer has relevant supporting imagery.
3D Flip Cardsfaq42Cards that flip 180 degrees on hover to show answer. Interactive 3D effect for engaging presentation.
Metro Tilesfaq43Colorful tiles with icons and white text. Bold, modern design inspired by metro UI patterns.
Minimal Two Columnfaq44Simple two-column layout with questions and answers. Ultra-minimalist design with no extra styling.
Show More Expandablefaq45Card stack with show more button to reveal additional items. Good for progressive disclosure of FAQs.
Tag Filter Gridfaq46Filterable grid using tag pills at top. Perfect for FAQs that need multi-category filtering.
Horizontal Split Viewfaq47Questions on left buttons, answers on right panel. Interview-style layout for selected item display.
Info Icon Tooltipsfaq48Info icons that show tooltips on hover with answer text. Compact design with hover-revealed content.
Inline Compactfaq49Questions and answers on same line with colon separator. Extremely compact format for dense content.
Window Style Cardsfaq50Cards styled like OS windows with title bars and close buttons. Retro OS design aesthetic.
Two-Tone Headersfaq51Cards with colored header section and white content area. Clear visual separation with color blocking.
Bubble Pillsfaq52Questions as clickable pills with answers expanding below. Bubble-shaped buttons for interactive selection.
Numbered Pairsfaq53Two-column grid with large numbers and Q&A pairs. Clean numbered format with clear visual hierarchy.
Vertical Tab Panelfaq54Left sidebar tabs with right content panel. Traditional tab interface for category-based FAQs.
Multi-Open Accordionfaq55Accordion allowing multiple items open simultaneously with plus/minus icons. Flexible expansion approach.
Checkmark Listfaq56Grid cards with green checkmarks emphasizing answers. Positive confirmation visual for affirmative FAQs.
Cards With Linksfaq57Question-answer cards with external link buttons below. Drives users to related resources or docs.
Auto-Play Carouselfaq58Animated carousel with progress bar and auto-advance through questions. Engaging for featured FAQs.
Typewriter Terminalfaq59Terminal-style interface with typing effect for answers. Animated typing creates dynamic reveal effect.
Gradient Border Glowfaq60Cards with animated gradient borders and shine effects on hover. Premium feel with advanced CSS effects.
Morphing Animatedfaq61Advanced animations with ripple effects, morphing orbs, and shimmer. Highly interactive with multiple effect layers.
Scroll-Triggered Revealfaq62Cards animate in as you scroll with staggered timing. Scroll-based animation creates engaging reveal.
Spotlight Focusfaq63Clicked card highlights while others dim with spotlight effect. Creates focused attention on selected answer.
Neon Glow Effectsfaq64Cyberpunk-styled cards with neon glow, scan lines, and text shadows. Futuristic aesthetic with glowing effects.
Stacked Card Flipfaq65Cards stack on top of each other that expand when clicked. Physical stack metaphor with expansion.
Sliding Backgroundfaq66Questions with sliding primary color background on hover and click. Smooth background animation reveal.
Glass Morphism Accordionfaq67Modern FAQ with glassmorphic cards, animated gradient blob effects, shimmer animations, and progress indicators. Mouse-tracking gradient for interactive feel. Perfect for modern design systems and premium brands.
FAQ with Side Heading and Numbered Cardsfaq68Two-column FAQ section with a badge, heading, and description on the left, and a stacked list of numbered question cards on the right. Each card opens to reveal a plain answer block below it with no separator line.
FAQ With Contactfaq69Numbered FAQ accordion beside a contact card with image, prompt and a contact CTA.
Collapsible Accordionfaq7Stacked cards with expandable sections. Use when you need to present multiple questions with full-length answers in a compact, organized format.
Two-Column FAQfaq70FAQ accordion split into two independent columns.
Minimal FAQfaq71Oversized single-column FAQ accordion with generous spacing.
Tabbed FAQfaq72Category-tabbed FAQ using shadcn Tabs with an accordion per category.
Sticky FAQfaq73Sticky intro and CTA beside a single-column FAQ accordion.
FAQ Cardsfaq74Always-open FAQ presented as a scannable grid of Q&A cards.
FAQ With Contact Imagefaq75Centered header above a two-column FAQ: a portrait image with a contact prompt and CTA on the left, and an expandable plus/minus accordion of questions on the right.
Editorial Two-Column FAQfaq76A two-column editorial FAQ pairing a sticky eyebrow, oversized heading, short note, and contact CTA on the left with a ruled, index-marked accordion of questions on the right.
Numbered FAQ Indexfaq77A type-forward FAQ with a sticky heading rail and a numbered accordion list of expandable questions.
FAQ with Contact Asidefaq78An accordion of studio FAQs paired with a bordered aside card inviting a direct conversation.
Sticky Split FAQfaq79A two-column FAQ with a sticky eyebrow, light heading, and support call to action on the left, and an interactive accordion of questions on the right.
Open List Layoutfaq8Questions with answers displayed below in a simple list. Best for FAQs with shorter answers that don't require expansion.
Two Column Answer Gridfaq80An always-open FAQ laid out as a two-column grid of numbered, hairline-separated question and answer entries, closing with a soft support panel that pairs a short prompt with two actions.
Grouped FAQ Columnsfaq81FAQ split into two labelled groups, each an independent accordion of ruled questions, so a long list stays scannable by topic; closed by a response-time note beside an outline pill CTA.
Topic Rail FAQfaq82A categorised FAQ whose topic rail is derived from the questions themselves and carries live counts, switching the accordion beside it and resetting it to the first answer on every change.
Objection Cardsfaq83An always-open FAQ that states four buying worries as quoted headings in a hairline matrix of cards, each answering in full and closing on a line of proof under a rule.
Hairline Answer Ledgerfaq84A compact FAQ with nothing hidden behind a click: three labelled groups of question and answer pairs set as two-column hairline rows, closing on a link to longer reading.
Live Search FAQfaq85An FAQ with a search field that narrows the list as it is typed, matching against topic, question, and answer, with every answer open on its own hairline row and an empty state when nothing matches.
Two Column Accordionfaq86An FAQ split across two columns of independent accordions, so opening one answer never closes another, closing on a soft support panel with two actions.
FAQ With Contact Panelfaq87An accordion FAQ set against a column that sticks while the answers scroll, holding an image tile that floats a live card for the engineer who wrote them and a direct booking action.
Good Fit Qualifierfaq88A qualifying FAQ that sets a checked good-fit column against a crossed not-for-you column, then answers the three questions that follow from them on two-column hairline rows.
Filterable Glossaryfaq89A jargon glossary whose letter filter is derived from the terms themselves, narrowing a two-column hairline definition list with an empty state and a suggest-a-term action.
Three Column Gridfaq9Q&A pairs arranged in a responsive grid layout. Ideal for displaying concise answers in a scannable, multi-column format.
Security Questionnaire Answersfaq90A procurement FAQ grouping security controls into hairline rows that pair each question with a tone-coded yes, partial, or not-yet chip and the detail behind it, closing on a security pack request.
Ask And Answered In Publicfaq91An open question FAQ pairing a soft panel that sticks while you scroll, holding a working question and email form, with the questions others sent recently answered as linked hairline entries.
Answer Routerfaq92A help section that asks two questions instead of offering a search box: the answers pick one written answer from a list of routes, an image tile beside them floats the answer as a live assistant card and changes with it, and a soft panel underneath keeps a way through to a person.
Always-Open Question Gridfaq93A two-column question grid with every answer already visible on a hairline, so nothing is hidden behind a toggle, closed by a soft panel pointing at a direct reply.
First Call Questionsfaq94A split FAQ: a sticky column with an eyebrow, a serif heading that settles in word by word, an intro and a pill action, beside a ruled accordion whose serif questions open to calm, plain answers.
Centred Accordionfaq95The 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.
Open Answers Gridfaq96An FAQ with nothing to open: a serif heading that settles in word by word beside the intro and a pill action, then six questions and answers laid out in a three-column ruled grid that arrive in turn.
Tabbed Accordionfaq97An FAQ sorted by topic: pill tabs under a centred serif heading that settles in word by word switch between groups, each blurring in a ruled accordion of serif questions, with a sliding-marker pill beneath.
FAQ Beside a Living Stagefaq98An FAQ in two columns. The left column holds the header, one borderless stage of fixed height where a reaction-diffusion pattern grows in theme colors behind a glass prompt card, and a contact line; on desktop it stays pinned while the page scrolls. The right column is a borderless accordion whose questions are separate muted panels, so opening an answer only lengthens that column and never moves the stage.
Accordion With Live Mediafeature1Accordion on the left, swappable media surface on the right. Each row picks its own media kind: image, video, or live registry-component asset.
Icon-Centered Grid Cardsfeature1073-column grid of centered feature cards with large icons and brief descriptions. Perfect for capability highlights, service features, or platform offerings.
Split Layout with Checklist Boxfeature108Two-column layout with heading/description on left and 2x4 grid of checkmark benefits on right. Great for feature highlights, benefit summary, or quick value propositions.
Masonry Gallery Layoutfeature109Masonry/columns layout gallery with variable height cards and linked images. Perfect for portfolio, project showcase, or irregular grid galleries.
Tabbed Feature Cardsfeature112Tab-based interface showing 3 cards per tab, with button toggles at top. Excellent for segmented features by department, plan, or use case.
Dashboard Stats Cardsfeature1152-4 column grid of stat cards with large numbers, labels, and percentage change indicators. Perfect for KPI dashboards, performance metrics, or key results display.
Checkbox Checklist Gridfeature1162-column grid of checklist items with checkbox icons and strikethrough styling. Great for progress tracking, launch checklists, or task lists.
Project Cards with Team Membersfeature117Responsive grid of project cards with team member avatar stacks. Ideal for active projects showcase, team portfolio, or ongoing work display.
Tech Stack Pills Gridfeature118Responsive grid of technology/tool badges with icons in bordered pills. Perfect for tech stack display, tools used, or integration showcase.
Goals with Progress Barsfeature119Responsive grid of goal cards with percentage progress bars and labels. Excellent for OKR tracking, quarterly goals, or progress visualization.
Category Tiles with Countsfeature120Responsive grid of category cards with icons and listing counts. Perfect for category browse, marketplace sections, or navigation options.
Rating Cards with Starsfeature121Responsive grid of feature review cards with star ratings and review counts. Ideal for feature ratings, user reviews, or quality metrics.
Stacked List with Dividersfeature122Vertical stacked list of linked topics with titles, subtitles, and chevron indicators. Perfect for documentation navigation, topic browsing, or content index.
Tool Cards with Tag Badgesfeature123Responsive grid of linked tool cards with descriptions and tag badges. Excellent for developer tools showcase, API documentation, or SDK listings.
Action Cards with CTA Buttonsfeature1252-column grid of action cards with descriptions and CTA buttons. Great for quick actions, getting started steps, or primary user journeys.
Impact Stats with Large Numbersfeature126Responsive grid of large stat numbers with labels and descriptions. Perfect for impact metrics, company statistics, or scale indicators.
Centered Stats with Large Typographyfeature130Center-aligned large stat display with minimal spacing and minimal decoration. Perfect for impressive scaling statistics or key performance numbers.
Video Tutorial Thumbnailsfeature1313-column grid of video thumbnail cards with play button overlay and duration badge. Ideal for video tutorials, product demos, or educational content.
Single Pricing Cardfeature134Single centered pricing card with price, feature list, and CTA button. Perfect for single plan display, pricing showcase, or product offering.
Integration Logos Gridfeature135Centered flexbox grid of company/product logos with grayscale hover effects. Excellent for customer logos, integrations, or partnerships showcase.
Numbered Steps Gridfeature136Responsive grid of numbered step cards with titles and descriptions. Perfect for process visualization, onboarding steps, or sequential workflows.
Bordered Grid Layoutfeature1383-column grid with border dividers between items, layout adapts to content. Great for core features grid, capabilities overview, or service sections.
Circular Icon Gridfeature139Centered grid of 6 icon buttons with circular backgrounds and labels. Perfect for tool navigation, quick action buttons, or feature access menu.
Service Offerings with Arrowsfeature144Responsive grid of service cards with descriptions and arrow icons. Ideal for services listing, solutions overview, or offering showcase.
Benefits Checklistfeature146Responsive grid of benefit items with checkmark icons and descriptions. Perfect for benefits list, value proposition, or key advantages.
Tech Stack Tool Gridfeature147Responsive grid of tool cards with icons, descriptions, and linked tiles. Excellent for tech stack showcase, integrated tools, or component library.
Contact Method Cardsfeature1493-column grid of contact option cards with icons, descriptions, and action text. Perfect for contact methods display, support channels, or customer service options.
Social Proof with Ratingsfeature150Centered card with star rating, review count, and stat proofs layout. Ideal for social proof, trust indicators, or customer validation.
Announcement Highlight Boxfeature151Centered single card with badge, heading, description, and highlight pill. Great for announcements, feature release highlights, or promotional callouts.
Icon Badge Pills Rowfeature152Centered flexbox row of inline feature badges with icons. Perfect for quick feature list, key benefits, or inline feature highlights.
Feature Comparison Tablefeature155Simple 3-column comparison table with feature names and check/cross icons. Essential for plan comparison, feature tier table, or pricing comparison.
Split Image with Bullet Listfeature157Two-column layout with left text content and right image, reversible. Perfect for feature explanation, product story, or benefit illustration.
Notification Status Listfeature158Vertical stacked notification-style list with items, descriptions, and status badges. Great for updates feed, changelog, or activity log display.
Centered Icon Cards Gridfeature1604-column grid of feature icons with titles and descriptions below. Perfect for capability highlights, feature icons, or simple feature grid.
Icon Row Feature Gridfeature1613-column grid of horizontal feature items with icon and text side by side. Clean layout for capability highlights and feature overviews.
Numbered Steps Gridfeature1623-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections.
Bento Feature Gridfeature163Asymmetric bento-style grid with a highlighted hero card spanning full width and smaller feature cards below. Great for showcasing a primary feature alongside supporting capabilities.
Scroll-Spy Sticky Sidebar Featurefeature164Sticky sidebar navigation with scroll-spy tracking. Left menu highlights the active section as users scroll through feature cards with images. Uses IntersectionObserver for real-time active state.
Horizontal Scroll Snap Cardsfeature165Horizontally scrollable feature cards with CSS scroll-snap. Cards scroll on mobile/tablet and flow as a regular grid on desktop. Each card has icon, title, description, and optional link.
Spotlight Glow Card Gridfeature166Interactive card grid with mouse-tracking radial gradient glow effect. Each card illuminates with a primary-colored spotlight that follows the cursor. Premium hover aesthetic inspired by Stripe and Vercel.
Terminal CLI Feature Showcasefeature167Features presented as terminal commands with outputs inside a realistic terminal window. Dark terminal aesthetic with syntax-colored commands, flags, and a blinking cursor. Unique developer-focused design.
Before/After Comparison Togglefeature168Interactive toggle that switches between two sets of feature items with staggered fade-in animation. Pill-style toggle button with distinct visual states for before and after. Great for product comparisons.
Infinite Marquee Feature Pillsfeature169Auto-scrolling marquee rows of feature pills with icons. Alternating scroll directions, hover to pause, and edge fade gradients. Eye-catching way to showcase many capabilities at once.
Expandable Accordion Cards with Imagefeature170Click-to-expand feature cards with smooth grid-rows animation. Each card reveals a detailed description and preview image when opened. Only one card expanded at a time. Compact yet information-rich.
Kanban Roadmap Boardfeature171Product roadmap presented as a kanban board with three swim lanes: Shipped, In Progress, and Planned. Each feature card has an icon, title, and status-colored tag. Transparent product development view.
Command Palette Feature Showcasefeature172Features displayed inside an interactive command palette UI with live search filtering, grouped results, keyboard shortcuts, and hover states. Inspired by macOS Spotlight and VS Code command palette.
Feature Card Carousel with Image Crossfadefeature173Single-card carousel with crossfading images, arrow navigation, and dot progress indicators. Each slide shows a full-width image with icon, title, and description below. Click or navigate to browse features.
Interactive Code Snippet Showcasefeature174Features paired with real code examples inside a code editor UI. Left sidebar lists features, right panel shows the corresponding code with filename tab and syntax styling. Developer-focused showcase.
Interactive Tech Stack Layersfeature175Platform architecture visualized as color-coded horizontal layers. Each layer is clickable and expands to reveal details. Unique layer numbering and distinct colors per tier. Great for showcasing infrastructure and architecture.
Empty Statefeature176A simple empty state section using the Empty component with icon, title, description, and a call-to-action button. Includes standard badge, heading, and description header.
Bento Feature Cardsfeature177Feature cards with 3+2 bento layout and flush media
Sticky Benefits Timelinefeature178Two-column benefits section with sticky left content and scrollable timeline
Sticky Stats Scrollerfeature179Two-column layout with sticky stats and scrollable feature cards
Sticky Image Scrollerfeature180Two-column layout with sticky image and scrollable feature cards
Feature Cards over Background Mediafeature181Glass-morphism feature cards grid over fullscreen background media with icon badges and invertColor support
Bento Feature Grid over Mediafeature182Bento-style grid with mixed card sizes over background media, featured large card spanning two columns
Split Image Card with Feature Stackfeature183Two-column layout with large image card on left and stacked glass feature cards on right
Numbered Editorial Cards over Mediafeature184Numbered feature cards in staggered grid over background media with editorial large-number styling
Image Feature Cards Grid over Mediafeature185Three-column image feature cards grid with sticky header over background media and glass-morphism styling
Stats + Feature Cards over Mediafeature186Hero-style stats row with feature card grid below over background media with glass-morphism styling
Two-Column Alternating Cards over Mediafeature187Alternating two-column feature cards with large icons over background media, left-right zigzag layout
Icon Strip + Detail Card over Mediafeature188Horizontal icon strip navigation with expandable detail card below over background media
Masonry Feature Cards over Mediafeature189Masonry-style two-column cards with alternating heights and image accents over background media
Large Icon Cards with Dividers over Mediafeature190Full-width feature cards separated by dividers with large icons and descriptions over background media
Tagged Feature Cards with Accent Barfeature191Three-column feature cards with accent top bar, tag pills, and icon badges over background media
Hero Card + Grid Cards over Mediafeature192Large hero card with image at top followed by three-column feature card grid over background media
Asymmetric Tall + Compact Cards over Mediafeature193Alternating rows with tall highlight card and stacked compact cards over background media
Three Cards With Asset Mediafeature194Three feature cards that swap an icon for a real micro-asset: a bar chart, a before/after stat, and a terminal prompt. Demonstrates how registry-pieces drop into block media slots.
Four Cards With Centered Iconfeature195Four equal feature cards on a clean background, each with a large circular icon badge above a bold h3 title. Ideal for outlining the steps or pillars of a service offering.
Module Cards Grid With Hover Liftfeature196Three-column grid of clickable feature cards. Each card has a top-left icon, top-right diagonal arrow, title, and description. Cards lift on hover with a configurable accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Two-tone heading splits a primary phrase from a colored highlight.
Alternating Image & Contentfeature197Zig-zag layout where each feature alternates an image with a content block — a colored icon badge, bold title, and description. Configurable icon badge accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Ideal for product modules, services, or capabilities.
Tabbed Plan Cards With Checklistfeature198Tab-switched grid of plan cards. Each card shows title, full-width CTA button, subtitle (price), description, and a checklist with check icons. Layout is responsive: ≤2 cards center as flex, multiples of 4 use a 4-column grid, otherwise a 3-column grid. Ideal for pricing, plan comparisons, and tiered packages.
Feature with Side Heading and Icon Gridfeature199Two-column feature section with a large heading on the left and a 2x2 grid of feature cards on the right, each with a large badge icon, title, and description.
Alternating Rows With Mixed Mediafeature2Hero header with a CTA, then alternating image-left / image-right rows. Each row's media slot accepts an image, video, or live registry-component asset.
Feature with Two-Column Checklist and Imagefeature200Two-column feature section with badge, heading, description, a 2-column checklist of icon items (defaults to check icon), and CTA on one side, with a square image on the other. Image position is configurable.
Feature with Numbered Process Steps and CTA Cardfeature201Centered header followed by a 4-step numbered process row with arrows between cards on desktop, plus a wide CTA card with badge, heading, description, button, and image.
Feature with Side Heading and Custom Tabsfeature202Two-column feature section with badge, heading, and multi-paragraph copy on the left, plus a custom tab strip and panel on the right.
Feature with Stats Grid and Imagefeature203Two-column feature section with heading, description, and a 2x2 stats grid (icon card, value, label) on one side and a square image on the other. Image position is configurable.
Feature with Image Carousel and Lightbox Modalfeature204Centered header followed by a side-by-side image carousel (3 visible on desktop, 2 on tablet, 1 on mobile) with prev/next arrows and dots. Tap an item to open a full-size modal lightbox with its own navigation.
Feature with Split Header and Service Cardsfeature205Two-column header — badge, heading with an accent-colored highlight on the last phrase, and intro paragraph on the left, with a supporting paragraph on the right — followed by a three-card grid of services with outlined Lucide icons and a learn-more link.
Centered Heading with CTA and Icon Rowfeature206Centered 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.
Service Highlightfeature207Service section: eyebrow and large title with a right-aligned summary, a wide hero image, and a bold closing statement.
Expertise Accordionfeature208Horizontal expanding accordion of services with vertical labels, expanding to reveal image, description and tag pills.
Sticky Servicesfeature209Sticky intro column beside a scrollable stack of numbered service blocks.
Service Cardsfeature210Three-up service cards with accent icon chips and learn-more links.
Alternating Featuresfeature211Alternating image-and-copy feature rows with checklists.
Capabilities Bentofeature212Asymmetric bento of capabilities: an image hero cell, accent cell and icon cells.
Tabbed Featuresfeature213Tabbed feature showcase with copy, checklist and screenshot per workstream.
Feature Tabs Explorerfeature214Centered header above a bordered explorer: a vertical icon tab rail switches between feature panels, each pairing a preview image with a benefit checklist and CTA.
Feature Showcase Triofeature215Centered header above a three-card showcase: a tagged copy panel with CTA, a centered preview, and a divided list of included benefits.
Feature Rows With App Previewfeature216Centered header above stacked feature rows, each pairing a numbered copy panel and tall app preview with a benefit list, trusted-by avatars, rating, and download CTA.
Impact Grid With Mediafeature217Centered eyebrow, heading and dark CTA above a split block: a tall labeled image on the left and a two-by-two grid of icon feature cards on the right.
Why-Choose Media Prooffeature218Centered 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.
Indexed Services Listfeature219Eyebrow and heading with a CTA on one row, above stacked service cards that each line up an index and growth stat, a thumbnail image, and a title with description and tag chips.
Setup Checklist with Progress Sidebarfeature22Multi-step checklist with status indicators, ETAs, and a sticky sidebar showing completion progress and key stats. Perfect for onboarding flows, implementation guides, or setup wizards.
Zigzag Feature Rowsfeature220Centered header above three zigzag rows, each pairing a 4:3 image with a title, description, and tag chips on alternating sides.
Bento Icon Gridfeature221Header with eyebrow, big heading and outline CTA above a five-card bento grid with a tall lead cell, lucide icons, titles and descriptions.
Numbered Process Stepsfeature222Process section with a header and a vertical list of four numbered steps separated by top borders.
Tabbed Phase Showcasefeature223Header with a tabbed showcase where each tab pairs a rounded image with a phase title and description.
Capability Checklist Splitfeature224Two-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.
Compact Principles Gridfeature225Compact principles grid with a header and a four-up row of top-border items, each with a lucide icon, title and short description.
Pros and Cons Comparisonfeature226Comparison feature with a header and two side-by-side panels: a muted cons list with X icons beside a solid dark pros list with check icons.
Sticky feature list with imagesfeature227Sticky left intro paired with a stacked, numbered list of feature blocks, each with a title, description, and small image.
Annotated core layoutfeature228A central core image framed by feature cards that each reference how a module connects back to the system's core.
Accordion Image Syncfeature229Interactive feature section with an eyebrow, big heading and description above a two-column layout: a single-collapsible accordion of feature items on the left and a sticky image on the right that swaps to the active item's image on click.
Quality Scorecard Gridfeature23Six-card grid displaying quality metrics with icons, progress bars, and numeric scores for performance, security, and reliability. Perfect for system health dashboards or compliance overviews.
Three editorial pillar columnsfeature230Three tall portrait images in a row, each paired with a padded numeral, title, and description — a monochrome statement of guiding principles.
Feature Spotlight Tabsfeature231Clickable tab chips switch a large spotlight panel with image, title, description, and a checklist, with an optional auto-loop.
Stat-backed feature rowsfeature232Ruled feature rows that pair a large figure with a title and supporting copy, framing each capability by the number it earns.
Compact two-column icon feature listfeature233A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description.
Click-to-swap sticky thread listfeature234A two-column feature section: a vertical list of clickable thread buttons on the left swaps a sticky image panel on the right, with the active item carrying full emphasis and a left border.
Feature & Testimonial Hybridfeature235Feature and testimonial hybrid: a quote card on bg-muted beside a 2x2 grid of icon feature highlights.
Feature manifesto gridfeature236A text-only feature manifesto: a hairline-bordered grid of short statements, each a bold title and a single explanatory line.
Product Accordion Featurefeature237A product feature with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, an image tile carrying a floating records panel, and an interactive accordion of capabilities.
Value Prop Panelfeature238A value proposition with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, a wide image panel holding a floating segmented stat card, and a three-column benefit row.
Value Prop Triofeature239A value proposition with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, and three portrait image tiles that each float a live micro-asset above a title and description.
Interactive Workflow Previewfeature24Hover-activated tabs on the left reveal detailed workflow previews with images, bullet points, and action links on the right. Perfect for showcasing product capabilities or multi-step features.
Bento Asset Gridfeature240A bento feature grid with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, and four mixed-width image tiles that each float a live product micro-asset above a caption.
Icon Capability Gridfeature241A capability section with an eyebrow over a hairline rule, a two-column heading, and a responsive grid of icon-led features with tinted chips, titles, and descriptions.
Connected Workspace Featurefeature242A feature with an eyebrow over a hairline rule, a two-column heading, and two rich cards that each float a live micro-asset above an eyebrow, title, and checked bullets, closing with a works-with integrations strip.
Compact Asset Cardsfeature243A feature with an eyebrow over a hairline rule, a two-column heading, and three bordered cards that each float a compact live micro-asset above a title and description.
Command Search Spotlightfeature244A centered feature with an eyebrow, light heading, and paragraph over a wide image tile that floats a live command search bar, followed by a row of quick-filter chips.
Deliverables Ledgerfeature245Scope section listing what a project actually ships: three ruled columns, each with a track title, a one-line summary and a dotted-rule inventory of deliverables, closed by a note and a pill CTA.
Switchable Capability Ledgerfeature246Capability section with a row of pill filters that swap the list below: each entry becomes a ruled three-column row holding the title, an explanation and the typical duration pinned right.
Photo Callout Markersfeature247Wide photograph carrying numbered markers placed by percentage coordinates, paired with a ruled four-column list where the selected entry repeats the marker as a filled seal, darkens its rule and brings its text forward.
Alternating Proof Rowsfeature248Feature rows that alternate the image side on every second entry, each pairing an eyebrow, display title and explanation with one oversized outcome figure on its own rule, headed by an outline pill CTA pinned to the top right.
Image Topped Discipline Cardsfeature249Four soft cards each opening with a full-bleed photograph, then a display title, one explanatory sentence and a ruled tally line pinned to the bottom of the card.
Hero Image with Floating Stat Cardfeature25Split layout featuring a styled hero image with animated floating stat badge alongside a feature checklist. Perfect for wellness apps, nutrition platforms, or lifestyle product benefits.
Sticky Photo With Notesfeature250A single tall photograph pinned with position sticky, captioned without a rule, while a column of eyebrow-led notes scrolls past it, each note after the first opening on its own hairline.
Deliverable Cards With Mediafeature251Three soft cards, each floating its own media piece over a dotted field before an eyebrow, a title, an explanation and a ruled delivery note, laid out as a plain grid with no horizontal scrolling.
Overlapping Material Collagefeature252Feature split pairing a three-image collage, where a square crop overlaps the tall frame behind a background-coloured edge, with a statement and a ruled key-value list of material facts.
Wide Band With Field Factsfeature253Cinematic 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.
Photographic Year Ledgerfeature254Timeline where every ruled row lines up a year, a photograph from that moment and the explanation of what forced the change, headed by a pill CTA on the heading line and stacking to a readable block on mobile.
Current Work Tile Gridfeature255Section that shows what the studio is running right now: a statement with the paragraph and pill CTA on one baseline, then three tall project tiles whose ruled captions name the client and the stage the work is at.
Annotated Centerpiecefeature256A feature that centers one image tile floating a live metrics panel and annotates it from both sides with four icon callouts that collapse under the tile on smaller screens.
Capability Selectorfeature257An 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.
Two-Up Capability Cardsfeature258A feature built from two tall bordered cards, each stacking an image tile with a live asset over a small kicker, an editorial title, a checked list on hairlines, and its own outline action.
Soft Panel Capacity Reportfeature259A feature contained in one soft panel: heading and paragraph beside an image tile floating a live breakdown chart, closing on a hairline row of four capacity figures.
Feature Card Grid with Hover Effectsfeature26Six-card grid with icons in rounded containers that animate on hover, plus titles and descriptions. Perfect for wellness platforms, health apps, or service benefit showcases.
Scrolling Sequence Railfeature260A feature whose five steps sit on a horizontally scrolling card rail below a two-column header, each card carrying a numbered index, a title, a paragraph, and a timing note on a hairline.
Hairline Capability Matrixfeature261A feature laid out as a hairline matrix of cells, where a wide first cell carries an image tile floating a live trend metric and the remaining cells hold icon-led capabilities.
Expanding Proof Rowsfeature262A feature of full-width hairline rows that expand in place, revealing a paragraph beside an image tile that floats a different live asset for each way of evaluating the product.
Day Timeline Rowsfeature263A feature that walks through one working day as hairline rows stamped with the time of day, with a live approval asset dropped inline on the entry that needs showing rather than telling.
Sticky Reference Listfeature264A feature with a heading column that sticks while three labelled groups of checked capabilities scroll past it, closing on a footnote under a hairline.
Staircase Asset Triofeature265A feature whose three image tiles step down the page in a staircase on large screens, each floating a different live asset above a small kicker, title, and paragraph.
Figure-Led Evidence Rowsfeature266A feature that opens on a tall image tile floating a live before-and-after card, then sets out its evidence as hairline rows leading on an oversized light figure paired with an explanation and the method behind it.
Center-Line Journey Timelinefeature267A 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.
Full-Bleed Workspace Bandfeature268A feature that breaks its media out of the container into a full-bleed image band floating a live view switcher, framed by a two-column header above and three numbered captions below.
Tool Directory Cardsfeature269A two-column directory of free tools, each card a linked row with a tinted icon tile, a name and one line on what it does, closed by a seal button to the full list.
Reading Paths By Time Availablefeature270Three columns keyed to how long the reader has rather than what they want, each opening with the time span, a promise for it, and the two or three pieces that fit inside it.
Format Anatomy Tabsfeature271A tabbed breakdown of what each publishing format commits to, pairing a stated position with a specification list on one side and a real example card on the other.
Recorded Companion Bandfeature272A wide photographic band with a scrim, floating a live video card in the middle of it, over three hairline notes that state how the recordings are made and what ships with them.
Question And Answer Ledgerfeature273A two-column ledger pairing the question a reader sent on the left with the thing that was built in response on the right, under column labels that only appear on desktop.
Archive By Year Columnsfeature274One column per year on a hairline, each stating the year as a figure with its published count beside it, a sentence on what that year was about, and the pieces that defined it.
Drifting Services Gridfeature275A services section with a serif heading that settles in word by word beside its intro and pill button, then four staggered portrait cards whose photographs drift inside their frames as the page scrolls.
Sticky Chaptersfeature276A scroll-led feature: a serif heading settling in word by word beside a pill action, then numbered chapters that scroll past a pinned photograph, each one swapping the image with a soft blur and brightening its own title as it reaches the centre of the viewport.
Six Promisesfeature277A values grid: a serif heading settling in word by word beside the intro and a pill action, then six numbered promises in three columns whose top rules draw themselves in one after another, over a slowly drifting soft light.
Two Doors Tabsfeature278A tabbed comparison under a centred serif heading that settles in word by word: pill tabs switch between approaches, each blurring in a drifting portrait photograph beside a serif title, a description, a ruled fact list and a sliding-marker pill.
Photo Band Featurefeature279A feature that opens on a rounded photographic band with a dark scrim and film grain, the photograph drifting as the page scrolls under a serif heading that settles in word by word and a light sliding-marker pill, then three ruled points beneath it.
Process Timeline with Duration Badgesfeature28Responsive timeline showing sequential steps with icons, descriptions, and time estimates (horizontal on desktop, vertical on mobile). Perfect for onboarding flows, how-to guides, or getting-started sections.
Hover Room Listfeature280A ruled index of offerings beside a pinned photograph: hovering or focusing a serif line brightens it, slides an arrow into place and blurs in the photograph of the room it happens in, all under a serif heading that settles in word by word, an intro and a pill action.
Three Icon Columnsfeature281The classic three-column feature: a centred serif heading that settles in word by word and an intro, three columns with a round muted icon, a serif title and a description that arrive in turn, and a sliding-marker pill beneath.
Alternating Rowsfeature282The classic zigzag: under a serif heading that settles in word by word and a pill action, rows alternate a photograph drifting inside its frame with an eyebrow, a serif title, a description and an arrow link, switching sides on every row.
Checklist Splitfeature283A 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.
Statement and Fourfeature284A long serif statement that settles in word by word with a pill action on the left, and on the right four numbered, ruled points with serif titles and short descriptions that arrive in turn.
Sticky Icon Listfeature285A feature list with a sticky column, where a serif heading settles in word by word above the intro and a pill action, beside ruled rows that each blur in with a round muted icon, a serif title and a description.
Spotlight Panelfeature286A single feature spotlight inside one soft muted panel: an eyebrow, a serif heading that settles in word by word, an intro, two ruled points and a sliding-marker pill on the left, and a square photograph drifting inside its frame on the right.
Photo Stepsfeature287Three numbered steps in columns, each topped by a photograph that drifts inside its frame, with a serif title and a description, under a serif heading that settles in word by word and a sliding-marker pill.
Honest Comparisonfeature288An us-and-them comparison under a centred serif heading that settles in word by word: an ink column and a muted column list the same points with ringed checks and dashes that arrive one by one, and a sliding-marker pill closes it.
Quote Inset Featurefeature289A single feature explained beside proof: a serif heading that settles in word by word, an intro and a pill action on the left, a soft muted quote card with a portrait on the right, and three ruled points beneath.
Platform Feature Cards with Metricsfeature29Six-card grid featuring icons, descriptions, and highlighted stats (latency, uptime, user counts) with animated hover effects. Perfect for showcasing SaaS capabilities or enterprise platform features.
Six Cell Gridfeature290A ruled two-by-three grid of features, each cell with a bare icon, a serif title and a description, arriving row by row under a serif heading that settles in word by word and a sliding-marker pill.
Photo Tilesfeature291Four linked photo tiles in a two-by-two grid, each photograph drifting inside its tile under a soft scrim with a serif title, a line of description and an arrow that lifts on hover, beneath a serif heading that settles in word by word and a sliding-marker pill.
Install Ask Ship Stepsfeature292Three numbered columns under rules that draw in from the left as they scroll into view: the first carries a rounded pill that copies the install command on click, the next two show a sample prompt and a resulting file path in muted mono panels. Serif headline settles in word by word, a sliding-marker pill sits at the right end of the header.
Agent Transcriptfeature293A split feature: on the left a serif headline that settles in word by word, an intro, a rounded pill that copies the install command on click and a sliding-marker pill; on the right a muted transcript panel where a short exchange with the agent appears message by message, one reply carrying a page preview that blurs in and drifts on scroll.
Six Gains Ruled Gridfeature294A header with a serif headline that settles in word by word and, at its right end, a rounded pill that copies the install command on click; below it a ruled two by three grid of thin icons, serif titles and short paragraphs that settle in one after another as they scroll into view.
Before and After Columnsfeature295A centred serif headline that settles in word by word, then two columns: a muted panel listing how an agent improvises today and an ink panel listing what it does once the library is installed. Between them, on a hairline, sits the pill that copies the install command on click.
Sticky Command Listfeature296A sticky left column holds the eyebrow, a serif headline that settles in word by word, an intro, a rounded pill that copies the install command on click and a sliding-marker pill; on the right a long ruled list of numbered points settles in row by row as the page scrolls past.
Photo Band Commandfeature297A rounded photographic band inside the container: the photo blurs in and drifts on scroll under a scrim and film grain, a serif headline settles in word by word, then a frosted pill that copies the install command on click beside a light sliding-marker pill, and a ruled row of three short points along the bottom.
Ask At Any Size Tabsfeature298A header with a serif headline that settles in word by word and a pill that copies the install command on click, then a rounded pill tab list (pages, sections, components). Each tab pairs a title, a paragraph and a short list of example prompts in mono with a photo that blurs in and drifts on scroll.
Turning Requests Panelfeature299A centred serif headline that settles in word by word, then an ink panel that cycles through short request and reply pairs: the request in serif, the reply in mono a beat later, with thin progress bars to jump between them and a pause on hover. A pill that copies the install command on click and a sliding-marker pill close the section.
Service Grid With Iconsfeature3Centered header, three-column grid of capability cards, and an optional CTA with bottom text. Each card leads with a Lucide icon.
Before/After Comparison Cardsfeature30Side-by-side comparison cards with bullet lists showing pain points vs. solutions after transformation. Perfect for demonstrating product value, workflow improvements, or competitive advantages.
Linked Card Gridfeature300Six hairline cards in a three-column grid, each one a whole link carrying a ringed icon, a serif title, a line of context and an arrow that lifts on hover, under a serif heading that settles in word by word beside a sliding-marker pill.
Linked Card Railfeature301A horizontal rail of linked cards that starts in line with the heading and bleeds off the right edge: arrow buttons and snap points move it a screen at a time, and each card pairs a drifting photograph with a serif title, a meta line and an arrow that lifts on hover.
Grouped Link Columnsfeature302Three columns of ruled links under their own small-caps headings, each link a serif label over a line of context that fades on hover, so a whole directory of pages sits in one section under a heading that settles in word by word.
Sticky Header Linked Cardsfeature303The heading, intro and pill stay pinned in a sticky column while linked photo cards scroll past in pairs beside them, each photograph drifting inside its frame under a serif title, a meta line and an arrow that lifts on hover.
Spotlight and Linked Rowsfeature304One tall photographic card carrying the page worth reading first, beside a ruled column of three compact rows that split the remaining height evenly; every card and row is a whole link with an arrow that lifts on hover.
Hover Photo Link Listfeature305A ruled list where every row is a link and hovering or focusing one fades a pinned photograph in beside it, the resting rows dimmed to half so the row under the cursor is the only one at full strength.
Two Linked Doorsfeature306Two tall cards, each one a whole link: a photograph that drifts inside its frame above a quiet label, a serif title, an intro, a short dotted list and a closing arrow link pinned to the foot of the card.
Linked Figure Cardsfeature307Four hairline cards, each a whole link that leads with a large serif figure and an optional unit, then a title, a line of context and an arrow that lifts on hover.
Linked Index Chipsfeature308An alphabetical index: each ruled row pairs a serif letter with a wrapped row of pill links, so a long glossary of pages stays scannable under a heading that settles in word by word.
Linked Step Cardsfeature309Three numbered cards on a muted fill, each one a whole link that inverts to ink on hover, carrying a serif title, a paragraph of what happens at that step and a closing arrow link.
Intro and Linked Listfeature310An intro and a pill on the left against a compact ruled list on the right, where every row is a link carrying a question, a short meta value and an arrow that lifts as the row tints.
Linked Photo Cardsfeature311Three bordered cards, each one a whole link with a photograph drifting across its top, a quiet category line, a serif title, an excerpt and an arrow pinned to the foot of the card.
Chapters Railfeature312A 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.
Timeline Railfeature313A pinned scroll feature section for a heritage house built on the scroll-rail component, set on a dark surface: the heading, intro, an Arrow Pill and an underline link open a century-long timeline that travels sideways as the page scrolls. Each milestone pairs a photograph of its own size and proportion with a very large light year numeral, a short title and one sentence, all hung on a continuous hairline with a dot per year. Older photographs are printed in monochrome or faded tones, each photograph drifts inside its frame, numerals drift against the travel, and text brightens as its milestone reaches the middle. A thin progress line along the bottom fills with the scroll. Reduced motion turns the timeline into a plain horizontal scroll.
Selected Work Railfeature314A pinned scroll feature section for a design studio built on the scroll-rail component: the eyebrow, heading, intro, an Arrow Pill and an underline link stay fixed in a header row while a rail of large project cards slides sideways beneath as the page scrolls. Each card is a link with a cover photograph that drifts inside its frame, the client, year, a one-line summary and the disciplines, and it dims gently until it reaches the middle. A closing panel with a project count and an Arrow Pill ends the rail, and a thin hairline under the rail shows how far along it is. Every rail setting passes through the rail prop. Reduced motion turns the rail into a plain horizontal scroll.
Services Slide Railfeature315A pinned scroll feature section for a landscape architecture studio built on the scroll-rail component, set on a dark surface. A header with an eyebrow, heading and one-line intro stays fixed at the top while five wide service slides travel sideways beneath it as the page scrolls. Each slide pairs a tall photograph that moves slower than its frame with a large thin numeral, the service title, two sentences, a short list of deliverables between hairlines and an underline link, and the text brightens as its slide reaches the middle. A closing line with an Arrow Pill ends the rail, and a hairline along the bottom fills with progress. On phones the slides stack the photograph above the text. Reduced motion turns the rail into a plain horizontal scroll.
Figures Railfeature316A pinned scroll feature section for an impact report built on the scroll-rail component: the heading, intro, an Arrow Pill and an underline link open a row of figures that travels sideways as the page scrolls. Each figure panel pairs a large number and a one-line label with its own small chart drawn in the text color, a filling bar, a field of dots, a sparkline, a ring, a two-year comparison or a stacked share with a legend, which draws itself when the panel reaches the middle and resets when it moves back. A short context paragraph brightens as the panel arrives, photographs with inner parallax break up the rhythm, and a closing line with its own button ends the rail. Reduced motion turns the rail into a plain horizontal scroll with every chart drawn.
Voices Railfeature317A pinned scroll testimonial section for a small hotel built on the scroll-rail component, set on a warm muted surface: the heading and intro open a rail of guest quotes that travels sideways as the page scrolls. Each quote is a large serif pull quote with a faint oversized quotation mark drifting behind it and a byline with a round portrait, name and role, and quotes brighten as they reach the middle. Short and long quotes alternate in width, and a tall photograph that moves slower than its frame sits after every second quote. A rating summary with an Arrow Pill ends the rail. Reduced motion turns the rail into a plain horizontal scroll.
Collection Railfeature318A pinned scroll feature section for a furniture and homeware studio built on the scroll-rail component: an eyebrow and heading sit in a fixed header with an underline link to the shop, while a new collection travels sideways beneath it as the page scrolls. Each product rests on its own softly tinted plate like a print on a mat and lifts slightly on hover, with its name, price, a one-line material note and a small add to bag button below. Every third panel is a wider room photograph that drifts inside its frame, with a one-line caption. A thin line under the rail fills with the scroll. Reduced motion turns the rail into a plain horizontal scroll.
Places Railfeature319A pinned scroll feature section for a coffee house with rooms in several cities, built on the scroll-rail component: the heading, intro, an Arrow Pill and an underline link open a travel guide that moves sideways as the page scrolls. Each location is a tall photo card with the picture moving slower than its frame, and a soft shade at the foot holding the city name, the neighborhood, a two-line address, the opening hours and a Get directions link. The city names also run as a giant faint row behind the cards, drifting at their own slower pace for depth, and a quiet closing line ends the rail. Reduced motion turns the rail into a plain horizontal scroll.
Stacking Program Cardsfeature320A scroll feature section for a clinic and retreat where five large program cards pin one after another and slide up over each other like a physical deck. Each covered card scales down a little and darkens under a solid shade as the next one arrives. Every card pairs a large number, the program title, two sentences, three facts between hairlines and an underline link with a large photograph that settles from a slow zoom as the card comes into view. Cards alternate between sand, sage and deep forest surfaces, and the eyebrow, heading and intro rise in above the stack. Reduced motion shows the cards as a plain list.
Detail Tourfeature321A pinned scroll feature section that tours one large photograph like a camera move. It opens on the whole picture of a recording studio, then glides and zooms into five details in turn, holding at each one, and eases back out to the whole picture at the end. Each stop is set in the demo data as a point and a zoom, and the camera breathes out a little between close-ups while a soft vignette tightens as it moves in. Beside the photograph, the eyebrow and heading stay put while one detail at a time crossfades in with its title and two sentences, above a row of hairline segments that fill as the tour goes on. The tour closes with a short line, an Arrow Pill and an underline link. On phones the text sits in a sheet below the photograph. Reduced motion shows the whole photograph with the details as a plain list.
Expanding Journey Stripsfeature322A pinned scroll feature section for a walking travel company, set on a dark surface. Under an eyebrow and heading, five tall photo strips stand side by side, and scrolling opens them one at a time: the open strip glides wide while the others close to narrow slivers carrying a number and a vertical title. The section holds on each journey before gliding to the next, and the photographs are cropped rather than rescaled as the strips change width. The open strip shows its title, length and season, one sentence and an underline link over a soft shade, and clicking a closed strip scrolls to it. On phones the strips become stacked bands that open in height. Reduced motion shows every journey at once in equal strips.
Manifesto Readingfeature323A pinned scroll feature section for a design studio built around one large statement. As the page scrolls, the words of the manifesto light up one after another in a soft reading wave, and three small rounded photographs open inside the sentence between words as the wave reaches them, pushing the text aside. Once the whole statement is lit, a signature row with a round portrait, name, role fades in below. A light or dark surface can be chosen with the tone prop. Screen readers get the statement as plain text. Reduced motion shows the fully lit statement with its photographs and signature.
Before and After Restorationfeature324A pinned scroll feature section for a restoration studio that shows three projects as before and after photographs. As the page scrolls, a soft vertical seam travels across the frame and wipes each room from its worn state to the restored one, then the frame crossfades to the next project. A round handle on the seam can also be dragged, or moved with the arrow keys, to compare by hand. A side column carries the eyebrow, heading and intro, then each project's place, title and one sentence with a before and after label pair that follows the seam. When no before photo is given, the after photo is aged with a faded, stained treatment so the wipe reads as a restoration. Reduced motion shows each pair side by side.
Scene Stage With Feature Tabsfeature325A vertical list of features beside a large stage that shows one live isometric scene. Selecting a feature opens its description and fades the stage to that feature's scene. The list is a keyboard accessible tab list with arrow, Home and End keys.
Alternating Live Product Rowsfeature326A left-aligned header over feature rows that alternate sides. Each row pairs a wide stage holding a live product piece with a title, a description and a short checked list of points under a hairline.
Live Customization Playgroundfeature327A centered header over one framed panel: a live product card on a gradient stage beside a column of controls. A radius slider, a size slider, a solid or glass surface switch and a price slider change the card in real time, and a reset button returns it to the defaults.
Team Calendar Gradient Bentofeature328A left-aligned header over a four cell bento. One wide cell pairs its text with a glass product piece, and three equal cells beneath place a piece above a title and a sentence. Each cell has its own soft gradient that dissolves into the page behind the text.
Developer Workflow Mosaicfeature329A feature section with four borderless stages in a wide, narrow, narrow, wide mosaic, all the same height. Each stage has its own live background, two dithered 3D forms and two magnetic fields in different colors and densities, and holds one developer widget on glass: a deploy command, a file tree, an error budget gauge and a keyboard shortcut that responds to real key presses. A title and a short description sit under every stage.
Bento Grid Platform Overviewfeature33Asymmetric bento-style grid with mixed card sizes, color variants, eyebrow labels, and large stat highlights. Perfect for platform overviews, feature showcases, or capability summaries.
Times Of Day Sky Stagesfeature330A header split into heading and description above four tall, narrow stages of equal height, one per time of day. Each stage is a live sky with its own palette, sun position and cloud cover, from a pale morning to a night sky, and holds one small glass piece or widget in its center. The title and sentence sit under each stage on the page color, and on desktop every second column drops to form a stagger.
Staggered Stage Stripfeature331A feature section with a left-aligned header above a strip of three borderless stages of equal fixed height. On desktop the strip zigzags: the outer columns put the stage above its caption and the middle column puts the caption above its stage, each caption in an area of fixed height so the stages stay aligned. Every stage carries its own whirlpool gradient, a different palette, arm count and center per stage, fading into the page behind one glass product card.
Room Types Strip With Material Backgroundsfeature332A left aligned header above a horizontal strip of four tall, narrow borderless stages of equal height. Each stage is filled with its own animated background, pleated fabric or tile mosaic in a different pastel palette, that fades into the page toward the bottom, where a title and one sentence sit in a fixed caption area. On small screens the strip scrolls sideways with snap points.
Service Card Carouselfeature333A joined row of square service cards in a carousel, five across on wide screens. Each card centers an icon or a small image, a title and a Details link. The cards can be inverted, use the primary color, sit on the card surface, or take any custom background and text color. Previous and next arrows sit under the cards at the bottom right.
Three Column Text Explainerfeature334Three equal text columns, each with an optional 4:3 photo on top, a bold title and a long paragraph, for explaining related products or policies side by side. An optional heading and intro sit above. The columns stack on small screens.
Numbered Reasons Listfeature34Two-column grid of numbered items (01, 02, etc.) with circular badges, titles, and descriptions. Perfect for why-choose-us sections, benefits lists, or key differentiators.
Two-By-Two With Icon Tilesfeature4Centered headline, four feature tiles in a 2x2 grid, and a CTA. Each tile leads with a large Lucide icon and a short description.
Compact Two-Column Capabilitiesfeature5Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon.
Accordion Feature Checklistfeature53Expandable accordion sections with category headers and checkmark-style feature lists in a two-column grid. Perfect for organized feature overviews and pricing page inclusions.
Two-Plan Comparison Tablefeature55Side-by-side comparison table with check/cross icons and text values for two plan tiers. Perfect for free vs premium comparisons and feature tier breakdowns.
Screenshot Gallery with Lightboxfeature593-column image grid with hover zoom icons and full-screen lightbox modal on click. Perfect for product screenshots, portfolio showcases, and visual feature tours.
Feature Walkthrough with Sticky Navigationfeature60Sticky sidebar navigation that scrolls to content sections with images and descriptions. Perfect for product feature tours, documentation pages, and guided walkthroughs.
Feature Cards with Status Ribbonsfeature613-column grid of feature cards with diagonal corner ribbons for labels like New, Popular, or Beta. Perfect for highlighting product tools, service tiers, or feature availability.
Use Case Image Cardsfeature633-column grid of image cards with text overlay, hover zoom effect, and arrow indicators. Perfect for showcasing team use cases, industry solutions, or department-specific features.
Feature Cards with Team Avatarsfeature652-column grid of feature cards with stacked team member avatar photos on each card. Perfect for showcasing who built each feature or highlighting team expertise.
Linked Feature List with Dividersfeature68Vertical feature list with horizontal dividers, hover arrows, and clickable titles linking to detail pages. Perfect for feature overviews with navigation to learn more.
Full-Screen Parallax Feature Sectionsfeature70Full-viewport sections with fixed parallax background images and overlaid text content. Perfect for immersive feature storytelling and dramatic product showcases.
Feature Cards with Customer Quotesfeature713-column grid of feature cards with embedded testimonial quotes, author names, roles, and avatars. Perfect for pairing features with social proof from real customers.
Horizontal Feature Stripfeature72Inline horizontal row of feature highlights with icons and vertical dividers between items. Perfect for trust signals, key benefits, or compact feature callouts.
Platform Architecture Diagramfeature733-column layout with parent categories and nested child items connected by visual branch lines. Perfect for showing platform architecture, integration layers, or feature hierarchies.
Interactive Feature Cards with Dual CTAsfeature742-column grid of feature cards with icons and two action buttons per card for demos and documentation. Perfect for interactive feature showcases with try-it-now options.
Product Cards with Badge Tagsfeature752-column grid of linked product cards with multiple badge tags and learn-more arrows. Perfect for showcasing product suites, solution offerings, or categorized tools.
FAQ Accordion with Plus/Minus Iconsfeature76Expandable FAQ accordion with plus/minus toggle icons and single or multi-open modes. Perfect for FAQ sections, help centers, and knowledge base pages.
Capability Carouselfeature8Looping carousel of capability cards with a centered media slot per card. Each slot accepts an image, video, or live registry-component asset.
Three-Step How-Tofeature9Three side-by-side step cards with a media surface anchored to the bottom of each card. Each slot accepts an image, video, or live registry-component asset.
Gym Location Finderfitness32Location section with map preview, address, hours, parking, and public transit info. Perfect for gym contact pages and multi-location fitness centers.
Transformation Galleryfitness33Before/after photo grid showcasing member transformations with weight loss stats and testimonial quotes. Perfect for fitness success stories and gym marketing.
Training Program Cardsfitness39Program grid with images, duration, frequency, skill level, and enrollment buttons. Perfect for fitness program catalogs and workout plan selection.
Honest Programme Matchfitness40A programme finder that argues with you: three questions land on one training block, and the card overlapping the photographic band answers in two columns, who it is for beside who should not take it, before the practical facts.
Class Schedule Herofitness5Full-screen hero showcasing today's fitness classes with instructor info and available spots. Perfect for gym landing pages and class booking systems.
Personal Trainer Profilefitness6Trainer showcase with photo, certifications, rating, and client stats in a floating card. Perfect for personal training services and fitness coaching pages.
Wine List Menufood10Elegant two-column wine menu with origin details, vintage years, and dotted price lines. Perfect for wine bars, sommeliers, and fine dining beverage menus.
Chef's Specials Featurefood11Alternating layout showcasing dishes with large images, chef's notes as blockquotes, and pricing. Perfect for highlighting signature items and chef recommendations.
Drinks Menufood12Beverage menu with glass/bottle pricing columns, category icons, and organized sections for cocktails and wines. Perfect for bar menus and drink lists.
Set Menu Pricing Cardsfood13Three-tier pricing cards for group dining with included items, minimum guests, and booking buttons. Perfect for prix fixe menus and event dining packages.
Dietary Filter Menufood14Interactive menu with dietary filter buttons (vegetarian, vegan, gluten-free) and allergen warnings. Perfect for health-conscious diners and inclusive restaurant menus.
Daily Specials Chalkboardfood15Dark-themed chalkboard-style menu with decorative corners, day labels, and timestamp. Perfect for daily specials, soup of the day, and rotating menu items.
Expandable Menu Accordionfood16Collapsible menu items revealing full images, calorie counts, protein info, and allergen badges. Perfect for detailed nutritional menus and health-focused dining.
Table Reservation Formfood3Complete reservation form with date picker, time slots, guest count, and contact fields alongside restaurant image. Perfect for restaurant booking pages and fine dining websites.
Hours & Contact Infofood38Weekly schedule table with today highlighted, holiday notice alert, phone/email buttons, and live chat. Perfect for restaurant contact pages and business hours display.
Multi-Location Directoryfood39Location cards grid with venue images, addresses, hours, phone numbers, and direction links. Perfect for restaurant chains and multi-venue businesses.
Seasonal Dish Featurefood4Featured dish spotlight with seasonal badges, availability dates, pricing, and order button. Perfect for highlighting limited-time menu items and chef specials.
Executive Chef Profilefood41Chef bio section with portrait, philosophy quote, training credentials, award badges, and social links. Perfect for chef introductions and culinary team pages.
Kitchen Team Gridfood42Team member cards with portrait photos, roles, experience badges, and hover image zoom. Perfect for staff introductions and restaurant about pages.
Culinary Journey Timelinefood43Vertical timeline with alternating content, year badges, milestone images, and connecting line. Perfect for chef stories and restaurant history pages.
Behind the Scenes Kitchenfood44Kitchen tour section with hero image, station features, certification badges, and tour booking CTA. Perfect for showcasing kitchen facilities and food preparation areas.
Events Calendarfood45Event listing with date badges, images, time/capacity info, pricing, and RSVP buttons. Perfect for wine tastings, themed dinners, and special occasions.
Online Ordering Hubfood47Delivery platform cards with logos, fees, and delivery times alongside pickup info with address and phone. Perfect for food delivery integrations and takeout ordering.
Gift Card Shopfood48Gift card purchase interface with preset amounts, custom input, digital/physical delivery options, and live preview. Perfect for restaurant gift card sales.
Fine Dining Herofood5Elegant full-screen hero with Michelin stars, awards, and decorative lines for luxury restaurants. Perfect for high-end dining establishments and tasting menu experiences.
Loyalty Rewards Programfood50Four-tier rewards program with points earning steps, benefit lists, and app store download buttons. Perfect for customer loyalty and membership programs.
Happy Hour Dealsfood51Split-layout promotion with image, schedule badges, and deal list showing original vs. discounted prices. Perfect for happy hour specials and limited-time offers.
Seasonal Menu Showcasefood52Seasonal menu section with availability dates, featured dish cards with hover effects, and CTA button. Perfect for promoting winter, spring, summer, or fall menus.
Value Meal Bundlesfood53Bundle pricing cards with images, savings badges, itemized contents, and order buttons. Perfect for family meals, combo deals, and catering packages.
Welcome Discount Bannerfood54New customer promotion with large discount display, copyable promo code, benefit checklist, and CTA. Perfect for first-time visitor offers and marketing campaigns.
Restaurant Image Carouselfood6Auto-playing image slideshow showcasing restaurant ambiance with slide titles and navigation controls. Perfect for restaurant homepages and venue presentations.
Dish Detail Pagefood61Product page with large image, dietary badges, rating/reviews, prep time, calories, quantity selector, and add-to-cart. Perfect for online food ordering and menu item pages.
Classic Menu Layoutfood7Traditional menu with categorized sections, dietary badges (V, VG, GF), and a legend. Perfect for restaurant menus and food ordering pages.
Featured Dishes Gridfood8Visual dish grid with image zoom on hover, overlay descriptions, and order buttons. Perfect for showcasing signature dishes and photo-driven menus.
Tabbed Menu Browserfood9Interactive menu with category tabs, accompanying images, and item listings with prices. Perfect for restaurants with multiple menu sections.
Split Brand Footerfooter10Two-column footer with brand logo, tagline, and copyright on left, navigation links on right. Perfect for startups and SaaS products wanting clean brand presentation.
App Showcase Footerfooter100Mobile app promotion footer with phone mockup screenshot, feature highlights, download stats, app store badges, and QR code. Perfect for mobile app marketing pages.
Four Column Footer with Partner Badgefooter101Corporate footer with four navigation columns covering institutional pages, solutions, product modules, and customer service contact details. Includes a partner badge image, centered copyright with project highlight, legal links, and social icons.
Mega Footerfooter102Complete studio mega footer with brand column, link columns, socials and legal bar.
CTA Footerfooter103Dark closing-CTA footer with a big statement, email and compact links.
Newsletter Footerfooter104Footer led by a subscribe form beside link columns.
Dark Studio Footerfooter105Dark footer with a wordmark, headquarters address, email and social row on the left; three link columns and a newsletter signup on the right; and a bottom bar with copyright, credit, and a long studio statement.
Wordmark Card Footerfooter106Footer 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.
Newsletter Footerfooter107Newsletter-forward footer — a parenthetical label and oversized heading beside an email field with a pill submit, over a ruled bottom bar of wordmark, nav and social links.
Oversized Wordmark Footerfooter108Footer with a brand intro and three link columns over a copyright bar, closed by one oversized wordmark cropped at low opacity so its lower third bleeds off the bottom edge.
Minimal Centered Footerfooter109Airy centered footer — a parenthetical label, a single oversized closing statement and a pill CTA, with one centered nav row, socials and a ruled copyright line.
Centered Social Footerfooter11Vertically stacked footer with centered logo, navigation links, social media icons, and copyright. Perfect for portfolios and personal brands wanting a symmetrical layout.
Contact Footerfooter110Contact-forward footer — a parenthetical label, a closing heading and oversized email, phone and address links beside compact link columns, with a pill CTA and a back-to-top bottom bar.
Ruled Index Footerfooter111Editorial directory footer — a parenthetical label and statement above ruled sitemap rows, each pairing a section title with a wrapping set of links, closed by a wordmark and copyright line.
Studio Wordmark Footerfooter112Architectural studio footer — four untitled link columns with a copyright and legal row up top, then an oversized wordmark paired with a discipline list and a closing tagline along the baseline.
Big Logotype Footerfooter113Footer led by a full-width oversized wordmark, then a newsletter field with an arrow submit and socials beside four titled link columns, closed by a quiet copyright line.
Navigation Statement Footerfooter114Footer that turns the menu into a statement — a parenthetical label over oversized nav links flowing with slash separators, with a back-to-top link and a sign-off line on the baseline.
Dark Sign-off Footerfooter115Inverted bg-foreground footer, centered — a parenthetical label, one closing statement, a single nav row and socials over a hairline copyright line.
Studio Locations Footerfooter116Footer for a studio with several addresses — a parenthetical label and heading over a ruled row of city names with addresses and directions links, closed by a nav, copyright and back-to-top bar.
Split CTA Footerfooter117Two-column footer — a parenthetical label, closing heading, pill CTA and email on the left beside a stacked oversized nav on the right, over a copyright and socials bar.
Live Studio Clock Footerfooter118Footer built around a live clock — the studio's local time ticks every second in oversized type, with a pulsing open/closed status, city and day, over a nav and copyright bar.
Editorial Newsletter Footerfooter119A light footer with a lowercase wordmark, a tagline, a newsletter signup, three link columns, and a bottom bar of legal links over a hairline rule.
CTA Footerfooter120A footer that opens with a light closing heading and accent buttons over a hairline rule, then a slim bottom bar with a lowercase wordmark, a link row, and copyright.
Minimal Centered Footerfooter121A compact centered footer with a lowercase wordmark, a short tagline, an uppercase link row, a social row over a hairline rule, and a copyright line.
Brand Column Footerfooter122A 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.
Publication Footer With Subscribe Rowfooter123A footer that gives its left half to a working subscribe row and its right half to three link columns, closed by a colophon line sitting opposite the legal links.
Valley Footerfooter124A photographic footer under a dark gradient scrim, soft drifting light and film grain: a serif closing statement that settles in word by word, a rounded newsletter field with a sliding-marker pill, three link groups, and a bottom row with the wordmark, social links and copyright.
Quiet Footerfooter125A light footer with a large serif wordmark, a tagline and a sliding-marker pill on the left, three link groups on the right, and a ruled bottom row with the copyright, social links and a smooth back-to-top control.
Centred Footerfooter126A 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.
Columns and Letter Footerfooter127A light footer with the serif wordmark, a tagline and a rounded newsletter field with a sliding-marker pill on the left, three link groups on the right, and a ruled bottom row with the copyright and legal links.
Wordmark Effect Band Footerfooter128A 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.
Enterprise Multi-Column Footerfooter13Comprehensive footer with brand section, four navigation columns, social links, and bottom legal links. Perfect for enterprise websites and established businesses with extensive site structures.
Social Bar Multi-Column Footerfooter15Four-column navigation footer with brand description and dedicated social media icon row in the bottom section. Perfect for media companies and brands with strong social presence.
Contact Info Multi-Column Footerfooter16Business footer with extended brand section including email, phone, and address, plus three navigation columns. Perfect for service businesses and agencies that need prominent contact information.
CTA Action Footerfooter18Footer with prominent call-to-action section featuring heading, description, and action buttons alongside navigation columns. Perfect for SaaS products driving sign-ups and conversions.
Newsletter Subscription Footerfooter19Footer with email subscription form, navigation columns, legal links, and social icons. Perfect for content sites and businesses building email lists.
E-commerce Trust Footerfooter20Online store footer with trust badges (secure checkout, free shipping, privacy), payment method icons, and shop navigation columns. Perfect for e-commerce sites building customer confidence.
Compact E-commerce Footerfooter21Centered minimal footer with horizontal navigation, trust badges, and payment method icons. Perfect for smaller online stores wanting a clean checkout-focused layout.
Full E-commerce Footerfooter22Complete online store footer with brand section, navigation columns, social links, trust badges row, payment icons, and legal links. Perfect for established e-commerce brands.
Social Media Showcase Footerfooter23Centered footer with prominent heading, large circular social media icon buttons, and minimal navigation. Perfect for creators and influencers driving social engagement.
Dark Themed Card Footerfooter27Footer wrapped in a dark rounded container with inverted colors, tagline, navigation columns, and social links. Perfect for modern SaaS and tech products wanting visual contrast.
Creative Agency Portfolio Footerfooter28Showcase footer with company stats, awards recognition section, navigation links, and trusted client logos. Perfect for design studios and creative agencies displaying credentials.
Mobile App Download Footerfooter29App promotion footer with App Store and Google Play badges, scannable QR code, and download stats. Perfect for mobile app landing pages driving app installations.
Restaurant Reservation Footerfooter31Fine dining footer with business hours, location details, phone number, menu links, and reservation button. Perfect for restaurants and hospitality venues.
Healthcare Services Footerfooter32Medical facility footer with emergency contact banner, service navigation, patient resources, and certification badges. Perfect for hospitals, clinics, and healthcare providers.
Travel Booking Footerfooter41Tourism footer with destination image cards, trip type links, support info, trust badges, and booking CTA. Perfect for travel agencies and vacation booking platforms.
Dental Clinic Footerfooter55Dental practice footer with dentist profile cards, service list, office hours, insurance info, and appointment booking button. Perfect for dental offices and oral care clinics.
Museum & Gallery Footerfooter69Cultural venue footer with current exhibition cards, visiting hours, admission pricing, membership options, and ticket button. Perfect for museums, galleries, and cultural institutions.
Winery & Vineyard Footerfooter73Wine estate footer with wine collection categories, tasting room hours, experience links, award badges, and booking button. Perfect for wineries, vineyards, and breweries.
Minimal Inline Footerfooter9Compact single-row footer with logo, horizontal navigation links, and copyright text. Perfect for landing pages and minimal websites that need simple site-wide navigation.
Masonry Caption Gallerygallery1Masonry gallery built with CSS columns so images keep their own heights, each captioned with its subject and place, and any frame opening a drawer that slides in from the right while the wall stays visible behind the scrim.
Overview Toggle Viewergallery10Square grid whose viewer holds two states: a single frame with caption and controls, or an in-place overview of the whole set that you can jump from without closing the layer.
Full Bleed Strip With Sheet Viewergallery11Edge-to-edge strip of tall frames opening a viewer where the picture fills the screen and the caption, note and thumbnails sit in a sheet that slides off the bottom when you want the frame uncovered.
Exhibition Wall Hanggallery12Works of different sizes hung on one centre line inside a matted wall panel, each with its own label, opening a viewer that shows the piece in a mount beside a museum wall label of medium, dimensions and year.
Catalogue Index Platesgallery13Printed-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.
Walkthrough Exhibition Railgallery14Long-scroll exhibition where every work sits in its own matted panel with a full label, beside a sticky rail whose numbered index follows the work in the middle of the screen and scrolls to any other on click.
Salon Hang Wallgallery15Label-free salon wall where works of four different spans pack tightly into a matted panel, opening a passe-partout viewer whose full-height side margins are themselves the previous and next controls.
Artist Room Indexgallery16Exhibition split into artist rooms, each with a sticky statement column beside its works, opening a viewer that shows the chosen piece large with the next one waiting as a thumbnail you can step straight into.
Acquisition Year Ledgergallery17Collection intake listed year by year with a summary beside each set of works, opening a viewer that scrolls rather than steps: every acquisition is a snap section and the header counter follows whichever fills the screen.
Edition Inspectorgallery18Matted edition cards opening a viewer that keeps the whole sheet and its detail crops in one place: pill controls swap what the large frame shows while the side column holds process, sheet size and edition.
Dark Room Fade Viewergallery19Inverted low-light room where staggered frames hang on a dark panel, opening a viewer with no chrome at all: the work fades up like a lamp on a dimmer, the caption follows it, and a dot rail walks the hang.
Lightbox Frame Gridgallery2Captioned image grid where any tile opens a full-screen lightbox on a dark scrim, with a frame counter, keyboard arrows, escape to close and previous and next controls beside the caption.
Paired Hang Comparegallery20Works hung two to a bay on staggered ruled cards, opening a viewer that can hold a second work beside the first: the frame splits, both pictures keep their own caption and the pair can be walked together.
Loupe Surface Studiesgallery21Square studies of material and surface, opening a viewer that hands you a loupe: a round window you drag across the work, redrawing whatever sits under it from the same file at a configurable magnification.
Archive Record Cardsgallery22Text-first archive index of reference, thumbnail, title and year, opening a record card with two sides: the work on the front and the registrar's acquisition, condition and storage notes on the back.
Wall Scale Viewergallery23Works listed with the sizes they are printed at, opening a viewer that hangs the piece in a photographed room and scales it as you switch size pills, so the dimensions stop being an abstraction.
Plan Chest Sheet Stackgallery24Works on paper listed as ruled plan-chest drawers with their contents and a peek of the sheets, opening a stack where the top sheet lifts clear of the pile before dropping to the back and the next one rises into its place.
Pick The Frames Taste Profilegallery25A gallery finder whose questions are photographs rather than sentences: three rows of frames are chosen by eye, and the result names the leading way of looking, shows the series that goes with it, and breaks the picks down as a share bar.
Cover Archive With Lightboxgallery26A square cover grid that names each picture only on hover and opens it full screen on click, where arrows and the keyboard walk the archive and a link leads into the issue itself.
River Stripgallery27A horizontal, snap-scrolling strip of photographs that starts in line with the heading and runs off the right edge, each frame carrying a serif subject and a small-caps place and month; steered by round arrow buttons, and any frame opens a filmstrip lightbox on ink with film grain, a counter, arrow and keyboard navigation and a thumbnail rail along the foot.
Light Masonrygallery28A three-column masonry of photographs in mixed aspects, each rising into view and drifting inside its frame as the page scrolls, with a serif subject and a small-caps place and month under every plate; any plate opens a paper-toned lightbox that sets the subject large beside the picture, turns pages by clicking either half of the plate, the arrows or the keyboard, and slides each plate in from the side it came from.
Plate Grid Lightboxgallery29An even three-column grid of photographic plates that open into an ink lightbox: every frame keeps the same ratio so the captions line up, arrows and keys turn the page, either half of the plate is clickable, and a plate that belongs to a page offers it as a link.
Filterable Album Gridgallery3Album gallery with pill filters that swap the whole set below, where any tile opens a light full-screen viewer: the frame hangs on the page surface while a side column carries the caption, the album summary, the controls and a plainly labelled thumbnail index.
Wide Slide Reelgallery4Single-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.
Filmstrip Stage Viewergallery5Cinematic stage frame with the caption and frame counter set on a gradient at its foot, round arrow controls on the picture itself, and a scrolling filmstrip below where the inactive thumbnails sit back at low opacity.
Mosaic Full Screen Viewergallery6Dense caption-free mosaic where every tile carries an expand seal and opens a full-screen viewer with arrow controls on the picture, escape and arrow keys, a counter, the caption and a thumbnail filmstrip.
Counter Scrolling Image Bandsgallery7Two full-bleed image tracks scrolling in opposite directions under a centered statement, pausing together on hover, where any frame opens a framed viewer: the picture sits in a mount on a scrim with its caption, position and controls beneath it.
Photo Book Spread Viewergallery8Photographs presented as printed spreads on a soft panel: two plates share a page with a centre rule, round controls turn to the next spread, and a bar index below tracks how far through the book you are.
Zoomable Justified Gallerygallery9Justified 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.
Vitals Dashboardhealth1Health metrics dashboard displaying vital signs like heart rate, blood oxygen, activity, and sleep with trend indicators. Perfect for wellness apps and health tracking platforms.
Health Statistics Displayhealth16Large-format statistics grid showcasing key metrics like member counts, satisfaction rates, and years of service. Perfect for healthcare organizations and wellness brands.
Care Overview Dashboardhealth17A 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.
Care Programme Cardshealth18Three 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.
When To Reach Outhealth19A 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.
Wellness Goals Trackerhealth2Daily wellness goals tracker with progress bars showing current vs target for water intake, steps, mindfulness, and meals. Perfect for habit tracking and fitness apps.
Clinic Visit Split With Card Clusterhealth20A split section for a clinic or care app. One side carries the heading, three ruled benefit lines and two buttons. The other is a muted stage where an appointment card, a video visit card and a prescription card step sideways and tuck under each other, stacking in a single column on phones.
Medical Specialists Directoryhealth3Doctor cards grid showing specialists with ratings, availability status, and next appointment slots. Perfect for healthcare platforms and telemedicine booking systems.
Wellness Hero Sectionhealth4Split-layout hero with large typography, serene imagery, and floating testimonial card. Perfect for yoga studios, meditation apps, and wellness retreat websites.
Medical Services Gridhealth5Service cards displaying medical specialties with appointment durations, feature lists, and CTAs. Perfect for hospitals, clinics, and healthcare provider websites.
Wellness Editorial Sectionhealth6Long-form content section with rich text, bullet point highlights, and call-to-action buttons. Perfect for wellness blogs, healing journey stories, and health philosophy pages.
Daily Health Check-inhealth7Two-column layout with feature highlights and daily summary card showing heart rate, activity, and recovery metrics. Perfect for fitness coaching and health monitoring apps.
Fullscreen Hero with Browser Mockuphero100Fullscreen hero with centered content and browser window frame mockup over inset background video
Split Hero with Terminal Cardhero101Fullscreen split hero with content left and realistic terminal/CLI card right over inset background video
Split Hero with Timeline Stepshero10250/50 split hero with content left and vertical numbered timeline overlay on video right
Mobile App Hero with Phone Mockuphero103Fullscreen hero with app store buttons and phone mockup over inset background video
IDE Mockup Split Herohero104Split hero with heading, trust line, and CTA buttons on the left, IDE file-tree and code editor mockup on the right
Mobile Hero with Dual Phone Mockupshero105Fullscreen hero with two overlapping angled phone mockups and app store buttons over inset background video
Mobile Hero with Flanking Featureshero106Fullscreen hero with centered phone mockup flanked by feature columns on each side over inset background video
Mobile Hero with 3D Perspective Phonehero107Fullscreen split hero with content left and 3D perspective-tilted phone mockup right over inset background video
Mobile Hero with Review Cardhero108Fullscreen hero with phone mockup, star rating review card, and app store buttons over inset background video
Bounded Carousel Herohero109Contained 16:9 hero carousel with badge, title, description, and CTA over an image background. Auto-rotates with centered, clickable dots at the bottom — same carousel engine as hero19 but not full-height.
Bounded Carousel Hero — Alignedhero110Contained 16:9 hero carousel with badge, title, description, and CTA. Vertically centered content that anchors to the left, center, or right via the contentAlign prop. Auto-rotates with centered, clickable dots.
Hero with Feature List and Imagehero111Two-column hero with heading, description, icon-only feature list, and CTA on one side and a square image on the other. Image position is configurable.
Editorial Split Herohero112Two-column studio hero with a two-tone headline, dual CTAs, tall image and a client wordmark strip.
Statement Reel Herohero113Centered big-type studio hero with start and watch-the-film actions over a cinematic banner.
Collage Herohero114Split studio hero with a two-tone headline and a four-image arranged collage.
Cinematic Image Herohero115Full-bleed background-image hero with a legibility scrim and bottom-aligned eyebrow, headline, copy and CTAs.
Studio Reel Herohero116Editorial hero with twin vertical image marquees scrolling in opposite directions beside the headline.
Giant Wordmark Herohero117Editorial studio hero with a vertical parenthetical side label, monospace corner links, an oversized centered wordmark with tagline, and a full-bleed strip of rounded portrait tiles below.
Split Hero With Floating Reviewhero118Two-column hero: parenthetical eyebrow, oversized heading, supporting copy, a dark CTA and an avatar trust row on the left; a tall image on the right with a floating star-rated testimonial card overlapping its corner.
Full-Bleed Display Herohero119Full-bleed image hero with an oversized three-word display heading, a row of monospace meta labels, a bold sub-headline, and a featured card with thumbnail, category, paginated index, and title.
Editorial Image Herohero120Centered editorial hero with eyebrow, large heading, description, dual dark and outline CTAs, and a wide 16:9 image with a mono caption below.
Split Hero with Statshero121Split hero with a big headline and CTA on the left, a divided vertical stat rail on the right, and a full-width wide image strip below.
Typographic Card Herohero122Centered typographic hero on a muted card with an oversized heading, inline CTA, and a bottom monospace meta row of three labels.
Trust Hero with Logoshero123Trust hero with a heading, description and CTA beside a tall portrait image, over a grayscale logo marquee.
Profile Hero With Charthero124Studio-profile hero: an eyebrow, oversized heading, supporting copy and a CTA on the left, beside a muted stage showcasing a slider-control piece on the right.
Hero with Portrait Galleryhero125Centered eyebrow, oversized heading and CTA above a responsive 3-up portrait gallery with monospace captions.
Waitlist Email Herohero126Centered waitlist hero with eyebrow, big heading, description, an inline email-capture form and an overlapping avatar trust row.
Slideshow Hero with Background Crossfadehero127Full-bleed background-driven slideshow hero. The active item's image fills the section and crossfades on selection, with a giant fixed heading and a floating card whose thumbnail, category, numbered pagination, name, and location swap to match the active slide. Auto-loops.
Vertical Index List Herohero128Full-bleed monochrome hero whose background crossfades to the active project. A giant heading sits bottom-left while a numbered vertical project index on the right highlights and swaps the active row on hover, click, or auto-loop.
Chapter Progress Tabs Herohero129Full-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.
Monochrome Hero with Rotating Announcement Tickerhero130Full-bleed hero with a static background image, a giant display heading, and a slim bordered bar that auto-rotates through short, clickable announcement messages with position dots.
Filmstrip Herohero131Full-bleed hero whose background crossfades between frames, with a clickable filmstrip of thumbnails pinned along the bottom and an auto-advancing active tile.
Expanding Panels Herohero132Full-bleed hero filled with side-by-side image panels that expand on hover and auto-cycle, each revealing a name and caption while a giant heading floats above.
Kinetic Rotating-Word Herohero133Full-bleed monochrome hero with a giant headline whose final word auto-cycles through a list, plus clickable chips to pick a word and pause the rotation.
Vertical Dot Pager Herohero134Full-bleed hero whose background crossfades across items, steered by a minimal vertical pager pinned to the right edge. The active control grows taller while the rest stay short and dimmed; a giant heading and the clickable active item name sit bottom-left.
Editorial Split Mastheadhero135Two-pane masthead hero: a solid dark editorial panel with eyebrow, value-prop heading, supporting copy, a CTA and an availability note on one side, and a full-bleed image on the other.
Thumbnail Marquee Herohero136Full-bleed hero whose background crossfades to the active item, with an auto-scrolling marquee of clickable thumbnails along the bottom and a giant heading above the strip.
Slideshow Hero with Click Controlshero137Full-bleed monochrome hero that crossfades across a set of slides, navigated by explicit previous/next arrows and clickable dots with an auto-loop, plus a caption linking the active slide.
Editorial Trust Herohero138Static full-bleed editorial hero with an eyebrow badge, a giant display heading, a supporting paragraph, dual seal CTAs, and an overlapping avatar trust row.
Rotating Quote Herohero139Full-bleed monochrome hero with a giant display heading over a static image, paired with a card that auto-cycles through testimonials and click-to-select dots.
Animated Tab Herohero140Full-bleed monochrome hero with a giant heading and a row of clickable tab chips that fade between text panels (title, description, stat), auto-advancing on a timer with no background swap.
Capability Marquee Herohero141Full-bleed monochrome hero with a giant display heading, short description, and a continuous bottom marquee of capability chips that pauses on hover.
Centered Studio Herohero142A 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.
Editorial Split Herohero143A light editorial hero with an oversized display heading on the left, an offset supporting paragraph and accent button on the right, and a full-bleed image band below.
Centered Product Herohero144A 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.
Editorial Product Herohero145An editorial hero with an eyebrow and an oversized full-width light heading, then a lower row pairing a paragraph and two accent buttons with an image tile that floats a live app window frame.
Full Bleed Image Herohero146A full-bleed photographic hero with a gradient scrim, an eyebrow over an oversized light heading, paired accent and hairline actions, and a three-figure proof row along the bottom rule.
Discipline Ledger Herohero147Editorial hero pairing an oversized statement, a paragraph and a pill CTA with a ruled index of disciplines, closed by a wide cinematic image band carrying a caption and a location credit on its own rule.
Wide Statement Fact Herohero148Photo-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.
Full Bleed Fact Rail Herohero149Full-bleed photographic hero with a tinted scrim, the statement and paragraph pinned to the lower half, an outline pill CTA on the same baseline and a ruled three-column fact rail closing the fold.
Offset Image Pair Herohero150Split hero pairing a statement, paragraph and two pill CTAs with a pair of captioned portrait images, the second dropped by a stagger on desktop so the column reads as an editorial spread.
Centered Photo Trust Herohero151Full-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.
Auto Cycling Photo Herohero153Full-bleed hero whose background photographs cross-fade on a timer, with a caption and bar indicators on a ruled line at the foot that also let a reader jump straight to a frame.
Poster Hero With Proof Cardhero154Poster-style hero where a wide cinematic image carries a soft proof card overlapping its lower corner on desktop, naming a project, what was delivered and one measured outcome.
Framed Poster Herohero155Full-bleed photographic hero printed inside an inset hairline frame, with the eyebrow and availability line on the top rule, an oversized statement in the middle, and notes, a pill CTA and an image credit anchored along the bottom.
Split Screen Panel Herohero156Edge-to-edge split hero: a dark half carries the statement, paragraph, outline pill CTA and a ruled detail row, while the other half is a full-height photograph with a pill caption in its corner.
Full-Bleed Canvas Herohero157A hero that splits the viewport in two: an eyebrow, light display heading, two actions, and a hairline proof row on one side, and a full-height photo column floating a live trend metric on the other.
Migration Hero With Step Trackerhero158A hero that opens on an oversized light heading, then drops a hairline into a narrow copy column with one action and a wide image tile floating a live horizontal step tracker.
Photo Collage Herohero159A centered hero with an eyebrow, light display heading, and two actions above a staggered three-photo collage whose raised middle tile floats a live booking confirmation.
Inverted Reliability Herohero160A hero built as one dark panel: a light display heading, two actions, and a hairline table of service commitments beside a bordered image column that floats a live uptime strip.
Overlapping Savings Herohero161A hero that pairs a light display heading with an offset paragraph and action, then drops a wide image band under them and overlaps its lower edge with a live savings card.
Indexed Rows Herohero162A hero that sets a light display heading and one action against a column of numbered hairline rows, then closes on a full-bleed image band with a live approval request pinned into its corner.
Framed Peek Herohero163A hero framed inside a bordered card on a soft section, with centered copy and two actions above an image tile that runs past the card's bottom edge so the live metrics panel is cropped like a real screenshot.
Media-First Reverse Herohero164A hero that opens on a full-bleed image band with a live phone frame anchored into it, then sets the eyebrow, light display heading, paragraph, and actions underneath rather than above.
Filmstrip Herohero165A centered hero closing on an edge-to-edge filmstrip of five frames divided by hairlines, one of which floats a live view switcher instead of a photograph.
Split Headline Herohero166An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline.
Quote-Led Provenance Herohero167A hero that gives the display heading over to a customer sentence, credits the speaker beneath it, and evidences the quote with a hairline provenance table before the product line, actions, and a tile floating the figure behind the claim.
Search Reach Herohero168A hero pairing a light display heading with an offset paragraph and action, then a wide image tile floating a live search results panel over four hairline columns explaining what the search covers.
Centered Newsletter Hero With Reader Quotehero169A 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.
Subscriber Count Hero With Offer Bubblehero170A centered newsletter hero led by the subscriber count, with a speech bubble naming what arrives on joining, a row of publication marks under it, and an email row that turns into a confirmation.
Search-First Archive Herohero171A centered hero whose main action is a search field rather than a button, with the week's most looked-up terms as chips beneath it and the size of the archive stated at the bottom.
Cover Band Hero For The Latest Issuehero172A tall photographic band with the newest piece set over a rising gradient, its dateline, display title, summary and seal button anchored to the bottom, above a hairline row of the issues before it.
Bylined Hero With Studio Bandhero173A 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.
Atmospheric Parallax Herohero174A full-height photographic hero: the image drifts at a slower pace than the page behind a film-grain overlay, and a serif headline settles in word by word ahead of the intro, a soft pill button and an avatar trust line.
Split Portrait Herohero175A light split hero: eyebrow, a serif headline settling in word by word, intro, a sliding-marker pill and a text link on the left, and a portrait photograph drifting inside its frame on the right with a frosted avatar proof card overlapping its corner, under a slowly drifting soft light.
Unveiling Herohero176A centred hero: eyebrow, a serif headline settling in word by word, intro and two sliding-marker pills, then a wide photograph that unveils itself from a smaller inset frame and keeps drifting as the page scrolls, closed by a row of dotted facts.
Two Tempos Herohero177A hero with a serif headline settling in word by word, an intro and a sliding-marker pill on the left, and two offset portrait photographs on the right that drift at different speeds as the page scrolls, one sitting a step lower than the other.
Evening Herohero178A dark ink hero with drifting soft light and film grain: eyebrow, a serif headline settling in word by word, intro, a light sliding-marker pill and a ruled fact sheet on the left, beside a portrait photograph drifting inside its rounded frame.
Turning Word Herohero179A hero whose serif headline always breaks over two lines, the second one a word that takes turns, each blurring in as the last blurs out over a line kept at a fixed height, beside an intro and a sliding-marker pill, above three photographs that drift at their own pace as the page scrolls, the middle one set a step lower.
Centred Serif Herohero180The 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.
Benefits Split Herohero181A split hero: eyebrow, a serif headline that settles in word by word, an intro, three ringed check benefits and a sliding-marker pill on the left, and a portrait photograph drifting inside its frame on the right.
Centred Photo Herohero182A 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.
Call Request Herohero183A 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.
Figures Herohero184A text hero with an eyebrow and a serif headline that settles in word by word on the left, the intro and two sliding-marker pills on the right, and a ruled row of three serif figures that count up beneath, with no image.
Logos Herohero185A centred hero with an eyebrow, a serif headline that settles in word by word, an intro and a sliding-marker pill, closed by a ruled row where greyscale partner logos drift right to left behind soft edge fades, next to a small-caps label.
Half Photo Herohero186A full-height hero split down the middle: eyebrow, a serif headline that settles in word by word, an intro, two sliding-marker pills on the left, and a photograph filling the right half edge to edge that zooms out on load and drifts slower than the page.
Search Herohero187A centred photographic hero built around a search field: the photograph blurs in and drifts slower than the page under a dark scrim and film grain, a serif headline settles in word by word, then a rounded search field with a keyboard shortcut hint, a row of quick links and optional pills. The field can hand its click to a command palette instead of being a form.
Single Command Herohero188The most minimal install hero: a serif headline that settles in word by word, then one rounded command pill that copies the install command on click and confirms with a tick, and a quiet note with a docs link. No image, no buttons.
Command on Photo Herohero189A full-height photographic install hero: the photo blurs in and drifts slower than the page under a scrim and film grain, a serif headline settles in word by word, then a frosted command pill that copies the install command on click, two sliding-marker pills and a short column of figures.
Cinematic Fullscreen Carouselhero19Full-screen animated carousel with multiple transition effects, next slide preview, and progress bar. Perfect for immersive storytelling and portfolio showcases.
Terminal Split Herohero190A split install hero: on the left an eyebrow, a serif headline that settles in word by word, an intro and two sliding-marker pills; on the right an ink terminal card that drifts on scroll, prints the install command and its output line by line, ends on a blinking cursor and copies the command from its title bar.
Two Steps Herohero191A centred install hero that explains itself in two numbered steps under a ruled line: run the command, copied from a rounded pill on click, then ask for a page, shown as an example prompt in a muted mono panel. Serif headline settles in word by word, one sliding-marker pill below.
Half Photo Command Herohero192A full-height split install hero: text on the left with an eyebrow, a serif headline that settles in word by word, an intro, a rounded command pill that copies the install command on click and two sliding-marker pills; on the right an edge-to-edge photograph that blurs in and drifts on scroll with a small caption.
Ink Command Herohero193A dark install hero with film grain and no photograph, where the install command itself is the centrepiece: set large in monospace with a hairline underline, it copies on click and confirms with a tick. A short serif headline above, an intro, two sliding-marker pills and a ruled row of three figures below.
Turning Request Herohero194A centred install hero whose serif headline ends in a word that keeps changing (a pricing page, a hero, a footer), so the promise reads as a list of things the agent can be asked for. Below it an ink command pill that copies the install command on click sits beside a sliding-marker outline pill, then a quiet note.
Three Screens Herohero195A centred install hero with a serif headline that settles in word by word, an intro, a rounded command pill that copies the install command on click beside a sliding-marker pill, and under it three portrait page previews that blur in as they load and rise at different speeds on scroll, the middle one sitting higher, each with a small caption.
Liquid Chrome Herohero196A full-bleed hero over the liquid-chrome background component: a live WebGL surface of liquid chrome with thin-film iridescence that swells toward the cursor, an oversized black-weight headline blended by difference, and a ruled footer row with an intro and two Arrow Pill buttons. Pauses offscreen, holds a still frame for reduced motion and falls back to a CSS gradient without WebGL.
Lake Reflection Herohero197An architectural hero with a light oversized headline beside an intro, an Arrow Pill and an underline link, over a wide panel built on the water-reflection background component: a night sky over snowy peaks mirrored in a still lake, with a rolling swell drawn in perspective, glints on the crests, drops that land on their own and ripple rings that follow the cursor. Every water setting passes through the water prop. Pauses offscreen, holds a calm frame for reduced motion and falls back to the plain photo without WebGL.
Ink Flow Herohero198A calm paper-toned hero built on the ink-flow background component: a generative Canvas 2D flow field draws ink strokes that slowly fade and redraw, gathering into heavier brush lines around the cursor. An eyebrow, a large serif headline, an intro and an underline arrow link sit on the quiet side. Every ink setting passes through the ink prop; ink and paper follow the theme tokens and it holds a still drawing for reduced motion.
Kinetic Type Herohero199A Swiss poster hero on a faint twelve-column grid: a heavy rule with an eyebrow, a giant text20 headline whose letters drop in one by one and spring away from the cursor with a slight stretch, an intro beside a Turn Arrow block button, and a marquee1 band of words that speeds up and flips direction with scroll velocity.
Split Carousel with Thumbnailshero20Two-column carousel with animated content transitions, thumbnail strip navigation, and vertical progress indicator. Perfect for product showcases and feature highlights.
Dithered Render Herohero200A quiet product hero beside a square panel built on the dither-form background component: a live WebGL raymarch of a 3D torus with orbiting blobs, printed with 1-bit ordered dithering at a chunky pixel size and tilting toward the cursor. An eyebrow, a headline, an intro and two Arrow Pill buttons sit on the left. Every render setting passes through the form prop; ink and paper follow the theme tokens, it pauses offscreen and holds a still frame for reduced motion.
Op Art Herohero201A split hero with a large sans headline, an intro, an Arrow Pill and an underline link beside the op-art background component, a live WebGL field in the spirit of Bridget Riley: dense parallel lines ripple in slow waves and swell from thin to heavy across the canvas, bulging around the cursor or a wandering focus. Every field setting passes through the art prop; ink and paper follow the theme, lines stay crisp at any size, it pauses offscreen, holds a still frame for reduced motion and falls back to CSS stripes without WebGL.
Live Halftone Herohero202An editorial print-shop hero with a big condensed headline, a short intro and two square Turn Arrow buttons beside a portrait plate built on the halftone background component: WebGL prints the photo live as a rotated halftone screen, with dot size taken from the photo's luminance and a slow wave traveling through the dots, and the cursor presses a shaded 3D swell into the print that magnifies the dots and sends ripples through them (it drifts and ripples on its own for touch). Every print setting passes through the halftone prop; ink and paper follow the theme tokens, it pauses offscreen, holds a still print for reduced motion and falls back to a grayscale image without WebGL.
Particle Type Herohero203A type foundry hero built on the text21 particle type component: the headline is drawn as thousands of particles sampled from its own font and layout, springing into the letters, scattering and swirling away from the cursor, lighting up in the primary color while moving and shimmering at rest, with a slow ghost pointer keeping touch screens alive. A short eyebrow, a description, a Turn Arrow block button and an underline link sit around it; the real text stays in the h1, colors follow the theme, it pauses offscreen and settles into still letters for reduced motion.
Contour Terrain Herohero204An expedition hero over the contour-terrain background component: a hill-shaded survey map laid slightly back into the distance, with crisp drifting contour lines, heavier index contours, accent-touched summits and lines that swell softly around the cursor. The headline, an intro and two Turn Arrow block buttons sit in the haze above the map. Every map setting passes through the terrain prop; colors follow the theme.
Pool Caustics Herohero205A bright full-bleed hero over the pool-caustics background component: pale hand-laid tiles and a navy lane mark refracted by the water, with sun-dappled caustic light drifting across them and ripples spreading wherever the cursor or a tap touches the surface. A light serif headline, a short intro and two Arrow Pill buttons sit at the bottom. Every pool setting passes through the pool prop; ripples start on their own when idle, the loop pauses offscreen, reduced motion shows one still frame and browsers without WebGL get a tiled CSS fallback.
Watercolor Scroll Herohero206A pinned scroll hero that starts as blank paper with an eyebrow and a large serif headline. As the page scrolls, a landscape photo blooms across the paper like watercolor from three points in a live WebGL shader, with darker pigment rims and a pale wash ahead of each edge, until it fills the screen and the headline, an intro and two links settle in over it. Scrolling back dries it to paper again. Paper follows the theme, it pauses offscreen, shows the finished frame for reduced motion and cross-fades a plain photo without WebGL.
Depth Corridor Herohero207A scroll-driven hero where twelve photographs hang along the walls of a CSS 3D corridor and the camera flies through them as you scroll, with a gentle pointer look-around and a quiet scroll cue (a small line with a traveling mark) that fades as soon as the walk begins, before a serif headline, a short intro, an Arrow Pill and an underline link arrive once the last print has passed. Only the corridor container is transformed per frame, and reduced motion shows a single still view of the hallway with the headline in place.
Northern Lights Herohero208A nordic lodge hero over the aurora-sky background component: folding northern-lights curtains with vertical rays drift above a twinkling starfield and two mountain ridges, leaning with the cursor like wind. A semibold headline sits over the ridges, with a ruled row below pairing the intro with an Arrow Pill and an underline link. Every sky setting passes through the sky prop; it pauses offscreen, holds a still sky for reduced motion and falls back to a CSS gradient without WebGL.
ASCII Render Herohero209A developer tool hero over the ascii-render component: a rotating lattice form and drifting noise are raymarched into a low-res cell buffer, then printed with a monospace glyph ramp in the theme's foreground with primary highlights, and cells light up around the cursor. A headline, an intro, an Arrow Pill and an underline link sit on the quiet side. Every scene setting passes through the ascii prop; colors follow the theme, it pauses offscreen, shows a still frame for reduced motion and falls back to a dot grid without WebGL.
Fullscreen Vertical Carouselhero21Full-screen carousel with vertical slide transitions, decorative grid lines, and customizable accent colors. Perfect for creative agencies and modern brand showcases.
Harmonograph Herohero210A centered gallery-print hero built on the harmonograph component: on a round plate, a single fine ink line is drawn live by two damped pendulums over a slowly turning table, and each finished rosette rests briefly, fades away completely and only then gives way to the next. The plate sways gently in 3D, leans toward the cursor and starts a new figure on click. Below it sit an eyebrow, a serif headline, an intro, an Arrow Pill and an underline link. Every drawing setting passes through the drawing prop; ink and paper follow the theme, it pauses offscreen and shows a finished figure for reduced motion.
Magnetic Field Herohero211A minimal hero over the magnetic-field background component: a Canvas 2D field of iron filings that turn along the curved lines between two drifting magnetic poles. The cursor takes over one pole, spring physics pull the filings toward it, and every click sends a radial shockwave through the grid. An oversized headline sits beside a short intro and two Turn Arrow block buttons. Every field setting passes through the field prop; the ink follows the theme, the field pulses on its own when idle, it pauses offscreen, and reduced motion gets one settled frame.
Trivision Herohero212A festival hero for graphic design in public space whose headline is a trivision board built on the text22 component: the statement is cut into vertical triangular slats that turn one after another in a wave, flipping from a paper face to an ink face to an accent face, each carrying the next statement, with shading as faces turn away, and crisp, even seams between the slats. An eyebrow sits above, a ruled row below holds the intro, an Arrow Pill and an underline link. Pauses on hover and offscreen; with reduced motion the statement changes in place.
Morphing Blob Herohero213A warm, muted split hero with an eyebrow, a soft serif headline, a short intro, an Arrow Pill and an underline link beside a photo clipped by the blob-mask component: an organic SVG blob that breathes continuously, trailed by an offset outline blob, and swells gently toward the cursor. Every blob setting passes through the blob prop; it pauses offscreen and holds a single still shape for reduced motion.
Liquid Lookbook Herohero214A fashion lookbook hero built on the liquid-slides component: photos swap through a noise-displaced liquid wipe with a wet rim and a slight color split, over a thin story-style timeline where shown looks stay full, the current one fills with time and the rest wait empty. Arrows, the keyboard or a click also move it, hovering holds the timer and ripples the photo. Serif copy, a Turn Arrow block button and an underline link sit beside the frame; every slideshow setting passes through the lookbook prop. It crossfades plain images without WebGL and switches instantly for reduced motion.
Warp Drive Herohero215A dark aerospace hero over the warp-field background component: a Canvas 2D starfield streaming from a vanishing point that leans toward the cursor. Hovering or focusing the primary Arrow Pill raises the warp prop, easing the stars into long hyperspace streaks with a soft tunnel glow, and leaving eases them back. An oversized light headline sits beside a short intro, the pill and an underline link. Every starfield setting passes through the stars prop; the loop pauses offscreen and reduced motion holds a still field.
Reaction Diffusion Herohero216A materials lab hero over the reaction-diffusion background component: a live Gray-Scott simulation in WebGL grows coral and fingerprint patterns across the page in the theme's paper, ink and primary colors, steering around the headline, intro and buttons while a slow drifting eraser keeps it evolving. The cursor or a tap seeds new colonies and it also seeds itself. Every growth setting passes through the growth prop; a primary Arrow Pill and an underline link sit under the copy. Pauses offscreen, grows one settled still frame for reduced motion and falls back to a CSS pattern without WebGL.
Ink Fluid Herohero217A contemporary art foundation hero over the ink-fluid background component: a real-time stable fluids simulation where indigo, vermilion and graphite pigments swirl through water on a ground taken from the foreground token, glowing like light on a dark ground and mixing like ink on a light one. The cursor drags ink, clicks switch pigment and drops land on their own on touch screens. A bold serif headline, a short description, an Arrow Pill and an underline link sit on top. Every simulation setting passes through the ink prop.
CRT Broadcast Herohero218A late-night broadcast hero built on the crt-screen component: a tube television whose picture is a live WebGL CRT shader with barrel distortion, scanlines, an aperture grille, a rolling hum bar and static, plus a channel-switch glitch every few seconds, or on click, that tunes from the headline card to color bars and an amber slate. The set stands centered at the top, sized to fit one screen, with a short intro, a primary Arrow Pill and an underline link centered below it. The heading stays in the DOM for screen readers, and every picture setting passes through the screen prop.
Split-Flap Board Herohero219A night-train hero built around the split-flap component: a dark departure board of CSS 3D flaps that flick through random glyphs, rippling across the columns before settling on each phrase in capitals, cycling through a list of headlines. Below the board sit the headline, a short intro, an amber Arrow Pill and an underline link. Every board setting passes through the board prop; flips animate transforms only from a loop that sleeps between phrases, it pauses offscreen, and reduced motion shows the first phrase without flipping.
Paper Cut Herohero220A children's book publisher hero over the paper-landscape background component: six layered paper-cut hills with clumps of cypress, pine and round paper trees, soft mist, a low sun that sets on scroll, drifting clouds and a small flock of birds, spreading in depth with pointer and scroll parallax. A serif headline, a description, an Arrow Pill and an underline link sit on the sky. Every scene setting passes through the landscape prop, and reduced motion keeps the scene still.
Afternoon Blinds Herohero221A warm interiors hero over the sun-blinds background component: afternoon sunlight through venetian blinds on a plaster wall, slat shadows swaying in a slow breeze, a potted plant's leaf shadow and dust drifting in the beam, with the sun shifting slightly toward the cursor. A serif headline, an intro, an Arrow Pill and an underline link sit inside the light. Every light setting passes through the light prop; it pauses offscreen, holds a still frame for reduced motion and falls back to a striped CSS gradient without WebGL.
Concertina Book Herohero222A pinned scroll hero for a bindery built on the concertina-book component: under a serif headline, an intro, an Arrow Pill and an underline link sits a folded book whose pages carry one wide photo printed across the whole strip. Scrolling down turns into sideways travel, and each page unfolds in 3D from a tight zigzag pile on the right, catching light and shade on its folds, until the picture lies flat and unbroken. Every book setting passes through the book prop; the pinned stage clears the viewport's bottom toolbar and reduced motion shows the flat pages in a swipeable row.
Fragrance Orbit Herohero223A luxury perfume hero built on the text-orbit component: a circular product photo encircled by three rings of serif text on SVG paths, each turning at its own speed and direction, one tilted into a Saturn-like orbit that passes behind and in front of the bottle. The object leans toward the cursor in 3D, sways on its own without a pointer and floats over a soft reflection beside a light serif headline, a description, a primary Arrow Pill and an underline link. Every orbit setting passes through the orbit prop.
Pixel Sort Herohero224A nightlife hero for a record label built on the pixel-distort background component: a full-bleed concert photo of raised hands against blue stage light sits on an invisible grid, and sweeping the cursor drags the cells along like wet paint, breaking them into coarser pixels with a slight color split before they ease back into place; on arrival the photo resolves from big pixel blocks. A bold headline, a short intro and two square Turn Arrow buttons sit above an oversized wordmark cropped by the bottom edge in difference blend. Every distortion setting passes through the distort prop.
Pulsar Ridgelines Herohero225A record label hero beside a square cover panel built on the ridgelines background component: dozens of stacked lines lifted by animated noise in a central band, each filled to hide the ridges behind it, rising from flat on load, with nearby lines lifting under the cursor. The panel inverts the theme's foreground and background. A headline, a short intro, an Arrow Pill with a play icon and an underline link sit alongside. Every plot setting passes through the plot prop; it pauses offscreen and holds a still frame for reduced motion.
Murmuration Herohero226A dusk hero for an estuary nature reserve over the murmuration background component: thousands of starlings fly as one dark cloud that folds, stretches, splits and rejoins across a slow dusk sky, and the cursor acts as a hawk that scatters them in a wave before the flock closes again. A serif headline, an intro, an Arrow Pill and an underline link sit low on the left over a soft shade. Every flock and sky setting passes through the flock prop.
String Art Herohero227A weaving school hero built on the string-art component: a round board ringed with nails where one thread is woven pin to pin in real time until a portrait appears, the pass being pulled lit in the accent color, then the finished piece rests, fades and a new photo begins. Hovering speeds the weaving and leans the board, a click moves on. Beside it sit an eyebrow, a serif headline, an intro, an Arrow Pill and an underline link; thread and board follow the theme.
Ferrofluid Herohero228A loudspeaker maker's hero beside the ferrofluid component: a glossy black pool of magnetic fluid in a shallow dish, seen from a low studio camera, always holds a crown of sharp needle spikes that grows and leans toward the cursor (or an invisible magnet hovering over the pool when idle) and settles back into a smooth dome, lit by key, strip and rim lights. An eyebrow, a heavy headline, an intro and two Arrow Pill buttons sit on the left. Every fluid setting passes through the fluid prop; the surface follows the theme.
Kaleidoscope Herohero229A botanical perfume hero built on the kaleidoscope component: a photo of poppies folded live into a crisp mirrored mandala inside a round glass tube, turning slowly while the view drifts and zooms over the petals so the pattern keeps blooming into new forms. The cursor turns the tube and zooms the view. A semibold serif headline, a short intro, an Arrow Pill and an underline link sit beside it. Every tube setting passes through the scope prop; it pauses offscreen, holds a still pattern for reduced motion and falls back to the plain photo without WebGL.
Cyanotype Herohero230A herbarium hero on the cyanotype background component: procedurally drawn ferns, grasses, seed heads and veined leaves lie on brushed watercolor paper while the print develops live from pale chemistry to deep Prussian blue, leaving the plants as white silhouettes with soft lifted edges. The cursor casts shade that holds back the blue, and every few seconds a wash rinses the print and a new arrangement develops. A serif headline, an intro, an Arrow Pill and an underline link sit on the open blue. Every print setting passes through the print prop.
Rain on Glass Herohero231A late-night listening bar hero seen through a rainy window, built on the rain-glass background component: a dusk street glows out of focus behind misted glass, droplets gather and larger drops run down in stop-start paths leaving clear trails, each drop a tiny lens showing a sharp flipped view, and the cursor wipes the mist like a finger. A serif headline, an intro, an Arrow Pill and an underline link sit in white in the lower corner. Every rain setting passes through the rain prop.
Growing Tree Herohero232A tea house hero built on the growing-tree component: beside a serif headline, an intro, an Arrow Pill and an underline link, a tree drawn like a fine ink botanical plate grows from a single point, opens small blossoms at its tips, then sways in a springy breeze while petals drift down and settle. Moving the cursor across it sends a gust through the branches, and a new tree grows now and then. Every tree setting passes through the tree prop; colors follow the theme and it shows the grown tree still for reduced motion.
Liquid Glass Herohero233A glassblowing studio hero whose headline fills the stage under drops of clear liquid glass, rendered live in WebGL by the glass-lens component: the drops drift, melt together and split, one follows the cursor, and beneath them the type is magnified and bent with a faint color split, a bright rim and a highlight. An eyebrow sits above, and a ruled row below carries the intro, an Arrow Pill and an underline link. Every glass setting passes through the glass prop; the real headline stays in the page for screen readers.
Letterpress Herohero234A print-shop hero built on the letterpress component: the headline is pressed into a full sheet of cotton paper one word at a time, each impression biting in under a raking light that follows the cursor, the ink lying unevenly at the bottom of the type. When the composition is set it rests, then the sheet slides away and the next one is set in a new ink and arrangement. An eyebrow, a ruled row with an intro, a square Turn Arrow button and an underline link frame it, and the real heading stays in the DOM for screen readers. Every press setting passes through the press prop.
Bauhaus Composition Herohero235A design school hero on a strict twelve-column grid: a heavy sans headline, an intro and a Turn Arrow block button with an underline link on the left, and on the right the bauhaus-composition background component, a living constructivist poster of circles, quarter circles, squares, bars and hairline rules that springs into a new balanced arrangement every few seconds, leans away from the cursor and moves on at a click. Every composition setting passes through the composition prop.
Candle Flame Herohero236A 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.
Wheat Field Herohero237A heritage grain mill hero over the wheat-field background component: a field of ripe wheat at golden hour, thousands of stalks receding to a hazy horizon under a low sun, bending as gusts roll across and parting under the cursor like a brushing hand. A semibold serif headline, an intro, an Arrow Pill and an underline link sit in the sky at the upper left. Every field setting passes through the field prop; it pauses offscreen and holds a still field for reduced motion.
Curtain Reveal Herohero238A pinned-scroll concert hall hero built on the curtain-reveal component: a heavy crimson velvet curtain with deep lit folds, a weighted hem and gathered swags across the top fills the screen, a centered serif headline resting on it. As the reader scrolls each half draws to its side, the folds bunching tighter and the hem trailing the top, while the house lights come up on an orchestra photograph behind. Once the stage is open the headline, an intro, an Arrow Pill and an underline link settle at the lower left over a soft scrim. Every curtain setting passes through the curtain prop; reduced motion shows the open stage on a single screen.
Anamorphic Type Herohero239A centered hero for an installation studio built on the anamorphic-type component: the headline is cut into thousands of fragments traced from its own font and scattered in depth, drifting as an abstract constellation while the camera orbits, then easing into the one true viewpoint every few seconds where the words snap into focus. The cursor steers the camera. An eyebrow, an intro, a Turn Arrow block button and an underline link frame it. Every anamorphic setting passes through the anamorph prop; the real heading stays in the page.
Wellness Hero with Stats Cardshero24Split-layout hero with avatar stack social proof, floating heart rate card, and progress indicator overlay on image. Perfect for health, fitness, and wellness apps.
Aperture Reveal Herohero240A lens maker's pinned scroll hero over the aperture-reveal component. The section opens on a closed camera iris set in a turned metal ring, with the eyebrow and a large heading above it and a pinpoint of light at the center. Scrolling turns the brushed metal blades open, then the ring grows past the frame until a night sky photograph fills the screen, and the heading, a short description, an Arrow Pill and an underline link settle at the lower left over a soft scrim. The text moves between clean states instead of fading with the scroll, the light on the metal follows the cursor, and reduced motion shows the open photograph with the text in place. Every iris setting passes through the aperture prop.
Silk Drape Herohero241A couture silk house hero over the silk-drape background component: a full-bleed length of emerald silk hangs in deep folds from a few pins, swelling in a slow breeze with real cloth physics and an anisotropic sheen along the weave, while a sweep of the cursor stirs the air so the silk ripples and swings, then settles. A semibold serif headline, an intro, an Arrow Pill and an underline link sit low on the left over a soft shade. Every fabric setting passes through the silk prop.
Cloud Flight Herohero242An evening balloon flight hero over the cloud-sky background component: layers of golden-hour cumulus drift past at different depths, lit on the side facing a low sun with a silver lining on thin edges, while the view steers a little with the cursor. A white semibold serif headline, an intro, a light Arrow Pill and an underline link sit in the upper sky. Every sky setting passes through the sky prop.
Day to Night Herohero243A pinned-scroll architecture studio hero built on the photo-relight component: one photograph of a white modernist house behind a long pool is relit as the reader scrolls, from a cool dawn through midday and a warm golden hour with low raking light to blue hour and night, the sky regraded on its own while the windows, timber soffits and pool switch on one by one with a soft halo. A white semibold headline, an intro, an Arrow Pill and an underline link sit at the lower left over a soft scrim. Every photo, light and grade setting passes through the day prop; reduced motion holds golden hour on a single screen.
Koi Pond Herohero244A tea garden hero over the koi-pond background component: koi seen from above swim with a flowing S-curve over a green floor lit by drifting sunlight caustics, casting soft shadows, while lily pads with a flower or two bob on the surface. The koi gather around the cursor, a click scatters food and sends ripple rings across the water. A semibold serif headline, an intro, an Arrow Pill and an underline link sit on a soft shade in the lower corner. Every pond setting passes through the pond prop.
Desert Dunes Herohero245A hero for a desert camp over the dune-field background component: a photoreal desert at golden hour, raymarched in a shader, with sharp-crested dunes, long soft shadows tinted by the sky, wind ripples and a warm haze toward the horizon. The camera glides slowly over the sand and turns gently with the cursor, and the light comes up out of the dusk on arrival. A large headline, an intro, an Arrow Pill and an underline link sit low on the left over a soft shade. Every desert setting passes through the desert prop.
Impasto Painting Herohero246A hero for a maker of hand-milled oil colors, split between a column of copy and a large live oil painting built on the impasto component: thick brushstrokes lay a sunrise landscape down stroke by stroke from broad blocking-in to fine detail, with bristle grooves and ridges of paint lit by a raking light that glints on the wet surface and follows the cursor, linen showing through the thin passages, and a slow repaint once the canvas rests. A semibold serif headline, an intro, an Arrow Pill and an underline link sit on the left. Every painting setting passes through the painting prop.
Type Window Herohero247A pinned scroll hero for an expedition company. A giant heavy word is cut out of the page surface as a window onto a full-bleed mountain photo, with a quiet eyebrow above it. As the visitor scrolls, the camera flies into the first letter on an exponential zoom, the photo drifting closer more slowly for depth, until the landscape fills the frame; then the heading, intro, an Arrow Pill and an underline link settle in over a soft scrim at the lower left. Built on the type-window component; reduced motion shows the open photo with the copy.
Sketch to Photo Herohero248A pinned scroll hero for an architecture and interiors studio on warm drawing paper, built on the sketch-to-photo component: on arrival a pen traces an ink drawing of the house straight from the photo, with fine hatching in the shadows, and as the visitor scrolls a watercolor wash of the real colors blooms across the sheet until the drawing lets go and the photograph sharpens into place. A semibold serif headline, an intro, an Arrow Pill and an underline link stay legible on the paper throughout. Every drawing setting passes through the sketch prop; reduced motion shows the finished photo without pinning.
Slice Assembly Herohero249A pinned scroll hero for a fashion label built on the slice-assembly component: an editorial photograph cut into vertical strips floats apart in 3D space, each strip lit by its angle and lifted on a soft shadow, and as the page scrolls the strips settle one after another into the whole picture with no seams left. The large semibold headline holds from the start; the intro, an Arrow Pill and an underline link settle in once the picture is whole. The photograph leans gently toward the cursor, and every strip setting passes through the slices prop. Reduced motion shows the whole photograph and all copy.
Dashboard Preview Herohero25Split-layout hero with interactive dashboard mockup featuring stats cards, line chart, and recent activity feed. Perfect for SaaS and analytics platforms.
Reeded Light Herohero250A full-bleed lighting-studio hero over the reeded-light background component: a slow procedural field of peach glow, indigo haze and a rose band seen through a row of rounded glass reeds that each magnify their own slice, with soft seams, shaded flanks, film grain and a warm lamp behind the glass that follows the cursor. A white semibold headline, an intro, an Arrow Pill and an underline link rise in at the lower left over a soft veil. Every light setting passes through the light prop.
Gallery Rail Herohero251A pinned scroll hero for a photography exhibition built on the gallery-rail component: the heading, intro, an Arrow Pill and an underline link hang first on a long gallery wall, and as the page scrolls the wall travels sideways past large photographs in frames of different proportions, each with a title and credit beneath. Every photograph moves a little slower than its frame and each frame grows slightly as it reaches the middle. Every wall setting passes through the gallery prop. Reduced motion turns the wall into a plain horizontal scroll.
Zoom Parallax Herohero252A 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.
Expanding Frame Herohero253A pinned scroll hero for an architecture studio built on the expanding-frame component: a huge two-line semibold headline sits above and below a small rounded photograph, and as the page scrolls the lines part to the left and right while the photograph grows to fill the whole screen, its corners easing square and the picture settling from a close zoom to its full view. Once the photograph is full, the studio line, an intro, an Arrow Pill and an underline link settle in at the lower left over a soft shade. Every frame setting passes through the frame prop. Reduced motion shows the full photograph with the copy.
Photo Ring Herohero254A portrait photography hero built on the photo-ring component: twelve portraits stand on a slowly turning 3D ring seen slightly from above, curved panels catching the light and a soft gloss as they come to the front, fading into the page as they pass behind, with a quiet reflection on the floor. The ring fills the lower half and runs past both edges; drag or scroll gives it momentum and the cursor leans the view. A centered eyebrow, a large semibold headline, an intro, an Arrow Pill and an underline link sit above it. Every ring setting passes through the ring prop. Reduced motion holds a still ring.
Counter Columns Herohero255A split hero for an editorial studio built on the counter-columns component: on the right, a wall of photographic prints tipped back in perspective, its tall columns drifting endlessly in opposite directions and bleeding off the top and bottom of the frame. Scrolling the page pushes the columns, hovering slows them almost to a stop and the wall leans toward the cursor. On the left, a sentence-case eyebrow, a large semibold headline, an intro, an Arrow Pill and an underline link. On phones the wall becomes a band under the copy. Every wall setting passes through the wall prop, and reduced motion shows a still, staggered wall.
Line Engraving Herohero256A private bank hero on warm paper, built on the line-engraving component: a portrait recut live as a banknote-style intaglio engraving, its fine lines swelling with the shadows and bending around the face, pressed into the page with a soft plate mark. The lines are cut in one by one on arrival and drift very slowly, and a soft loupe follows the cursor with finer line work. A semibold serif headline, an intro, an Arrow Pill and an underline link sit on the left. Every engraving setting passes through the engraving prop.
Photo Dust Herohero257A pinned scroll hero for a perfume house built on the photo-dust component: on the page background a fine cloud of amber dust drifts on a slow wind, and as the reader scrolls the grains settle from the bottom up into a photograph of a glass perfume bottle in low sun, each grain lifting a little before it lands, until the real photo fades in at full detail. The large semibold headline holds over the dust from the start; the intro, an Arrow Pill and an underline link settle in once the picture is whole. The cursor blows the settled grains aside as it passes, and every dust setting passes through the dust prop. Reduced motion shows the photograph and all copy.
Star Trails Herohero258A full-bleed dark-sky lodge hero over the star-trails background component: a long-exposure night photograph where thousands of coloured stars sweep continuous arcs around a pole above the frame, the exposure building up over the first seconds and then turning slowly, over layered ridges and a pine forest line that shift gently with the cursor. A light semibold headline, an intro, an Arrow Pill and an underline link rise in at the lower left over a soft shade. Every sky setting passes through the sky prop.
Ocean Horizon Herohero259A full-bleed sailing charter hero over the ocean-horizon background component: the open sea at dusk like a calm cinematic photograph, with a swell that rolls toward the viewer, sky reflections, a sun glitter path running to the horizon, light glowing through the crests, soft haze and thin high clouds, while the camera rides the swell and turns gently toward the cursor. A white semibold headline, an intro, an Arrow Pill and an underline link rise in at the lower left over a soft shade. Every sea setting passes through the ocean prop.
Marble Slab Herohero260A full-bleed stone atelier hero over the marble-slab background component: polished, book-matched Calacatta with warped grey veins, fine hairlines and a warm edge along each vein, mirrored around a hairline joint, while a large softbox reflection drifts across the polish and follows the cursor. A centered dark headline, an intro, an Arrow Pill and an underline link rise in over a soft stone veil. Every stone setting passes through the slab prop.
Mesh Gradient Herohero261A full-bleed product hero over the mesh-gradient background component: six soft color fields drift, warp and blend under a fine film grain, and the field swells toward the cursor. A row of mood chips below the buttons swaps the palette, and the gradient fades through to the new colors while the text and primary Arrow Pill switch between dark and light ink to stay readable. An oversized headline sits beside a short intro and an underline link. Every gradient setting passes through the gradient prop, and each mood carries its own colors and ink.
Wave Gradient Herohero262A dark audio product hero over the wave-gradient background component: layered color ribbons roll across the frame at a slight tilt under a fine film grain and lift into a swell under the cursor. A left-aligned headline, intro, Arrow Pill and underline link sit over a soft dark veil. Every wave setting passes through the waves prop.
Conic Glow Herohero263A dark, centered conference hero over the conic-gradient background component: a two-armed ring of violet, cyan, pink and amber light turns slowly behind the headline, bent into a gentle spiral, breathing and finished with a fine film grain, while its center leans toward the cursor. Hovering or focusing the primary Arrow Pill spins the ring up, widens it and brightens its core, and leaving lets it glide back. An oversized headline, an intro, the pill and an underline link rise in over a soft dark veil. Every glow setting passes through the glow prop.
Lava Lamp Flavor Herohero264A full-bleed drinks hero over the blob-gradient background component: glowing colored blobs rise, sink and merge like wax in a lava lamp under a fine film grain, and the cursor becomes one more blob that joins them. A list of flavors beside the copy recolors the lamp: picking one fades the blobs and the background to its colors and grows or shrinks the number of blobs, while the copy, a soft veil and the primary Arrow Pill follow the site theme. An oversized headline, an intro and an underline link sit on the left. Every lamp setting passes through the lamp prop, and each flavor carries its own colors, blob count and optional background.
Fluid Gradient Herohero265A split record release hero over the fluid-gradient background component: a large rounded cover panel on the right holds a marbled paint pour of navy, cream, orange and red under a fine film grain, drifting so slowly it looks nearly still. A play toggle on the cover sets the paint pouring faster and pauses it back to a crawl, and the paint bends softly toward the cursor over the cover. On a warm paper ground, an oversized headline, an intro, a dark Arrow Pill and an underline link sit on the left. Every paint setting passes through the fluid prop, and both speeds are props.
Light Leak Herohero266A dark film photography hero over the light-leak background component: warm blooms of light burn in from the edges of the frame, swell and fade under a film grain, and the nearest one leans toward the cursor. An oversized headline, an intro, a light Arrow Pill and an underline link sit at the top; a row of series links runs along the bottom, and hovering or focusing one fades its own light colors and edges into the frame. Every leak setting passes through the leak prop, and each series carries its own colors.
Planet Horizon Herohero267A centered hero over the orb-gradient background component: a huge gradient planet sits mostly below the frame so only its lit top arc shows, like a horizon seen from orbit, with indigo, violet, magenta and teal bands swirling slowly across its surface, a teal rim and an atmosphere glowing up into the page background. An oversized headline, a short intro, and a primary Arrow Pill rise in above it while the planet itself rises softly into place. Every planet setting passes through the orb prop.
Mosaic Bento Herohero268A warm bento hero over the mosaic-gradient background component: a plain card with the headline, an intro, a primary Arrow Pill and an underline link sits beside three rounded panels cut from the same glaze, one in large tiles, one in the given size and one in fine tiles, so the same flowing gradient reads at three scales. Each panel's tiles grow in from its center, glint on their own and lift toward the cursor. Every tile setting passes through the mosaic prop.
Folded Poster Herohero269A warm paper hero for a print fair built around the fold-gradient background component: a sunset gradient printed across accordion pleats fills the whole frame, breathing open and closed and easing open under the cursor. An oversized dark headline, a short intro, a dark Arrow Pill and an underline link sit on the left over a soft paper veil. The pleats fold in out of the paper color on load, and every gradient setting passes through the fold prop.
Smoke Type Herohero270A dark fragrance hero over the smoke-gradient background component, seen only through the letters of a giant one word headline: a black sheet with white type is multiplied over the smoke, so warm plumes rise and curl inside the letters while the rest of the frame stays black. The word fades and settles in over the smoke's own slow arrival, with an eyebrow at the top and a short intro, a light Arrow Pill and an underline link along the bottom. The headline stays real, selectable text, and every smoke setting passes through the smoke prop.
Arched Window Sky Herohero271A warm paper hospitality hero built around one tall arched window: inside it, the horizon-gradient background component paints a dusk sky with a low sun on a hazy horizon, a shimmering trail and drifting cloud streaks, rising softly on load. The headline sits to the left of the arch and the intro, a dark Arrow Pill and an underline link to the right, anchored to the bottom; on small screens they stack around it. Every sky setting passes through the sky prop.
Prism Light Panel Herohero272A split hero for a stage lighting studio: copy on the theme background to the left, and to the right a tall rounded dark panel running the prism-gradient background component, where a white beam enters a prism and leaves as three soft fans of dispersed color with caustic streaks and a bloom, reaching out of the dark on load. An oversized headline, an intro, a primary Arrow Pill and an underline link sit beside it. Every light setting passes through the prism prop.
Vortex Portal Herohero273A light editorial hero with a circular portal: the vortex-gradient background component turns inside a large round window beside the copy, a spiral of soft pastel color pouring toward a glowing eye, while a hairline orbit draws itself around it on load. An oversized dark headline, an intro, an Arrow Pill and an underline link rise in on the paper side. The portal leans gently toward the cursor, and every vortex setting passes through the vortex prop.
Frosted Glass Launch Herohero274A full-bleed product launch hero over the frosted-gradient background component: warm and cool shapes drift behind a pane of sandblasted glass, blurred into a soft gradient with a thin bevel along the edges, and one shape glides after the cursor. An oversized dark headline rises at the top, and a crisp solid card, the only sharp surface in the frame, settles in at the lower right with the intro, an Arrow Pill and an underline link. Every glass setting passes through the glass prop.
Bokeh Band Herohero275An editorial concert hero built around a band of the bokeh-gradient background component: an oversized headline above, then a full-width strip of out-of-focus city lights that opens from a hairline like a letterbox, drifting in depth and shifting with parallax toward the cursor, then an intro beside an Arrow Pill and an underline link below. The lights live only in the band, so the copy sits on the calm page background. Every bokeh setting passes through the bokeh prop.
Ripple Water Herohero276A calm wellness hero over the ripple-gradient background component: the lower half of the frame is water, with soft rings of blue, teal and sand spreading from a few slow points and meeting in gentle interference, and the water fades up into the plain page color so the rings seem to rise out of the paper. Large centered type, an intro, a primary Arrow Pill and an underline link rest in the quiet upper half. Every ripple setting passes through the ripples prop, whose base color also sets the page.
Tabbed Live Product Demo Herohero277A centered hero with eyebrow, heading, description and two buttons above one borderless stage of fixed height. A frosted tab bar floating inside the stage switches between live product pieces, each on its own gradient background with glass cards and a caption underneath, so the demo is the real interface rather than a screenshot.
Analytics Hero With Glass Card Clusterhero278A hero with the eyebrow and heading on the left and the description with two buttons on the right, above one borderless stage of fixed height on a gradient background that fades into the page. Three glass product cards sit on the stage as an overlapping cluster on desktop, a main card in the center with two smaller ones tucked behind its upper left and lower right corners. On smaller screens only the main card is shown, centered.
Install Snippet Split Herohero279A split hero for a developer product. The left column holds an eyebrow, a heading, one paragraph and two buttons; the right column is a tall borderless stage over a live contour map. Two glass panels sit on the stage, staggered left then right: a package manager install snippet with a copy button and the JSON response of the first deploy. On small screens the stage drops under the text.
Split Hero With Marble Stagehero280A split hero with the eyebrow, heading, description and two buttons set on the page beside a tall borderless stage of polished marble that follows the theme and fades into the page at its foot. Two glass money pieces sit on the stone, a payment card and a smaller transaction row that overlaps its lower edge, nudged to opposite sides. On mobile the text comes first and the stage follows at a shorter fixed height.
Calm Hero With Floating Session Playerhero281A 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.
Retouching Hero With Before And After Stagehero282A hero for a photography and retouching studio. The eyebrow and a large heading run across the top, and below them a borderless before and after photo stage takes two thirds of the width while the description and two buttons sit in a narrow rail aligned to the bottom edge of the stage. Visitors drag, click or use the keyboard to move the divider between the raw and the retouched photograph. On smaller screens the rail stacks under the stage.
Paper Landscape Hero With Impact Cardshero283A hero built on one tall borderless stage that holds a layered paper-cut landscape whose paper follows the theme. On desktop the eyebrow, heading, description and two buttons sit in the upper left of the stage, where a diagonal fade dissolves the hills into the stage color, while two matching glass cards, a figure with bars and a ring, rest over the hills in the lower right. On smaller screens the copy sits on the page above a shorter stage with one or two cards along its bottom edge.
Split Hero With Floating Prompt Composerhero284A split hero for an AI research product: eyebrow, heading, description and a button on the left, and one borderless stage of fixed height on the right. The stage carries a live ink drawing that follows the theme and fades into the page, with a frosted glass prompt composer floating on it. The composer is a working mention field where typing @ cites a source, with a hint and a submit button in a row of fixed height, so the panel never changes size.
Studio Hero With Notched Poster Stagehero285A hero built on one large borderless artwork stage of fixed height that holds a living geometric poster. On large screens the eyebrow, heading, description and two buttons sit in a page-colored panel cut into the lower left corner of the stage, so the copy reads on the page background while the artwork wraps around it. On smaller screens the copy comes first and the stage follows below it.
Sunlit Wall Hero With Glass Booking Cardshero286A split hero for a hotel or booking product. The eyebrow, heading, description and two buttons sit on the left; on the right a tall borderless stage shows afternoon light falling through blinds onto a wall and fading into the page. Two glass cards float on the stage, a hotel result above and a date range picker below, offset to opposite sides on desktop. On smaller screens the stage moves under the text and the cards stack in the center.
Split Hero with Video Playerhero35Two-column hero with playable video (or image), play button overlay, and key stats row. Perfect for product demos and feature announcements.
Centered Hero with Logo Cloudhero36Centered hero with gradient-highlighted heading text and trusted-by logo cloud below CTA buttons. Perfect for B2B SaaS and enterprise products.
Analytics Hero with Floating Statshero37Centered hero with four floating stat cards positioned around the content displaying key metrics. Perfect for analytics platforms and data-driven products.
Split Hero with Testimonial Cardhero38Two-column hero with prominent testimonial quote card featuring author avatar and company info. Perfect for building trust and social proof.
Email App Hero with Inbox Mockuphero43Split-layout hero with interactive email client mockup featuring sidebar, message list, and floating notification. Perfect for email and communication apps.
Centered Hero with Ratings Social Proofhero45Centered hero with avatar stack, partial star ratings display, and review count above the featured image. Perfect for products with strong user reviews.
Search Hero with Popular Tagshero46Centered hero with prominent search input field and popular search suggestion pills below. Perfect for documentation sites, knowledge bases, and support centers.
Metrics Dashboard Herohero48Centered hero with four-column metrics panel showing values and trend indicators below the CTA buttons. Perfect for analytics dashboards and business tools.
Centered Hero with Announcement Pillhero50Clean centered hero with clickable announcement banner pill above the heading with sparkle icon. Perfect for product launches and feature announcements.
Split Hero with 3D Tilt Effecthero51Two-column hero with interactive image card that tilts in 3D on mouse movement with shine effect. Perfect for showcasing premium or interactive products.
Mobile App Hero with Phone Mockuphero53Split-layout hero with realistic iPhone mockup, notch detail, and App Store/Play Store download buttons. Perfect for mobile app landing pages.
Full-height Hero with Scroll Indicatorhero57Vertically centered hero with animated scroll-down indicator featuring bouncing dot and arrow. Perfect for single-page sites and immersive landing pages.
Enterprise Hero with Trust Badgeshero59Centered hero with security and compliance trust indicators (SOC 2, Uptime, CDN, Encryption) displayed as icon badges. Perfect for enterprise B2B products.
Split Hero with Floating Feature Cardshero61Two-column hero with announcement banner, social proof metrics, and three floating feature cards with hover animations. Perfect for SaaS product launches.
Changelog Hero with Updates Listhero63Centered hero with checklist of recent updates showing new badges and completion icons. Perfect for changelog pages and product update announcements.
Split Hero with YouTube Videohero65Two-column hero with embedded YouTube video player in responsive aspect ratio container. Perfect for product demos and explainer video landing pages.
Centered Hero with Feature Iconshero68Centered hero with three feature highlights displayed as icon cards with descriptions below the CTA. Perfect for platform and infrastructure products.
Email Signup Herohero69Minimal centered hero with inline email input field and submit button for newsletter or waitlist signups. Perfect for coming-soon pages and early access campaigns.
Centered Hero with Mediahero7Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages.
Pricing Preview Herohero71Centered hero with prominent price display, period label, and horizontal feature checklist. Perfect for freemium products and pricing-focused landing pages.
Browser Screenshot Hero with Notificationshero72Centered hero with perspective browser mockup, floating notification cards at corners, and star rating badge. Perfect for SaaS products and web apps.
Team Chat App Herohero75Split-layout hero with full chat interface mockup featuring channels sidebar, message threads, online users, and floating notification. Perfect for collaboration and messaging apps.
Kanban Board Herohero76Split-layout hero with interactive kanban board mockup showing tasks with priorities, tags, assignees, and floating completion stats. Perfect for project management tools.
Calendar Schedule Herohero77Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps.
Centered Hero with Founder Social Proofhero78Centered hero with avatar stack and founder count text between buttons and featured image. Perfect for startup products and B2B SaaS.
Split Hero with Avatar Social Proofhero79Two-column hero with avatar stack social proof positioned above action buttons alongside featured image. Perfect for startup and team-focused products.
Cinematic Hero with Overlapping Mediahero80Centered hero with inset background media and overlapping product image
Fullscreen Hero with Quick-Access Cardshero81Cinematic fullscreen hero with inset background media and glassmorphism quick-access cards
Left-Aligned Hero with Gradient Overlayhero82Left-aligned fullscreen hero with inset background media and directional gradient overlay
Bottom-Aligned Hero with Quick Linkshero83Bottom-aligned fullscreen hero with inset background media and right-side quick link cards
Split Hero with Edge-to-Edge Mediahero8450/50 split hero with content left and edge-to-edge video/image right with checklist items
Fullscreen Hero with Floating Testimonialshero85Cinematic fullscreen hero with inset background video and floating glassmorphism testimonial cards
Fullscreen Hero with Logo Cloudhero86Cinematic fullscreen hero with inset background video and trusted-by logo strip
Floating Glassmorphism Card Herohero87Fullscreen hero with centered glassmorphism card floating over inset background video
Lead Capture Hero with Email Inputhero88Fullscreen hero with email capture input over inset background video
Reverse Split Hero with Testimonialhero8950/50 split hero with video/image left and content with testimonial quote right
Stacked Hero with Media Tophero90Vertical split hero with video/image on top and content section below
Split Hero with Feature List Panelhero9150/50 split hero with muted content panel and feature list left, video/image right
Split Hero with Bento Feature Gridhero9250/50 split hero with content left and bento feature grid overlay on video right
Asymmetric Split Hero with Quick Linkshero9340/60 asymmetric split hero with narrow content panel and vertical quick links over video
Reverse Split Hero with Pill Gridhero94Reverse split hero with compact 3x2 pill grid over video left, content right
Fullscreen Hero with Bento Gridhero95Fullscreen hero with centered heading and 4-column bento feature grid over inset background video
Split Hero with Metric Dashboardhero9650/50 split hero with content left and metric dashboard cards with trend badges over video right
Bottom-Aligned Hero with Stack Cardshero97Fullscreen bottom-aligned hero with vertical stack cards and inset background video with gradient overlay
Cinematic Hero with Social Proofhero98Cinematic hero with announcement pill, avatar social proof, and overlapping dashboard media
Fullscreen Hero with Marquee Tickerhero99Cinematic fullscreen hero with scrolling marquee keyword band over inset background video
Arrival Hero with Stay Barhotel1A full-height hotel hero: the photograph zooms out on load and drifts slower than the page, a serif headline settles in word by word, and a stay bar whose arrival and departure open a two-month range calendar, a guest stepper and a check availability pill submits straight to your booking engine.
Wellness Spaces Panelshotel10A row of tall photographic panels for a hotel's wellness spaces: hovering, focusing or tapping a panel widens it while the others narrow, its photograph eases back to full size and a description with small detail pills unfolds under the serif name. On phones the panels stack with everything visible.
Seasonal Stay Offershotel11Three staggered offer cards for a hotel's packages: each portrait photograph drifts in its frame and leans in on hover under a length-of-stay pill, followed by a serif title, a short pitch, a dotted list of what is included and a ruled line with the starting price and the season it is valid.
Featured Offer Countdownhotel12A single hotel offer on a rounded photographic band: the photograph drifts behind a dark scrim and film grain, with a serif heading, a dotted list of inclusions, the offer price beside the struck-through usual rate, a sliding-marker pill and a live countdown whose digits roll over as booking closes.
Wedding Exclusive Usehotel13A wedding and exclusive-use section for a small hotel: a serif heading and an intro beside two overlapping photographs that drift past each other as you scroll, with a request-a-proposal pill and the planner's portrait, name and role.
Event Spaces Capacityhotel14A meetings and events section for a hotel: a ruled capacity table of venues with size, boardroom, dinner and standing figures, where hovering or choosing a row crossfades the pinned photograph and its description, with a plan-a-gathering pill and a fact sheet link. Rows become labelled stacks on phones.
Getting Here Aerial Maphotel15A location section for a hotel: an aerial photograph that settles from a slight zoom as you scroll, marked with the hotel's name and pins for nearby places, beside the serif address with coordinates, an open-in-maps pill and a ruled list of travel times. Hovering a pin or a row lights up its partner.
Around the Cove Striphotel16A local guide strip for a hotel: portrait experience cards that start in line with the heading and bleed off the right edge, snap as you swipe or step with arrow buttons, lean in on hover under a small category pill, and carry a serif title, a short note and how far it is, with a hairline that fills as you scroll.
Arch and Setting Sun Herohotel17An artistic boutique hotel hero on a plain ground: a tall doorway arch rises open like a curtain from a drawn horizon line to reveal a room photograph, a sun disc in the theme colour sinks behind the arch as you scroll, and a serif headline splits either side of it, with a short intro, a sliding-marker pill and a text link.
Night Band Footerhotel18A hotel footer that opens on a tall night photograph drifting behind a scrim and film grain, with a serif sign-off settling in word by word and a seasonal letter signup in a pill field, followed by a serif wordmark, three columns of links, the address with email and phone, and a quiet row of social and legal links.
Opening Shutters Herohotel19An artistic hotel hero: a serif headline and a short intro over one wide photograph cut into tall slats like wooden shutters, which open from the centre outwards once the image has loaded and then drift at slightly different speeds as the page scrolls, so the view breathes like light through louvres.
Day in Four Hours Herohotel2A full-height hotel hero that crossfades through the hours of a stay: each photograph drifts in slowly behind a serif headline, while a row of four labelled hairlines fills as the slide plays, pauses on hover and lets guests jump to morning, noon, dusk or night.
Name Over the Window Herohotel20An editorial hotel hero built around the name: the wordmark rises in huge serif type across the page, then a deep-set window photograph opens from its centre underneath it, the letters turning into an inverted negative wherever they cross the photograph, and as the page scrolls the name drifts sideways across the still window, with a caption, a short line and a book pill below.
Postcard Pile Herohotel21A hotel hero with a loose pile of photo postcards beside a serif headline: each card sits at its own gentle tilt with a handwritten-feeling serif caption, and every few seconds, or on a tap, the top card slides away and tucks in at the back of the pile. Hovering pauses the shuffle.
Widening Horizon Herohotel22A 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.
Welcome Letter Herohotel23A text-led hotel hero written as a letter from the owners: a tall photograph rises open and settles from a slight zoom on one side, while a serif headline, letter paragraphs with a drop cap arriving one after another and an italic signature with a hand-drawn underline fill the other, closed by a book pill and a write-to-us link.
Room Detail Hotspotshotel24A room story told through its objects: numbered points sit on the photograph where each detail is, and choosing a point or a row in the numbered list beside it lights both up and opens a short note on where the piece came from, with list rules drawing in as the section arrives.
A Day at the House Timelinehotel25A scroll-led day at a small hotel: a vertical line fills as you read down a list of moments from the morning swim to dinner, each with a large serif time, and the one in the middle of the screen brightens while a pinned photograph beside it crossfades to match with the time set in a small pill.
Made by Hand Materialshotel26A craft story for a boutique hotel: close-up photographs of its materials set in a loose, offset mosaic, each rising open from below and drifting at its own pace as you scroll, with a serif name, where it was made and a short note beside it. Photographs lean in slowly on hover.
Seasons to Visithotel27A when-to-come section for a seasonal hotel: a ruled vertical list of seasons with their months, a hairline marker that glides to the chosen one, a short note and three large figures for sea temperature, sunset and starting rate, beside a pinned photograph that crossfades to the season with its name rolling in over the image.
Concierge Requests Hover Listhotel28A ruled list of things a small hotel will arrange, set in large serif lines with a short note and how much notice each needs: hovering a row dims the others and a tilted photograph follows the pointer across the list, swapping to match the request. Phones get a small thumbnail on every row instead.
At a Glance Glyph Cardshotel29A centred overview for a small hotel: a quiet eyebrow, a large serif heading and two short paragraphs side by side, above three tall muted cards that each carry a hand-drawn line glyph (sunset, olive branch, ferry, key or lantern) drawing itself in and one large serif fact.
Room Collection Listhotel3A rooms overview for a small hotel: a pinned photograph that crossfades to whichever room is hovered or focused, with a nightly rate pill on the frame, beside a ruled list of serif room names, one-line descriptions and dotted facts like size, view and guests. Phones get each photo inline.
Bay Location Maphotel30A contact-and-location section on a real map: street and satellite tiles with a style switch, dragging, double-click and keyboard zoom that glides between levels, a pin for the hotel that drops in, icon markers for nearby beaches and stops that center the map when clicked, and a dark contact card with a large phone number and a directions link. Built without a map library.
Memory Line and Photo Wavehotel31A mood section for a hotel: a light, centered line that turns into an italic serif second half, above a row of five photographs of different heights set in a gentle wave, rising in from the middle outwards over a muted band that grows up behind them, with the whole row drifting slightly as the page scrolls.
About the House Statementhotel32An about section for a small hotel: one small eyebrow over a long statement set in light serif, followed by three tall photographs that drift in their frames, each with a small label and a short serif paragraph about the house, the rooms and the details.
Line Logo Hosts Quotehotel33A hosts' note for a small hotel: a line-drawn logo of an arched island doorway that draws itself in, with a sun rising over the horizon, its rays drawing in, and three wave lines drifting endlessly inside the door, above a large centered serif quote and a quiet signature set between two small dots.
Full Bleed Film Herohotel34A hotel hero over a muted, looping background film that eases in from a slight zoom behind a scrim and film grain, with a serif headline settling in word by word, two pills, and a round play and pause control whose hairline ring traces the loop as it plays. Reduced motion keeps the still poster.
Watch the Film Herohotel35A centered hotel hero with a serif headline over a framed preview film that loops silently, grows towards the container edges and loses its soft corners as it scrolls in, and carries a large play button with the film's length; pressing it opens a full-screen player with native controls.
Portrait Film Split Herohotel36A split hotel hero: a serif headline, an intro, three ruled notes and a reserve pill on one side, and on the other a tall portrait film that rises open and settles from a slight zoom, loops silently with a play and pause control, and draws a hairline beneath it as each loop plays, finished with a short caption.
Round Window Film Herohotel37An artistic hotel hero where the film is seen first through a small round window that opens on load, then widens with the scroll until the looping room film fills its whole frame while easing back from a slight zoom, beside a serif headline, a short line, a book pill and a play and pause control.
Films and Photos Carousel Herohotel38A hotel hero built around a wide mixed-media carousel: silent films play through and photographs drift slowly for a set time before the next slide crossfades in, with a numbered caption that says whether it is a film or a photo, previous, pause and next controls, and a strip of thumbnails marked for films whose hairlines fill with each slide.
Rooms Gallery with Filmstrip Lightboxhotel39A six-photo rooms gallery on an editorial grid of one large and five smaller frames that lean in and reveal a caption on hover; any photo opens a full-screen ink lightbox with a counter, sliding transitions, arrow keys, swipe, a serif caption and a thumbnail filmstrip.
Room Detail with Reserve Cardhotel4A single room page: a crossfading photo gallery with thumbnails and an amenities list on the left, and a sticky column with a serif title, a ruled facts grid and a reserve card whose range calendar works out the nights and total live, flag a minimum stay and submit to your booking engine.
Kitchen Gallery with Story Lightboxhotel40A six-photo food and dining gallery in three staggered columns of portrait and square frames with numbered serif titles; any photo opens a soft paper lightbox that shows the picture beside its title, a short note and a counter, with arrow buttons and arrow keys to move through the dishes.
Outdoors Gallery with Morph Lightboxhotel41A six-photo gallery of a hotel's outdoor spaces on an even grid of portrait tiles with place labels; tapping a tile grows that very photograph out of the grid into a full-screen view, where arrows, keys and a short caption move through the set and closing sends it back into its tile.
Included Amenities Glyph Gridhotel42A what's-included section for a small hotel: a serif heading and a short line above a ruled grid of amenities, each with a hand-drawn line glyph (robe, bicycle, book, glass, lounger, cup, shell or moon) that draws itself in and lifts on hover, a serif title and a one-line note.
Guest Book Score and Noteshotel43A reviews section for a small hotel: a large serif score with how many stays it comes from and four hairline bars that fill to each rating, beside large serif guest notes that blur from one to the next on a timer, with a row of hairlines that fill as each note plays, arrow controls and a pause on hover.
Good to Know Questionshotel44A practical questions section for a hotel: a pinned column with a serif heading, a short line and a muted front desk card with a small photograph, opening hours, phone and email, beside an accordion of large serif questions whose ruled lines draw in as they arrive.
Gift a Stay Listhotel45A gift section for a hotel: a ruled list of four experiences with serif titles and prices, where the chosen one opens its description and swaps the tall photograph beside it with a soft crossfade and slow parallax, while a paper gift tag on the photo swings on its string and rewrites the gift's name and price.
Press Mentions and Laurelshotel46A press and awards section for a small hotel: three ruled cards of serif press quotes, each signed with the publication set in its own masthead style and the issue, followed by a row of laurel wreaths whose stems draw themselves in and whose leaves fade on around the year and the award's name.
Getting Here Wayshotel47A getting-here section for an island hotel: three columns split by drawn rules for the ferry, the fast boat and the flight, each with a line glyph that draws itself in, the journey time in large serif and a route line that runs out from port to port with its stops, closed by a pickup line with a drawn car and a link.
House Elevation Drawinghotel48A section that introduces a small hotel through a line drawing of its front: the house, the roof suite, the domed hammam, the vine pergola and an olive tree draw themselves in, numbered markers sit on each part, and hovering a marker or its ruled note below lights that part of the drawing in the accent color.
When to Come Year Charthotel49A 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.
Nightly Rate Calendarhotel5A nightly rate calendar for direct bookings built on the shadcn calendar: two months side by side, every night shows its own price, the lowest rate of each month carries a dot and full nights are struck through. Picking an arrival then a departure skips stays that cross a full night, sums the total, enforces a minimum and hands the dates to your booking engine.
Hours of the House Dialhotel50An opening hours section for a hotel drawn as a 24 hour dial: hour ticks fade in around the face, each service gets its own ring whose arc draws in from its opening to its closing time, and choosing a service from the ruled list lights its arc in the accent color while its name and hours change in the middle of the dial.
Postage Stamp Signuphotel51A centered newsletter section for a small hotel under a line-drawn postage stamp: the perforated stamp, its frame and an olive branch draw themselves in, centered above a serif heading, a short line and an email field with a signup button on one row.
Book Direct Comparisonhotel6A book-direct section for independent hotels: a pinned photograph drifting in its frame with a caption, beside a serif heading and a ruled two-column comparison of what guests get by booking here against elsewhere, with check and dash marks or short values, a sliding-marker pill and a price match note.
Restaurant Terrace Storyhotel7A hotel restaurant section: a serif heading over a wide photograph that drifts against a smaller framed kitchen photo moving the other way, followed by a large chef quote with a reserve pill and a menu link, and a ruled list of sittings with their hours and notes.
Restaurant Menu Tabshotel8A hotel menu section: serif tabs for breakfast, lunch, dinner and the bar draw an underline in, each showing its hours and a ruled list of dishes with descriptions, small notes and prices, while a pinned photograph beside them crossfades to match the sitting.
Spa Ritual Menuhotel9A hotel spa section: a tall pinned photograph drifting in its frame beside a serif heading and a round detail photo, an accordion of rituals that each open onto a description, numbered steps and a booking link, with durations and prices on every row, and a sliding-marker pill with opening hours.
Cookie Consent Bannerlegal1Displays a cookie notification with accept, reject, and customize buttons. Perfect for GDPR-compliant websites requiring user consent.
DMCA Takedown Noticelegal10Guides users through DMCA submission with numbered steps and warnings. Perfect for copyright protection pages accepting infringement reports.
Compliance Checklistlegal11Displays regulatory requirements with checkmarks, progress bar, and completion percentage. Perfect for showcasing compliance status across multiple standards.
NDA Template Cardlegal12Shows NDA details with type (mutual/unilateral), duration, and key terms covered. Perfect for presenting confidentiality agreement summaries with download options.
Software License Cardlegal13Displays license type with allowed permissions and limitations in checkmark format. Perfect for open-source projects or software documentation pages.
Compliance Badges Gridlegal14Shows certification badges in a grid with verified checkmarks and in-progress states. Perfect for trust pages displaying security and compliance credentials.
Data Retention Policylegal15Lists data categories with types, retention periods, and deletion methods. Perfect for transparency pages explaining how long user data is stored.
Cookie Categories Explainerlegal16Explains cookie types (essential, functional, analytics, marketing) with icons and examples. Perfect for cookie policy pages educating users on tracking technologies.
Document Version Timelinelegal17Shows document revision history in a vertical timeline with version numbers and summaries. Perfect for tracking changes to terms, policies, or legal agreements.
Legal Contact Cardlegal18Displays legal department contact information including address, email, phone, and hours. Perfect for providing users a way to reach legal teams with inquiries.
Accessibility Statementlegal19Shows WCAG conformance level, accessibility features, and issue reporting options. Perfect for demonstrating commitment to digital accessibility standards.
Privacy Policy Accordionlegal2Shows privacy policy content with expandable accordion sections for each topic. Perfect for organizing lengthy privacy policies into scannable segments.
Financial Disclaimerlegal20Displays investment risk warnings with gain/loss icons and bullet-point cautions. Perfect for fintech or investment platforms requiring regulatory disclosures.
Medical Disclaimerlegal21Shows healthcare warnings with an emergency notice section for critical situations. Perfect for health-related websites requiring medical advice disclaimers.
Affiliate Disclosurelegal22Displays FTC-compliant disclosure with affiliate network badges and transparency text. Perfect for content sites monetized through affiliate marketing.
Testimonial Disclaimerlegal23Shows disclaimer about customer testimonials with star decoration and important notes. Perfect for product pages featuring reviews or success stories.
Earnings Disclaimerlegal24Displays income disclaimer with warnings about results varying based on effort. Perfect for courses, coaching programs, or business opportunity pages.
Refund Policy Cardlegal25Shows refund period badge, eligible conditions, and exclusions with a request button. Perfect for e-commerce stores displaying return and refund terms.
Data Breach Notificationlegal26Incident notification card for data breaches with severity badge, affected data types, timeline, and recommended actions. Suitable for security incident pages and user notifications.
AI Disclosure Noticelegal27Transparency card disclosing the use of AI and automated decision-making. Lists AI capabilities, data usage, and opt-out options. Compliant with EU AI Act and emerging regulations.
Terms Acceptance Cardlegal28Formal terms and conditions acceptance card with individual checkboxes for each agreement. Shows required vs optional consents, links to full documents, and a submit button. Ideal for sign-up flows.
Acceptable Use Policylegal29Lists allowed and prohibited usage of a service or platform with check and cross icons. Includes a violation reporting section. Suitable for SaaS, hosting, and community platforms.
Terms of Service Summarylegal3Displays key terms with color-coded icons for allowed, prohibited, and important points. Perfect for presenting condensed terms before user acceptance.
SLA Guarantee Cardlegal30Service Level Agreement card showing uptime guarantee percentage, compensation tiers for downtime, and incident response times. Ideal for SaaS and cloud service providers.
Open Source Attributionlegal31Displays open source package attributions with license types, authors, and links to repositories. Includes a search filter for large dependency lists. Required for OSS license compliance.
Dispute Resolution Cardlegal32Outlines the dispute resolution process with numbered steps from informal negotiation to binding arbitration. Includes governing law and jurisdiction details.
Export Compliance Noticelegal33Displays export control and sanctions compliance information with restricted regions list and compliance requirements. Required for software with international distribution.
Children's Privacy Noticelegal34COPPA-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.
Intellectual Property Noticelegal35Displays trademark, patent, and copyright ownership information with registration details and usage restrictions. Suitable for product pages and legal sections.
Whistleblower Policy Cardlegal36Anonymous reporting and whistleblower protection policy with reporting channels, protection guarantees, and a secure report submission button. Required for corporate compliance programs.
Indemnification Noticelegal37Outlines indemnification obligations with covered scenarios and exclusions. Shows which party indemnifies the other and under what conditions.
Limitation of Liabilitylegal38Displays liability caps, excluded damages, and maximum liability amounts. A standard clause for SaaS terms of service and commercial agreements.
Force Majeure Clauselegal39Force majeure card listing qualifying events that excuse performance, notification requirements, and obligations during the force majeure period.
GDPR Data Rights Panellegal4Lists user data rights (access, rectify, erase, restrict, export) with request buttons. Perfect for GDPR compliance portals allowing users to exercise their rights.
Confidentiality Agreement Cardlegal40Summarizes confidentiality obligations with what is considered confidential, permitted disclosures, duration, and remedies. Suitable for vendor onboarding and partnership agreements.
Privacy Policy Summarylegal41Simple privacy policy overview card listing key data practices. Ideal for sign-up flows, footers, or settings pages.
Terms of Servicelegal42Text-focused terms of service card with numbered sections. Each section has a heading and paragraph content for full legal text.
Privacy Policy Pagelegal43Full privacy policy content card with sections covering data collection, usage, sharing, retention, rights, and security. Ideal for dedicated privacy pages.
Cookie Policylegal44Cookie policy card listing each cookie type with name, description, and required/optional badge. Suitable for dedicated cookie policy pages or modals.
End User License Agreementlegal45EULA card with numbered clauses covering license grant, restrictions, IP, warranties, and liability. Each clause has a title and full legal text.
Privacy FAQ Accordionlegal46Expandable privacy FAQ using accordion pattern. Each question reveals a detailed answer on click. Ideal for help centers and privacy pages.
Data Retention Tablelegal47Table-based data retention schedule showing category, retention period, and legal basis per row. Ideal for GDPR compliance and privacy documentation.
Data Request Process Timelinelegal48Vertical timeline showing the step-by-step process for handling data requests. Numbered steps with connecting lines guide the user through the workflow.
Regulatory Notice Blockslegal49Color-coded regulatory notices with info, warning, and critical severity levels. Each notice has a colored left border, icon, and detailed content.
Data Processing Agreement Cardlegal5Shows DPA details with controller/processor parties, dates, and processing purposes. Perfect for displaying B2B data processing contracts with status badges.
Tabbed Platform Policieslegal50Multi-section policy card using tabs to switch between data use, security, cookies, and user rights content. Compact way to present multiple policies.
Rights Comparison Tablelegal51Two-column comparison table showing data rights and privacy features by plan tier. Badge-styled values for Free vs Pro plans.
Policy Document With Table Of Contentslegal52A readable policy page with a last-updated line, a sticky hairline table of contents that scrolls smoothly to each anchored section, prose sections with accent-bulleted lists, and a soft contact panel at the end.
Trust And Compliance Overviewlegal53A compliance section pairing four hairline certification cards, each with an accent icon and a tone-coded status pill, with a hairline definition list of data handling specifics and a security pack request.
Subprocessor Registerlegal54A legal section publishing every subprocessor as a scrollable hairline table with purpose, region, and start date, closing on an image tile that floats a live data residency card beside a subscribe-to-changes panel.
Plain Words Terms Tablelegal55A legal section that sets each binding clause against a plain-language reading of it on hairline rows, keyed by clause references, with a precedence disclaimer under the last row.
Data Rights Requestlegal56A legal section listing four data rights as hairline cards, each with an icon tile and a response window, beside a soft panel holding a working request form with a request type, email, and free-text detail.
Cookie Preference Centrelegal57An interactive cookie notice with four hairline categories on live switches, a locked required group, save and reject-all actions, and a scrollable table naming every cookie, its purpose, and its retention.
Reprint Permissions In Three Columnslegal58A licence written as three plain columns, what is allowed outright, what needs an email first and what is refused, each item marked by the icon for its column.
Readable Policylegal59A legal page meant to be read: a serif heading that settles in word by word, a revision date and a plain intro, then a sticky numbered contents list with anchor links beside ruled sections of serif titles and paragraphs, with a pill action for questions.
Consent Preferences Managerlegal6Displays cookie categories with toggle switches to manage consent preferences. Perfect for allowing users to customize their privacy settings granularly.
Legal Disclaimer Bannerlegal7Shows a disclaimer message with warning or info styling and last updated date. Perfect for displaying liability warnings and informational notices.
Age Verification Gatelegal8Displays an age verification prompt with configurable minimum age and confirm/deny buttons. Perfect for age-restricted content or product pages.
Copyright Footerlegal9Shows copyright notice, trademark attributions, and links to legal pages. Perfect for website footers requiring comprehensive legal information.
Logos Splitlogos10Headline and blurb beside a grid of client wordmarks.
Logos With Statlogos11A headline stat of trust above a centered row of client wordmarks.
Hairline Client Walllogos12A client wall that sets six greyscale logos in a hairline cell grid, each lifting to full colour on hover, with an eyebrow and a short claim on the left, a reach line on the right, and a credit note underneath.
Ruled Client Rosterlogos13Client proof band with a parenthetical eyebrow, a display heading beside a supporting paragraph, and a ruled grid of grayscale logos where each one carries a plain caption naming the work, closed by a footnote and a pill CTA.
Logo Marquee Panellogos14Soft panel carrying a centered statement over an endlessly scrolling logo track with gradient edge fades that pauses on hover, closed by a ruled row of three studio figures.
Sector Grouped Client Indexlogos15Client proof organised by sector: each ruled row names the sector, explains the kind of work it involves, and lines the matching grayscale logos up on the right edge.
Press Quote Cardlogos16A single raised card holding three publication marks side by side, each with the line that publication wrote underneath it, over a soft section band.
Noticed By Rowlogos17A press row: a serif heading that settles in word by word beside a pill action, then six greyscale logos in a ruled strip that blur in one after another and regain their colour on hover.
Press Noteslogos18Three press mentions under a centred serif heading that settles in word by word: each ruled column carries a greyscale logo, a serif pull quote, a small-caps source line and a link to the piece, with a pill action beneath.
Logo Cloudlogos19A quiet logo cloud: a small-caps line of context, a seamless right-to-left marquee of greyscale logos that regain their colour on hover, and a sliding-marker pill beneath.
Client Wordmarks Over A Line Fieldlogos20A client section with the eyebrow, heading and description above one wide borderless stage of fixed height filled with a live field of rippling parallel lines. A frosted glass panel floats along the bottom of the stage and carries the client names as plain text wordmarks in two marquee rows that run in opposite directions. The names are props, so no logo files are needed.
Logo Grid with Card Backgroundslogos6Responsive grid of partner or client logos. Each logo sits inside a softly tinted, rounded card so mixed-style logos (marks, wordmarks, scanned seals) all feel cohesive.
Logo Cloudlogos7Centered grid of client wordmarks with a trusted-by intro.
Logo Marqueelogos8Full-bleed auto-scrolling client wordmark marquee with edge fades.
Logo Grid Walllogos9Partitioned bordered grid of client wordmark cells.
Bordered Cells Meganavbar100An edge-to-edge bar built as a row of cells split by hairline borders: brand, link cells, an empty spacer and a button cell, with no gaps between them. The Services cell drops a full-width row of four bordered cards with a title, a line and an arrow, and the phone menu slides down as a two-column grid of cells. Every panel stays in the markup and is toggled with CSS.
Top Curtain Menunavbar101A centred wordmark between a Menu toggle on the left and a button on the right. The toggle drops a curtain from the top of the viewport, 70vh tall on desktop and full height on a phone, holding three columns of large links and a footer row with an email and social links over a dimmed page. The curtain stays in the markup and is toggled with CSS.
Sticky Sub-Nav Pillsnavbar102A main bar of brand, links and a button stacked over a second sticky row of section pills, where a filled indicator slides to the pill you click with a shared framer-motion layout. There is no mega menu; on a phone the toggle reveals the main links as one horizontally scrollable pill row, and the section pills scroll sideways too. The mobile row stays in the markup and is toggled with CSS.
Single Menu Tabs Panelnavbar103A bar with the brand, one Menu trigger and a pair of buttons. The trigger drops a full-width panel with horizontal tabs for Products, Solutions and Resources over a grid of described links, switched by click or the arrow keys, and on a phone the same tabs turn into an accordion in a floating panel. Every panel and tab stays in the markup and is toggled with CSS.
Word Menu Panelnavbar104A 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.
Expanding Search Barnavbar105A bar with brand, links and a search icon that widens into a full input, pushing the links aside, while a Categories trigger drops a two-column floating card. On a phone the search takes over the bar and the filtered link list below it becomes the menu. Every panel stays in the markup and is toggled with CSS.
Context Switcher Barnavbar106An app-style bar with the brand, a thin rule and a chevron switcher showing the current section; the switcher drops a floating list of sections with descriptions and a check on the current one, and actions sit on the right. On a phone the same list rises as a bottom sheet behind a scrim. Both panels stay in the markup and are toggled with CSS.
Locale and Destinations Meganavbar107A travel bar with the brand, a Destinations trigger that drops a full-width band of region columns, plain links, and a language button showing the current code and currency that opens a floating list of languages with native names and currencies. On a phone a right drawer holds the links and regions with the language rows pinned to its bottom. Every panel stays in the markup and is toggled with CSS.
Numbered Index Menunavbar108A studio bar whose links read as a numbered index (01 Work, 02 Studio, 03 Journal); hovering or clicking an entry with projects reveals a full-width panel holding a horizontally scrolling, scroll-snapped strip of project thumbnails with captions and arrow buttons. On a phone a fullscreen overlay lists the same entries as big numbered links. Every panel stays in the markup and is toggled with CSS.
Account Menu Barnavbar109A compact app bar with the brand and an environment pill, page links, a status dot with a short system status line and an initials avatar that opens a hand-built account dropdown (profile, billing, team, sign out) with arrow key navigation. On a phone the avatar raises a bottom sheet holding the account, the status and the page links. Both panels stay in the markup and are toggled with CSS.
Headline Meganavbar110A bar with brand, links and two buttons where Why us opens a full-width panel split in half: a headline, a paragraph and two buttons on the left, two columns of described links on the right. On a phone a panel slides down with the action buttons side by side at its top, then the links and the pitch. Every panel stays in the markup and is toggled with CSS.
Partner Marks Barnavbar111A co-branded bar: the wordmark, a thin vertical rule and a partner mark, then links and a button. Programmes drops a floating card of dated programme rows with a calendar link, and the phone menu is an overlay under the bar that ends in a contact footer. Every panel stays in the markup and is toggled with CSS.
Hide on Scroll Barnavbar112A sticky store bar that slides away while you scroll down, returns as soon as you scroll up and shrinks from 64 to 56 pixels once the page moves. Shop drops a full-width panel of three link columns, and on a phone the menu is a floating bottom pill of icon links whose Menu button grows a card above it; the pill hides on scroll down too. Panels stay in the markup and are toggled with CSS.
Pricing Preview Meganavbar113Brand and links on the left, a ghost and a solid button on the right. Pricing drops a full-width panel with a short intro, a Compare plans link and three mini plan cards, each with a name, a price, three lines and an outline button. On a phone the menu slides down as an accordion whose Pricing group holds stacked plan cards. Panels stay in the markup and are toggled with CSS.
Side Dots Navigationnavbar114A minimal top bar with the brand and a button, plus a column of section dots fixed at the right edge whose labels slide out on hover or focus; an IntersectionObserver moves the active dot as each section crosses the middle of the screen. On a phone the dots sit in a bottom row with the current section name, which opens a numbered section list above it. The list stays in the markup and is toggled with CSS.
Photo Backdrop Meganavbar115Brand, links and a button in a sticky bar. Journeys drops a full-width panel set on a photo under a dark scrim, with a headline, an arrow link and four columns of light links. On a phone the menu is an overlay under the bar that opens with the same photo and headline on top, then the link columns. Panels stay in the markup and are toggled with CSS.
Brand Switcher Barnavbar116For 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.
Keyboard First Meganavbar117Brand, links and a button, with an Explore panel of three link columns built for the keyboard: a roving tab stop, Arrow keys across items and columns, Home and End jumps, Escape back to the trigger and a visible focus ring on every link. On a phone the menu is an overlay under the bar with 56 pixel touch rows and the same focus rings. Panels stay in the markup and are toggled with CSS.
Navbar With Contact Bar and Hanging Logonavbar118A two row header for service businesses. A thin top bar lists address, email and phone in ruled cells, with social icons in square cells on the right. Below it, a logo card hangs over the next section beside the company name, and the links sit on the right with an active state and a standard dropdown that opens on hover, click or keyboard focus. On small screens the top bar keeps only the linked contacts, the logo card still hangs over the next section, the company name sits centered, and a bordered menu button opens the links with collapsible submenus.
Mega Menu Navbarnavbar19Full-width mega menu navbar with multi-column product dropdowns, icon-enhanced links, and promotional cards. Perfect for SaaS products and enterprise sites with extensive feature offerings.
Centered Logo Split Navnavbar30Symmetrical 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.
Animated Underline Navbarnavbar31Minimal navbar with configurable animated underline effects (slide, grow, or fade) on navigation links. Perfect for portfolio sites and creative agencies wanting subtle hover animations.
Search-Focused Navbarnavbar32Navbar with prominent search input, navigation links, and action button for search-driven experiences. Perfect for marketplaces, directories, and content platforms prioritizing discovery.
Multi-Level Dropdown Navnavbar33Navbar with hover-activated dropdowns supporting nested sub-menus for deep navigation hierarchies. Perfect for enterprise software and documentation sites with complex information architecture.
Sidebar Drawer Navbarnavbar34Navbar with slide-in sidebar drawer featuring grouped navigation sections and overlay backdrop. Perfect for content-rich sites wanting organized off-canvas navigation menus.
Sliding Indicator Navbarnavbar35Responsive navbar with animated sliding underline indicator that follows hover and highlights active navigation item. Perfect for SaaS dashboards and apps wanting polished micro-interactions.
Tab-Style Navbarnavbar36Navbar with tab-style navigation supporting underline or pill active states for app-like navigation. Perfect for dashboards and admin panels with section-based interfaces.
Floating Pill Navbarnavbar37Centered floating navbar with rounded pill shape, backdrop blur effect, and compact layout. Perfect for modern landing pages and portfolios wanting a minimal floating navigation style.
Dual-Row Navbarnavbar38Two-tier navbar with slim top bar for announcements and contact info above main navigation. Perfect for e-commerce and service businesses displaying promotions and support details.
Command Palette Navbarnavbar39Developer-focused navbar with Cmd+K command palette for keyboard-driven navigation and actions. Perfect for developer tools, documentation sites, and power-user applications.
Breadcrumb Navbarnavbar40Two-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.
Editorial Studio Navbarnavbar41Two-tier studio navbar with an availability utility strip, square-mark wordmark, index-numbered links and a seal CTA.
Grid Cell Navbarnavbar42Table-inspired navbar with full-height bordered link cells, an availability cell and a dark full-height seal CTA cell.
Dark Announcement Navbarnavbar43Dark studio navbar with a primary announcement bar, wordmark with tagline divider, uppercase links and a primary seal CTA.
Centered Logo Navbarnavbar44Symmetric navbar with links on the left, a square-mark wordmark centered and a seal CTA on the right, plus a tile-grid mobile menu.
Fullscreen Overlay Navbarnavbar45Dark navbar with a hamburger menu cell that opens a fullscreen overlay — the panel and its centered links cascade down from the top, with a contact footer.
Submenu Navbarnavbar46Studio navbar with hover dropdown submenus on desktop, described sublinks, a seal CTA and an inline-expanded mobile menu.
Mega Menu Navbarnavbar47Studio navbar whose Work item opens a full-width mega panel with category links and three featured project thumbnails.
Masthead Navbarnavbar48Print-inspired masthead navbar with a giant centered wordmark flanked by studio meta and contact, over a ruled row of spread-out links with an inline seal CTA.
Drawer Navbarnavbar49Minimal navbar with an availability status whose menu opens a dark right-side drawer — numbered links float in with a stagger over a backdrop, with a seal CTA and socials below.
Floating Card Navbarnavbar50Detached floating navbar card with a square-mark wordmark, uppercase links and a compact seal CTA — the mobile menu unfolds inside the card.
Tab Bar Navbarnavbar51Two-row navbar with brand, availability status and seal CTA on top, and an underlined active-tab link row that scrolls horizontally on mobile.
Letterhead Navbarnavbar52Letterhead-style navbar with a stacked brand block beside stacked rows of location, email and links, closed off by a seal CTA on the right.
Dark Mega Menu Navbarnavbar53Dark studio navbar whose Services item opens a mega panel with three eyebrow-titled link columns and a bordered booking card with a seal CTA.
Multi Mega Menu Navbarnavbar54Navbar where multiple items each open their own mega panel — three eyebrow-titled columns of described links with a view-all footer strip.
Editorial Mega Menu Navbarnavbar55Navbar with an editorial split mega panel — eyebrow statement and seal CTA on the left, a numbered two-column project index in the middle and a tall studio image on the right.
Giant Wordmark Navbarnavbar56Typographic statement navbar — a hairline row of index-numbered links and availability above a giant wordmark with a primary square, studio meta and seal CTA.
Display Type Navbarnavbar57Typographic navbar where the links are the heroes — a hairline brand row above a full-width spread of giant index-numbered links closed by a primary arrow CTA, always visible with no hamburger.
Monogram Navbarnavbar58Minimal stacked navbar — a large primary logo square with the wordmark tucked into its corner, over a quiet ruled row of uppercase links. No buttons, no hamburger.
Studio Bar Navbarnavbar59Editorial single-row navbar — bold wordmark, quiet bold links, and an outline pill CTA. Collapses to a clean full-height mobile menu.
Mega Studio Navbarnavbar60Full mega-menu navbar — bold links open three-column panels with parenthetical section labels, descriptions and a footer link. SSR-mounted panels, pill CTA and a stacked mobile menu.
Use-Case Mega Navbarnavbar61Navbar with a marked wordmark and a pill-highlighted trigger that drops a floating rounded mega panel — a parenthetical label over a 3x2 grid of icon use-case cards. Sign-in pill plus a primary CTA.
Announcement Marquee Navbarnavbar62Navbar with a dark scrolling announcement bar on top — looping links that pause on hover and fade at the edges — over a clean wordmark row with a pill CTA.
Floating Pill Navbarnavbar63A floating rounded-full navbar island resting on a muted band — wordmark, quiet links and a pill CTA, with a rounded mobile menu card that drops below.
Fullscreen Overlay Navbarnavbar64A quiet top bar whose menu button opens a full-screen overlay — oversized numbered links with hover arrows, a contact block and social row beneath. Pure Auralis big type.
Status Tier Navbarnavbar65Two-tier navbar — a top strip carries an availability badge with a live dot and utility links, over a main row with an oversized wordmark, nav and pill CTA.
Featured Mega Navbarnavbar66Mega-menu navbar whose panels lead with a featured project — a full-color image card with a parenthetical category beside a ruled link list. SSR-mounted panels and a stacked mobile menu.
Poster Split Navbarnavbar67Poster-scale navbar — an oversized wordmark anchors the left while a right column stacks the nav, a pill CTA and a parenthetical label. Collapses to a stacked mobile menu.
Command Search Navbarnavbar68Search-forward navbar — a wide rounded search field sits at the center with an animated submit seal, framed by the wordmark, quiet links and a pill CTA.
Promo Mega Navbarnavbar69Airy navbar with one mega item and two plain links — its panel pairs grouped link columns with a featured promo card. A primary pill CTA plus an expanding search field that swaps in over the actions. Closes on outside click or Escape.
Dark Three-Column Mega Navbarnavbar70Inverted bg-foreground navbar with a three-column mega panel — an intro pitch, a numbered index list and a full-color featured image tile, divided by hairline rules. Outline pill CTAs throughout. Closes on outside click or Escape.
Pill Menu Navbarnavbar71A light editorial navbar with a lowercase wordmark, soft muted nav pills that reveal hover dropdowns, a solid accent call to action, and a collapsing mobile menu.
Centered Link Navbarnavbar72A minimal navbar with a lowercase wordmark, absolutely centered uppercase text links, an accent call to action, and a collapsing mobile menu.
Announcement Bar Navbarnavbar73A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu.
Floating Capsule Navbarnavbar74A navbar contained in a softly rounded, bordered capsule with a lowercase wordmark, uppercase links, an accent call to action, and a matching mobile panel.
Masthead Navigation With Mega Panelnavbar75A publication masthead whose first section opens a full width panel split by hairlines into the newest issue and two indexed columns, always in the markup and revealed with CSS.
Veil Navbarnavbar76A sticky, frosted navbar with a serif wordmark, uppercase letter-spaced links that underline from the left on hover, a sliding-marker pill action, and a full-height ink mobile menu whose links settle in one after another.
Centred Wordmark Navbarnavbar77A 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.
Classic Navbarnavbar78The classic layout in the language: serif wordmark on the left, uppercase letter-spaced links in the middle that underline from the left on hover, a quiet text link and a sliding-marker pill on the right, and a light full-height mobile menu whose links settle in one by one.
Announcement Navbarnavbar79A sticky navbar topped by a thin ink announcement bar with a small-caps link, then a frosted bar with the serif wordmark, uppercase links that underline from the left on hover, a sliding-marker pill, and a light full-height mobile menu whose links settle in one after another.
Photo Mega Navbarnavbar80A sticky frosted navbar whose first item opens a full-width panel: a ruled list of serif services on the left that brightens and slides an arrow in on hover while the photograph on the right blurs to the matching room, plus plain links, a sliding-marker pill and a light mobile menu. The panel is always in the markup and shown with CSS.
Columns Mega Navbarnavbar81A sticky frosted navbar with two mega items, each dropping a full-width panel of three small-caps link groups in serif type beside a soft featured card with a photograph, an eyebrow and a lifting arrow link. Every panel stays in the markup and is shown with CSS; a light mobile menu groups the same links.
Full Screen Menu Navbarnavbar82A minimal bar with a wordmark, a sliding-marker pill and a two-line menu toggle that turns into a cross, opening a full-screen ink menu with film grain: numbered oversized serif links settle in one after another on the left, the photograph and description on the right blur to whichever link is hovered, and a ruled foot carries contact details, social links and the pill. The menu is always in the markup and shown with CSS.
Three Column Product Meganavbar83Logo left, links centred and a ghost plus solid pair of buttons on the right. The Product item drops a full-width panel of three link columns, each link an icon square with a title and a one-line description, closed by a muted promo band with an arrow link. The phone menu slides down as an accordion. Every panel stays in the markup and is toggled with CSS.
Vertical Tabs Meganavbar84Logo and links left-aligned with one outline button on the right. The Solutions item opens a panel with vertical tabs on the left, moved by hover, click or the arrow keys, and a link grid on the right that swaps per tab while every grid stays mounted. The phone menu is a drill-down overlay whose groups slide left to reveal a sub-list with a Back button. Panels stay in the markup and are toggled with CSS.
Split Links Tile Meganavbar85A centred wordmark with three links on its left and three on its right. The Collections item on the left drops a full-width panel of four 3:2 photo tiles with captions and a View all link. The phone menu is a bottom sheet that rises with a handle over a scrim. Every panel stays in the markup and is toggled with CSS.
Utility Row Meganavbar86A thin utility row with a locale link, Help and Log in sits over the main bar of logo, links and two buttons. The Products item drops a full-width panel of four link columns with a featured article card on the right: a 3:2 image, a title and a read link. The phone menu is a right side drawer with accordion groups and the utility links at its foot. Every panel stays in the markup and is toggled with CSS.
Icon Rail Flyoutsnavbar87A fixed left rail of icon buttons with the brand mark on top and a create button at the bottom, beside a demo app content area. Hovering, focusing or clicking a rail item opens a flyout card to its right with a heading and described links. On a phone a top bar with the brand and a hamburger opens a fullscreen grid of icon tiles. The flyouts and the phone menu stay in the markup and are toggled with CSS.
Detached Pill Meganavbar88A floating rounded pill set off the top edge with the brand, four links and a small button. The Features item opens a floating card under the pill with two columns of links and descriptions. On a phone the pill itself grows into a card with a height animation that holds the menu. Every panel stays in the markup and is toggled with CSS or a height animation.
Transparent to Solidnavbar89A bar that sits transparent with light links over a dark photo hero band and turns into a solid bar with a bottom border once the page scrolls past 24 pixels. The Explore item drops a full-width panel with two captioned photos and two link columns. The phone menu slides down with its items settling in one after another. Every panel stays in the markup and is toggled with CSS.
Docs Navbarnavbar90A documentation bar with a wordmark and version pill, a Docs trigger that drops a two-column card of described links, plain links, a search trigger styled like an input with a keyboard hint, a theme button and a ghost GitHub link. On phones a left drawer slides in with a collapsible section tree. The dropdown and the drawer stay in the markup and are toggled with CSS.
Store Categories Meganavbar91A store bar with a wordmark, category triggers (Women, Men, Kids, Home) that each drop a full-width panel of four link columns beside a New in photo tile, and on the right an inline search input, an account icon and a bag icon with a count bubble. On phones a left drawer opens with the categories as tabs across its top. Every panel and tab content stays in the markup and is toggled with CSS.
Searchable Resources Meganavbar92A bar with a wordmark, plain links, a Resources trigger and a small button. Resources drops a full-width panel topped by a search input that filters three groups of described links as you type, with an empty state line. On phones an overlay opens with a live search field over the same groups. The groups stay in the markup and the filter only hides them with CSS.
App Launcher Gridnavbar93A product bar with a wordmark, plain links, an Apps trigger and an initials avatar. Apps opens a floating card holding a four by three grid of app tiles, each an icon square, a name and a one-liner. On phones the top bar keeps the brand and a fixed bottom tab bar carries five icon tabs, the centre one raising the app grid as a sheet. The card and the sheet stay in the markup and are toggled with CSS.
Cascading Flyoutsnavbar94A bar with a wordmark, a Services trigger, plain links and two buttons. Services drops a compact list where items with a chevron open a second-level flyout to their right on hover, click or Arrow Right, and Arrow Left steps back. On phones a panel slides down under the bar with a two-level accordion. Both levels and the mobile panel stay in the markup and are toggled with CSS.
Preview Card Meganavbar95A studio bar with a wordmark, a Work trigger, plain links and a button. Work opens a full-width panel with six large project links on the left; hovering or focusing one cross-fades a preview card on the right with a 4:3 photo, a title and a line. On phones a plain flat list drops under the bar. Every preview card and the mobile list stay in the markup and are toggled with CSS.
Split Screen Menunavbar96A minimal bar with a wordmark, a Menu button and a call to action. Menu opens a fullscreen overlay split in two: five huge links rise in on the left, and on the right a photo cross-fades to whichever link is hovered or focused, with a contact block beneath it. On phones the same overlay stacks the photo above the links and the contact details. The overlay and every photo stay in the markup and are toggled with CSS.
Dismissible Announcement Meganavbar97A muted announcement row with a close button sits above a sticky bar of brand, links and two buttons. The Platform item drops a full-width panel of three link columns beside a Latest changes column of dated changelog entries, and the phone menu slides down as a plain list with a pinned button footer. Every panel stays in the markup and is toggled with CSS.
Reading Progress Chaptersnavbar98A reading bar for long articles: brand, a Chapters dropdown of numbered section links that marks the chapter in view, and a share button, with a hairline progress line under the bar that fills as the page scrolls. On a phone the dropdown becomes a compact chapter Select in the bar. The chapter list stays in the markup and is toggled with CSS, and the block renders a demo article to scroll through.
Dark Glass Meganavbar99A dark translucent bar with a blurred backdrop, muted light links and a light solid button. The Solutions item drops a dark full-width panel with two columns of described links and a large light CTA tile, and the phone menu opens a dark full-screen layer of huge links that locks page scroll. Every panel stays in the markup and is toggled with CSS.
Breaking News Tickernews1Animated breaking news ticker with live indicator, category badges, and auto-rotating headlines.
Video News Featurenews10Video-focused news section with large thumbnail, play button overlay, duration badge, and related stories sidebar.
Masonry News Gridnews11Masonry-style news grid with large, medium, and small article cards. Dynamic sizing based on article importance.
World News by Regionnews12Global news grid with color-coded region indicators, hot story badges, and source attribution.
Stock Market Newsnews13Financial news feed with stock symbols, price changes, trend indicators, volume data, and animated progress bars.
Minimal Big Numbersnews14Minimal news list with oversized numbers, large typography, and clean dividers. Perfect for weekly roundups.
News Carouselnews15Featured news carousel with large images, navigation arrows, and progress dots. Side-by-side layout on desktop.
Quick News Bitesnews16Compact quick news list with bullet points, source attribution, and external link indicators. Perfect for news digests.
Sports Match Centernews17Live sports scores with team form indicators, possession bar, match events (goals, cards), venue info, and upcoming match support.
Audio News Playernews18Fully functional audio player with Now Playing card, playlist view, progress bar, skip controls, and waveform animation.
Terminal News Feednews19Hacker-style terminal with boot sequence animation, typing effects, priority badges, and command-line aesthetic.
Featured News Gridnews2News section with large featured article and side list. Includes category badges, author info, and timestamps.
Vintage Newspapernews20Classic newspaper front page layout with masthead, headline hierarchy, three-column text, and drop caps.
Split-Flap Displaynews21Retro airport departure board style news ticker with character-by-character flip animation and auto-rotating headlines.
Two Perspectivesnews22Side-by-side comparison of different viewpoints on a topic, with color-coded columns and author info.
Weekly Calendar Viewnews23News organized by day with calendar-style headers, timeline layout, and category badges.
Newsletter with Featurednews24Newsletter signup sidebar with featured story and additional headlines. Sticky subscription form.
Category Hubnews25News categories grid with story counts, top story preview, and browse links.
Opinion & Editorialnews26Opinion pieces with pull quotes, author profiles, and category badges. Editorial-style layout.
3D Story Carouselnews27Immersive 3D carousel with stacked cards, smooth transitions, depth effects, and navigation controls.
Data Statistics Dashboardnews28Data journalism style cards with animated numbers, change indicators, progress bars, and key statistics.
News Storiesnews29Instagram-style story circles with fullscreen viewer, auto-advance progress bars, channel avatars, and LIVE badges.
Live News Feednews3Real-time news feed with category tabs, live indicators, trending badges, and source attribution.
Editorial Magazinenews30Premium magazine-style editorial layout with featured story, author byline, and numbered trending sidebar.
Bento News Gridnews31Asymmetric bento box layout with large hero, gradient stat cards, and image tiles in a visually striking grid.
Magazine Covernews32Editorial magazine layout with dramatic cover story, serif typography, author bylines, and featured story grid.
Live News Feednews33Real-time news timeline with live indicator, breaking/developing badges, timestamps, and chronological updates.
Newsletter Previewnews34Email newsletter style news layout with editor's note, categorized stories, and subscription CTA.
News Spotlight Theaternews35Cinematic full-screen news slideshow with animated transitions, auto-play, spotlight effect, and dramatic typography.
Press Coverage Listnews36A press section built around a soft panel holding the standout quote and its publication, followed by hairline coverage rows that align publication, headline, and date, and a press kit action to close.
Filterable Newsroom Indexnews37A newsroom whose kind pills are derived from the announcements and carry live counts, narrowing a chronological list of hairline rows that align the kind, the date, and the headline with its summary.
Announcement Storynews38A single announcement laid out like an article, with a standfirst, a full-bleed captioned photo band, a reading column, and a sticky rail carrying the key facts and related entries.
Inverted Company Announcementnews39A company update held in one dark panel, pairing a light heading and four supporting figures over a hairline rule with a bordered column that floats a live press contact card.
Magazine News Gridnews4Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering.
Monthly Digestnews40A monthly round-up grouped into what shipped, what broke, and what is still undecided, each entry a linked hairline row, beside a sticky tile floating the month's live figures.
Press And Brand Kitnews41A media kit listing downloadable assets as linked hairline rows with their formats, a swatch column naming each colour and where it is used, and two usage rules set as an allowed and a not-allowed card.
Public Incident Historynews42A postmortem archive opening on four hairline reliability figures, then listing every incident as a linked row with a tone-coded severity chip, its duration, the impact, and the fix, beside a live uptime strip.
Minimal Issue Archivenews43A narrow archive reduced to one hairline row per issue, the subject line on the left and the date it went out on the right, with nothing else on the page to read past.
News Timelinenews5Vertical news timeline with timestamps, breaking news indicators, and optional article images.
Horizontal News Cardsnews6Horizontal news cards with author info, read time, trending indicators, and hover effects.
Newspaper Stylenews7Classic newspaper layout with serif typography, featured article spanning two columns, and sidebar articles.
Numbered Headlinesnews8Compact numbered headline list with large index numbers, category badges, and source attribution.
Trending Cards Gridnews9Four-column news card grid with gradient overlays, category badges, and author info.
Welcome Hero with Step Indicatoronboarding1Centered welcome screen featuring a hero image, step counter, and dual CTAs. Perfect for app onboarding flows that guide users through a multi-step setup process.
Accordion Steps with Expandable Actionsonboarding10Interactive accordion layout where each step expands to reveal detailed instructions and action buttons. Perfect for setup guides that let users complete tasks at their own pace.
Side Navigation Wizardonboarding11Desktop wizard with a vertical side navigation menu and content panels for each step. Perfect for comprehensive account setup requiring multiple configuration screens.
Circular Progress with Checklistonboarding12Visual progress tracker featuring a circular percentage indicator with completion stats and task list. Perfect for profile setup flows that encourage users to reach 100% completion.
Role Persona Selectoronboarding13Onboarding screen where users select their role or persona to personalize their experience. Each role card shows an icon, title, and description with a selectable highlight state.
Workspace Setup with Team Inviteonboarding14Combined 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.
Integration Connector Gridonboarding15Onboarding screen with a grid of available integrations showing connection status and connect/skip actions. Perfect for apps that rely on third-party services like Slack, GitHub, and Google.
Interest Tag Pickeronboarding16Onboarding screen with a grid of selectable interest tags and chips for personalizing content recommendations. Perfect for content platforms, newsletters, and social apps.
Goal Selector with Pathsonboarding17Onboarding screen where users pick their primary goal to receive a tailored onboarding path. Each goal card shows a recommended feature set. Perfect for multi-purpose platforms.
Notification Preferencesonboarding18Onboarding screen with toggle switches for configuring notification channels and frequency. Perfect for apps that need granular notification consent during setup.
Profile Setup Cardonboarding19Onboarding screen with a form card for setting up user profile including avatar, display name, bio, and timezone. Perfect for the personal details step in any SaaS onboarding flow.
Split Layout with Features and Social Proofonboarding2Two-column welcome layout with feature checklist, user count, and star ratings alongside an image. Perfect for SaaS onboarding that highlights key benefits and builds trust.
Template Starter Pickeronboarding20Onboarding screen with a grid of starter templates to choose from, each with a preview thumbnail, title, and description. Perfect for project creation flows in design tools and project management apps.
Onboarding Completion Screenonboarding21Completion screen shown after finishing onboarding with a summary of what was configured and quick-start action links. Perfect for ending the setup flow with clear next steps.
Plan Overview with Usage Limitsonboarding22Onboarding screen showing current plan details with visual usage bars for storage, seats, and API calls. Perfect for SaaS post-signup flows that introduce plan limits and upgrade paths.
Security Setuponboarding23Onboarding screen for configuring account security including two-factor authentication, recovery email, and backup codes. Perfect for apps that prioritize security during onboarding.
Keyboard Shortcuts Cheat Sheetonboarding24Onboarding screen displaying essential keyboard shortcuts in a grouped grid layout with key badges. Perfect for productivity tools that want to accelerate user adoption.
Theme and Appearance Pickeronboarding25Onboarding screen for choosing theme mode (light, dark, system) and accent color. Perfect for apps that offer visual customization as part of the onboarding experience.
Data Import Selectoronboarding26Onboarding screen with import options from other platforms, CSV upload, and manual entry. Perfect for SaaS migration flows that help users bring existing data into the platform.
Attribution Surveyonboarding27Onboarding screen with a quick survey asking how the user discovered the product, with selectable options and an optional text input. Perfect for marketing attribution during signup.
Billing Setup with Cycle Toggleonboarding28Onboarding screen for choosing a billing cycle (monthly/yearly) with savings badge, payment method selection, and optional coupon code input. Perfect for SaaS apps that collect payment during onboarding.
Company Info Formonboarding29Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup.
Minimal Welcome with Icononboarding3Clean, centered welcome screen with a branded icon, heading, and single call-to-action. Perfect for simple app introductions that prioritize clarity over complexity.
Feature Tour Carouselonboarding30Onboarding screen with navigable feature highlight cards, dot indicators, and back/next buttons. Perfect for introducing key platform features during the first-time user experience.
Three Step Getting Startedonboarding31A getting-started section with an eyebrow over a hairline rule, a two-column heading, three monospace-numbered steps under their own hairlines, and an accent button.
Data Import Splitonboarding32A reversed split with an image tile floating a live import dropzone on the left, and an eyebrow, light heading, three monospace-numbered steps, and an accent button on the right.
Interactive Setup Checklistonboarding33A setup panel pairing a soft progress column, where an oversized percentage and accent bar react to what is ticked, with hairline checklist rows that each carry a description and a jump-in link.
Role Based Getting Startedonboarding34A getting-started section whose role pills swap a sticky summary column and the numbered steps beside it, each step carrying its own title, explanation, and honest time estimate.
Tracked Setup Sequenceonboarding35A setup section listing four numbered steps with who owns each one, against a column that sticks while they scroll and floats a live step tracker on an image tile.
Go-Live Day Agendaonboarding36A first-day agenda held in one bordered panel, with timestamped hairline rows naming what happens, who is needed, how long it takes, and which parts are optional.
Invite Your Teamonboarding37A team setup section pairing a soft panel with a working invite row, a role picker, and a plain-language table of what each role can reach, with a bordered list of who is already on the account and whether they have accepted, closing on a seat meter that fills one tick per seat taken.
Data Import Reassuranceonboarding38An import section leading with an image tile that floats a live upload dropzone, then setting out the formats that are read and the records that come across as two checked hairline lists.
Thirty Day Milestonesonboarding39An onboarding section setting out four dated milestones as bordered cards, each closing on the figure it should hit, above a soft panel that floats a live progress metric on an image tile.
Video Introduction Screenonboarding4Welcome screen featuring a video thumbnail with play overlay and duration badge. Perfect for product tours that use video content to demonstrate features.
Division Of Labour Tableonboarding40A responsibility table grouping migration tasks into phases on hairline rows, marking each as yours, ours, or shared with a check or a dash, and totalling the customer's time in one light figure.
Migration Risk Registeronboarding41A candid onboarding section listing what tends to go wrong on hairline rows, each with a tone-coded frequency chip, how often it has been seen, and the mitigation already in place.
Training Resourcesonboarding42A learning section leading with an image tile that floats a live help centre search, then listing the videos, guides, and sessions behind it as linked hairline rows across two columns.
Guided Workspace Setuponboarding43A two-column setup section: the pitch and what each answer changes on the left, and a one-question-at-a-time wizard on the right that ends in a review of everything it is about to create.
Setup Checklistonboarding44A setup checklist with a sticky left column: serif headline that settles in word by word, an intro, a large done count over a hairline progress bar that grows as steps are ticked, and a sliding-marker pill. On the right a ruled list of steps, each with a round check button, a serif title that strikes through when done, a description and an optional link.
Horizontal Steps with Progress Lineonboarding5Multi-step progress indicator with numbered circles connected by a progress line. Perfect for account setup wizards that show users their completion status.
Vertical Timeline Stepsonboarding6Vertical timeline layout with step indicators, descriptions, and a connecting progress line. Perfect for workspace setup flows with detailed step explanations.
Progress Bar with Task Checklistonboarding7Card-based progress tracker showing completion percentage and a checklist of tasks with visual status. Perfect for gamified onboarding that motivates users to finish setup.
Multi-Step Form Wizardonboarding8Interactive form wizard with segmented progress bar, form fields, and back/next navigation. Perfect for account registration flows collecting user and company information.
Step Cards with Numbered Indicatorsonboarding9Animated step wizard with square numbered indicators and content cards for each step. Perfect for product walkthroughs that guide users through key features.
Hero with Cover Art and Video Modalpodcast1Two-column podcast hero featuring cover art with video modal, host info, episode count, and latest episode card. Perfect for podcast landing pages that highlight show branding and recent content.
Episode Grid with Video Modalspodcast14Responsive grid of episode cards featuring thumbnails, duration badges, categories, and click-to-play video modals. Perfect for episode listings and related content sections.
Player Card with Waveform Visualizationpodcast2Audio player card featuring cover art, animated waveform visualization, play/pause controls, and progress tracking. Perfect for embedded podcast players on show pages.
Creator Profile with Shows Gridpodcast38Host profile card featuring avatar, bio, stats (shows, episodes, listeners), social links, and a grid of their podcast shows. Perfect for podcaster profile pages and network creator pages.
Episode Detail with Show Notespodcast4Detailed episode page with cover art, duration, publish date, numbered show notes, and host/guest profiles. Perfect for individual episode pages that provide comprehensive content information.
Transcript Viewer with Searchpodcast41Searchable episode transcript with clickable timestamps, speaker labels, and download option. Perfect for podcast accessibility features and content discovery.
Share Modal with Social and Embedpodcast42Episode sharing widget with copy link, social platform buttons (Twitter, Facebook, LinkedIn, Email), and embeddable iframe code. Perfect for encouraging episode sharing across platforms.
Subscribe Platforms Gridpodcast49Grid of podcast platform cards with logos and external links for Apple Podcasts, Spotify, Google Podcasts, and more. Perfect for helping listeners find and subscribe on their preferred platform.
About Section with Stats Cardpodcast52Podcast overview section with cover art, stats grid (episodes, launch date, listeners, awards), and expandable long description. Perfect for show about pages and media kit sections.
Player And Episode Listpodcast53A podcast section with an eyebrow over a hairline rule and a two-column heading, pairing an image tile that floats a live audio player with a divided episode list.
Listening Path Builderpodcast54An entry point for a back catalogue: three questions score the listening paths, and the winner is handed over as an ordered run of three episodes with cover art, numbers, and a total runtime added up from the episodes themselves.
Featured Episode Playerpodcast55A show header with subscribe buttons over one wide episode card: date, hosts, title, a show notes sentence, and a waveform player with play, seek, and elapsed time. Three more episodes sit underneath as cards, and pressing one loads it into the player and starts it. Each episode takes an audio file that the player plays and seeks; without one the player runs on its own clock.
Contact Call-to-Action Footerportfolio100Centered contact section with headline, description, primary CTA button, and social media link buttons with handles. Perfect for portfolio page footers encouraging visitor engagement.
Project Showcase Gridportfolio101Portfolio grid of project cards with hover-zoom imagery, numbered titles, category tags and a seal arrow link.
Work Marqueeportfolio102Full-bleed auto-scrolling marquee of studio projects with a header and view-all CTA.
Bento Galleryportfolio103Asymmetric bento mosaic of project tiles with overlaid titles and hover seal arrows.
Interactive Work Indexportfolio104A numbered project index that cross-fades a sticky image preview as each row is hovered.
Typographic Indexportfolio105Oversized type project index where each row reveals a thumbnail and shifts to the accent on hover.
Filtered Work Tabsportfolio106Discipline-tabbed project gallery using shadcn Tabs with a grid of cards per category.
Filterable Project Gridportfolio107Selected-work section with a row of category filter tabs that filter a monochrome project grid client-side; each card links out to the project.
Masonry Archive Galleryportfolio108Masonry archive gallery in a CSS columns layout — project stills of varying heights, each linking out with a title and year caption beneath.
Alternating case-study rowsportfolio109Three alternating case-study rows pairing a large rounded image with a title, description, detail line, and an editorial link.
Featured project + gridportfolio110One large featured project with image, category, and title, followed by a row of smaller project cards. Monochrome studio styling.
Staggered Editorial Galleryportfolio111A header with a two-column, vertically staggered gallery of project cards — each a linked full-color image with a ruled title, category, and year.
Project Index Rowsportfolio112Editorial project index of ruled rows — padded numeral, project name, client and year, with a floating thumbnail revealed on hover.
Client wall & selected work stripportfolio113A grayscale grid of bordered client logo cells followed by a strip of three selected-work thumbnails with titles, each linking out.
Uniform project card gridportfolio114A monochrome three-column grid of uniform project cards, each pairing an image with a title, client / year / service chips, and a link to the case.
Recent Work Listportfolio115Compact recent-work list of ruled rows, each a link with a small thumbnail, title, year, and an arrow.
Awards & Highlights Ledgerportfolio116Recognition section pairing a ruled list of awards with two to three highlighted project thumbnails.
Case Study Spotlightportfolio117A 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.
Selected Work Indexportfolio118A picture-free work index laid out as four aligned columns, year, client, what was done and the discipline, with the column heads appearing only once the row can hold them.
Freelancer FAQ Accordionportfolio61Expandable accordion FAQ section with collapsible question-and-answer cards. Perfect for freelancers and consultants displaying project timeline, payment, and support questions.
Social Media Connect Gridportfolio62Responsive grid of social media platform buttons with follower counts and platform icons. Perfect for creators and influencers showcasing their social media presence.
Personal Introduction Heroportfolio67Hero section with circular avatar photo, name, role/title, bio description, and CTA button. Perfect for personal portfolio landing pages and professional introductions.
Book Recommendations Gridportfolio70Grid of book cards displaying cover images, titles, authors, star ratings, and category badges. Perfect for sharing reading lists and book recommendations on personal sites.
Featured Case Study Cardportfolio79Two-column project showcase with large image, project description, technology/skill badges, and case study CTA. Perfect for highlighting featured portfolio projects with reversible layout.
Work Process Stepsportfolio84Four-column numbered workflow section showing project phases like Discovery, Strategy, Design, and Deliver. Perfect for freelancers and agencies explaining their project methodology.
Video Introduction Playerportfolio88Video showcase section with thumbnail image, play button overlay, duration badge, and modal video player. Perfect for personal introduction videos or portfolio reels.
Collaboration Partners Gridportfolio89Grid of partner cards featuring circular avatars, names, roles, skill badges, and clickable links. Perfect for showcasing team members, collaborators, or professional network.
Speaking Engagements Timelineportfolio90Conference and event speaking schedule with upcoming and past talks, dates, locations, attendee counts, and video/slides links. Perfect for speakers and thought leaders showcasing their talks.
Open Source Contributionsportfolio92Repository showcase with stars, forks, contribution counts, maintainer/contributor badges, and language tags. Perfect for developers highlighting their open source work.
Mentorship Pricing Plansportfolio94Three-tier mentorship pricing section with duration, session counts, feature checklists, and booking CTAs. Perfect for coaches and mentors offering paid coaching packages.
Work Preferences Checklistportfolio97Three-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.
Career Highlights Timelineportfolio98Vertical timeline showcasing career milestones with achievement icons, year badges, descriptions, and key metrics. Perfect for professionals displaying awards, launches, and growth achievements.
Future Goals Progress Cardsportfolio99Goal cards with icons, timeframe badges, descriptions, and visual progress bars showing completion percentage. Perfect for sharing personal or professional aspirations and current progress.
Article with Triple Sidebarpost10Three-column layout with TOC left sidebar, main article center, and action buttons with tags right sidebar. Best for technical documentation.
Center-Aligned Floating TOCpost11Centered article layout with floating table of contents button in bottom right corner. Ideal for mobile-first or single-column responsive designs.
Article with Related Postspost12Two-column layout with main article and right sidebar containing related article cards with thumbnails. Perfect for discovery-focused content.
Hero Image Dominantpost13Full-viewport hero image with title and summary overlaid at bottom with gradient. Excellent for visual storytelling or narrative-driven content.
Centered Essay Pull Quotespost14Centered layout featuring large pull quotes as visual breaks and prominent featured image. Ideal for essays or opinion pieces with strong statements.
Two-Column Introductionpost15Article with two-column intro section separating key points before main content begins. Perfect for explainers that need dual perspectives.
Essay with Drop Cappost16Elegant essay-style layout with drop cap on first letter and integrated syntax-highlighted code blocks. Best for literary or technical essays.
Newsletter Issue Templatepost17Newsletter-style layout with issue number, dashed dividers between sections, and subscribe button. Perfect for weekly roundups or curated content.
Article with Code Snippetspost18Technical article with code blocks featuring language labels, filenames, and copy-to-clipboard buttons. Ideal for programming tutorials.
Step-by-Step Tutorialpost19Tutorial layout with numbered steps, prerequisites box, terminal commands, and completion message. Perfect for hands-on guides.
Documentation Getting Startedpost20Documentation-focused layout with version badge, info/warning/tip boxes, and previous/next navigation. Best for technical documentation.
Changelog Timeline Viewpost21Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history.
API Reference Documentationpost22Technical reference with endpoint cards, HTTP method badges, and side-by-side request/response examples. Perfect for API documentation.
Literary Essay Separatorspost23Centered essay layout with large typography, ornamental separators, and author bio footer. Ideal for reflective essays or creative writing.
Visual Story Photo Gridpost24Photography-focused layout with hero image, full-width photos, side-by-side grids, and captions. Perfect for travel or photography narratives.
Interview Q&A Formatpost25Interview layout showing interviewer and interviewee with avatars, hero image, and question-answer pairs. Ideal for interviews and conversations.
Case Study with Metricspost26Case study format with client info, overview box, metrics grid, sectioned content, and testimonial callout. Perfect for portfolio pieces.
News Article Sidebarpost27Newspaper-style layout with byline, serif typography, author bio sidebar, and trending articles list. Ideal for news or journalism.
Minimalist Short Formpost28Ultra-minimal essay with light typography, sparse content, horizontal rule separators, and small images. Best for contemplative short pieces.
Sports Match Reportpost29Sports-focused layout with match score display, timeline of match events, stats comparison, and player of the match. Perfect for game recaps.
Featured Article Layoutpost3Full-width article with gradient overlay hero image, featured badge, and complete metadata. Ideal for flagship content that deserves prominent visual presentation.
Social Sharing Articlepost30Article with prominent share buttons for Twitter/LinkedIn, copy link function, and engagement-focused layout. Ideal for thought leadership.
Educational Article Imagespost31Educational article with clear heading hierarchy, embedded images with captions, and readable body text. Good for informational content.
Highlightable Contentpost32Article with text selection and highlighting feature allowing readers to save key quotes. Great for reference material or learning content.
Entrepreneur Profilepost33Personal essay with large author bio, social links, extensive credentials, and expertise areas displayed. Perfect for founder stories.
Guest Post Editor Notepost34Guest article with editor's introduction note, separate author profile for contributor, and clear attribution. Ideal for contributed content.
Multi-Author Researchpost35Report with multiple author profiles showing titles and contributions, team collaboration visual. Perfect for research or team-authored content.
Expert Column Credentialspost36Expert opinion column displaying credentials, publications count, expertise areas, and callout boxes. Ideal for expert columns and thought leadership.
Columnist Opinion Columnpost37Opinion column layout with columnist profile, previous articles list, and editorial styling. Perfect for recurring contributor pieces and thought leadership.
Video Article Layoutpost38Article with featured video player, thumbnail preview, and watch time display. Ideal for video-first content with accompanying text.
Podcast Episode Pagepost39Podcast episode layout with audio player, host/guest profiles, timestamps, and show notes. Perfect for podcast transcripts and episode pages.
Clean Article Formatpost4Minimal design with tags above title and author metadata below. Perfect for technical articles or educational content that prioritizes readability.
Recipe Card Layoutpost40Recipe article with ingredients list, step-by-step instructions, prep/cook times, and serving info. Perfect for food blogs and cooking content.
Photo Gallery Essaypost41Visual essay with photographer credit, location info, and image galleries. Perfect for photography portfolios and visual storytelling.
Product Review Articlepost42Product review with rating categories, pros/cons list, and verdict section. Ideal for tech reviews and product comparisons.
Multi-Part Series Articlepost43Series article with part navigation, progress bar, and previous/next links. Perfect for tutorials and multi-chapter content.
Online Course Lessonpost44Course lesson layout with module navigation, progress tracking, and downloadable resources. Perfect for e-learning platforms.
Multi-Chapter Guidepost45Documentation-style guide with chapter navigation, table of contents, and previous/next navigation. Perfect for comprehensive tutorials.
DIY How-To Tutorialpost46Step-by-step tutorial with tools needed, learning outcomes, and tips per step. Perfect for DIY projects and hands-on guides.
Resource Rounduppost47Curated list format with resource cards, descriptions, and links. Great for collections and recommendations.
Live Blog Updatespost48Live blog format with timestamped updates, breaking news badges, and auto-refresh. Perfect for live event coverage and breaking news.
Magazine Essay Stylepost49Elegant magazine-style article with drop cap, pull quotes, and image credits. Perfect for long-form essays and feature articles.
Card-Based Articlepost5Article wrapped in a bordered card container with featured image at top and tags integrated into header. Works well for curated collections or featured stories.
Opinion Editorial Articlepost50Opinion piece with agree/disagree voting, editor's response, and discussion section. Perfect for editorial and op-ed content.
Product Comparison Articlepost51Head-to-head comparison with feature matrix, pros/cons, and winner verdict. Perfect for product shootouts and buying guides.
Ranked List Articlepost52Numbered list article with ratings, highlights, and jump navigation. Perfect for top-10 lists and curated recommendations.
Interactive Poll Articlepost53Article with embedded poll, vote tracking, and results display. Perfect for reader engagement and community feedback.
Interactive Quiz Articlepost54Quiz format with multiple choice questions, scoring, and results. Perfect for educational content and audience engagement.
Interactive Checklist Articlepost55Article with checkable items, progress tracking, and print/download options. Perfect for actionable guides and checklists.
Searchable FAQ Articlepost56FAQ article with search, category filters, and helpful vote buttons. Perfect for help centers and knowledge bases.
Article with Commentspost57Article with full comment system, replies, likes, and featured comments. Perfect for community-driven discussions.
Product Launch Articlepost58Product launch post with features showcase, pricing tiers, and CTAs. Perfect for announcements and release notes.
Event Recap Articlepost59Conference/event recap with speaker profiles, key takeaways, and resources. Perfect for event summaries and conference coverage.
Author-Focused Layoutpost6Prominent author profile with large avatar display, followed by featured image below title. Best for thought leadership or expert opinion pieces.
Research Paper Summarypost60Academic article with abstract, key findings, and references. Perfect for research summaries and study highlights.
Book Review Articlepost61Book review with cover image, publication details, rating, and pros/cons. Perfect for literary reviews and reading recommendations.
Case Study Articlepost62Case study with client details, metrics, team members, and results. Perfect for portfolio pieces and success stories.
Interview Transcript Articlepost63Interview with Q&A format, audio player, and speaker timestamps. Perfect for podcast interviews and conversations.
Podcast Episode with Chapterspost64Podcast with chapter markers, transcript segments, and show notes. Perfect for long-form audio content with navigation.
AMA Session Recappost65Ask Me Anything format with host profile, upvoted questions, and answers. Perfect for Q&A sessions and community engagement.
Debate Format Articlepost66Two-sided debate with for/against positions, arguments, and rebuttals. Perfect for controversial topics and opinion pieces.
Panel Discussion Recappost67Panel discussion summary with panelist profiles, key quotes, and takeaways. Perfect for conference and webinar recaps.
Course Lesson with Videopost69Video lesson page with instructor, navigation, progress tracking, and downloadable resources. Perfect for online courses.
Compact Quick Readpost7Minimal text-based layout with small featured image and condensed metadata. Ideal for short tips, quick takes, or news briefs.
Knowledge Base Articlepost71Searchable FAQ with category filters, helpful votes, and related questions. Perfect for help centers and documentation.
Book Review with Purchasepost72Detailed book review with author bio, ratings, and purchase links. Perfect for literary reviews and book recommendations.
Community Member Spotlightpost78Member profile with achievements, social links, and contributions. Perfect for community highlights and user stories.
Article with Left Sidebar TOCpost8Three-column layout with table of contents on left, main article in center, and right sidebar for related content. Perfect for long-form guides.
Open Source Project Pagepost82Project showcase with maintainers, releases, install commands, and features. Perfect for GitHub readme-style documentation.
Poetry Collection Articlepost85Poetry showcase with poet bio, formatted verses, dedications, and audio. Perfect for literary magazines and poetry publications.
Travel Journal Articlepost86Travel diary with dated entries, location info, weather, and photo galleries. Perfect for travel blogs and adventure stories.
Editorial Article Layoutpost87A full article layout with an oversized light title, an author row framed by hairlines, a wide lead image, prose sections with accent-bulleted lists, an accent-ruled pull quote, and a closing share row.
Article With Sticky Contents Railpost88A full article layout with a ruled byline row, a wide lead image, prose blocks that carry their own anchors, an accent-ruled pull quote, a closing tag row, and a contents rail that sticks beside the text on desktop.
Long Read Articlepost89A full article layout: a centred header with a back link, a category, a serif title that settles in word by word, a standfirst and an author line with date and reading time; a wide photograph that blurs in and drifts on scroll with a caption; then a narrow measure of paragraphs with a serif pull quote inserted where you choose and a ruled tag row at the end.
Article with Right Author Boxpost9Two-column layout with main content on left and sticky author profile card on right with social links. Great for individual contributor articles.
Horizontal Tier Cardspricing10Four-tier horizontal pricing cards with pill-style billing toggle. Perfect for comparing multiple plan options side by side.
Usage-Based Sliderpricing11Usage-based pricing calculator with interactive slider showing tiered breakpoints. Perfect for API services and consumption-based products.
Enterprise Contact Salespricing12Enterprise pricing section with custom pricing, feature list, and client logo trust indicators. Perfect for B2B products targeting large organizations.
Per-Seat Calculatorpricing13Per-seat pricing calculator with slider control and automatic volume discount display. Perfect for team collaboration tools with user-based pricing.
Lifetime Dealpricing14Lifetime deal pricing with crossed-out original price and urgency countdown timer. Perfect for product launches and limited-time promotions.
Free vs Pro Tablepricing15Two-column comparison table showing Free vs Pro features with check marks and text values. Perfect for freemium apps highlighting upgrade benefits.
Minimal Single Planpricing16Clean single-plan pricing with inline feature badges in a compact layout. Perfect for focused products with one clear offering.
Pricing with FAQpricing17Single plan pricing card paired with an expandable FAQ accordion section. Perfect for reducing purchase friction with inline answers.
Individual vs Team Togglepricing18Tabbed pricing switching between Individual and Team plans with different feature sets. Perfect for products offering both personal and business tiers.
Credit Pack Pricingpricing19Credit pack cards with bonus credits and usage examples showing cost per action. Perfect for AI tools and pay-as-you-go services.
Pricing with Testimonialpricing20Pricing card featuring an embedded customer testimonial with star rating. Perfect for building trust alongside pricing information.
Minimalist Three-Tierpricing21Clean three-tier pricing cards with highlighted middle plan and simple feature lists. Perfect for startups wanting a straightforward pricing page.
Pay What You Wantpricing22Flexible pricing with selectable suggested amounts and custom input option. Perfect for indie products, open source, and creator tools.
Annual with Monthly Breakdownpricing23Annual pricing tiers showing per-month equivalent cost and yearly savings. Perfect for encouraging annual commitments with clear value display.
Startup Stage Pricingpricing24Startup-focused pricing tiers based on funding stage from bootstrapped to Series B+. Perfect for B2B tools offering startup programs.
Agency Service Packagespricing25Service package cards with project timelines, deliverables list, and fixed pricing. Perfect for agencies and freelancers selling project-based work.
ROI Calculatorpricing26Interactive ROI calculator with slider inputs showing potential savings and return projection. Perfect for enterprise tools demonstrating value.
API Tiered Ratespricing27API pricing table showing tiered rate per request with volume discount breakdown. Perfect for developer APIs and infrastructure services.
Tabbed Billing Cyclespricing28Pricing cards with tabbed selection for monthly, quarterly, and annual billing. Perfect for flexible subscription models with multiple commitment options.
Pricing with FAQ Accordionpricing29Single plan pricing card with collapsible FAQ accordion for common questions. Perfect for reducing support queries on pricing pages.
Budget Slider Selectorpricing30Budget-based plan selector with slider control that highlights the best matching plan. Perfect for helping users find the right tier.
Build Your Own Planpricing31Customizable pricing with base plan and selectable add-ons that update total dynamically. Perfect for modular products with optional features.
Modular Pricing Builderpricing32Interactive pricing builder with toggleable feature modules and real-time total calculation. Perfect for enterprise products with customizable packages.
Pricing with Tooltipspricing33Pricing tiers with hover tooltips explaining each feature in detail. Perfect for complex products with features that need explanation.
Radio Card Selectionpricing34Plan selection using radio button cards with visual selection state. Perfect for checkout flows and single-plan selection interfaces.
Regional Currency Pricingpricing35Pricing with dropdown region/currency selector showing localized prices. Perfect for global products with regional pricing tiers.
Service Package Tierspricing36Service package cards with tier badges, feature lists, and delivery timelines. Perfect for consulting and professional services.
Toggle Group Add-onspricing37Base plan pricing with toggle group buttons for selecting add-ons. Perfect for products with a la carte feature selection.
Pricing with Ratingspricing38Pricing cards displaying star ratings and review counts for social proof. Perfect for marketplaces and consumer products.
Checkbox Feature Builderpricing39Interactive pricing with checkbox feature selection and real-time price updates. Perfect for customizable service packages.
Minimal Toggle Selectorpricing40Clean minimal plan selector with button-style toggles and compact layout. Perfect for simple products with few options.
Switch Toggle Add-onspricing41Base plan pricing with switch toggles for enabling optional add-ons. Perfect for SaaS products with feature upgrades.
Grouped Feature Sectionspricing42Single plan pricing with features organized into separated category groups. Perfect for products with many features to categorize.
Hover Card Detailspricing43Pricing cards with hover cards showing expanded feature details on mouse over. Perfect for dense information without clutter.
Collapsible Feature Groupspricing44Pricing cards with collapsible feature sections that expand on click. Perfect for compact layouts with many features.
Enterprise Volume Calculatorpricing45Enterprise pricing calculator with user count slider and volume discount tiers. Perfect for B2B products with usage-based enterprise pricing.
Skeleton Loading Statepricing46Pricing cards with skeleton placeholders demonstrating loading states. Perfect for async pricing data or dynamic plan fetching.
Limited Time Countdownpricing47Promotional pricing with live countdown timer showing urgency. Perfect for flash sales and limited-time discount campaigns.
Guarantee Badgespricing48Pricing cards featuring money-back guarantee and satisfaction badges. Perfect for reducing purchase anxiety and building trust.
Tabbed Plan Featurespricing49Pricing with tabs to switch between plans showing categorized feature lists. Perfect for detailed feature comparison by plan.
Payment Method Displaypricing50Single plan pricing showcasing accepted payment method icons. Perfect for checkout pages and e-commerce pricing.
Icon Feature Highlightspricing51Pricing cards with icon-highlighted key features for visual scanning. Perfect for emphasizing unique plan benefits.
Discount Code Inputpricing52Pricing section with discount/promo code input field and apply button. Perfect for coupon-based promotions and affiliate programs.
Product Bundle Pricingpricing53Bundle pricing cards showing combined products with savings percentage. Perfect for product suites and software bundles.
Plan Recommendation Quizpricing54Interactive questionnaire that recommends the best plan based on user answers. Perfect for helping users choose between complex options.
Step-by-Step Plan Builderpricing55Multi-step wizard for building a custom plan with progressive disclosure. Perfect for complex configurations and guided setup.
Sticky Summary Sidebarpricing56Plan cards with sticky sidebar showing selected plan summary and total. Perfect for long pricing pages with multiple options.
Volume Discount Tablepricing57Per-seat pricing table showing volume discount tiers and price-per-user breakpoints. Perfect for team products with tiered pricing.
Pricing with Slogan Panelpricing58Two-panel pricing card with scrollable features list and dark slogan panel with background image overlay.
Tiered Plan Tabspricing59Tabbed membership pricing: feature list, headline price with CTA, and a plan summary panel per tab.
Billing Toggle Pricingpricing6Three-tier pricing table with monthly/yearly billing toggle and popular plan badge. Perfect for SaaS products with tiered subscription plans.
Three Tierspricing60Three pricing tiers with an emphasized popular plan and feature lists.
Billing Toggle Pricingpricing61Three plans with a monthly/yearly billing toggle and feature lists.
Plan Comparisonpricing62Feature comparison grid with plans as columns and check/dash cells.
Two Engagement Planspricing63Two large contrasting plan panels (light vs dark) for engagement models.
Spotlight Plan & Add-onspricing64A single spotlight plan beside a list of modular add-ons.
Monochrome Pricing Tierspricing65Three monochrome engagement tiers with editorial big-number pricing and an inverted featured plan.
Single Plan Retainerpricing66One bordered card pairing a big monochrome price and CTA with a two-column feature checklist.
Comparison Matrix Pricingpricing67A monochrome plan comparison matrix with ruled feature rows, check/minus cells, and per-plan CTAs.
Seat Slider Price Calculatorpricing68A per-seat pricing calculator with a full-height photo panel on the left, a monthly and yearly toggle, a seat slider driving an oversized live count, an included-features list, and a soft summary column with a cost breakdown and total.
Engagement Tier Railspricing69Boxless pricing where each tier is a ruled column: the name, an oversized figure with its period, a fit line, an inclusion list under a second rule and a pill CTA, with subgrid keeping every internal rule aligned across the three columns.
Dual Plan Comparisonpricing7Two-tier pricing with highlighted recommended plan and feature lists. Perfect for freemium products with a clear upgrade path.
Project Estimate Ledgerpricing70Range-based pricing for project work: a ruled table of project types listing what each usually includes, its timeline and a starting figure, with unruled column headers on desktop and stacked rows on mobile.
Three Tiers With Billing Togglepricing71A three-tier pricing grid whose monthly and yearly toggle swaps both the light figure and the billing note on every card, with the recommended tier outlined in the accent.
Single Plan With Full Inclusion Listpricing72A one-plan pricing panel that sets an oversized light figure and two actions beside an image tile floating a live savings card, then lists everything included as three hairline groups below.
Per-Site Band Selectorpricing73A per-site pricing table whose hairline bands are selectable, driving a soft summary panel that recomputes the rate and the whole-group total, beside an image tile floating a live sites card.
Engagement Shapes With Exclusionspricing74Three engagement columns on hairlines, each stating its figure and cadence and then listing what the price covers directly against what it deliberately does not.
Season Pricingpricing75Three pricing tiers under a centred serif heading that settles in word by word: two soft muted cards and a featured card set on a photograph with a dark scrim and film grain, each with a serif price, a cadence line, a check list and a sliding-marker pill.
Rhythm Comparisonpricing76A comparison table under a centred serif heading that settles in word by word: three plans with serif prices head ruled feature rows that blur in one after another, showing checks, dashes or short values, with a sliding-marker pill under each column.
Two Plans Asidepricing77A two-plan pricing section: a sticky column with a serif heading that settles in word by word, an intro and a reduced-fee note, beside two cards, one soft muted and one ink, each with a serif price, a check list and a sliding-marker pill.
Toggle Pricingpricing78Three pricing cards under a centred serif heading that settles in word by word, with a pill toggle between paying per session and committing to a season: the serif prices blur out and in as it switches, and each card ends in a sliding-marker pill.
Three Plans Togglepricing79Three plan cards under a centred serif headline that settles in word by word and a monthly or yearly pill switch whose ink marker slides between the two; prices blur to their new value, a small saving note appears on yearly, the middle plan sits in ink, and each card ends in a full-width sliding-marker pill.
Feature Comparison Tablepricing8Multi-plan feature comparison table with grouped categories and check/text values. Perfect for products with complex feature sets across multiple tiers.
Ruled Plan Rowspricing80Plans as ruled rows rather than cards: name and one line on the left, a serif price that blurs to its monthly or yearly value, and a sliding-marker pill at the row's end. The pill switch and its saving note sit at the right end of the header beside a serif headline that settles in word by word.
Seats Calculatorpricing81A per-seat pricing panel in ink under a centred serif headline that settles in word by word: a monthly or yearly pill switch, a seat count with round plus and minus steppers, the per-seat rate, and a large serif total that blurs to each new value; on the right the included features and a full-width light sliding-marker pill.
Two Plans Beside a Photopricing82A tall photograph that blurs in and drifts on scroll on the left; on the right a serif headline that settles in word by word, an intro, a monthly or yearly pill switch, and two plans as ruled rows, each with a serif price that blurs to its new value, the included features in one line and a sliding-marker pill.
Ink Comparison Tablepricing83A dark comparison table: a serif headline that settles in word by word with a monthly or yearly pill switch at the right end of the header, plan columns with serif prices that blur to their new value and sliding-marker pills, then grouped feature rows with checks, dashes and short values, scrolling sideways on narrow screens.
Usage Pricing Calculatorpricing84A two-column calculator: seat and volume sliders, a billing period switch, and add-on toggles on the left, and a summary card on the right whose rolling price and line items follow every change. The base price, per-seat and per-unit rates, included amounts, yearly discount, and currency are all props.
Plans Over an Effect Bandpricing85A pricing section whose centered header sits on a rounded band with a live sky effect. Three solid plan cards climb onto the lower part of the band, so the effect shows above and between them while prices stay on a plain card surface. The featured plan is taller with a primary border, and the effect is a swappable background slot.
Plan Cards Under Prism Lightpricing86A pricing section with the header on the left and a monthly and yearly switch on the right, above three borderless plan cards of equal fixed height. Each card carries its own variation of a prism gradient across its top that dissolves into the card surface before the plan name. Prices roll when the billing period changes, and the struck-through monthly price with the yearly note has its own reserved line, so nothing shifts. The button is pinned to the foot of every card.
Single Plan with Add-onspricing9Single pricing plan with selectable optional add-ons that toggle on click. Perfect for simple products with modular upsells.
Centered Product Showcaseproduct1Centered 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.
Product Macro Detail Gridproduct10Editorial grid of macro close-up shots, each captioned with the material or detail it shows.
Split Product Highlights Plainproduct11Split product intro: a tall product image beside a heading, description, and three icon highlights with editorial body-size copy and a spec link.
Live Made To Order Configuratorproduct12A made-to-order configurator that answers as you go: every option takes over the plate beside it, writes its own line into a running specification, and moves a total that is visible from the first question rather than revealed at the end.
Product Anatomy Calloutsproduct2A large product image flanked by numbered feature callout cards, each naming and describing a part of the product.
Product Spec Sheetproduct3Editorial spec sheet pairing a product image with a bordered key/value grid of dimensions, weight, battery, and materials.
Every-Angle Galleryproduct4An editorial product gallery showing the same object from several angles — a header with a uniform row of captioned, full-color angle shots.
Split Product Highlightsproduct5Split product intro: a tall product image beside a heading, description, and three icon highlights with an editorial spec link.
Product Variant Explorerproduct6Variant explorer that swaps the product image and spec line as you click between finishes.
What's in the Boxproduct7What's-in-the-box section pairing a product image with a checklist of included items, each with an optional note.
Product Overlap Cardproduct8An editorial product showcase: a large product image with a caption card overlapping its lower corner — eyebrow, product name, tagline, a ruled three-up spec row, and a CTA.
Product Feature Carouselproduct9Clickable tabs switch a feature panel with a large product image, title, and description. Supports an optional auto-loop.
Filterable Product Gridproductlist1Product listing with sidebar filters, sorting, pagination, and active filter chips, powered by the shared product-filters engine. Fifteen filter types including checkboxes, chips, color swatches, price sliders, rating, search, dropdowns, and cascading selects. Runs fully client-side on a given dataset, self-fetches from your API via productsUrl with an SSR-friendly first page, or emits queries in controlled server mode.
Product Grid With Filter Drawerproductlist2Product catalog with a single Filters button that opens a side drawer: keyword search, cascading category and subcategory selects, a searchable multi-brand combobox, a size multiselect, and a segmented gender control, powered by the shared product-filters engine. Runs fully client-side on a given dataset, self-fetches from your API via productsUrl with an SSR-friendly first page, or emits queries in controlled server mode.
Marketplace Toolbar Product Gridproductlist3Dense product grid with an always-visible inline filter toolbar: search, a segmented category, a cascading subcategory select, and a searchable brand combobox, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode.
Quick-Shop Product Gridproductlist4Product grid with a left filter sidebar where hovering a card reveals a quick-shop tray with sizes and an add-to-cart button, plus a category tag and sale badge, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode.
Load More Feed With Category Pillsproductlist5Three-column product feed led by a row of category pills, with a search and sort, and a Load more button plus progress bar that appends the next batch instead of paginating, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode.
Development Hero with Fact Barrealestate10A property development hero on a plain ground: a short eyebrow with a rule, a large sans headline beside the intro and two pill buttons, then a wide photograph that is unveiled top to bottom once it has loaded and drifts slowly as you scroll, and a four-figure fact bar (homes, bedrooms, prices from, completion) under hairlines that draw in.
Residences Floor Plan Pickerrealestate11A residence picker for a development: a list of home types with their starting prices on the left and a line-drawn floor plan on the right that redraws itself, wall by wall, whenever you choose another type. Numbered room markers light up as you hover the room list, and a five-figure spec row (interior, outside, bedrooms, bathrooms, from) with hairlines sits under the plan, with the type's note, availability and an enquiry button beside it.
Monthly Payment Estimatorrealestate12A mortgage estimator for a development's sales page: a tall photograph beside a price field, term pills and two sliders for deposit and interest rate; the estimated monthly payment is a large figure that springs to each new value, with a two-colour bar splitting principal from interest, three breakdown figures under hairlines, a sales button and a disclaimer.
Split Hero with Register Formrealestate13A development hero split in two: eyebrow, large sans headline, intro and a privacy line on the left; on the right a tall 4:5 photograph that is unveiled from the top once loaded and drifts against the scroll, with a compact register form (first name, email, bedroom pills writing to a hidden field, a submit pill) laid over its bottom edge on desktop, submitting as a GET request with configurable parameter names.
Elevation Drawing Herorealestate14A development hero built around a line drawing: eyebrow, large sans headline and two pill buttons on the left, three facts under hairlines on the right, then a front elevation of a gabled brick warehouse with arched windows joined to a flat-roofed concrete wing with balconies, drawn stroke by stroke on mount; hovering or focusing a part name in the row beneath lights that part of the drawing in the accent colour.
Video Hero with Mute Togglerealestate15A development hero on a wide video frame that is unveiled from the top once the clip can play, with a dark scrim rising from the bottom; a rule eyebrow, a large sans headline, a lead and two pill buttons sit bottom-left on the footage, and a round mute toggle in the top corner switches the sound of the autoplaying, looping, inline clip.
Agency Search Herorealestate16A search hero for an estate agency page: eyebrow, large sans headline and intro, then a search bar under a hairline with a location field, three selects (property type, bedrooms, maximum price) and a submit pill, posted as a GET request to a listings URL with configurable parameter names; three quick-link pills under it and a wide 21:9 photograph below that is unveiled once loaded and drifts against the scroll.
Dusk Hero, Photo Firstrealestate17A development hero that leads with the picture: a wide 21:9 dusk photograph at the top, unveiled from the top edge once loaded and drifting slowly against the scroll, then a two-column text row with a rule eyebrow, a large sans statement and two pill buttons on the left and three figures under hairlines on the right.
Statement Hero without Photorealestate18A typographic development hero with no imagery: a rule eyebrow, a huge two-line sans headline, one long hairline that draws across the page, then three columns (What, Where, When) each with a label, a light figure and a line of text, and two pill buttons rising in last.
Four Materials Columnsrealestate19A materials story for a development: eyebrow, heading and lead on the left with a square photograph beside them, then four columns under hairlines, each with a small line-drawn glyph (plank grain, a concrete block, a brick bond, a folded cloth) that draws itself in once scrolled into view, a title and a short note.
Architect Statement Figuresrealestate20An architect's statement for a development: an eyebrow, a long pull-quote set as the section heading, the architect's name, role and practice on a hairline row, and three practice figures (years, homes, awards) that count up from zero under hairlines once they scroll into view.
Specification Accordion Photorealestate21A specification list for a development: a tall 3:4 photograph on the left and, on the right, an eyebrow, heading and lead above a single-open accordion (Kitchen, Bathroom, Finishes, Technology) whose rows sit between drawn hairlines; each row opens to a bulleted list and its chevron turns as it opens.
Energy Figures Ringsrealestate22An energy performance row for a development: eyebrow, heading and lead, then four figures (an EPC rating, zero gas, a percentage saving, solar capacity) each set inside a thin ring that draws its track and then fills to a share once in view while the number counts up from zero, with a title and a note under each, and a closing hairline row holding a source note and an outline button.
Build Timeline Spinerealestate23A 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.
Courtyard Photo Hotspotsrealestate24A photo explainer for a development: eyebrow, heading and lead, then a 16:9 photograph with numbered markers placed by percentage; hovering, focusing or clicking a marker or its row in the list under the photo cross-fades that part's title and note into a column beside the photo and moves a primary bar to the matching row.
Within Minutes Travel Tablerealestate25A 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.
Transport Links Tablerealestate26A transport table for a development's location page: one row per station, pier or bus stop with a small circle glyph that draws itself in, the stop name and walking time, the lines served as outlined text pills, and the minutes to three destinations as light figures that count up from zero. Hairlines draw between the rows as they rise in order, and a footnote closes the table.
Neighborhood Places Listrealestate27A neighborhood list for a development: a wide photograph that is unveiled from the top once loaded and drifts against the scroll, the eyebrow, heading and intro in the header grid under it, then eight places in two columns, each a row with its category, name and walking distance as a light figure, plus a one-line note that fades in on hover or focus. Hairlines draw with the rows as they rise in reading order.
Development Location Maprealestate28A location section for a development on a real map drawn without a map library: street and satellite tiles with a pill switch, dragging, double-click and keyboard zoom that glides between levels, a labelled pin for the development and small labelled dots for nearby places that centre the map when clicked, and a dark contact card over the corner with the sales suite hours, a large phone number and a directions button.
Schools and Essentials Columnsrealestate29A three-column amenities list for a development: Schools, Health and Everyday, each a titled list of places with a name, a rating or type, and the walking distance on the right. Hairlines draw above every row and close each column, the columns and their rows rise in a staggered sequence from left to right, and a footnote about ratings and catchments ends the section.
River Walk Photo Storyrealestate30A photo story for a development's riverside setting: the eyebrow, heading and intro in the header grid, a wide 21:9 photograph that is unveiled from the top once loaded and drifts against the scroll, then a single horizontal hairline that draws across with three small dots fixed at 20%, 50% and 80%, each carrying a caption with a title and a line that rise in order under their dot.
Availability Table with Filtersrealestate31An availability table for a development: filter pills by home type and a sort select above rows of unit, floor, type, interior area, aspect, price and a dot-plus-word status (available, reserved, sold). Changing the filter or the sort fades the list out and rises the new rows in one by one under hairlines, sold rows are muted, and a count with a pricing note closes the table.
Residence Type Cardsrealestate32Three borderless residence cards for a development, each opening with a hairline, a 4:3 photograph unveiled top to bottom once loaded, the type name and title, a three-figure spec row (bedrooms, bathrooms, interior) under hairlines, the starting price and a text link with an arrow that nudges on hover.
Compare Two Residence Typesrealestate33A comparison table for a development: five type pills of which two are always selected, and under them a typographic spec table (interior, outside, bedrooms, bathrooms, floors, aspect, parking, from) with hairline rows whose two value columns cross-fade whenever another type is picked; the newest pick replaces the older of the two, and an enquiry button closes the table.
Floor Selector with Section Drawingrealestate34A floor selector for a development: a line-drawn building section (ground to roof across five levels, a pitched warehouse roof beside the wing's set-back flat roof) draws itself wall by wall when it scrolls into view, with a round marker per level; hovering or clicking a marker tints that level and swaps the panel on the right to its name, a note and the homes on it (unit, type, status, price) with a cross-fade.
Finishes Palette Switcherrealestate35A finishes picker for a development: two palettes listed as rows of five round swatches with a name and a mood line, the chosen one carrying a primary bar; picking a palette cross-fades the 4:3 kitchen photograph beside it and swaps the list of what changes (floor, cabinets, worktop, tiles, ironmongery) under hairlines, with a note about choosing at reservation.
Residence Photo Spotlightrealestate36A residence spotlight: one large 4:3 photograph with a row of five thumbnails under it, one per home type; choosing a thumbnail cross-fades the photograph and swaps the details beside it (type, title, starting price, a short line and fact pills), with an enquiry button at the foot of the column.
Four Buying Steps Rowrealestate37A how-to-buy section for a development's sales page: a header with eyebrow, heading and intro, then four steps (Register, Visit, Reserve, Exchange) in one row under hairlines that draw in with each column; every step shows a title, a short line and how long it takes, and a register button sits with a footnote under a closing hairline.
Reservation Fee Explainerrealestate38A reservation explainer for a development's sales page: on the left the reservation fee as a large figure that counts up in view, with a checklist of what the fee does under drawn hairlines; on the right a short vertical timeline (reservation, exchange within 28 days, completion) whose spine draws down and whose dots fill in order, followed by a reserve button and a short note.
Staged Payment Schedule Barrealestate39A payment schedule for an off-plan development: a price field, then a stacked proportional bar whose segments (10% on exchange, 10% at structure complete, 80% on completion) grow one after another, each labelled below under a hairline with its share, a spring figure for the typed price, a title and a line; a total figure, a button to the payment estimator and a note close the section.
Launch Offer with Countdownrealestate40An incentive section for a development's sales page: eyebrow, heading and intro, the offer value as a large figure counting up in view, a checklist of what is included under drawn hairlines, a four-cell countdown (days, hours, minutes, seconds) to a fixed date or a rolling number of days with rolling digits and a closed state, then a reserve button and a note; a tall 3:4 photograph beside the text opens top to bottom once loaded and drifts slightly with the scroll.
Two Column Buyer FAQrealestate41A buyer FAQ for a development's sales page: a header with eyebrow, heading, intro and a contact line with a text link, then eight questions split across two shadcn accordion columns under hairlines that draw in row by row; only one answer is open at a time across both columns, the chevron turns as an item opens and answers expand with the accordion's own height animation.
Mortgage Partner Rate Tablerealestate42A lender table for a development's sales page: a header with eyebrow, heading and intro, a caption row, then one row per lender (name, product, initial rate as a light figure, fixed term, note) under hairlines that draw in as the rows rise in order; a representative example paragraph and a button to the payment estimator sit under the closing hairline, and the row reflows to two columns on small screens.
Book a Viewing Formrealestate43A viewing request for a development's sales page: eyebrow, heading and lead across the top, then a two-column GET form with a pill-shaped date field that opens a shadcn calendar limited to future days, a row of time-slot pills writing to a hidden input, and name, email and phone fields beside them, closing on a hairline with the submit pill and a note.
Sales Suite Visit Detailsrealestate44A visit-us block for a development: a tall 3:4 photograph of the entrance on the left and, on the right, heading and lead, an address card with a map pin, the street in large type and a walking-time pill, an opening-hours list whose row for today is marked with a thin accent bar and a Today tag read from the visitor's clock, then a directions pill, a phone link and a short access note.
Register Interest Formrealestate45A full register-your-interest form for a development: heading, lead and a phone line on the left; on the right a GET form with first name, last name, email and phone in a two-column grid, bedroom pills writing to a hidden input, a budget select, a message textarea, and a consent checkbox under a hairline beside the submit pill and a privacy note.
Brochure Download Formrealestate46A 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.
Sales Team Contact Rowsrealestate47A sales team list with portraits: heading and lead across the top, then one hairline row per person with a round portrait, name and role on the left and phone, email and spoken languages as a three-column definition list on the right, closing on an office-hours footnote under a final hairline.
Updates Signup Formrealestate48A quiet updates signup for a development: heading and lead on the left; on the right a GET form with an email field, a fieldset of interest rows (Phase 2 launch, price changes, viewing days, construction updates) each a checkbox with a label and a one-line description under a hairline, then the submit pill beside a privacy line.
Buyer Quotes Listrealestate49Three 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.
Single Testimonial With Photorealestate50One large buyer quote beside a 4:3 photograph that opens from the top once it has loaded and drifts gently against the scroll, with the buyer's name and the home they bought on a hairline row and a counter with previous and next buttons that cycle through the quotes with a cross-fade.
Press Quote Cardsrealestate51Press coverage as three quiet muted cards: each names the publication, gives the pull quote in large type and ends with the date and an arrow that lifts on hover, the whole card linking to the article; an outline button to the press kit follows.
Minimal Awards Gridrealestate52A quiet awards and certifications section: the heading and intro, then the awards in a three-column grid with no rules or icons, each just its year, the award in medium type and the body that gave it, rising row by row, with a short note to close.
Developer Record Photo Pairrealestate53A minimal developer record: the heading and a short line on the left, and two tall photographs of past schemes on the right, the second set a little lower, each opening from the top once loaded and captioned with the scheme, city and year.
The Team Behind Itrealestate54Four practices behind a development (developer, architect, landscape, interiors) as four hairline-topped columns under a header grid, each with the role as a caption, the practice name, a short paragraph and a text link with an arrow that nudges on hover. The columns rise in order as they scroll into view, their links a beat after.
Dark Call to Action Bandrealestate55A full-width dark band for a development's sales page: a pale eyebrow with its rule, a large sans heading on the left and the lead paragraph with two pill buttons (a paper one and a hairline outline) aligned to the bottom right, closed above and below by two faint hairlines that draw across as the band scrolls into view.
Photo Call to Actionrealestate56A single wide photograph as the call to action: a 21:9 frame that is unveiled top to bottom once the image has loaded and drifts slowly against the scroll, with a dark scrim rising from the bottom edge, a pale eyebrow, a heading and a paper pill button in the bottom left corner, and one small figure with its label in the top right.
Homes Remaining Counterrealestate57An availability call to action built around one huge figure: the number of homes still for sale counts up from zero as it enters the viewport, with a short paragraph and a pill button beside it, then a full-width hairline that draws across and fills in dark to the share of homes sold, captioned with the sold count and the percentage.
Phase Launch Announcementrealestate58A launch announcement for the next phase of a development: an eyebrow, a short heading and the launch date set as a large light figure, a paragraph, three facts about the phase (homes, prices from, bedrooms) under hairlines that draw in, and a register button, beside a tall 4:5 photograph that is unveiled from the top once loaded and drifts slowly against the scroll.
Split Call to Actionrealestate59Two calls to action side by side, divided by a vertical hairline that draws down the middle: each half has a heading, one line of text and a pill button, closed above and below by hairlines that draw across, with the two columns rising in a short offset sequence; on small screens the halves stack and the divider becomes a horizontal rule.
Quiet One Line Call to Actionrealestate60The smallest call to action in the set: one line of heading on the left and a single pill button on the right, held between two hairlines that draw across as the strip enters the viewport; on small screens the button drops under the line.
Masonry Gallery with Lightboxrealestate61A development gallery: a three-column masonry of nine photographs in their own ratios, each frame opening top to bottom once its file has loaded and drifting slowly against the scroll; clicking a frame opens a full-screen dark lightbox with a counter, a caption on a hairline row, previous and next pills, arrow and Escape keys, and the page scroll locked while it is open.
Scroll-Snap Photo Filmstriprealestate62A horizontal filmstrip for a development's photographs: 4:3 and 3:4 frames of one shared height with a title and caption under each, scroll-snapping as you drag or swipe, previous and next pills that move the strip by exactly one frame, and a hairline under the strip whose filled share follows the scroll position through a spring.
Video Beside Factsrealestate63A split media section for a development: a 4:3 muted looping video on the left that is unveiled top to bottom once it can play and drifts against the scroll, with a round play and pause toggle in its corner, beside a rule eyebrow, a heading, a lead paragraph, three figures on hairline rows and a pill button on the right.
Room by Room Pickerrealestate64A room picker for a show home: a hairline list of rooms on the left with a thin accent bar sliding to the selected one, and on the right a 4:3 frame in which the matching photograph cross-fades in once it has loaded, with the room's note, a counter and a caption under it; the arrow keys move the selection and the first photograph opens the frame top to bottom.
Offset Photo Pair with Statementrealestate65Two tall 3:4 photographs set a column apart and offset vertically, with a rule eyebrow, a compact heading, a short paragraph and an outline pill button standing between them; each frame opens from the top once its file has loaded, drifts against the scroll and carries a small caption underneath.
Shared Spaces Photo Cardsrealestate66The shared spaces of a development as four muted photo cards: each opens with a 4:3 photograph that unveils once loaded and drifts with the scroll, then a number, the space, a line on what it offers and a hairline row with where it is and when it is open. Cards rise in order and a short note closes the section.
Key Numbers Bandrealestate67A key numbers band for a development: a short heading above four figures (homes, a bedroom range, the starting price and the completion year) in two columns on tablets and four on desktop, each under its own hairline and never wrapping. The figures count up from zero in order once the row scrolls into view, ranges count both ends, and currency, plain and grouped number formats are chosen per figure.
A Day in the Developmentrealestate68A day-in-the-life timeline for a development: a header, then a vertical list of moments (a river walk at 7:00, courtyard coffee at 9:00, lunch from the market at 13:00, the terrace at 18:00) along a hairline spine that draws downwards, each with the time as a light figure, a title, a line and a small square crop of a photograph that opens once it has loaded and drifts slightly against the scroll.
Sales Progress Photo Cardsrealestate69Sales progress for a development as a grid of photo cards, one per home type: a 4:3 photograph that unveils once loaded with an availability pill on it, the type and title, a three-part bar for sold, reserved and available homes and the counts beside coloured dots. A dark summary card closes the grid with the total counting up, three status figures, a note and a button.
New Build Comparison Tablerealestate70A two-column comparison table for a development's sales page: criteria rows (energy, warranty, chain, stamp duty, maintenance) with a title on the left and two cells on the right, one for the new build and one for older stock, each with a short note and a small check or dash glyph drawn stroke by stroke as the table scrolls into view. Hairlines separate the rows, column labels sit above, and a note and a register button close the block.
Service Charge Breakdownrealestate71A service charge breakdown for a development: a list of cost lines (concierge, building insurance, reserve fund, grounds, lifts) under one top hairline, in open rows without dividers, each with its yearly figure counting up, its share of the total and a horizontal bar proportional to the largest line that grows from the left in order; beside the list a large total figure counts up with a note on how the charge is set and a download button.
Sun Path and Aspectrealestate72A sun and aspect section for a development: a small line-drawn sun path (a hairline horizon, a fine arc over a soft daylight fill and three suns sitting on the arc at morning, midday and evening with labelled times) that draws itself once in view, above three hairline-topped columns for east-, south- and west-facing homes, each with a title, a line on the light they get and the home types that face that way as outline tags; a note closes the block.
Development Navbarrealestate73A calm sticky navbar for a property development: a text wordmark, five quiet links, a phone link and a compact pill button that rise in on mount, a hairline under the bar that fades in once the page has scrolled, and an always-mounted mobile panel toggled by the menu button whose links settle in one after another.
Navbar with Residences Panelrealestate74A sticky development navbar whose Residences link opens an always-mounted, CSS-hidden full-width panel on hover or keyboard focus: five home types in a ruled list with title, size, availability and from price beside a 4:3 photograph, a caption and a text link; the other links stay plain, a compact pill sits on the right, and the mobile panel folds the same five types into an accordion under the Residences row.
Navbar with Info Barrealestate75A sticky development navbar with a thin information row above the main bar: today's sales suite hours, a phone link and a launch notice with an arrow, separated from the wordmark, links and compact pill by a hairline. The row collapses to zero height with a fade once the page scrolls and returns at the top, and the mobile panel is always mounted and toggled by the menu button.
Development Footer with Register Rowrealestate76A light footer for a property development: the wordmark and a tagline beside four link columns (residences, the place, buying, the developer) that rise in one after another, a ruled register row with a heading, a line, an email field and a pill submit button as a plain GET form, and a legal row with the copyright, policy links and two notices about the consumer code and computer-generated images.
Footer with Giant Wordmarkrealestate77A typographic footer led by a huge wordmark that rises out of a clipped line as it enters the viewport, followed by three ruled rows: the site links in one wrapping row, the sales suite address with the phone and email, and the copyright line with policy links. Each hairline draws from the left with its row.
Minimal Development Footerrealestate78The smallest footer in the set: one ruled row with the text wordmark, three quiet links and a short legal line, then a second hairline row with the developer credit and the year. Everything rises in once as it enters the viewport and both hairlines draw from the left.
Numbered Legal Disclaimersrealestate79A typographic legal block for a development's sales site: an eyebrow, heading and lead in the header grid, then numbered clauses (computer-generated images, prices as of a date, consumer code, tenure, service charge estimate) laid out as number, title and paragraph on hairline rows that rise in order, closed by a bottom hairline and a short note.
Partner Agents Side by Siderealestate80Two estate agencies selling a development, set as two muted cards side by side: each opens with a 16:9 office photograph that unveils from the top once loaded and drifts with the scroll, then its name and office line, hairline rows for the named contact, a phone link and an email link, an opening-hours list, and a dark button pinned to the card's foot; cards and rows rise in sequence.
Rental Yield Estimatorrealestate81A rental yield estimator for a development's investor page: a tall photograph beside a purchase price field and two sliders for monthly rent and running costs as a share of rent; the gross yield is a large percentage figure that springs to each new value with the annual rent beside it, and net yield, annual rent and annual costs sit under hairlines with a sales button and a disclaimer.
Stamp Duty Calculatorrealestate82A stamp duty calculator for a development's buying page: a purchase price field and a first-time buyer checkbox on the left above the total tax as a large figure that springs to each new value with the effective rate, a button and a disclaimer; on the right a configurable band table (threshold and rate) lists the tax per band on hairline rows, the active bands in full colour, and the whole table cross-fades when the checkbox swaps in the first-time buyer bands.
Floor Plan Downloadsrealestate83A download list for a development's floor plans: five hairline rows, one per home type, each with a tiny schematic plan glyph (an outline rectangle with two or three partition strokes, the terrace dashed) that draws itself in once the list is in view, the type name and title, a single non-wrapping measure line (interior figure, hairline, outside space), and a download link with a file size; rows rise in order and a note closes the list.
Area Guide Figuresrealestate84An area guide for a development's location page: an eyebrow, heading and lead, then four figures (average price, five-year growth, residents, green space share) in a four-column row under hairlines, each counting up from zero over 1.4 s once in view and formatted as currency, number or percent; a paragraph about the neighbourhood and a source footnote sit on a hairline row below.
Virtual Tour Framerealestate85A virtual tour entry for a development's sales page: an eyebrow, heading and lead in the header grid, then a wide 21:9 photograph that opens from the top once loaded and in view, with a centred paper pill and play icon that plays the tour film inside the same frame (with native controls and a close button), and under it a row of three tour stops under hairlines, each with its number, a time marker, a title and a line.
Before/After Image Sliderreveal1Interactive image comparison component with a draggable divider supporting horizontal and vertical orientations. Perfect for showcasing transformations, photo editing results, or design improvements.
Self Sweeping Comparereveal10Before and after comparison that plays itself: the seam walks from edge to edge on a timer, clicking the picture freezes it at that point, and a single round control resumes or holds the sweep between the two captions.
Diagonal Peel Comparereveal11Comparison that lifts diagonally instead of wiping straight: dragging the corner handle shrinks a triangular clip on the covering photograph to expose the one underneath, with notes on what changed.
Tile Flip Comparereveal12Two photographs split across the same grid so each square can be flipped from before to after on click, with buttons to turn the whole frame over and a counter of how much has been revealed.
Hold To Comparereveal13Press-and-hold comparison: holding the frame or the button cross-fades the earlier photograph in and swaps the corner label and caption, releasing returns to the current one.
Comparison Slider with Highlightsreveal2Split-layout image comparison with a sidebar featuring benefit highlights and icons alongside a draggable before/after slider. Perfect for demonstrating product improvements with detailed feature callouts.
Manifesto Scroll Revealreveal3A type-forward manifesto whose ruled statement lines fade and rise into view as the section enters the viewport.
Scroll-Reveal Galleryreveal4An editorial scroll-reveal gallery where images fade and rise into view with monospace captions and alternating rhythm.
Editorial Statement Revealreveal5A large light manifesto statement with an accent-highlighted phrase, an eyebrow above, and a supporting footnote plus outline button beneath a hairline rule.
Drag Compare Sliderreveal6Before and after comparison where a pointer-driven handle clips the earlier photograph over the later one, with pill labels on both corners and a ruled row of outcome figures beneath.
Segmented State Comparereveal7Two versions of the same object compared through a segmented pill control: the photographs cross-fade in place while the title, explanation and ruled note list swap beside them.
Vertical Split Comparereveal8Comparison that splits horizontally instead of down the middle: a draggable divider wipes the upper photograph away to expose the lower one, with pill labels and a caption for each state.
Spotlight Lens Comparereveal9Before and after comparison seen through a draggable circular lens: the earlier photograph fills the frame while the later one shows only inside the circle, which follows the pointer or the arrow keys.
Billing Splitsaas100A split section with an eyebrow, light heading, checked bullet list, and accent button on the left, and two stacked image tiles floating live billing micro-assets on the right.
Three Tier Pricingsaas101A pricing section with an eyebrow over a hairline rule, a two-column heading, and three plan cards with light prices, checked feature lists, and an accent-highlighted popular tier.
Big Number Metrics Bandsaas102A metrics band with an eyebrow over a hairline rule, a two-column heading, and four oversized light stats, each sitting under its own hairline with a label and caption.
Onboarding Splitsaas103A reversed split with an image tile floating a live setup checklist on the left, and an eyebrow, light heading, checked bullets, and an accent button on the right.
Plan Comparison Tablesaas104A comparison section with an eyebrow over a hairline rule, a two-column heading, and a scrollable three-plan feature table with check, dash, and text cells and a highlighted plan column.
Migration Source Selectorsaas105A migration section where your current system is picked from frosted glass cards floating on a photo panel, swapping the right side to a plain-language summary, a checked list of what carries across, the typical timeline, and a caveat.
Product Tour Switchersaas106Product tour driven by pill tabs: each step pairs an explanation and a pill CTA with a soft interface panel built from divs, listing labelled rows with their value and current status.
Trust And Compliance Ledgersaas107Security section pairing four ruled pillars with circular icons and a labelled row of measured figures such as uptime and support response, closed by a caveat note beside an outline pill CTA.
Branching Scoping Formsaas108A 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.
Plan Comparison Tablesaas13Comparison table showing features across Starter, Pro, and Enterprise tiers with checkmarks. Perfect for pricing pages that need clear feature differentiation.
How It Works Stepssaas14Three-step onboarding process with numbered circles and connecting lines. Perfect for explaining product workflows or signup processes.
Team Members Gridsaas15Team member cards with circular photos, names, roles, and social media links (Twitter, LinkedIn, GitHub). Perfect for about pages showcasing company leadership.
Changelog Timelinesaas16Version history cards with version badges, dates, and update type labels (Feature, Improvement, Fix). Perfect for product update pages and release notes.
Feature Bento Gridsaas23Bento-style grid layout with feature cards in small and large sizes, each with icon, title, and description. Perfect for showcasing product capabilities on landing pages.
Job Listingssaas31Career openings list with job title, department badge, location, and employment type. Perfect for company career pages with clickable job postings.
Press Coveragesaas34Media mentions list with publication source badges, headlines, and dates. Perfect for showcasing company press coverage and news articles.
Connected Integrationssaas55Integration management card showing connected apps with logos, sync status, and connect/disconnect actions. Perfect for settings pages managing third-party integrations.
Analytics Dashboardsaas87Metric cards grid showing key stats (users, revenue, conversion, sessions) with trend indicators and time range selector. Perfect for admin dashboards and analytics overviews.
Active Sessions Managersaas97Security settings card showing active login sessions with device icons, browser info, location, and sign-out controls. Perfect for account security settings pages.
SaaS Interface Splitsaas98Feature split pairing a focused pitch with a built monochrome app-window mockup of skeletons, nav, and metrics.
SaaS Integrations Gridsaas99An editorial integrations section pairing a big-type pitch with a bordered mosaic of grayscale partner logo tiles.
Subscription Plan Cardsettings59Subscription management card displaying current plan details, pricing, included features, renewal date, and status badges with actions to change or cancel. Perfect for SaaS billing dashboards and account settings.
Invoice History Tablesettings64Billing history table displaying invoices with date, description, amount, payment status badges, and download buttons. Perfect for account billing pages and payment management dashboards.
Invoice Detail Viewsettings65Detailed invoice page with billing address, itemized line items table, subtotal, tax, total, and payment method info with print and download actions. Perfect for generating printable invoices and payment receipts.
Workspace Preferences Panelsettings66A 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.
Email Preferences With Live Volumesettings67A subscription preference list where each list carries how often it sends, and the figure underneath recomputes the monthly email volume as boxes are ticked, down to a stated zero.
Workspace Settings With Collapsible Groupssettings68A 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.
Interactive Hotspot Imageshowcase1Full-width image showcase with clickable animated hotspots that reveal feature popovers with icons and descriptions. Perfect for product tours and interactive feature demonstrations.
Video Demo Thumbnailshowcase10Video preview section with thumbnail image, centered play button overlay, duration badge, and CTA buttons below. Perfect for product demo videos and explainer content.
Features with Stats and Imageshowcase12Two-column layout with key metrics bar, icon feature list, CTA button, and large product image. Perfect for enterprise feature sections highlighting performance and capabilities.
Bento Code Editor Trioshowcase13Bento layout pairing a code editor mockup with a video play card and a file upload preview. Every label is editable; no media props required.
Code Editor With Upload Drawershowcase14Browser-chrome card pairing a syntax-highlighted code editor with a side upload drawer — folder asset, progress bar, and cancel/continue actions. Every label is editable; no media props required.
Code Editor With Live Activity Feedshowcase15Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.
Code Editor With AI Copilotshowcase16Browser-chrome card pairing a syntax-highlighted code editor with an AI chat panel — assistant suggestions arrive as inline snippets you can apply with one click. Every label is editable; no media props required.
Code Editor With Test Resultsshowcase17Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.
Code Editor With Live Logsshowcase18Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.
Code Editor With PR Reviewshowcase19Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required.
Split Hotspot Feature Sectionshowcase2Two-column layout with text content, CTA buttons, and interactive image with clickable hotspot popovers. Perfect for SaaS feature pages with reversible layout option.
Code Editor With Environments Panelshowcase20Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.
API Inspector With Code Editorshowcase21Browser-chrome card pairing a DevTools-style API inspector on the left with a syntax-highlighted code editor on the right — method badge, response body, timing footer. Every label is editable; no media props required.
Database Query With Code Editorshowcase22Browser-chrome card pairing a typed query result table on the left with a syntax-highlighted code editor on the right — sortable columns, status-toned cells, row count footer. Every label is editable; no media props required.
Component Preview With Code Editorshowcase23Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.
Files Changed With Code Editorshowcase24Browser-chrome card pairing a changed-files list on the left with a syntax-highlighted code editor on the right — status icons, +/- stats, and an active row highlight. Every label is editable; no media props required.
Webhook Deliveries With Code Editorshowcase25Browser-chrome card pairing a webhook delivery log on the left with a syntax-highlighted code editor on the right — color-coded status codes, timing per delivery, retry support. Every label is editable; no media props required.
Code Editor With Command Paletteshowcase26Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required.
Inline Diff Viewershowcase27Browser-chrome card rendering an inline diff — added lines glow emerald, removed lines fade rose, branch arrow row in the header, and an approve-and-merge footer. Every label is editable; no media props required.
Markdown Editor With Live Previewshowcase28Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.
AI Workspace With Streaming Responseshowcase29Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required.
Project Gallery Gridshowcase3Responsive three-column image gallery with hover zoom effects, captions, and optional clickable cards. Perfect for showcasing project portfolios or work samples.
Live Spreadsheet With Formula Barshowcase30Browser-chrome card rendering a live spreadsheet — formula bar with cell reference, typed columns, status-toned cells, and a selected total cell with outline ring. Every label is editable; no media props required.
TypeScript Types Plus Usageshowcase31Browser-chrome card pairing two minimal code panes — TypeScript type definitions on the left, real call-site usage on the right. Monochrome syntax with muted comments. Every label is editable; no media props required.
GraphQL Query Plus Responseshowcase32Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required.
Regex Pattern Testershowcase33Browser-chrome card hosting a regex playground — pattern + active flag pills up top, test rows with inline match highlights and capture column, summary footer. Every label is editable; no media props required.
Polyglot Code Comparisonshowcase34Browser-chrome card pairing two minimal code panes — same logic in two languages (TypeScript and Python by default). Monochrome syntax with muted comments and language badges. Every label is editable; no media props required.
Migration Before And Aftershowcase35Browser-chrome card pairing a before/after code migration — eyebrow + title + description above each pane, monochrome syntax, and an apply-migration footer with diff summary. Every label is editable; no media props required.
Annotated Showcaseshowcase36Browser-framed product screenshot with surrounding feature callouts.
Showcase Scrollershowcase37Horizontally scrollable row of wide product showcase frames with captions.
Sticky Showcaseshowcase38A pinned product image beside a scrolling list of feature steps.
Tabbed Showcaseshowcase39Tabbed product screenshots in a browser frame with captions.
Browser Mockup Screenshotshowcase4Centered hero section with heading, CTA buttons, and a realistic browser chrome mockup displaying product screenshots. Perfect for SaaS landing pages showcasing web app interfaces.
UI Bento Showcaseshowcase40Bento mosaic mixing product screenshots with text and accent tiles.
Editorial Project Indexshowcase41A ruled, type-forward project index where each row reveals a floating thumbnail on hover.
Mosaic Frame Galleryshowcase42An asymmetric mosaic image gallery with mixed-span tiles and monospace frame captions.
Featured Project Dossiershowcase43A single featured project with a tall image and a meta column of client/role/year rows, a paragraph, and a CTA.
Brand Partner Gridshowcase44Centered 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.
Alternating Asset Rowsshowcase45A showcase of alternating split rows, each pairing an image tile that floats a live product micro-asset with an eyebrow, a light heading, a paragraph, and a checked bullet list.
Tabbed Product Tourshowcase46A tabbed showcase with an eyebrow over a hairline rule and a two-column heading, where each tab reveals a light title, checked bullets, and an image tile floating a live product micro-asset.
Layered Product Sceneshowcase47A split showcase pairing copy, checked bullets, and an accent button with a gradient canvas where two live micro-assets float at staggered depths for a layered product scene.
Connected Flow Pipelineshowcase48A horizontal pipeline with an eyebrow over a hairline rule and a two-column heading, where three image tiles float live micro-assets as connected stages joined by directional arrows.
Quick Actions Showcaseshowcase49A centered showcase with an eyebrow, light heading, and paragraph over a wide image tile that floats a live quick-actions bar, followed by a four-up grid of icon-led action descriptions.
Side-by-Side Competitor Comparisonshowcase5Two-column comparison layout with product images, feature checklists, and visual differentiation between your product and competitors. Perfect for competitive positioning sections.
Downloadable Resource Cardsshowcase50Three resource cards, each led by a preview image and stamped with its format, holding the title, one line on what is inside, and a seal download button pinned to the bottom of the card.
Two Case Studiesshowcase51Two case studies side by side under a serif heading that settles in word by word: each with a photograph drifting inside its frame, a small-caps client and sector line, a serif title, a summary, and a ruled foot pairing a serif result figure with a read link.
Linked Programme Cardsshowcase52Four cards on a muted fill, each one a whole link that inverts to ink on hover: a photograph drifting across the top, a serif name facing its arrow, the shape it takes, a paragraph and a detail line at the foot.
Linked Alternating Slabsshowcase53Full-width ruled rows that alternate the photograph left and right, each row a whole link carrying a large serif title, a paragraph and a meta line beside an arrow that lifts as the row tints on hover.
Studio Work Mosaic With Live Photo Stagesshowcase54A work showcase for a photography studio with the header on the left and one button on the right, above a borderless mosaic of 4 project stages. One tall stage fills the left column, and the right column stacks a wide stage over two smaller ones, each with a title and a short description underneath. Every stage holds a different photo effect: a liquid slideshow, a camera iris opening on a photograph, a photo settling out of dust and a sketch turning into a photograph. On smaller screens the stages stack in one column.
Desktop and Mobile Device Mockupshowcase6Cross-platform display with desktop monitor mockup and overlapping mobile phone frame showing product screenshots. Perfect for showcasing responsive apps and multi-device experiences.
Screenshot with Testimonial Quoteshowcase7Two-column section combining product image with large customer quote, author avatar, name, and role. Perfect for social proof sections alongside product visuals.
Profile Card with Coversocial1User profile card with cover photo, avatar, bio, location, website, followers/following stats, and follow button. Perfect for user profile headers on social platforms.
Messages Inboxsocial10Conversation list with avatars, online status indicators, message previews, timestamps, unread badges, and search. Perfect for messaging app inboxes.
Trending Topicssocial11Ranked trending topics list with hashtags, post counts, growth percentages, and category badges. Perfect for sidebar widgets showing what is trending.
Stories Carouselsocial12Horizontal scrolling stories bar with gradient ring indicators for unread stories and add-your-own button. Perfect for Instagram-style ephemeral content.
Interactive Pollsocial13Poll card with multiple choice options that reveal percentage results after voting, plus vote count and expiration timer. Perfect for engagement and community feedback.
Emoji Reactionssocial15Emoji reaction picker with hover tooltips, selection highlighting, and reaction counts per emoji type. Perfect for adding reactions to posts and comments.
Social Post Cardsocial2Social media post with author info, text content, image, and interactive like/comment/share/bookmark buttons with counts. Perfect for feed-style content displays.
Saved Bookmarkssocial20Bookmarked articles list with thumbnails, titles, descriptions, source info, and remove actions. Perfect for reading lists and saved content collections.
Team Presence Listsocial23Team members grouped by status (online, away, busy, offline) with colored indicators and status messages. Perfect for workspace sidebars showing who is available.
Link Preview Cardssocial24Rich link previews showing Open Graph images, titles, descriptions, and site favicons. Perfect for displaying shared URLs in feeds and messages.
Referral Invite Cardsocial26Referral sharing card with copyable link, referral code, email invite input, and reward information. Perfect for referral programs and invite-a-friend features.
Leaderboard Rankingssocial27Ranked leaderboard with crown/medal icons, user avatars, scores, and position change indicators (up/down). Perfect for gamification and competitive features.
Threaded Commentssocial3Comment section with nested replies, like counts, reply functionality, and expandable threads. Perfect for blog posts, articles, or discussion forums.
Compact Profile Headersocial32Compact profile card with cover image, avatar, verified badge, bio, location, website, join date, and post/follower stats. Perfect for profile page headers.
Notification Feedsocial4Notification list with activity types (likes, comments, follows, mentions), unread indicators, and mark-as-read actions. Perfect for notification center dropdowns or pages.
Community Cardsocial46Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions.
Wall Of Lovesocial47A social proof wall with an eyebrow over a hairline rule, a two-column heading, and a masonry of bordered quote cards each with a name and handle.
Community Channelssocial48A community section listing four linked places to join as full-width hairline rows, each with an icon tile, a description, a light membership figure, and an arrow that shifts on hover.
Social Post Gridsocial49A social proof grid of six linked post cards, each with an avatar, handle, timestamp, the post itself, and reply, repost, and like counts under a hairline.
Activity Timelinesocial5Vertical timeline showing posts, photos, comments, follows, shares, and videos with color-coded icons. Perfect for activity feeds and user history pages.
Featured Post And Repliessocial50A social section that gives one post an image tile of its own, floating a live post card with its engagement counts, beside the replies it drew as linked hairline rows.
Press Mentionssocial51A coverage section listing each outlet against the line it published, as linked hairline rows with the writer and date, closing on a soft press pack panel.
Community Sessionssocial52An upcoming sessions list with a date block, format, and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next.
Contributor Wallsocial53A community credit section opening on three hairline figures, then naming each contributor in a hairline matrix of cards with their practice, what they changed, and how many reports they filed.
Inverted Follow Panelsocial54A follow section held in one dark panel, listing each account as a linked hairline row with what gets posted there and a light follower figure.
Community By The Numberssocial55A community section on a soft surface with four bordered figure cards, each explaining what the number counts, over an image tile that floats a live cluster of member portraits.
Referral Programmesocial56A referral section walking through three numbered steps and the full terms as a hairline table, beside a column that sticks and floats a live credit card on an image tile.
Community Photo Wallsocial57A community gallery laid out as a masonry of customer photographs at mixed heights, each captioned with what is happening and the practice it came from.
Response Wall With Platform Filtersocial58A masonry of what readers wrote back, disagreements included, filtered by platform pills whose counts come from the responses themselves, over a hairline row of accounts to follow.
Community Notes Wallsocial59A wall of short community posts in three masonry columns, each a muted card with an avatar, name, handle, a linked timestamp and the note itself, settling in with a small stagger. The header carries a serif headline that settles in word by word and a sliding-marker pill at its right end.
Chat Conversationsocial6Real-time chat interface with message bubbles, online status, read receipts, emoji picker, and file attachments. Perfect for messaging apps and customer support chats.
Linked Referral Rowssocial60A ruled list of people to refer on to, every row a whole link: a round portrait, a serif name over a role and a line of what they hold, a place column and an arrow that lifts as the row tints.
Community Groups Listsocial7Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.
Event Cardssocial8Event listings with cover images, date/time, location, attendee previews, and RSVP buttons (Going/Interested). Perfect for event discovery and community calendars.
Follow Suggestionssocial9User suggestions list with avatars, bios, mutual connections, interest tags, and follow/dismiss actions. Perfect for people-you-may-know sections and onboarding flows.
Right-Aligned Stats Cardsstats1Right-aligned layout with heading, description, and a 2x2 grid of stat cards. Perfect for showcasing key metrics alongside content.
Scrolling Stats Marqueestats10Infinite horizontal scrolling ticker of stats that pauses on hover. Eye-catching social proof strip for between sections.
Ring Progress Statsstats11Stats displayed inside circular SVG progress rings with animated counters. Great for visualizing percentages and performance metrics.
Spotlight Stat with Supporting Metricsstats12One hero-sized featured stat with a row of smaller supporting metrics below. Perfect for emphasizing a single key achievement.
Floating Stats over Imagestats13Stat cards that float over a wide background image, overlapping the bottom edge. Creates a dynamic layered visual effect.
Trend Indicator Statsstats14Dashboard-style stat cards with colored trend badges showing up, down, or neutral changes. Perfect for quarterly reports and growth metrics.
Bento Grid Statsstats15Asymmetric bento-style grid with mixed single and double-width stat cards. Ideal for year-in-review and annual report sections.
Video Background Statsstats16Full-width video background with dark overlay and translucent glassmorphism stat cards. Immersive hero-style stats section.
Zigzag Image Statsstats17Alternating rows of images and stats that swap sides. Each row pairs a photo with key metrics and descriptions.
Image Card Statsstats18Tall image cards with gradient overlay and stats at the bottom. Each stat has its own background photo with a subtle hover zoom.
Glass Bar over Imagestats19Wide image with a frosted glass stats bar anchored to the bottom. Stats are separated by vertical dividers inside the blur overlay.
Icon Stats with Animated Counterstats2Centered stats grid with icons and animated counters that trigger on scroll. Ideal for showcasing achievements and key metrics.
Browser Mockup with Statsstats20Split layout with stacked stats on the left and a browser window mockup displaying a screenshot on the right.
Spring Entrance Statsstats21Stats cards that spring up with staggered delay when scrolled into view. Uses framer-motion spring physics for a natural feel.
Odometer Flip Statsstats22Airport departure board-style odometer animation where each digit flips individually with spring physics as numbers count up on scroll.
Animated Bar Chart Statsstats23Horizontal progress bars that grow with spring animation on scroll. Each bar shows a label, value, and percentage fill.
Clip-Path Reveal Statsstats24Large stats that reveal with a horizontal clip-path curtain animation and spring-powered number entrance. Elegant and cinematic.
3D Card Flip Statsstats25Stat cards that flip in from a back-facing 3D rotation using framer-motion spring physics with staggered timing and perspective depth.
Card Stack Fan-Out Statsstats26Stat 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.
Editorial Numbered Statsstats27Magazine-style numbered list layout with large sequence numbers, stat values, and a sticky sidebar heading for an editorial feel.
Timeline Milestone Statsstats28Horizontal timeline with year markers and key metrics at each milestone, ideal for showing company growth and history.
Tabbed Category Statsstats29Stats organized into switchable tabs by category using shadcn Tabs, letting users explore different metric groups.
Centered Stats with Badge and Iconsstats3Full-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.
Testimonial + Statsstats30A featured customer quote paired with supporting metrics for maximum social proof and credibility.
Sparkline Dashboard Statsstats31Mini dashboard cards with SVG sparkline trend charts, change indicators, and key metrics for a data-rich stats section.
Giant Watermark Statsstats32Editorial magazine-style layout with oversized translucent numbers as background watermarks behind each stat row.
Alternating Giant Typography Statsstats33Editorial layout with oversized bold stat values alternating left and right alignment, creating a dynamic typographic rhythm.
Terminal Output Statsstats34Developer-focused terminal aesthetic with monospace font, command prompt, and stats displayed as CLI output with a blinking cursor.
Orbit Layout Statsstats35Central hero metric surrounded by satellite stats in a circular orbit arrangement on desktop, with a linear stack on mobile.
JSON API Response Statsstats36Stats displayed as a syntax-highlighted JSON API response inside a code block with endpoint URL header and colored tokens.
Git Log Statsstats37Stats styled as a git commit log with commit hashes, timestamps, branch visualization lines, and metric values as commit messages.
Server Monitoring Statsstats38Monitoring dashboard aesthetic with status indicators, metric rows, live status badges, and a dark panel background.
E-Commerce Revenue Dashboardstats39Key e-commerce KPI cards showing revenue, orders, average order value, and conversion rate with period comparison badges.
Stats Cards with Descriptionsstats4Centered header with badge, heading, and description followed by horizontal stat cards. Each card shows a title, large value, and detailed description.
Product Showcase Statsstats40Bestseller product cards with images, star ratings, units sold, and revenue figures for e-commerce social proof.
Live Social Proof Statsstats41Real-time social proof section with live activity indicators, recent order count, review scores, and urgency-building metrics for e-commerce.
Review Distribution Statsstats42Star rating breakdown with horizontal progress bars for each rating level, overall score, and total review count like Amazon or App Store.
Shipping Performance Statsstats43Delivery and shipping metrics with icon cards showing average delivery time, on-time rate, and coverage for e-commerce trust building.
Sales Milestone Statsstats44Celebration-style milestone section with a prominent central metric and supporting stats, perfect for announcing sales achievements.
Category Performance Statsstats45Product category cards with images and sales metrics showing units sold and growth percentage for each category.
Trust Badge Statsstats46E-commerce trust signals with large icons and supporting stats for security, returns, shipping, and support guarantees.
Weekly Market Snapshotstats47Weekly real estate market activity grid with key metrics, change indicators, and trend badges in a bordered card layout.
Real Estate Market Overviewstats48Local market dashboard showing median home price, days on market, inventory, and year-over-year changes for real estate.
Agent Profile Statsstats49Real estate agent profile card with photo, performance metrics, and client rating for agent landing pages.
Split Layout Statsstats5Two-column layout with heading and description on the left, 2x2 stats grid on the right. Perfect for pairing narrative with key metrics.
Neighborhood Report Cardstats50Neighborhood livability report card with letter grades, progress bars, and descriptions for walkability, schools, transit, and safety.
Investment ROI Statsstats51Property investment metrics in a clean table layout showing cap rate, cash-on-cash return, rental yield, and appreciation.
Mortgage Breakdown Statsstats52Monthly mortgage payment breakdown with visual proportion bars showing principal, interest, taxes, and insurance.
Home Valuation Estimatestats53Home value estimate card with price range indicator, estimated value, and comparable recent sales data.
Portfolio Overview Statsstats54Real estate portfolio dashboard with total value, monthly income, occupancy rate, and property count for investors.
Listing to Sold Journeystats55Step-by-step journey from listing to closing with key metrics at each stage, showing the real estate sales process.
Market Trend Statsstats56Real estate market trend indicators with directional arrows and year-over-year comparisons for key housing metrics.
Stats Bandstats57Four-up oversized stats band with dividers under a section header.
Stat Cardsstats58Stat cards with accent highlight, icon chips and big numbers.
Image Stats Splitstats59A tall image beside a headline and a grid of key studio stats.
Inline Stats Stripstats6Compact horizontal row of stats separated by vertical dividers. Minimal design ideal for use between other sections.
Stat Ribbonstats60Horizontal icon stat ribbon on a muted surface.
Typographic Statsstats61Oversized number rows with labels and context, editorial style.
Video With Stat Cardsstats62Centered header above a wide video thumbnail with a play overlay, followed by a row of three stat cards with optional star ratings.
Result Cards With Leadstats63An eyebrow and large heading paired with a dark CTA on one row, above three tall stat cards that each combine an oversized figure, an inline label, a divider, and a supporting description.
Decade Tally Bandstats64An oversized monochrome stat band with rule-divided figures and editorial labels beneath each.
Asymmetric Lead Statstats65One oversized lead figure paired with a ruled, right-aligned stack of supporting stats split by a vertical rule.
Outcome Metric Rowsstats66A results section that stacks each metric on its own hairline row, pairing an oversized figure with a short label, a sentence of context, and an optional year-over-year delta.
Before And After Pairsstats67A results section stacking each measure on its own hairline row, moving a muted starting figure to an accented result across an arrow, with a soft closing panel that floats a live comparison card.
Segmented Total Breakdownstats68A results section that leads on one oversized total, splits it across a segmented accent bar, then legends each segment on a hairline row aligning its value, share, and what it covers.
Quarterly Metric Matrixstats69A quarterly results matrix of hairline cells, each pairing a light figure with a signed change tinted by whether the movement is good or bad rather than by its direction, over a line of context.
Accent Border Stats Cardsstats7Stats cards with a colored top border accent, icon, value, label, and description. Great for highlighting platform capabilities.
Annual Report Readingsstats70An annual results section pairing an image tile that floats a live breakdown chart with a light interpretation of it, then four hairline readings that each name their own source, closing on a method panel.
Single Headline Figurestats71A results section that commits to one enormous light figure, reads it back as a statement under a hairline, qualifies it with three smaller footnotes, and closes on a captioned full-bleed photograph.
Cohort Retention Gridstats72A retention table that follows each joining cohort across its first year, tinting every cell by how high the figure is and dashing the months that have not happened yet.
Benchmark Comparison Barsstats73A benchmarking section that pairs an accent bar for the platform median against a muted bar for the sector median on every metric, with a legend above and a sourcing note below.
Inverted Live Countersstats74A live platform panel on one dark surface, with four light figures on a hairline rule and a floating trend card reading the month week by week.
Audience Figures With Sourcing Notesstats75Four publication figures on hairlines, each carrying a label and a short note on how that number was measured rather than leaving the reader to trust it.
Counting Numbersstats76An impact section where a serif heading settles in word by word beside a pill action, then four ruled columns of serif figures count up from zero as they enter the viewport, each with a small-caps label and a line of context, under a slowly drifting soft light.
Photo Figuresstats77A split statistics section: 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, three ruled serif figures that count up as they enter the viewport, and a pill action.
Ink Numbers Bandstats78A dark ink statistics band with film grain: a serif statement that settles in word by word beside a light sliding-marker pill, then four ruled columns of serif figures that count up from zero as they enter the viewport.
Large Figures Beside a Chart Stagestats79A left-aligned header over a two-part layout. One side is a column of three large figures, each with a one-line label set directly on the page. The other side is a tall fixed-height stage with a gradient background holding two glass chart pieces stacked with a slight offset. On mobile the figures come first, then the stage.
Full-Width Stats Bannerstats8Full-width muted background band with a centered heading and large stat numbers separated by vertical borders. Eye-catching social proof section.
Figure Stages in an Alternating Mosaicstats80A left-aligned header over four borderless stages of equal height laid out as a mosaic, wide then narrow on the first row and narrow then wide on the second. Each stage shows one figure as a live widget on a glass panel (a rolling counter with a sparkline, a segmented ring, a stacked budget bar and a before and after comparison) over its own variation of a conic gradient that follows the theme and dissolves into the page behind the caption. On mobile the stages stack in one column.
Field Triptych With Rolling Figuresstats81A left-aligned header above a triptych of three tall, narrow, borderless stages of equal height that show the same wheat field at three times of day, each with its own sky, light and wind. Under the triptych a row of three figures lines up with the panes; every figure rolls into place and carries a label, a change chip, a sparkline and a caption. On phones the three panes stay side by side and the figures stack below them.
Image with Stacked Statsstats9Split layout with a tall image on the left and vertically stacked stats with descriptions on the right, separated by horizontal borders.
CLI Installation Typewriterterminal1Animated terminal that types commands character-by-character with output responses. Perfect for showcasing CLI installation steps or quick-start guides.
Code Snippet with Marketing Splitterminal2Two-column layout with marketing content and a static code snippet display with copy functionality. Perfect for developer tool landing pages or CLI documentation sections.
One Command Installterminal3A centered install section with an eyebrow, light heading, paragraph, a row of package-manager tabs, and an image tile that floats a live terminal command card.
Carousel Testimonialstestimonial1Full-width swipeable testimonial carousel with autoplay and dot navigation. Perfect for highlighting multiple customer quotes on landing pages.
Split Image Testimonialtestimonial11Two-column layout with large image, star rating, and bordered author section. Perfect for featuring executive testimonials or detailed case study quotes.
Video Testimonialstestimonial12Video testimonial cards with thumbnail previews, play buttons, and modal player. Perfect for customer success stories or product review videos.
Stats and Quotetestimonial14Key statistics row followed by a centered testimonial quote with author avatar. Perfect for combining social proof metrics with executive endorsements.
Logo Cloud with Quotetestimonial15Company logo cloud combined with a featured testimonial card below. Perfect for showcasing trusted brands alongside customer endorsements.
Gradient Testimonial with CTAtestimonial16Eye-catching testimonial with gradient background, decorative orb effect, and call-to-action button. Perfect for conversion-focused sections with highlighted quotes.
Before/After Comparisontestimonial18Side-by-side before/after comparison lists with a testimonial quote below. Perfect for demonstrating transformation results or product impact stories.
Case Study Cardtestimonial19Case study testimonial card with company logo, key metrics, and CTA button. Perfect for showcasing detailed customer success stories with measurable results.
Tagged Testimonials Gridtestimonial23Grid of testimonial cards with category tags like Performance, Support, or Pricing. Perfect for organizing customer feedback by feature or benefit type.
Testimonial Carouseltestimonial25Horizontally scrollable testimonial cards with full-bleed portraits, overlaid quote and author.
Quote Walltestimonial26Masonry column wall of varied-length testimonial cards with avatars.
Spotlight Quotetestimonial27Single large spotlight testimonial with author block and prev/next navigation.
Marquee Quotestestimonial28Two opposing auto-scrolling marquee rows of testimonial cards.
Sticky Quote Listtestimonial29Sticky featured testimonial and rating beside a scrollable list of quote cards.
Rated Reviewstestimonial30Centered grid of star-rated testimonial cards with avatars.
Stats With Testimonial Gallerytestimonial31Centered header above a stats rail beside an expanding portrait gallery — hovering a person widens their frame and reveals their quote while the others contract.
Scrolling Testimonial Walltestimonial32Centered header above three vertically auto-scrolling columns of rated review cards with fade masks, pause-on-hover, and a closing CTA.
Split Quote Cardtestimonial33Centered parenthetical eyebrow and bold heading above a split card: a full-bleed portrait on the left and a large quote with author attribution on a muted panel to the right.
Testimonial Marqueetestimonial34Two rows of monochrome quote cards scrolling in opposite directions with edge fades.
Oversized Pull-Quote Testimonialtestimonial35A single dramatic pull-quote with a decorative mark, centered above a rounded avatar, name, and role.
Masonry Quote Walltestimonial36A monochrome masonry wall of varying-height testimonial cards in a CSS columns layout.
Editorial Quote Prooftestimonial41An editorial testimonial with an eyebrow, a large light quote and author on the left, an image tile floating a proof stat on the right, and a centered trust cluster below a hairline rule.
Three Quote Gridtestimonial42A testimonial grid with an eyebrow over a hairline rule, a two-column heading, and three bordered quote cards each closing with an author avatar, name, and role.
Quote With Ratingtestimonial43A testimonial with an eyebrow over a hairline rule, pairing a large light quote and author on the left with an image tile that floats a live star-rating card on the right.
Portrait Customer Storytestimonial44A single customer story that sets a tall portrait with a gradient name card beside an oversized light quote, a hairline row of three proof figures, and a link into the full write-up.
Client Quote Ledgertestimonial45Three testimonials as ruled columns, each led by a grayscale client logo, followed by a large quote and an attribution block that names the person, the role and the project they hired the studio for.
Client Index Quote Switchertestimonial46Testimonial section driven by a ruled client index: clicking a name swaps the panel beside it, which carries the quote, a round portrait with the attribution, and one ruled outcome figure.
Reader Letters, Printed In Fulltestimonial47Two long replies set as letters rather than pull quotes, each running at full length on a hairline and signed off with the sender's portrait, where they work and the date it arrived.
Client Storiestestimonial48Long-form testimonials told as stories: a serif heading settling in word by word beside the intro and a pill action, then alternating rows that pair a drifting portrait photograph with a story title, a serif quote, the person, and a link to the full account.
Notes Walltestimonial49A wall of six short testimonials on soft muted cards, the middle column set a step lower, each with a serif quote, a portrait, a name and a context line, under a serif heading that settles in word by word and a pill action.
Three Voicestestimonial50A rotating testimonial: a portrait on the left and a large serif quote on the right blur out and in together every six seconds, pause on hover, and can be chosen directly from a row of round portrait buttons, with a pill action beneath.
Single Voicetestimonial51One centred testimonial: a long serif quote that settles in word by word, the speaker's portrait, name and context beneath it, and a sliding-marker pill.
Starred Reviewstestimonial52Four reviews in two columns under a ruled header: each with a five-star row, a serif quote, a portrait, a name and a context line, beneath a serif heading that settles in word by word and a pill action.
Portrait and Long Quotetestimonial53One long testimonial beside a portrait: the photograph drifts inside its frame on the left while a serif quote settles in word by word on the right, closed by a ruled row with the speaker's name, context and a sliding-marker pill.
Three Ruled Quotestestimonial54Three short testimonials in ruled columns, each a serif quote with a name and context, under a serif heading that settles in word by word and a sliding-marker pill.
Customer Stories With Result Cardstestimonial55A left-aligned header over three customer stories of equal height. Each card has its own soft gradient that dissolves toward the bottom, a small glass piece at the top showing the result the customer got, and the quote, name and role underneath. Long quotes are clamped so the cards always match.
Single Quote Over A Pondtestimonial56A centered header above one borderless stage of fixed height that shows a single large quote at a time. A live pond fills the top of the stage and dissolves into the page color, where the rating, the quote, the name and the role sit. A glass bar of names floats on the water to switch between people; each person has their own pond, and the ponds and quotes crossfade on a switch while the stage never changes height.
Large Quote Beside An Engraved Portraittestimonial57A single client testimonial in two columns. A tall borderless stage of fixed height on the left holds the client's portrait recut as a live line engraving, and the quote is set large on the page background on the right, with the eyebrow above it and the person's name and role pinned to the bottom of the column so they line up with the foot of the stage. On smaller screens the stage comes first and the quote follows.
Centered Quotetestimonial6Minimalist single testimonial with centered quote and author details. Perfect for hero sections or standalone social proof elements.
Quote Cards Gridtestimonial8Grid of testimonial cards with decorative quote marks and HTML-supported text highlighting. Perfect for showcasing multiple customer reviews with emphasis on key phrases.
Featured Trip Herotravel1Full-width hero showcasing a featured trip with destination, duration, group size, ratings, and highlight badges. Perfect for travel agencies promoting signature tours or seasonal destinations.
Destination Comparisontravel12Side-by-side destination comparison cards displaying flight time, best season, average cost, and feature checklists. Perfect for helping travelers decide between two vacation options.
Trip Itinerary Timelinetravel17Visual day-by-day trip timeline with numbered day badges, location images, and time-based activity schedules. Perfect for tour operators presenting detailed multi-day travel itineraries.
Travel Guides Teamtravel18Grid showcase of travel guides with photos, specialties, languages spoken, ratings, and tour counts. Perfect for tour companies highlighting their expert local guides.
Tour Type Categoriestravel19Visual category grid showing tour types like adventure, cultural, beach, and safari with images and tour counts. Perfect for travel agencies organizing trips by experience style.
Video Background Herotravel2Immersive hero section with autoplay video background, centered overlay text, and dual CTA buttons. Perfect for travel brands wanting to create an emotional first impression with cinematic content.
Group vs Private Tourstravel20Side-by-side comparison of group and private tour options with pricing, features, and selection CTAs. Perfect for helping travelers choose between shared and exclusive experiences.
Custom Trip Builder CTAtravel21Split-layout card promoting custom trip planning with feature bullet points and a large image. Perfect for travel agencies offering personalized itinerary design services.
All-Inclusive Packagetravel22Featured package card showing destination image, pricing, and included amenities like flights, hotels, and activities with icons. Perfect for promoting vacation packages with transparent inclusions.
Day Trips Gridtravel23Grid of day trip cards showing location, duration, group size, ratings, and pricing with booking buttons. Perfect for tour operators promoting local excursions and activities.
Multi-City Tourstravel24Tour cards displaying multi-city itineraries with circular city thumbnails, night counts, and arrow connectors. Perfect for showcasing regional tours spanning multiple destinations.
Destination Highlightstravel25Grid of local experiences with category badges, location, duration, and ratings for a specific destination. Perfect for destination pages showcasing must-do activities and attractions.
Trust & Reviews Sectiontravel34Social proof section with star rating breakdown, recommendation percentage, and company highlights like awards and traveler counts. Perfect for building credibility on travel booking pages.
Package Inclusionstravel36Four-column grid showing what's included in travel packages organized by categories like transport, accommodation, meals, and experiences. Perfect for transparent package breakdowns.
Trip Cost Breakdowntravel41Itemized pricing card showing costs for flights, accommodation, transfers, meals, and activities with discount badges. Perfect for transparent pricing on trip detail pages.
Narrowing Destination Shortlisttravel42A destination finder that eliminates in the open: a grid of six photographs sits beside the questions and dims the places each answer rules out, with a live count under it, before the survivors are listed with their notes and links.
Trip Planner Stage With Supporting Cardstravel43A centered header with two buttons sits above a wide muted stage holding one enlarged live flight card. Beneath it, a row of three supporting cards each pairs a smaller trip piece with a title and a sentence. The row collapses to a single column on phones.
Split Travel Plannertravel5Two-column layout with feature checklist, rating display, and floating destination stats card alongside a featured image. Perfect for travel planning services highlighting their value propositions.
Destination Cards Gridtravel6Responsive card grid showcasing destinations with images, ratings, pricing, and interactive favorites. Perfect for travel booking sites displaying popular vacation spots with quick comparison.
Destination Carouseltravel7Horizontal carousel with tall portrait destination cards featuring names and taglines on gradient overlays. Perfect for showcasing multiple destinations in an engaging, swipeable format.
Filterable Destinationstravel8Destination grid with icon-based category filter buttons for beach, mountain, city, nature, and cultural trips. Perfect for travel sites letting users browse destinations by experience type.
Trending Destinations Listtravel9Ranked list of trending destinations showing position numbers, thumbnails, trend percentages, and hot indicators. Perfect for showcasing popular or rising travel destinations with social proof.
Interactive Tab Showcaseusecase1Tab-based use case section with images, descriptions, and feature checklists that collapse to accordion on mobile. Perfect for showcasing how different teams or departments use your product.
Split Content Cardusecase10Two-column card with text content, bullet list, and CTA buttons alongside a full-height image. Perfect for feature highlights or promotional sections.
Platform Tabs Showcaseusecase11Pill-style horizontal tabs displaying platform availability with large images, feature checklists, and download CTAs. Perfect for showcasing cross-platform product availability.
Workflow Stage Tabsusecase12Tab navigation showing workflow stages with split image cards featuring stats overlays and descriptions. Perfect for demonstrating product workflow or development process stages.
Segmented Control Tabsusecase14Segmented control style tabs with split layout showing image, description, and bullet point features. Perfect for comparing solution approaches or product capabilities.
Step Wizard Navigatorusecase15Interactive step-by-step wizard with progress bar, clickable step indicators, images, and contextual tips. Perfect for onboarding flows or multi-step process explanations.
Hover Reveal Cardsusecase17Card grid with background images that reveals detailed content on hover via smooth slide-up animation. Perfect for destination showcases or visual feature galleries.
Industry Stats Cardsusecase18Card grid showcasing industries with icons, descriptions, and key statistics like company count and user numbers. Perfect for demonstrating market reach across verticals.
Portfolio Masonry Galleryusecase19Pinterest-style masonry grid with variable-height image cards, category labels, and hover zoom effects. Perfect for creative portfolios or work showcases.
Use Case Card Gridusecase2Responsive grid of use case cards with hover effects, images, descriptions, and feature checklists. Perfect for displaying solutions for different industries or customer segments.
3D Flip Service Cardsusecase20Interactive flip cards with 3D rotation effect showing icon and title on front, detailed features and CTA on back. Perfect for showcasing service offerings or capabilities.
Spotlight Feature Layoutusecase22Asymmetric layout with large featured card in center flanked by smaller feature cards on both sides. Perfect for highlighting a primary feature alongside supporting capabilities.
Feature Comparison Matrixusecase23Structured comparison table with category-grouped rows, checkmark indicators, and highlighted column for recommended option. Perfect for plan comparisons or audience-based feature matrices.
Numbered Steps Processusecase3Vertical numbered steps with alternating left-right image positions, descriptions, and feature lists. Perfect for explaining multi-step processes or onboarding flows.
Parallax Destination Cardsusecase32Three-column card grid with hover parallax zoom effect on background images and sliding content reveal. Perfect for destination showcases or visual storytelling.
Detailed Feature Cardsusecase37Two-column grid of feature cards with icons, extended descriptions, and bullet point highlights. Perfect for comprehensive product feature or capability explanations.
Industry Solutions Gridusecase4Card grid showcasing industry-specific solutions with icons, images, descriptions, and feature tags. Perfect for highlighting how your platform serves different verticals.
Solution Comparison Tableusecase40Feature comparison table with checkmarks, text values, highlighted column, and CTA buttons in footer. Perfect for comparing your solution against alternatives or competitors.
Role Use Case Cardsusecase41A use-case section with an eyebrow over a hairline rule, a two-column heading, and three bordered role cards with an icon chip, a role label, a title, a description, and an arrow link.
Multi-Site Locationsusecase42A multi-site use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live location card above a title and description.
A Day In Appointmentsusecase43A use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live appointment card above a title and description.
Situation Fit Columnsusecase44Qualifying section describing three situations a service suits: each ruled column pairs the situation with a dotted list of tell-tale signals and a soft panel stating what changes afterwards, with nothing closing the section.
Alternating Scenario Rowsusecase45Three use cases as image and text rows, each numbered and carrying a story, two ruled outcome figures and its own outline pill link; pictures stay top-aligned and the side only alternates from lg, so a tablet keeps every image at the top left.
Industry Portrait Tilesusecase46Four tall image tiles, one per industry, each followed by an explanation and a ruled foot pairing a proof line with a plain link into that sector's work.
Job Index With Image Panelusecase47Ruled index of jobs on the left that swaps the panel beside it, where each selection brings its own photograph, explanation and two ruled outcome figures.
Stacked Photo Bandsusecase48Three tall photographic bands stacked full width, each carrying an eyebrow, display title, explanation, one outcome figure and its own outline pill link over a tinted scrim; the three-column foot only forms from lg up so the sentence keeps its measure on a tablet.
Audience Tabs With Photousecase49Pill tabs for each audience swap a split panel holding a tall photograph beside a title, summary and ruled list of what that audience actually gets.
Feature Icon Gridusecase5Centered icon grid with titles and descriptions, featuring hover animations on icon containers. Perfect for showcasing product features or capabilities in a clean layout.
A Day In The Toolusecase50Showcase built as a ruled timetable: selecting an hour swaps a soft panel that floats the matching interface piece over a dotted field, then explains the moment and states one outcome on its own rule.
Two Route Photo Columnsusecase51Two picture-led routes side by side, each with an eyebrow, title, dotted-rule expectations list and its own pill CTA, separated on desktop by a small pill divider sitting between the columns.
Placement Mosaic Gridusecase52Six application tiles alternating between landscape and portrait crops, each captioned on a rule with where the work lands, what it is applied to and the constraint it has to survive.
Single Case Photo Storyusecase53One client story told in three photographed steps, opening with the client name on a ruled block beside the heading and closing with three oversized outcome figures.
Four Situationsusecase54A who-this-is-for section: a serif heading that settles in word by word beside the intro and a pill action, then four soft muted cards, each numbered, with a serif situation title, a short description and an arrow link that lifts on hover.
Is This Youusecase55A self-recognition list: a sticky column with a serif heading that settles in word by word, an intro and a pill action, beside ruled serif statements that each blur in as they reach the viewport, marked with a small ringed check, and a closing line beneath.
Audience Tabsusecase56A who-is-it-for section with pill tabs under a serif heading that settles in word by word: each audience blurs in a serif title, a description, dotted points and a sliding-marker pill beside a portrait photograph drifting inside its frame.
Linked Audience Cardsusecase57Four hairline cards, each a whole link opening with a round portrait, then a quiet label, a serif title, a line of who it is for and an arrow that lifts on hover.
Linked Setting Tilesusecase58Six photographic tiles in a three-column grid, every one a whole link: the photograph drifts behind a gradient carrying a meta line, a serif title, a sentence of context and an arrow that lifts on hover.
Linked Situation Rowsusecase59Five situations as ruled rows, each one a whole link: a square photograph pinned left, a serif sentence over its paragraph, and an arrow link at the right end that lifts as the row tints on hover.
Two Linked Directoriesusecase60Two ruled directories side by side under their own small-caps headings, every row a link carrying a serif label, a line of context and an arrow that lifts as the row tints on hover.
Linked Story Cardsusecase61Three case studies, each card a whole link: a photograph drifting inside its frame, a serif figure with the span it covers, the story in two sentences and an attribution facing an arrow that lifts on hover.
Three Linked Pathsusecase62Three route cards ordered from slowest to quickest, each one a whole link with a pace label, a serif title, a paragraph and a dotted pair of details; the middle route inverts to ink to mark the usual choice.
Studio Disciplines As A Poster Wallusecase63A what we make section with the heading on the left and a description on the right, above a row of four tall, narrow artwork stages hung like posters, every second one set lower on desktop. Each stage has the same fixed height and holds a different live artwork: a drawn line figure, a halftone print, a mirrored pattern and a sun print. The title and one sentence for each discipline sit under its stage, so caption length never changes a stage.
Solutions Accordionusecase7Expandable accordion layout with icons, images, descriptions, and feature lists inside each panel. Perfect for detailed solution explanations with visual content.
Vertical Timelineusecase8Centered timeline with alternating left-right content cards, icons, images, and feature lists. Perfect for showing project phases, company history, or process stages.
Masonry Bento Gridusecase9CSS columns-based masonry layout with variable-height cards featuring background images and gradient overlays. Perfect for showcasing diverse use cases with visual hierarchy.
Hero with Workflow Recipeworkflow1Two-column workflow hero with a live automation recipe card on the right showing a multi-app stack and installs counter.
Tabbed Use Casesworkflow10Tabbed showcase where each tab swaps a team's typical workflow surface. Left side carries the story, right side carries the live asset.
Hero With Workflow Pieces Stripworkflow11Minimal centered hero with a three-tile strip of workflow pieces underneath: delay, email, and approval surfaces.
Workflow Canvas Heroworkflow12Hero with a full canvas on the right showing a real workflow flow: trigger node, condition node, and two action branches connected with lines.
Trigger Marketplaceworkflow13Full-width trigger picker with search, category filters, and a 12-app grid. Drop-in app marketplace showcase for any automation product.
Run History Timelineworkflow14Full-width run history table showing live workflow runs with status pills, duration, started-at timestamps, and per-row actions.
Recipe Marketplace Gridworkflow15Recipe marketplace with filter chips and a six-card grid. Each card stacks the apps it connects, the installs counter, and a use-recipe CTA.
Visual Workflow Builder Mockupworkflow16Three-pane builder mockup: a step sidebar, a node canvas with connected workflow nodes, and a properties panel for the selected step.
Workflow Analytics Dashboardworkflow17Full-width analytics card with four KPI tiles, a CSS bar chart of the last 30 days, and a top-workflows leaderboard with share bars.
Workflow Pricing Tiersworkflow18Three pricing tiers tuned to workflow products: run quotas, workflow counts, and integration limits with a featured plan highlighted.
Workflow Onboarding Checklistworkflow19Onboarding card with a progress bar and a six-step checklist. Each step shows a completion state, a title, and a short hint.
Three Cards With Workflow Assetsworkflow2Three feature cards that swap icons for live workflow pieces: an app picker, a configurable step, and an active toggle.
Live Status Bannerworkflow20Minimal uptime banner: live status pill, a 90-day color-coded bar strip, and a single percentage. Reads at a glance — operational, degraded, or in incident.
Workflow API & Webhook Tabsworkflow21Developer-facing split: copy on the left, tabbed code blocks on the right showing the API request, response, and webhook payload for a workflow.
Live Ops Counter Bannerworkflow22Minimal live-ops banner: pulsing live dot, a big in-flight workflow counter, a 24-bar throughput strip, and a three-stat footer.
Usage Quota Meterworkflow23Minimal quota meter card: header with usage label, large used/limit counter, a single progress bar, and a reset countdown footer.
Upcoming Schedules Bannerworkflow24Minimal upcoming-runs banner: calendar header, a featured next-run callout, and four compact upcoming entries with relative timing and cron expression.
Process Step Carouselworkflow25How-we-work section: a square visual beside a step panel with prev/next navigation, step title, description and a stat.
Process Flowworkflow26Horizontal connected process steps with numbered nodes on a continuous rail.
Process Ascentworkflow27Ascending-staircase process timeline where each phase climbs above the last, with oversized index numerals, cadence labels and per-phase deliverables.
Phase Tabsworkflow28Tabbed engagement phases with deliverables, duration and imagery.
Engagement Timelineworkflow29Mini-gantt of engagement phases with duration bars over a week scale.
Accordion With Workflow Mediaworkflow3Accordion on the left, swappable workflow asset on the right. Each row picks its own piece: trigger pair, step config, approval gate, or test run.
Phase Selectorworkflow30Sticky clickable phase list driving a detail panel with checklist and image.
Sprint Cadenceworkflow31A weekly sprint rhythm shown as day columns of activities.
Process Accordionworkflow32Expandable numbered process steps revealing deliverables and duration.
Stage Railworkflow33Interactive process rail with a filling progress spine; selecting a stage swaps its media and deliverables.
Phase Outcomesworkflow34Each engagement phase mapped from its inputs to its outcomes.
Method Pillarsworkflow35A featured methodology panel alongside supporting principle pillars.
Process Timelineworkflow36A single-rail vertical process timeline with numbered nodes and per-step duration and owner meta.
Parallel Tracksworkflow37Two parallel workstream swimlanes aligned across shared phase columns.
Cascade Processworkflow38Process steps cascading in a diagonal staircase with connecting markers.
Phase Indexworkflow39A numbered phase index that cross-fades a sticky detail panel as each phase is hovered.
Workflow Stats With Live Tilesworkflow4Three-column stats strip where each metric is anchored by a real workflow piece: active runs, success rate, and approvals.
Process Boardworkflow40A kanban-style board showing studio work moving across stage columns.
Timeline Scrollerworkflow41A horizontally scrollable dated milestone timeline with alternating cards on a continuous axis.
Phase Bandsworkflow42Full-width phase bands anchored by oversized ghost numerals with duration meta.
Weekly Planworkflow43Week-grouped task checklists each with a focus tag and a progress bar.
Overview & Phasesworkflow44A sticky process overview with summary stats beside an expandable phase accordion.
Process Metricsworkflow45Each process stage paired with a prominent SLA-style metric.
Numbered Process Stepsworkflow46Left-aligned intro with eyebrow, heading and CTA beside a four-column band of numbered process steps linked by a connector line.
Three Phase Rollout Timelineworkflow47An implementation timeline laid out as three hairline columns, each opening with a week marker over a phase title, a short explanation, and a checked deliverable list, closing on a soft summary strip.
Approval Chain Trailworkflow48An approval workflow drawn as a vertical rail of nodes tinted by whether each step is done, waiting, or queued, naming the person and the timestamp, beside a tile floating the live request card.
Branching Decision Flowworkflow49A 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.
Reliability CTA With Failed Runworkflow5Two-column CTA paired with a failed-run retry card. Copy talks reliability while the asset shows the actual recovery surface.
Daily Weekly Monthly Cadenceworkflow50An operating rhythm split into three hairline columns for daily, weekly, and monthly routines, each row carrying its timing and either an owner or an accent chip where nobody is needed.
Automation Coverage Mapworkflow51A workflow that scores each stage on how much of it runs unattended, drawing an accent bar per stage and naming what still needs a person, against a sticky column with one headline figure and a live stage tracker.
Role Swimlane Gridworkflow52A responsibility swimlane crossing roles against stages, filling every cell by whether that role owns, helps, only reads, or has no access, with a legend keyed to the same tints.
Escalation Ladderworkflow53A time-based escalation path held in a bordered panel, each rung naming the elapsed time, who joins, what changes, and the share of reports that ever reach it, beside a live card for whoever is on call.
Data Flow Mapworkflow54An integration map naming every system as a card, inverting the first-party one so it reads as the origin, then listing each crossing on a hairline row with what travels and how often.
Process Weight Spectrumworkflow55A process sizer that answers with a position rather than a verdict: a photographic band opens the section, four weighted questions sit beside an avatar cluster of the people a heavier answer pulls in, they add up to a score, and the band that score falls in takes the page over with its title, its summary, and the practices it asks for.
Public Writing Boardworkflow56A four column board showing the real work in progress, each column stating the rule that lets a piece move on and carrying the linked cards currently sitting in it, with a written state for a column that is empty.
Three Steps Processworkflow57A how-it-works section: serif heading settling in word by word beside the intro and a pill action, three numbered steps whose top rules draw themselves in one after another, and a wide photograph drifting inside its frame to close.
Between Sessions Lineworkflow58A four-step process on one horizontal line that draws itself across the page as the steps arrive in turn, each with a ringed icon, a numeral, a serif title and a description, under a serif heading that settles in word by word beside the intro and a pill action.
Vertical Steps Lineworkflow59A vertical process: a sticky column with a serif heading that settles in word by word, an intro and a pill action, beside numbered ringed steps down a line that draws itself in ink as the page scrolls, each with a small-caps timing, a serif title and a description.
Trigger Library Showcaseworkflow6Asymmetric showcase: a tall image hero on the left paired with two stacked workflow assets on the right — recipe card and trigger/action pair.
Alternating Scene Stepsworkflow60A centered header over a sequence of steps that alternate sides. Each step pairs a live isometric scene on a solid card with a title and description. The steps carry no numbers; their order is the process.
Three Step Live Product Stripworkflow61A header with two buttons on the right over one continuous strip split into three stages, each playing a live product piece for one step of the process. Step titles and descriptions sit below on a single shared hairline, and the strip stacks into separate stages on small screens.
Zigzag Process Stepsworkflow7Four-step zigzag flow that alternates a workflow piece between sides. Each row pairs a numbered step with the live asset it produces.
Manual vs Automated Comparisonworkflow8Side-by-side card contrasting the manual inbox with the live workflow tile. A real email asset on the left, a real trigger/action pair on the right.
Customer Story With Workflow Pairworkflow9Editorial customer story card: a pull quote on top, then a two-piece pair showing the actual workflow the customer ships — an active toggle and an approval gate.