B

beste-co/beste-ui/blocks

Files

CodeInfo

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 monospace-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.

Stats with Descriptionsabout8Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections.

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.

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.

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.

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 monospace category, 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.

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.

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.

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.

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 monospace 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.

Changelog Release Feedchangelog3Release feed cards with aligned change labels, summaries, and optional CTA buttons.

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.

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 monospace 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.

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.

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.

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.

Banner CTActa11Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.

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 monospace 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Three Column Gridfaq9Q&A pairs arranged in a responsive grid layout. Ideal for displaying concise answers in a scannable, multi-column format.

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.

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.

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.

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.

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.

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.

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.

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 monospace 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.

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.

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.

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.

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, a monospace 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.

Cinematic Fullscreen Carouselhero19Full-screen animated carousel with multiple transition effects, next slide preview, and progress bar. Perfect for immersive storytelling and portfolio showcases.

Split Carousel with Thumbnailshero20Two-column carousel with animated content transitions, thumbnail strip navigation, and vertical progress indicator. Perfect for product showcases and feature highlights.

Fullscreen Vertical Carouselhero21Full-screen carousel with vertical slide transitions, decorative grid lines, and customizable accent colors. Perfect for creative agencies and modern brand showcases.

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.

Dashboard Preview Herohero25Split-layout hero with interactive dashboard mockup featuring stats cards, line chart, and recent activity feed. Perfect for SaaS and analytics platforms.

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

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 jumps 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.

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.

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.

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.

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.

Magazine News Gridnews4Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering.

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.

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.

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.

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.

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 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.

Feature Comparison Tablepricing8Multi-plan feature comparison table with grouped categories and check/text values. Perfect for products with complex feature sets across multiple tiers.

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.

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.

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.

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.

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 a monospace 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.

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.

Activity Timelinesocial5Vertical timeline showing posts, photos, comments, follows, shares, and videos with color-coded icons. Perfect for activity feeds and user history pages.

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.

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.

Accent Border Stats Cardsstats7Stats cards with a colored top border accent, icon, value, label, and description. Great for highlighting platform capabilities.

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.

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.

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.

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 monospace 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.

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 monospace week marker over a phase title, a short explanation, and a checked deliverable list, closing on a soft summary strip.

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.

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.

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.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information

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 monospace-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.

Stats with Descriptionsabout8Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections.

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.

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.

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.

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 monospace category, 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.

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.

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.

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.

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 monospace 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.

Changelog Release Feedchangelog3Release feed cards with aligned change labels, summaries, and optional CTA buttons.

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.

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 monospace 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.

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.

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.

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.

Banner CTActa11Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.

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 monospace 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Three Column Gridfaq9Q&A pairs arranged in a responsive grid layout. Ideal for displaying concise answers in a scannable, multi-column format.

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.

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.

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.

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.

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.

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.

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.

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 monospace 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.

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.

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.

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.

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, a monospace 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.

Cinematic Fullscreen Carouselhero19Full-screen animated carousel with multiple transition effects, next slide preview, and progress bar. Perfect for immersive storytelling and portfolio showcases.

Split Carousel with Thumbnailshero20Two-column carousel with animated content transitions, thumbnail strip navigation, and vertical progress indicator. Perfect for product showcases and feature highlights.

Fullscreen Vertical Carouselhero21Full-screen carousel with vertical slide transitions, decorative grid lines, and customizable accent colors. Perfect for creative agencies and modern brand showcases.

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.

Dashboard Preview Herohero25Split-layout hero with interactive dashboard mockup featuring stats cards, line chart, and recent activity feed. Perfect for SaaS and analytics platforms.

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

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 jumps 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.

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.

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.

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.

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.

Magazine News Gridnews4Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering.

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.

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.

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.

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.

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 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.

Feature Comparison Tablepricing8Multi-plan feature comparison table with grouped categories and check/text values. Perfect for products with complex feature sets across multiple tiers.

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.

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.

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.

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.

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 a monospace 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.

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.

Activity Timelinesocial5Vertical timeline showing posts, photos, comments, follows, shares, and videos with color-coded icons. Perfect for activity feeds and user history pages.

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.

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.

Accent Border Stats Cardsstats7Stats cards with a colored top border accent, icon, value, label, and description. Great for highlighting platform capabilities.

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.

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.

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.

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 monospace 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.

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 monospace week marker over a phase title, a short explanation, and a checked deliverable list, closing on a soft summary strip.

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.

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.

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.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information