Shadcn Blocks

A two part header with a credibility wordmark strip above a five up row of leadership portraits, each with a name and role, to put real faces behind the product.

A swipeable carousel of team profile cards with names, roles, and portraits, each opening a short bio in a dialog.

An editorial about section with no imagery: an uppercase eyebrow and large headline on the left beside a two paragraph purpose statement on the right.

A vertical 'Our story' timeline of company milestones, alternating a photo with the year and a short paragraph beside a center rail, with the most recent year highlighted.

A three up grid of blog post cards, each pairing a category badge and date with the post title and a stacked author byline.

A swipeable carousel of blog post cards, each pairing a cover image with a category, date, two line title, and read time.

A Linear style changelog: a bold heading above a horizontal rail of recent releases, each with a dot, title, two line summary, and date. The newest entry is highlighted.

A vertical changelog feed: a single rail of releases, each with a dot, date, title, summary, and a bulleted list of what changed. The newest release is highlighted.

A simple, centered closing CTA on a soft bordered panel: a bold headline and short lede over two pill buttons.

A split CTA on a soft bordered panel: a headline and pill button beside a newsletter signup with an email field, submit button, and privacy note.

A centered 404 screen: a framed astronaut adrift over a soft glow above a bold headline, a short lede, and pill CTAs to head home or go back.

A 404 page with a split header, a giant outlined number over a dotted grid, and a row of helpful link cards to get visitors back on track.

A two-column FAQ: a sticky heading and help link beside a flat, single-open accordion of answers.

A categorized FAQ: a centered headline and pill CTA above category tabs, then the active category and its count beside a single-open accordion of answers.

Three benefit columns, each with a centered isometric SVG illustration, a FIG tag, label, and short paragraph. A clean, minimal way to frame product principles.

An asymmetric bento feature grid with a custom SVG illustration in every cell: analytics, collaboration, automation, security, and integrations. A clean, minimal overview.

A split header over an app window mockup: a triage inbox where incoming feedback is auto-routed into labeled, assigned issues. Shows the product in action.

A full width footer with a brand line, social buttons, and link columns, over a giant outlined brand wordmark above a legal bottom bar.

A simple footer: a brand mark and tagline beside columns of navigation links, over a bottom bar with a copyright line and social icons.

A minimal centered hero, headline, lede, and two CTAs, set over a full bleed backdrop with matching light and dark images and a sticky oval navbar.

A centered hero with a bold headline, lede, and dual CTAs above a sleek app window mockup, topped by a sticky oval navbar. A clean, modern opener for product launches.

A copy rail beside a constellation graph that fans connector lines from a central product node out to a ring of integration nodes over a fading dotted grid.

A logo cloud with two rows of customer logos scrolling in opposite directions. A seamless, pure CSS marquee for social proof on a landing page.

A simple, static logo cloud: an eyebrow line above a centered, wrapping row of customer logos. Clean, no motion social proof for a Modern SaaS landing page.

A sticky, pill shaped glass navbar with a logo, optically centered links, and dual CTAs. A clean, modern header for a Modern SaaS landing page.

A full width sticky header with a bottom border, logo, inline links, and CTAs. Links collapse into a mobile sheet menu. A clean, dependable Modern SaaS header.

A single membership plan: a price card with an annual note and refund line beside a checked list of what the plan includes.

A three tier pricing section with a featured plan, per card annual billing toggles, icon feature lists, and an enterprise banner.

Two large plan cards side by side, a light free tier and an inverted paid tier, each with a price and CTA, over a group discounts link.

A horizontal row of numbered steps, each pinning a label to the top and dropping a two line heading and a learn more link to the foot. A quiet, editorial flow.

A two column grid of testimonial cards, each pairing a customer quote with an avatar, name, and role.

A customer logo bar, one oversized pull quote with its attribution, and three metric cards that back the quote with hard numbers. A focused proof point for a landing page.

Featured story in a solid primary panel with inverted wordmark, summary, and three metrics.

Centered heading over a story card pairing narrative and quote with a rail of three metrics.

Industry tabs where each panel shows one story card with metrics and a customer quote.

Stacked divided rows pairing a wordmark and outcome with a bold metric and story link.

Company narrative beside a divided stat rail with a wide customer quote underneath.

Oversized opening quote above a three stat row and two short narrative paragraphs.

Clean table of customers, industries, results, and time to value with CTA buttons below.

Two paragraph story beside a right rail holding a quote card and two key stats.

Horizontally scrollable snap row of story cards with wordmarks, metrics, and summaries.

Three story cards each showing a wordmark, a bold result, a summary, and a read link.

Three cards positioning the product as the alternative to spreadsheets, email, and suites.

Before and after cards listing the same workflow as crossed off pains and checked wins.

Compact five row comparison table beside a quote card from a customer who switched.

Feature table comparing the product against two competitors with check, partial, and no marks.

Stacked full width rows comparing Them and Us copy across four buying dimensions.

Two column checklist table comparing features and pricing against a single competitor.

Editorial split contrasting a muted old way list with a confident checked new way list.

Two window mockups contrasting a cluttered generic tool with the calm product, captioned.

Migration banner card with a heading, one call to action, and three checked steps below.

Divided two column list pairing checked product strengths with crossed out competitor gaps.

Card banner with headline, overlapping avatar row, and a single primary button.

Centered headline and buttons inside a large rounded border inset.

Full width primary band with headline, supporting line, and one inverted button.

Slim ruled strip pairing a short headline with a single arrow text link.

Two matched cards offering free trial and sales paths with checklists and buttons.

Card split pairing CTA copy and buttons with a metrics dashboard mockup.

CTA copy and buttons beside a customer quote card with a matching avatar.

Centered mobile pitch with App Store and Google Play download buttons.

Centered card CTA with buttons and a money back guarantee reassurance line.

Centered CTA copy and buttons above a divided grid of three proof stats.

Accordion beside a bordered card of documentation, community, and support links.

Three topic columns for billing, product, and security with short plain text answers.

Six bordered cards in a responsive grid, each pairing one question with a short answer.

Editorial Q&A list with large muted numerals beside each question and hairline dividers.

Static topic list with counts beside a flat divided list of billing questions.

Narrow centered column of stacked Q&As in calm prose separated by hairlines.

Sticky heading and lede in the left third with the accordion filling the right two thirds.

Three featured question cards above an accordion holding the remaining answers.

Full width accordion with oversized question typography for confident scanning.

Centered accordion above a slim bordered contact band with an outline support button.

Single open accordion of features paired with an analytics preview window.

Centered intro above a bento of one large dashboard card and five smaller icon tiles.

Three feature cards, each topped with a small chart, list, or form mockup.

Narrow centered column of four icon feature rows separated by dividers.

Centered heading over a tight two column list of eight checkmarked essentials.

Centered heading over a three column grid of six icon led feature blurbs.

Solid primary panel holding a heading and a six tile icon feature grid.

Heading and checklist beside a campaign window mockup with live progress bars.

Two stacked split panels pairing copy and checklists with app window mockups.

Icon feature grid capped by a divided band of three headline stats.

Brand blurb and social icons beside three columns of product links.

Centered logo over a single row of links, social icons, and a copyright line.

Solid primary footer with brand blurb, socials, and four link columns.

Brand name and tagline beside four link columns above a legal bar.

Link columns over a dense legal block with disclaimers and compliance badges.

One slim row with copyright, inline nav links, and small social icons.

Centered newsletter signup above a row of nav links and a copyright line.

Three link columns plus iOS and Android download buttons above a brand bar.

Link columns alongside address, email, and phone contact details.

Four link columns with a bottom bar showing system status and a language picker.

A typography only hero with a centered headline, lede, single CTA, and a muted trust line.

A centered headline, lede, and dual CTAs above a wrapped row of bordered icon feature pills.

A docs hero with centered copy above a command bar search mockup with suggestion rows.

A left aligned headline, lede, three check items, and dual CTAs that own the left edge.

A split hero with headline, lede, and CTAs beside a token colored code editor window mockup.

A split hero with copy and dual CTAs beside a divided panel of four large KPI tiles.

A split hero with copy and dual CTAs beside a phone mockup of the product mobile app.

A split hero with headline, lede, and dual CTAs beside a single customer quote card.

A centered hero with dual CTAs above overlapping avatars, five stars, and a team count line.

A centered hero with copy and CTAs above a wide kanban board mockup of campaign tasks.

Two plan cards under a monthly and annual switch that updates prices with a savings badge.

Three pricing tiers where the featured middle plan sits on a solid primary panel.

Plan headers with CTAs above a compact feature matrix that shades the middle column.

Free and Pro columns with their own feature lists and CTAs, with Pro framed by a primary ring.

A wide panel with a one time price, three value bullets, a guarantee note, and a strong CTA.

A free self hosted panel with an install command beside a paid managed cloud plan.

A seat slider that totals a flat per seat rate beside the included feature list.

Two plan cards beside a customer quote card that endorses the upgrade.

A minimal rate table listing each metric, its included allowance, and the overage price.

A single full plan price card beside a divided list of three short pricing questions.

Intro copy beside a first day timeline of product moments keyed by monospaced times.

Three steps in a row joined by a thin connector line with a dot marking each step.

Four oversized numbered steps in a two column editorial grid with top borders.

Copy about a one afternoon setup beside a bordered checklist card with a progress bar.

Inline SVG flow of four pipeline stages above a three column row explaining them.

Three numbered steps beside an app window mockup showing live metrics and a chart.

Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.

Centered heading above three step cards, each pairing an icon and number with short copy.

Narrow vertical timeline of four numbered steps joined by a line, with buttons below.

Alternating rows of step copy and app mockups, each tagged with a bordered step badge.

Large quotes with avatars that alternate left and right alignment in a divided stack.

A centered row of ten overlapping avatars above one quote, five stars, and a review count.

One featured quote inside a solid primary panel with avatar attribution at the bottom.

A grid that alternates customer quote cards with company wordmark tiles under a heading.

An editorial stack of two big pull quotes with oversized quote marks and attributions.

A featured customer quote card beside a divided grid of two big result numbers.

A large quote and attribution beside a launch checklist mockup of the product.

One large centered quote with an avatar, name, and role stacked beneath it.

A grid of six social post style cards with avatars, handles, and casual praise.

Three customer quotes in divided columns under a centered heading and lede.

A grid of awards and milestones with icons and short captions. Use it on an about page to prove credibility and show what your team has earned.

Headline metrics that count up as they scroll into view. Drop it on an about page to make growth, users, and revenue feel alive and concrete.

A row of value cards pairing an icon with a short principle. Use it to spell out what your brand stands for and how the team makes decisions.

Photos and short blurbs that show how the team works and what daily life feels like. Use it on a careers or about page to attract good people.

A clean grid of core values, each with an icon, title, and sentence. Use it to explain the beliefs that guide how your company operates daily.

A section pairing a statement on belonging with supporting stats and imagery. Use it to show how your company invests in people and fairness.

Portrait cards of the founders with names, roles, and a short bio. Use it on an about page to put faces and a personal story behind the company.

A bold single statement of purpose framed as a centered headline. Use it at the top of an about page to anchor everything in one clear idea.

A strip of publication logos and pull quotes that show where you have been featured. Use it on an about page to borrow trust from known names.

Numbered steps that walk through how you work, from first contact to final delivery. Use it on an about or services page to set expectations.

A minimal about block with a heading and a paragraph of company background. Use it when you want to introduce the business without extra clutter.

A tidy grid of key numbers with labels for users, revenue, or reach. Use it on an about page to back up your story with solid figures, fast.

Tabbed panels that split your story into mission, team, and history. Use it on an about page to pack a lot of context into one compact space.

A responsive grid of headshots with names, titles, and social links. Use it on an about page to introduce the real people behind your product.

A vertical list of dated milestones marking how the company grew. Use it on an about page to walk visitors through your story, year by year.

A split layout with company text on one side and an image on the other. Use it on an about page to balance a short story with a clear visual.

A set of value cards each holding an icon, title, and one line. Use it on an about page to share the principles your team works by every day.

An about block pairing a paragraph of background with a large photo. Use it to introduce the company while a real image builds warmth and trust.

A banner that floats above page content with rounded corners and a dismiss button. Announce a promotion or update without pushing the layout down.

A slim bar with centered text and a single dismiss control. Share a short notice like free shipping or a new feature across the top of any page.

A banner pairing a short message with a button so readers can act at once. Use it to drive signups, trial starts, or a link to a new release.

A banner with a live countdown timer beside the message. Build urgency for a sale, webinar, or deadline and prompt visitors to act before time runs out.

A banner that places a thumbnail or icon next to the headline and link. Spotlight a product, event, or article with a visual that draws the eye.

A banner showing user counts, ratings, or avatars next to the message. Build instant trust at the top of a page and nudge new visitors to convert.

A profile block pairing an author photo, bio, and their latest posts. Use it to build trust on a blog and surface more writing from one voice.

A horizontal slider of article cards with cover images and titles. Use it to feature recent or popular posts in a compact strip readers can swipe.

A grid of case study cards with logos, results, and short summaries. Use it to present customer stories and proof on a results focused blog page.

A post grid paired with category tabs that filter the visible articles. Use it to help readers narrow a busy blog down to the topics they want.

A dense vertical list of posts with titles, dates, and short excerpts. Use it to show many articles in little space on an index or archive page.

A grid collecting quotes and headshots from several contributors. Use it to package an opinion roundup or panel feature into one shareable post.

A list led by one large featured article above smaller stacked posts. Use it to spotlight your top story while listing the rest of the feed.

A two column layout with a main article feed beside a sidebar of links. Use it for a blog home that mixes posts with categories and promos here.

A full width hero centered on a single article with a large cover image. Use it to launch a flagship post and pull readers straight into it.

A question and answer layout with a guest portrait and intro. Use it to publish interviews in a clear, readable format on an editorial blog.

An editorial grid that mixes large and small story cards across columns. Use it to give a content heavy blog the dense feel of a print magazine.

A clean list of post titles, dates, and excerpts set in plenty of space. Use it for a writing focused blog where the words carry the whole page.

An article feed combined with an email signup form and short prompt. Use it to grow a subscriber list while showcasing your most recent posts.

A list of episode cards with cover art, titles, and play controls. Use it to publish a podcast feed where listeners browse and start episodes.

An even grid of article cards with cover images, titles, and dates. Use it as a clean, flexible blog index that scales to any number of posts.

A vertical timeline that orders posts by date with markers and dots. Use it for a changelog, release notes, or a chronological story archive.

A grid of video cards with thumbnails, durations, and titles. Use it to run a video first blog where each card opens a clip or full episode.

A job application form with fields for contact details, resume upload, and a cover letter. Lets candidates apply directly from your careers page.

A career path layout showing role progression, levels, and growth milestones. Helps applicants picture how they advance after joining your team.

A company benefits section with icons and short blurbs for perks like health, time off, and remote work. Reassures candidates as they read open roles.

A list of open positions grouped by department, each with a title and location. Helps candidates find the right team and apply to the matching role.

A department showcase with cards describing each team, its focus, and people. Helps candidates understand where they fit before browsing open roles.

An employee benefits grid covering insurance, learning budgets, and flexible hours. Shows candidates the full package while they consider applying.

A horizontal slider of featured job cards with title, team, and location. Spotlights priority roles you want candidates to notice on the careers page.

A step by step interview process timeline running from first application to final offer. Sets expectations so candidates know what each hiring stage involves.

A searchable job board with filters for team, location, and type. Lets candidates scan every open role and apply to the one that fits them best.

A single job details page with description, responsibilities, and an apply button. Gives candidates everything they need to decide and submit.

A clean list of job listings with title, location, and a quick apply link. Helps candidates skim available roles and pick one to pursue today.

A workplace culture section with photos and short stories about daily life. Gives candidates a feel for the team before they decide to apply.

A straightforward changelog list with version numbers, dates, and bullet points. Use it to post release notes when you want clarity over visual flourish.

Release notes split into Added, Fixed, and Changed sections under each version. Helps readers scan a busy update and jump to the changes they care about.

A dense changelog that packs many versions into a tight column. Ideal when you ship often and want the full history visible without heavy scrolling.

Collapsed version entries that open on click to reveal full details. Keeps a long release history short while letting readers drill into any update.

Release entries laid out as cards in a responsive grid. Use it to show recent updates side by side with badges, dates, and short summaries at a glance.

Updates clustered by month or release so related entries sit together. Good for products with frequent shipping where context across versions matters.

A changelog with filters and clickable entries that reveal more detail. Lets visitors explore updates by type and focus on the releases that matter.

A pared back changelog with just dates, versions, and one line per change. Use it when you want updates to feel quiet and stay out of the way.

Release notes organized into tabs by version or category. Lets readers switch between updates without scrolling, keeping each release neatly contained.

A changelog rendered as a table with columns for version, date, and notes. Use it when readers need to scan and compare many releases quickly.

A vertical timeline that plots releases in order with dates and notes. Use it to tell the story of a product as it grows version over version.

A center aligned contact form with heading, supporting text, and stacked fields. Drops onto a simple contact page so visitors can send a message fast.

A split layout pairing a contact form with a column of details like email, phone, and hours. Use it when people need a quick way to reach the right team.

A contact section that places a form beside an embedded map of your location. Ideal for a storefront or office that wants visitors to find and reach it.

A call to action that pairs award badges and recognition logos with a signup prompt. Builds trust before the click on a landing or pricing page.

A full width banner with a background image, headline, and button. Anchors a campaign message across the top or bottom of any marketing page.

A call to action framed around a customer story with a headline result and link. Use it after proof points to push readers toward booking a demo.

A call to action with a live countdown clock beside a headline and button. Drives urgency for a sale, launch, or webinar registration deadline.

A call to action that places a customer quote and avatar right next to a signup button. Reinforces social proof at the moment a visitor decides.

A short FAQ list paired with a closing prompt and button. Answers the last objections and nudges readers to convert at the end of a long page.

A call to action backed by a grid of feature highlights with icons. Recaps the value of a product before inviting visitors to start a free trial.

A centered call to action set on a vivid gradient panel with a headline and button. A bright closing section for a homepage or feature page.

A call to action that sets an image beside a headline, body copy, and button. Use it to show a product shot while inviting the visitor to act.

A call to action surrounded by logos of supported tools and platforms. Reassures teams about compatibility before they sign up and connect apps.

A signup section with an email input and subscribe button under a short pitch. Collects leads for a newsletter, waitlist, or product updates.

A compact contact prompt with a short form or button to reach the team. Drops into a footer or sidebar so visitors can get in touch fast.

A centered call to action with a headline, supporting line, and button. A clean closing section to end a landing page and prompt the next step.

A two column call to action with copy on one side and an image on the other. Balances message and visual to invite a signup or demo request.

A call to action that leads with key metrics like users or uptime, then a button. Uses hard numbers to convince visitors before they commit.

A call to action with tabbed content that swaps messages by audience or use case. Lets visitors pick a path before clicking the matching button.

A call to action built around an embedded video with a headline and button. Plays a quick demo or pitch, then invites the viewer to start now.

A call to action with alternating text and image rows that lead into a button. Walks readers through benefits before the final closing prompt.

An accordion FAQ set against a tinted background panel. Each question expands to reveal its answer, keeping long lists of details tidy and easy to scan.

A grid of question cards, each holding one query and its answer inline. Lays out frequent questions clearly so visitors find what they need at a glance.

A centered FAQ column with a heading and stacked accordion items. Keeps focus on the questions and works well as a standalone support section on any page.

An FAQ layout with formatted code blocks inside answers. Built for developer docs where responses need syntax examples, commands, or configuration shown.

An FAQ section paired with a contact form, so visitors read common answers and reach out when their question is not covered, all within one tidy section.

An FAQ section with a supporting illustration beside the question list. Adds visual context and warmth to a help area while answers stay easy to read.

A two column FAQ with the heading and intro on the left and accordion items on the right. Balances explanation and detail across a wide support section.

An FAQ section with a search field that filters questions as you type. Helps visitors jump straight to the answer they want across a long question list.

An FAQ layout with a sidebar of categories beside the answers. Lets visitors switch topics quickly and keeps large help sections organized and navigable.

A plain two column grid of questions and answers. A compact way to cover many topics at once, ideal for a quick reference block near a page footer.

A clean FAQ list with an icon by each question and dividers between rows. Keeps a long set of answers readable and clearly separated on any support page.

An FAQ section with tabs that group questions by category. Visitors pick a topic and see only relevant answers, keeping a broad help area uncluttered.

An FAQ laid out as a vertical timeline, walking visitors through questions in order. Suited to onboarding or step by step guides where sequence matters.

Feature cards that tilt in 3D as the cursor moves, each holding an icon, title, and copy. Adds depth to a landing page when you want highlights to feel tactile.

A tidy grid of feature cards, each with an icon, heading, and short description. Lays out several product capabilities at once for a clean overview section.

Stacked feature panels that expand on click to reveal detail and a paired visual. Lets visitors drill into one capability at a time without crowding the page.

A feature section styled as a chat thread, pairing message bubbles with copy. Built to show a messaging or support product talking in real conversation.

Sets two options side by side with checkmarks and notes per row. Use it to contrast your product against an alternative and make the better choice obvious.

Feature copy paired with bold metrics like uptime, users, or speed. Backs your claims with numbers and builds trust on a homepage or product overview.

A vertical timeline that walks through features or milestones in sequence. Ideal for telling how a product flow works or how your story unfolded over time.

A feature layout built around short video clips, each captioned with a benefit. Best when a moving demo explains the value faster than text alone could.

A guided, multi step layout that reveals features as the visitor advances. Useful for onboarding copy or walking through a setup flow one screen at a time.

A feature grid where each cell reveals more copy and a glow on hover. Keeps the section compact at rest, then rewards visitors who explore each capability.

A clean feature section with a heading, supporting text, and a short list of points. Reach for it when you want clarity over decoration on a marketing page.

Numbered steps that lay out how your product works from start to finish. Drop it on a homepage to turn a process into an easy three or four part story.

A feature section featuring a mock terminal with typed commands and output. Built for developer tools where showing real CLI usage sells the value fast.

Feature highlights in a swipeable carousel, one slide per capability with copy and a visual. Fits many features into a small space without a long scroll.

A feature block that places before and after states next to each other. Use it to show the change your product brings and let the difference speak plainly.

Alternating rows of feature copy beside supporting images. A reliable pattern for explaining several capabilities while keeping the page lively and balanced.

Feature descriptions interleaved with headline numbers and labels. Pairs the what with the proof so visitors trust the results on a product or pricing page.

Tabbed feature panels that swap content and visuals as visitors switch tabs. Organizes many capabilities into one compact, tidy section that stays readable.

A footer with a row of partner and customer logos above the navigation links. Adds social proof and brand trust at the bottom of a landing page.

A compact footer with a single line of copyright text and a few essential links. Keeps the bottom of an app or docs page quiet and out of the way.

A footer split into grouped link columns for products, company, and resources. Organizes deep site navigation on a large marketing or app homepage.

A footer pairing a logo and short tagline with a tidy row of page links. Rounds off a small business or portfolio site without crowding the layout.

A footer with an email newsletter form beside the usual navigation links. Captures signups while visitors are leaving the bottom of your site.

A swipeable carousel that steps through images one at a time. Use it to feature product shots or photos in a compact space on any landing page.

A horizontal filmstrip of thumbnails with a larger preview above. Ideal for browsing a photo set or product angles while keeping every frame in view.

A fullscreen gallery that fills the viewport with one image at a time. Good for immersive photo stories, lookbooks, or a striking visual showcase.

A responsive grid of evenly sized image tiles. Use it to display many photos, products, or case studies at once with a clean, scannable layout.

An edge to edge gallery with large visuals and smooth motion. Use it to surround visitors in your photos or brand imagery on a campaign page.

A scattered set of polaroid style cards with captions and slight tilts. Great for adding a casual, personal feel to an about page or event recap.

A portfolio layout that pairs project images with titles and short notes. Use it to present work, case studies, or a creative showcase to clients.

A hero with a booking form for dates, times, and guest details next to a headline. Lets visitors reserve a slot the moment they land on the page.

A centered hero built around a search field with popular tags below it. Helps visitors find what they need fast on a directory or marketplace home.

A centered hero pairing a headline and subtext with a short inline form. Collects an email or signup in one view to start onboarding immediately.

A hero with a full contact form set over a styled background image. Invites visitors to send a message or request a quote without leaving the top.

A hero with a contest entry form for name, email, and answer fields. Drives signups and excitement around a giveaway or promotional campaign.

A hero with an early access form and a single email field beside the pitch. Builds a waitlist for an upcoming product before the public launch.

A hero combining a registration form with a live countdown timer. Pushes visitors to claim a spot before an event or sale window closes.

A hero with a feedback survey form using ratings and short answers. Gathers visitor opinions on a product or service in a single focused view.

A hero with a floating form card resting over a soft gradient backdrop. Highlights a signup field and pulls the eye to one clear action.

A hero with a free ebook form that trades an email for a download. Grows a mailing list while offering a guide or report as the incentive.

A hero with a free trial signup form for email and password fields. Starts new accounts the moment a visitor decides to try the product.

A split hero with a product image on one side and a signup form on the other. Balances visual proof with a clear path to start using the product.

A hero with a job application form for contact details and a resume upload. Lets candidates apply right from the top of a careers page.

A hero with a newsletter subscription field and a short value pitch. Turns first time visitors into subscribers with one quick email entry.

A hero pairing a newsletter form with subscriber counts and logos. Uses social proof to convince visitors the list is worth joining today.

A hero with a product customizer form for options like size and color. Lets shoppers configure their choice and preview it before checkout.

A hero with a quiz or assessment form that walks through scored questions. Engages visitors and routes them toward a tailored recommendation.

A hero with a schedule demo form for name, company, and a time slot. Books sales calls with prospects right where they first arrive.

A hero with a sign up form for email and password beside the headline. Opens new accounts fast so visitors can start using the product now.

A split screen hero with a multi step form and a progress indicator. Guides visitors through a longer signup without overwhelming them at once.

A hero with a subscription form and a monthly to yearly billing toggle. Lets visitors pick a plan and price before they start a paid signup.

A hero with a two factor verification form for a one time security code. Confirms identity during signin to keep new accounts safe and secure.

A hero with a user feedback form for comments, ratings, and contact info. Collects honest input from visitors to guide the next product update.

A hero with a webinar registration form for name, email, and session time. Fills seats for a live session straight from the landing page top.

A hero with a 3D isometric illustration beside a headline and call to action. Adds depth and a modern feel to the top of a product landing page.

A hero that cycles through key features with motion next to a headline and CTA. Use it to show what your product does the moment a visitor arrives.

A hero set on a slowly shifting gradient backdrop with a centered headline and CTA. A colorful, lively opener for SaaS and creative product pages.

A hero where the headline word swaps through phrases with smooth motion. Highlights several value points in one line at the top of a landing page.

A centered hero with a headline, subtext, and CTA above a wide product image. A balanced, classic opener for marketing and SaaS landing pages.

A hero pairing a headline and CTA with a live chat conversation preview. Ideal for messaging, support, or AI assistant products you want to demo.

A hero with a ticking countdown timer beside a headline and CTA. Builds urgency for launches, sales, webinars, and limited time offer landing pages.

A hero on a rich gradient background with a centered headline, subtext, and CTA. A bold, color led opener for product and campaign landing pages.

A hero with a soft mesh gradient behind a centered headline and CTA. Gives a calm, premium backdrop to SaaS, design, and startup landing pages.

A hero with a rotating image carousel next to a headline and CTA. Shows several product shots or screens at the top of a landing page in turn.

A hero placing a product image alongside short customer reviews and a CTA. Pairs your pitch with proof to win trust on a landing page right away.

A hero with live, interactive stat counters beside a headline and CTA. Use it to make growth, usage, or results tangible on a SaaS landing page.

A hero with a phone mockup, app store badges, and a headline. Built to drive downloads at the top of a mobile app marketing or launch page.

A hero that guides visitors through a short multi step call to action. Use it to qualify leads or onboard users right from a landing page header.

A hero with animated particles drifting behind a centered headline and CTA. A dynamic, tech forward opener for software and startup landing pages.

A hero with a swipeable product carousel beside a headline and CTA. Showcases a range of items or plans at the top of an ecommerce landing page.

A hero with a step progress tracker next to a headline and CTA. Use it to show a setup flow or journey at the top of an onboarding landing page.

A hero centered on a prominent search bar below a headline and subtext. Ideal for directories, docs, marketplaces, and content heavy landing pages.

A clean centered hero with a headline, short subtext, and a single CTA. A minimal, fast loading opener that suits almost any landing page or product.

A hero pairing a headline and CTA with logos, ratings, and user counts. Leads with credibility to reassure visitors at the top of a landing page.

A hero with a two column split, text and CTA on one side, content on the other. A flexible opener that balances your message and a visual cleanly.

A hero split into a text column and a full height product image. A direct, balanced opener that pairs your pitch with a visual on a landing page.

A hero split between a headline with CTA and an embedded product video. Use it to show your product in motion at the top of a landing page.

A hero with a rotating carousel of customer testimonials and a CTA. Opens a landing page with real quotes to build trust before the pitch lands.

A hero leading with security badges, certifications, and partner logos. Reassures cautious buyers at the top of a landing or enterprise sales page.

A hero with a looping video filling the background behind a headline and CTA. Sets an immersive, cinematic tone at the top of a landing page.

A hero featuring a rotating 3D device mockup beside a headline and CTA. Presents your app or product with depth on a modern landing page.

A hero pairing a headline and CTA with a live API request and response preview. Built for developer tools and platforms aimed at technical buyers.

A hero showcasing app screens in a layered layout next to a headline and CTA. Use it to highlight the interface on a software product landing page.

A hero with a bento grid of feature tiles below a headline and CTA. Summarizes several capabilities at a glance on a modern SaaS landing page.

A hero pairing a headline and CTA with a syntax highlighted code snippet. Speaks directly to developers at the top of a tool or library landing page.

A hero with tabbed panels that swap content beneath a headline and CTA. Use it to present several use cases or features in one compact area.

A hero placing a product dashboard screenshot next to a headline and CTA. Shows your interface and data at the top of a SaaS or analytics page.

A hero centered on an inline email capture form below a headline and subtext. Ideal for waitlists, newsletters, and early access landing pages.

A hero with a row of feature cards beneath a headline and CTA. Breaks your key benefits into scannable tiles at the top of a landing page.

A hero with a feature timeline beside a headline and CTA. Walks visitors through a workflow or roadmap at the top of a product landing page.

A hero showing a grid of integration logos beside a headline and CTA. Highlights the tools your product connects to on a platform landing page.

A hero with framed product screenshots next to a headline and CTA. Shows the real interface at the top of a software or SaaS landing page.

A hero pairing a headline and CTA with a grid of team member photos. Adds a human face to about, agency, and company landing pages from the start.

A hero pairing a headline and CTA with an animated terminal window. Speaks to developers and shows install or usage commands on a tool landing page.

A two column grid pairing each icon with a heading and short paragraph. Lays out a handful of product features in a clean, balanced reading layout.

A grid of feature icons that animate into view on scroll. Adds motion to a list of capabilities so each benefit catches the eye as users read down.

A centred intro paragraph above a row of icon blocks. Frames a section theme, then lists supporting features in tidy, evenly spaced columns.

Centre aligned icons set in soft circles, each with a title and caption. A friendly way to present three or four core benefits on a landing page.

A tight vertical list pairing icons with numbers and labels. Shows key metrics in a small footprint, ideal for sidebars or dense feature pages.

A split layout with a section heading and copy on the left and stacked icon blocks on the right. Pairs a narrative pitch with scannable feature points.

Icon cards that expand on click to reveal more detail. Keeps the section compact while letting curious visitors dig into any feature they choose.

Icon tabs that switch between feature panels in place. Lets visitors explore several capabilities without scrolling, one focused view at a time.

A horizontal strip of icon cards users swipe or scroll through. Fits many features in limited height and reads naturally on mobile screens.

A carousel rotating through icon features one slide at a time. Highlights a long list of capabilities without crowding the page or overwhelming readers.

A grid of stat cards pairing an icon with a bold number and label. Surfaces growth figures and key results to build trust on a marketing page.

Category tabs marked with icons that filter the features shown below. Helps visitors jump straight to the feature set that matches their needs.

A vertical timeline with an icon at each step. Walks visitors through a process or product journey in clear order, one milestone after another.

A row of icons that reveal a short tooltip on hover. Packs many features into a small space while keeping extra detail one cursor away.

An interactive panel where hovering an icon updates the description beside it. Invites visitors to explore features at their own pace and stay engaged.

A set of cards pairing an icon with a headline metric and caption. Presents results, usage, or savings in confident, easy to scan tiles.

Clean tiles showing an icon, a number, and a short label. A spare way to display a few key stats without distracting from the surrounding copy.

Icons arranged in a circular, radial pattern around a central label. A distinctive way to show how features connect to one core product idea.

Solid filled icons that shift colour or lift on hover. Adds tactile feedback to a feature grid so the section feels responsive as visitors browse.

Vertically stacked icon cards, each with a title and short blurb. Reads top to bottom on any screen and keeps a long feature list easy to follow.

A code sample panel beside copy that explains your API. Drop it on a developer page to show how integrations connect in only a few short lines.

A scrolling row of partner and app logos that loops as visitors watch. Place it under a hero to prove your product fits neatly into an existing stack.

Tabs that sort connected apps by type, so visitors filter integrations to find the one they use. Ideal for a busy marketplace or directory page.

A large card spotlighting one key integration with its logo, summary, and a link. Use it to highlight a flagship partner above the full list.

A clean grid of integration logos in even rows and columns. Use it on a connections page to display the apps and services your product supports.

A masonry grid of cards layered over images, each with a heading and short text. Showcases a gallery, portfolio, or product collection on a landing page.

A pricing calculator with sliders and inputs that estimate cost from usage. Use it when plans scale by seats, requests, or volume so buyers see real numbers.

A row of pricing cards listing plan names, prices, and features with a clear call to action. Drop it on a pricing page to compare tiers at a glance.

A plan builder where buyers pick features and quantities to assemble a quote. Use it for modular products where every customer needs a different mix.

A pricing layout pairing standard tiers with a contact sales panel for large accounts. Use it when bigger deals need custom quotes and a human conversation.

A pricing table mapping every feature to each plan across rows and columns. Use it when buyers want to confirm exactly what each tier includes before paying.

A wide pricing row that lays plans side by side in a single band. Fits narrow page slots and pages where you want plans visible without much scrolling.

A pricing section that updates prices and highlights as buyers select options. Use it when choices like seats or add ons should reflect cost instantly.

A pared back pricing layout with generous spacing, plain type, and one clear price. Use it when a single plan or clean brand needs no visual clutter.

A contemporary pricing section with bold cards, soft shadows, and accent gradients. Use it to give a polished, current feel to a product or SaaS page.

A pricing section with promotional banners and limited time discounts on each plan. Use it for holiday sales, launches, and campaigns that push urgency.

A clean pricing section showing a few plans with price, features, and a button each. Use it when you want fast comprehension without extra decoration.

A pricing layout that stacks plan cards vertically for narrow columns and phones. Use it on mobile first pages or sidebars where width is limited.

A pricing section that pairs plan cards with customer quotes and logos. Use it to add social proof right where buyers weigh price and decide to commit.

A pricing section with a monthly and yearly switch that updates every plan price. Use it to show annual savings and let buyers pick a billing cycle fast.

Horizontal bars that fill to show milestones reached against a target. Drop it on a results page to visualize goals hit and progress toward each one.

A cluster of stat cards with a big number, label, and short caption in each. Use it to spotlight key metrics across a landing page in a clean grid.

Ring shaped progress dials that animate to a percentage value. Good for dashboards or landing pages that report completion rates and capacity at a glance.

Two columns of numbers placed side by side to contrast before and after results. Use it to show the lift your product delivers over the old way.

Paired figures with labels that weigh your offering against a baseline. Great for sales pages that need to make the gain feel concrete and credible.

A quote from a customer next to the numbers their team reached with you. Use it to pair social proof with hard results on a case study page.

A stepped funnel showing how many visitors move from view to signup to paid. Use it to explain conversion and where users drop off in your flow.

A grid of stat tiles washed in soft gradients for a vivid, modern look. Use it to display headline metrics when you want the section to feel premium.

A vertical timeline pairing dates with the numbers you hit at each stage. Use it to chart company momentum on an about page or investor deck.

A single row of figures split by thin vertical dividers for a tidy summary. Use it under a hero to surface three or four headline numbers fast.

Oversized counters that animate upward as the section scrolls into view. Use it to make reach, users, or revenue feel bold and immediate to readers.

Stat cards that reveal extra detail or a chart when you hover over them. Use it when you want a number to expand into context on a feature page.

Bordered cards each holding one metric, a label, and a trend note. Use it to report KPIs in a structured layout on a homepage or product page.

One large headline number anchored by three smaller supporting stats. Use it to lead with your strongest figure and back it with related proof.

Labeled bars that fill to a percentage to track adoption or completion. Use it on a status page or report to show how far each goal has come.

Three evenly spaced columns each with a number and a short label below. Use it for a clean, balanced stats strip on any marketing or about page.

Stat cards that pair a current value with a tiny inline trend chart. Use it to show a number and its recent direction together on a dashboard view.

Each figure sits beside an icon that signals what the number measures. Use it to make a stats row scannable and add visual cues to every metric.

Key numbers plotted along a horizontal timeline of moments and dates. Use it to tell a growth story across quarters on an about or press page.

A band of proof points like uptime, customers, and ratings in one row. Use it near a signup form to reassure visitors and lift their confidence.

A subscribe form paired with a bulleted list of benefits and an email field. Tells visitors what they get before they sign up to your newsletter.

A centered signup block that offers a clear incentive above the email field. Use it to reward visitors who join your list with a discount or guide.

A compact email input with an inline submit button on one row. Drop it into a footer or banner where space is tight but you still want signups.

A signup block showing a small preview of the newsletter content beside the email field. Sets reader expectations before they subscribe to it.

A clean centered newsletter signup with a heading, short text, and email field. The reliable default for landing pages and blog footers here.

A signup block with text on the left and the email field aligned right. Fits wide sections where you want the form to balance the supporting copy.

A centered subscribe form topped with subscriber counts or avatars as social proof. Use it when trust nudges visitors to join your mailing list.

A two column subscribe block pairing an image or copy on one side with the email form on the other. Adds visual interest to a signup section.

A team layout that alternates photos and bios from left to right down the page. Adds rhythm and gives room for longer profiles on an about page.

A team showcase in a staggered masonry grid where photos vary in height. Fills the space naturally and suits a large, photo rich company roster.

A clean grid of team member cards, each with a photo, name, and role. The fast, tidy way to introduce a small team on an about or company page.

Team cards that pair each photo and role with an email or phone link. Lets visitors reach the right person directly from your about or contact page.

A team directory with category filters that sort members by department or location. Helps visitors find the right person inside a large company.

A team grid where each photo reveals a short bio and social links on hover. Keeps the layout clean while extra detail stays one mouse move away.

Team profiles built around big, full bleed portraits with name and role. Puts faces front and center for a bold, personal about page that feels human.

Team cards that list each member with badges for their skills and tools. Great for agencies and studios that want to show real expertise at a glance.

Team profiles paired with short quotes from each member or their clients. Adds a human voice and social proof to the about page of any company.

A clean testimonial section with a customer quote, name, role, and avatar. Drop it onto any landing page to add a trusted voice with little effort.

A testimonial paired with a large customer photo beside the quote. Use it when you want a single voice to carry weight and feel personal and real.

A grid of testimonial cards, each holding a quote, avatar, name, and title. Show several happy customers at once to build trust across your page.

Testimonial cards joined by a row of headline metrics like users and revenue. Pair real quotes with hard numbers to prove your product delivers.

A featured customer story with a detailed quote, company logo, and result. Use it as social proof when one account speaks to your ideal buyer.

Compact testimonials arranged in a grid with thin dividers between them. Fit many short quotes into a tidy space without crowding the layout.

A brief review with a star rating and a company logo for instant credibility. Place it near a pricing table to reassure buyers before they commit.

A single centered quote topped with a company logo and the author below. Keep focus on one strong endorsement on a calm, uncluttered section.

A testimonial with a small rounded avatar set beside a concise quote and name. A friendly, lightweight option for sidebars or quieter page spots.

A testimonial section blended with key metrics such as customers served and ratings. Combine a quote with proof points to back your claims with data.

A welcome screen with a centered prompt field, suggested actions, and a short intro. Greets users and invites the first message in an AI assistant.

Clean metric cards that display a label and a single number set side by side. Use across a dashboard header to surface key totals at a glance.

Stat cards pairing each number with a small badge that shows change or trend. Use to flag growth or decline next to revenue and signup totals.

Metric cards that pair each figure with a tinted icon set in a colored circle. Use to make categories easy to scan on a busy analytics dashboard.

Stat cards that place a short line of context under each number. Use when a raw figure needs explanation, like a comparison to the prior month.

Metric cards with a small icon beside every value for quick recognition. Use on overview screens where users skim totals by category very fast.

Stat cards that pair a number with a progress bar moving toward a target. Use to show goal completion for revenue, storage, or active user counts.

A dense form with grouped sections, multiple field types, and a sticky action bar. Use it for detailed settings, account creation, or admin record editing.

A single column form with labels stacked above each input and a clear submit action. Ideal for short flows like sign in, contact, or quick profile edits.

A form split into two columns of fields with a shared header and footer actions. Use it for longer profiles or billing details that fit a wider screen.

A two panel login screen pairing a sign in form with a side image. Use it to add brand personality to authentication on web apps and dashboards.

A centered page title with optional description text, balanced on the screen. Use it on focused app views like settings or a single record detail.

A page title paired with buttons on the right for primary and secondary actions. Use it atop list or detail views where users create or edit.

A page title with a search field and filter controls sitting below it. Use it on data heavy screens so users narrow long tables and lists fast.

A page title sitting above a row of key metrics like totals and trends. Use it on dashboards to frame the view and surface numbers at a glance.

A page title with a numbered step indicator that shows progress. Use it across multi screen flows like onboarding, checkout, or a setup wizard.

A page title with a row of tabs beneath it for switching sections. Use it on profile or settings screens that split content across many views.

A reset password form that emails a one time code, then prompts users to enter the OTP digits before setting a new password. Use for secure email recovery.

A reset password form that verifies identity with a saved security question and answer before allowing a new password. Use as a passwordless recovery path.

A clean reset password form with new password and confirm fields plus a submit button. Use on the final step after a user clicks a recovery link.

A reset password form that reads a token from the recovery link, confirms it, then collects a new password. Use to complete a tokened email reset flow.

A profile billing view with current plan, payment method, invoice history, and an upgrade prompt. Use it where members manage subscriptions and receipts.

A dense list of user profiles with avatar, name, role, and quick actions per row. Fits admin tables and directories where space stays tight.

A developer profile with API keys, access tokens, connected apps, and usage notes. Use it on settings pages where engineers manage their integrations.

A guided profile setup with steps for avatar, name, and preferences. Use it right after signup to help new users finish their account quickly.

A profile permissions panel listing roles and toggles for what a member can view or edit. Use it where admins grant access across an application.

A profile security view showing recent sign ins, devices, locations, and times. Use it so members can spot odd activity and protect their account.

A clean profile card with avatar, name, bio, and a few key details. Use it for a focused account summary on dashboards or member directory pages.

A profile layout split into tabs for account, security, and notifications. Use it to organize many settings without crowding a single long page.

A grid of teammate profiles with photos, titles, and contact buttons. Use it on an about page or internal directory to introduce the whole team.

A profile header paired with metrics like followers, posts, and reputation. Use it on social or community pages to show a member at a glance.

A sidebar of category filters with checkboxes, price sliders, and color swatches beside a product grid. Refines large catalogs on a shop listing page.

A slide in drawer holding category, price, and rating filters for small screens. Keeps the product grid full width until shoppers tap to refine on mobile.

A row of filter dropdowns and chips sitting above the product grid. Lets shoppers narrow by category, price, and brand without giving up vertical space.

A category preview that slides products through a horizontal carousel, letting shoppers swipe across a collection without leaving the page on mobile.

A category preview where each tile expands to reveal more products on click, keeping the storefront tidy while shoppers dig into one collection at a time.

A category preview arranging collections in an even grid of image tiles, giving a clean overview of every department on a busy ecommerce home page.

A category preview styled like a magazine spread, mixing large feature tiles with smaller ones to spotlight seasonal collections on a storefront landing page.

A category preview that scrolls product cards in a continuous strip, ideal for showing many items while keeping a compact footprint on a collection page.

A category preview split between a featured image and a product list, pairing a strong visual with quick picks at the top of a collection page.

A category preview laid out in three balanced columns of image tiles, sorting collections into clear groups for a wide ecommerce navigation page.

A bundle builder where shoppers pick add on products and watch the total update live. Use it on product pages to grow order value before checkout.

A side view comparing a single item against a bundle, with prices and savings shown. Use it to nudge shoppers toward the better value package.

A clean grid of bundle products with images, names, and prices in even cells. Use it to present a curated set of items shoppers add together in one tap.

Two product cards placed next to each other with a plus sign and combined price. Use it to pair complementary items and lift the average order total.

A vertical stack of bundle items with running totals and one add to cart action. Use it on mobile product pages to offer matching extras as shoppers scroll.

Recommended products laid out with an icon, short benefit, and price for each item. Highlights why shoppers should add a related pick to the cart.

A clean grid of related products with image, title, and price per card. Drops below the cart or product page to suggest items shoppers may want.

Suggested products in a vertical stacked list with thumbnail, name, and price. Fits a narrow sidebar or cart drawer to keep cross sells visible.

Related products in a card grid where each item carries a badge for sale, new, or low stock. Adds urgency to nudge shoppers toward another buy.

Recommended products shown with star ratings and review counts beside each price. Uses social proof to push complementary items into the cart.

A starter customer review layout with star ratings, reviewer names, and comment text. Drop it onto a product page to show real shopper feedback fast.

A tight vertical list of reviews with star ratings and short quotes. Fits narrow sidebars or product pages where space for feedback is limited.

A grid of review cards showing star ratings, avatars, and short quotes. Use it to display many customer opinions at once on a product detail page.

A side by side view of the highest and lowest rated reviews so shoppers weigh pros and cons. Helps buyers decide quickly on a product detail page.

A summary panel with average rating, total count, and a bar chart by star level. Gives shoppers a quick read on overall product quality up front.

Featured customer quotes paired with ratings and verified buyer badges. Builds confidence near the buy button to encourage shoppers to checkout.

A footer with several columns of grouped links for shop, support, company, and legal. Organizes a large storefront so customers find any page fast.

A compact footer with a single row of essential links and a copyright line. Keeps the bottom of a small store clean, tidy, and quick to scan for shoppers.

A footer pairing link columns with an email signup field and button. Captures subscribers for promotions and offers while customers browse your store.

A footer that displays accepted card and wallet badges beside the usual store links. Reassures shoppers about secure checkout right before they buy.

A footer with link columns plus a row of social media icons. Connects shoppers to your brand on Instagram, X, and other channels they already follow.

An accordion that collapses shipping and returns details into expandable rows. Keeps long policy text tidy on a product page until shoppers tap to read.

A checklist that lays out shipping steps and return conditions as ticked items. Helps buyers confirm eligibility before they start a refund request.

A full text panel covering delivery times, costs, and the returns process in plain prose. Use on a dedicated policy page where shoppers expect complete detail.

A split column layout that places shipping on one side and returns on the other. Lets customers compare delivery and refund terms in one quick glance.

An icons layout pairing each shipping and returns point with a small symbol. Makes delivery speed, free returns, and refund windows scannable at a glance.

A horizontal row of trust badges showing secure payment, returns, and warranty icons. Place under an add to cart button to calm buyer worry.

A vertical checklist of product promises with check icons and short labels. Use it on a product page to spell out exactly what every order includes.

A large pull quote with author name and star rating that features a happy customer. Drop it near pricing to back your claims with real social proof.

A compact list pairing small icons with guarantee statements like free shipping and easy returns. Fits neatly in a sidebar or below the buy section.

Three equal columns, each with an icon, heading, and a line on quality, security, and support. Builds buyer confidence across the full storefront.

A rotating carousel that shows product features on 3D cards with depth and motion. Great for highlighting a few standout capabilities on a landing page.

Stacked rows that flip image and text from left to right as you scroll. Walks shoppers through key product benefits one clear section at a time.

A grid of feature cards with icons and motion that triggers as cards enter view. Adds life to a benefits section without burying the message.

A slider that wipes between two product images so buyers see the difference at a glance. Ideal for skincare, editing tools, or cleaning results.

A swipeable carousel that steps through product features with image and copy per slide. Fits compact pages where space for many cards is tight.

A grid of feature cards that open to reveal more detail on click. Keeps the overview tidy while letting curious shoppers dig into the specifics.

Stacked panels that expand one feature at a time so each gets full focus. A clean way to present detailed product benefits without a wall of text.

A table that lines up features across plans or models with clear check marks. Helps shoppers weigh every option and pick the right product fast.

Tabbed sections that swap feature content as buyers click each label. Organizes a deep feature set into bite sized views on one tidy single panel.

A vertical timeline that walks through product features in sequence. Useful for showing a setup flow or how capabilities build on each other.

A layout that pairs product features with a customer quote beside them. Backs each benefit claim with real proof to win hesitant buyers over.

A row of feature panels that scroll sideways as the page moves. Shows many product capabilities in a compact, playful strip that invites swiping.

A product image dotted with clickable hotspots that reveal each feature in place. Perfect for showing exactly where a capability lives on the item.

Tabs paired with a live preview that updates as buyers select a feature. Lets shoppers explore what each capability looks like before they buy.

A clean grid of feature cards with an icon, title, and short blurb each. The reliable choice for listing core product benefits at a quick glance.

A two column section with a product photo on one side and feature copy on the other. Balances visual and text to sell a single hero capability.

A section that pairs product features with hard numbers and metrics. Use it when figures like speed or savings make the strongest case to buy.

A timeline that reveals product features step by step as buyers scroll. Good for guiding readers through a journey from first use to results.

A section that pairs an embedded product video with supporting feature copy. Shows the item in action when motion sells better than a still.

A dense list packing each product into a slim row with thumbnail, name, and price. Fits long catalogs and search results where space is tight.

A side by side list lining up products with specs, prices, and features in columns. Helps shoppers weigh options before they commit to a purchase.

A list spotlighting select products with large imagery, descriptions, and prices. Highlights bestsellers or promotions on a storefront landing page.

A product list paired with category, price, and attribute filters in a sidebar. Lets shoppers narrow large catalogs and find the right item fast.

An image first list showing products as large photo cards with name and price. Suits visual categories like fashion, home decor, and art prints.

A responsive grid of product cards with images, titles, prices, and buttons. The standard catalog layout for category and search pages in a store.

A masonry grid fitting product cards of varying heights into tight columns. Works well for mixed imagery in lookbooks and curated collections.

A table listing products in rows with columns for image, name, stock, and price. Ideal for dashboards, admin catalogs, and bulk inventory views.

A vertical timeline arranging products or drops by date with images and prices. Good for release schedules, new arrivals, and limited editions.

A classic product page with a large image on the left, title, price, variant options, and add to cart on the right. Familiar layout shoppers expect.

A tight product layout that fits the image, price, options, and buy button above the fold. Built for small screens and quick mobile purchases.

A product page led by a multi image gallery with thumbnails beside the details. Lets shoppers study every angle before they add the item to cart.

A full bleed product page with edge to edge imagery, floating details, and a sticky buy bar. Best for premium goods that sell on visual impact.

A pared back product page with one clean image, title, price, and a single buy button. Keeps focus on the item for simple, low clutter catalogs.

A contemporary product page mixing a bold image grid, accent typography, and clear pricing. Suits fashion and lifestyle brands that want a fresh look.

A centered promo with an icon, headline, and supporting copy. Highlights a single offer or shipping perk in the middle of a store landing page.

A centered promo paired with a tidy grid of product images. Showcases a curated collection or a seasonal lineup right on your shop homepage.

A clean centered promo with a headline, short message, and button. Drop it onto any store page to push a sale, a discount code, or a new arrival.

A promo block with a live countdown timer, headline, and call to action. Builds urgency around flash sales and limited time offers that expire soon.

A testimonial promo with a soft fading background and a customer quote. Builds trust on a product page while reinforcing the offer you are running.

A full width promo with oversized type and a clear button. Commands attention across the whole page for a headline campaign or a seasonal launch.

A promo with copy on one side and a product image alongside it. Pairs your offer with a visual so shoppers see exactly what is on sale right now.

A split promo with a large image filling one half and an offer on the other. Frames a hero product next to a discount and a clear, single button.

A promo arranged as several cards in columns, each holding its own offer. Presents multiple deals or categories side by side on one store page.

A slim promo banner with a short message and a link. Sits at the top of a store to announce free shipping, a running sale, or a fresh discount code.

A promo split into two panels, each holding a separate offer and button. Lets shoppers pick between two competing deals within one store section.

A condensed cart panel listing items, quantities, and a running total in tight space. Fits a header dropdown or a narrow column without crowding the layout.

A cart that floats over the page as a small overlay, showing added items and a subtotal. Lets shoppers review picks without leaving the product they browse.

A small summary cart with thumbnails, prices, and a checkout button. Pops from a cart icon so shoppers confirm contents fast before moving on to pay.

A clean cart layout with product images, quantity steppers, and an order summary. Suits a full cart page where shoppers review items before checkout.

A cart that slides in from the side as a panel over the page, listing items and totals. Keeps shopping in view while customers adjust quantities and pay.

A cart summary pinned to the side as you scroll, holding items, totals, and a checkout button. Keeps payment in reach on long product and listing pages.

An about section pairing a portrait with a short bio, role, and contact links. Tells visitors who you are and why they should hire you on a portfolio page.

A list of degrees, courses, and certifications with issuer, date, and credential. Shows formal training and qualifications on a portfolio or resume page.

A compact call to action with a download button and file details for your CV. Lets recruiters grab your resume in one click from a portfolio page.

A grid of skill badges grouped by area with optional proficiency levels. Summarizes the tools and languages you know across a portfolio about page.

A vertical timeline of roles and projects with skills tagged per entry. Maps your career history and the abilities you used at each step you took.

A vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.

A responsive grid of award badges or icons with short captions. Displays many certifications and honors at a glance on a portfolio about page.

A sliding carousel that cycles through certification logos and details. Fits a long list of credentials into a compact, scrollable strip here.

A spotlight block centered on a single major award with its name, year, and a short note. Use it to lead with your most impressive recognition.

A block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.

A list that leads with one large featured article followed by smaller entries. Use it to spotlight your best post while listing recent writing.

A responsive grid of blog cards with cover image, title, and excerpt. The standard layout for browsing many articles on a writing index page.

A horizontal carousel of blog cards that scrolls sideways. Use it to preview recent posts in a tidy row without taking up much vertical space.

A masonry grid of article cards with varied heights for a dynamic feel. Fits posts that mix tall images with short text on a writing showcase.

A plain text list of post titles with publish dates beside each one. Use it when you want a fast, distraction free archive of all your writing.

An accordion that expands each case study to reveal the full story. Use it to list many projects while keeping the page compact until one is tapped.

A responsive grid of case study cards with thumbnail, title, and summary. The go to layout for browsing a portfolio of client projects at once.

A case study block built around one large hero image with supporting copy. Use it when the visual result of the project tells the story best.

A two column block placing a project image beside its written story. Pairs visuals and narrative to walk readers through a single case study.

A timeline that maps a project across stages from the first brief to outcome. Use it to show your process and results step by step in one case study.

A straightforward contact form with name, email, and message fields plus a submit button. Drop it on a portfolio page so visitors can send a quick note.

Pairs an embedded location map with address, phone, and email details. Use it when clients need to find your studio or office alongside ways to reach you.

A compact contact form sitting beside a row of social media icons. Fits portfolios that want one simple message field and links to your other profiles.

A button that opens the contact form in a modal dialog, keeping the page clean. Good for portfolios where you want the form hidden until a visitor asks.

A two column section with intro copy on one side and the contact form on the other. Balances a personal message with a clear path to get in touch.

An accordion that lists each service as an expandable row with a short summary and details inside. Keeps a long offering compact and easy to scan.

A list of services where each row pairs an icon with a title and one line of supporting text. Communicates your capabilities at a quick glance.

A numbered sequence that frames your services as ordered steps with titles and notes. Shows clients how you work and what to expect at each stage.

A responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.

A split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.

A wide banner with a large heading and a single prominent button. Use it to span the page and push visitors toward hiring you or booking a call.

A slim call to action that sits within page content, pairing one line of copy with a button. Place it between sections to nudge readers without interrupting.

A banner combining your portrait with a short pitch and a button. Adds a human face to the ask, ideal for freelancers inviting visitors to connect.

A two column banner with a message on one side and the action button on the other. Keeps the copy and the click target distinct and easy to scan.

A banner that stays fixed as the visitor scrolls, keeping a button always in view. Useful for long portfolio pages where the offer should stay reachable.

A bordered card holding a headline, short pitch, and email field. Use it as a standalone callout inviting visitors to join your mailing list.

An email field built into the site footer beside links and details. Captures subscribers at the bottom of every page without a dedicated section.

A modal that surfaces an email field over the page, often on exit or after a delay. Use it to catch visitors before they leave your portfolio.

A single row with an email input and a subscribe button. Slots into any section when you want a quick, low friction way to gather addresses.

A two column section with descriptive copy beside the signup form. Explains what subscribers get while keeping the email field clearly in view.

A grid of cards listing talks and workshops with their title, date, and venue. Use it to present many speaking appearances in one scannable layout.

A spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.

A bold featured talk layout pairing a large title with imagery and key facts. Draws extra attention to your most notable conference appearance.

A vertical timeline charting talks and workshops in date order. Use it to show how your speaking history has grown across many events over time.

A section embedding a recorded talk video alongside its title and context. Lets visitors watch you present without ever leaving your portfolio.

A carousel that slides through featured projects one at a time, each with a cover image and title. Use it to spotlight your best work on a portfolio home page.

A grid of project thumbnails that reveal a title, role, and link on hover. Use it to keep a portfolio index clean while exposing detail on demand.

A full width hero that frames one flagship project with a big image, title, and short summary. Use it to open a case study or anchor a portfolio.

A two column layout pairing a project screenshot with details and a link beside it. Use it to present featured work with room for context and notes.

A vertical stack of project cards, each holding an image, title, and tags. Use it to walk visitors through selected highlights in a clear reading order.

A hero with a sliding carousel of images behind a headline and short intro. Use it to cycle through signature work the moment a portfolio loads.

A hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.

A full screen hero with a centered name, role, and tagline over a clean background. Use it to make a strong first statement on a personal site.

A spare hero with a short headline and one prominent call to action button. Use it when you want visitors to reach your work or contact fast.

A hero split into a text column and an image column side by side. Use it to pair an introduction with a portrait or featured shot at the top of a page.

A grid of cards, each naming one core value with an icon and a short line of detail. Use it to lay out the principles behind your work at a glance.

A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.

A reading focused section that tells your origin story in flowing paragraphs. Use it to explain how a studio or person came to be and what drives it.

Three equal columns, each presenting one guiding pillar with a heading and text. Use it to summarize the ideas your practice is built around.

A vertical timeline that marks milestones and values down the page in order. Use it to trace how your mission took shape over time for visitors.

A circular diagram showing the stages of your process as a repeating loop. Use it to convey an iterative way of working where steps feed back in.

A horizontal row of numbered steps that lead the eye from start to finish. Use it to lay out a linear workflow across a single line on the page.

A section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.

A vertical stack of cards, each describing one phase of your process in turn. Use it to walk a client through how an engagement unfolds step by step.

A vertical timeline that maps each process phase down the page in sequence. Use it to show the path a project follows from kickoff through delivery.

A project grid with category filters across the top so visitors narrow results by tag or type. Use it when a portfolio holds varied work across many fields.

A vertical stack of client quotes paired with project names and roles. Use it to weave testimonials into a project page and back up your results with words.

An even grid of project cards, each with a cover image, title, and short caption. Use it as the main index for browsing a portfolio at a glance.

A row of cards calling out key numbers like projects shipped, clients, and years active. Use it to quantify your track record near the top of a portfolio.

Alternating rows that flip image and text side to side down the page. Use it to give each project room to breathe with a clear narrative flow.

A clean quote block with the testimonial text, author name, and role. Use it as a simple starting point to add one piece of client feedback to any page.

A grid that arranges several short client quotes side by side with names and roles. Use it to gather feedback from many clients in one compact section.

A testimonial paired with the project it refers to, including a thumbnail and link. Use it to tie praise directly to the work that earned it on a case study.

A carousel that slides through client quotes one at a time with author details. Use it to rotate testimonials without crowding a portfolio page.

A large single quote set in generous space with the author name and title. Use it to feature one standout endorsement and let it carry real weight.

A prominent card spotlighting one downloadable resource with a cover, summary, and button. Use it to push a flagship guide or template to visitors.

A download offer behind a short email form so visitors trade contact details for the file. Use it to capture leads while sharing a guide or kit.

A compact callout that slots into running text to point readers at a related file. Use it to surface a download right where it stays relevant.

A plain vertical list of resources, each a title and a download link. Use it when you want a quiet, fast index of files with no extra clutter.

A grid of resource cards, each with an icon, title, and download action. Use it to present a full library of guides and templates in one tidy section.

A grid of document icons, each labeled and linked to a file like a resume or portfolio PDF. Use it to offer several downloads in one branded section.

A paired offer that lets visitors grab both your resume and cover letter together. Use it on a hiring page where both documents matter to recruiters.

A short bio next to a clear call to action that downloads your resume. Use it to introduce yourself and hand over your CV in one focused block.

A single clear button that downloads your resume in one click. Use it when you want the lightest possible way to share a CV on any portfolio page.

A two column block with your intro on one side and resume downloads on the other. Use it to balance a personal pitch with quick access to your files.

A single featured post pinned in a clean card with avatar, caption, and engagement counts. Spotlights your best content when one example carries the message.

A responsive photo grid that mirrors an Instagram profile layout with hover overlays for likes and comments. Use it to preview a visual feed on a portfolio.

A compact row of platform icons that link out to every profile you maintain. Drop it in a footer or sidebar so visitors can follow you anywhere fast.

A swipeable carousel of tweet cards with author, timestamp, and text. Rotate through recent posts or testimonials without stacking them down the page.

A horizontal strip of YouTube thumbnails with titles and view counts. Place it on a channel page to let visitors scan and open videos in one click.

A split panel that shows a project before and after your work with a draggable divider. Proves your impact visually when results speak louder than text.

A scannable list of value points, each with an icon and short line. Summarizes what you deliver so visitors grasp your strengths in a few seconds.

Stacked testimonial cards framed around client outcomes, with quote, name, and role. Builds trust by letting past clients vouch for your results.

A narrative section that walks through your process in ordered steps with supporting copy. Use it to explain how you work and win over cautious buyers.

A two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.

Collapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.

A role card paired with a thumbnail of the project you shipped there. Connects each position to concrete work so visitors see outcomes, not just titles.

A role card joined with a manager or client quote about your impact. Pairs the facts of a position with social proof to strengthen each entry.

A card that leads with the company logo beside your title and dates. Use it when recognizable employers carry weight and you want brands seen first.

A pared back card showing title, company, and dates with generous spacing. Ideal for a clean resume page where the focus stays on the roles themselves.

An accordion where each item border softly fades on open. Adds a quiet visual cue for active panels in FAQs and settings without loud styling.

An accordion built from separated cards, each panel raised on its own surface. Good for FAQs or feature details that need clear visual separation.

An accordion divided by dashed lines between items. The light dashed rhythm keeps long FAQ lists readable while staying subtle and unobtrusive.

An accordion framed by a dotted border around each panel. The playful dotted outline suits informal FAQs, help docs, and friendly onboarding tips.

An accordion with a double line framing every item. The layered borders add clear structure for FAQs and specs where rows need firm definition.

An accordion whose answer text gently fades in as a panel opens. The soft entrance keeps reader focus on the revealed content in FAQs and guides.

An accordion where the question label lifts up as the panel opens. The floating title keeps context visible while reading through long FAQ answers.

An accordion with a glowing border on the open item. The lit edge draws the eye to the active panel, fitting dark themes and modern product FAQs.

An accordion that tints the background of the open item. The highlighted row keeps your place in long FAQ lists and dense product documentation.

An accordion with thin divider lines and no boxes at all. The stripped back style fits clean FAQs, sidebars, and content heavy marketing pages.

An accordion supporting nested items inside bordered panels. Use it for layered FAQs, docs, and settings where topics branch into subtopics.

An accordion with a number beside every question. The counted order suits step guides, ranked FAQs, and any sequence readers follow in turn.

An accordion that lifts each item with a soft shadow on open. The raised panel clearly signals the active answer in FAQs and feature breakdowns.

An accordion styled as numbered steps with connecting markers. Ideal for setup flows, tutorials, and any process that readers complete in order.

An accordion with a bold colored bar down the side of each item. The thick accent marks active rows in FAQs and grabs reader attention quickly.

An accordion where each question sits above a single underline. The clean text first look fits editorial FAQs and quiet, tidy help sections.

Alerts with a colored bar on the left edge that signals tone at a glance. Use for status messages where the color cue matters more than the icon.

Alerts framed by a colored border on every side for strong emphasis. Use when a notice must stand out clearly against a busy page or dashboard.

Plain alerts with an icon, title, and message in a soft container. Use for everyday notices like saved changes, confirmations, and short tips.

Alerts with a colored underline along the bottom edge for a subtle cue. Use for inline messages in forms or cards that need only light emphasis.

Slim alerts with tight padding and a single line of text inside. Use in dense layouts, tables, or sidebars where vertical space stays limited.

Alerts outlined with a dashed border for a lighter, sketch like feel. Use for draft notices, placeholders, or optional tips in a quiet tone.

Alerts with a close button so users can clear a notice once read. Use for cookie banners, promotions, and warnings that should not stay forever.

Alerts wrapped in a dotted border for a soft, playful outline. Use for casual reminders, tips, or low priority notes in friendly interfaces.

Alerts with a layered double border for a refined, framed look. Use to highlight important notices that deserve extra visual weight on a page.

Alerts raised with a soft shadow so they lift off the surface. Use for floating notifications or messages that should feel above the content.

Alerts with a blurred, translucent backdrop that reveals content behind. Use over images or hero sections where a glassy notice fits the design.

Alerts ringed by a soft glowing border that draws the eye gently. Use for promotions or new feature notices that need a warm, inviting accent.

Compact alerts that pair a status icon with a short message and no title. Use for quick inline feedback where space is tight and tone is clear.

Alerts with an inset shadow that sinks slightly into the surface. Use for grouped notices inside cards or panels that feel part of the layout.

Alerts set in a monospace typeface for a technical, code style tone. Use for build output, terminal messages, or warnings aimed at developers.

Alerts defined only by a clean border with no fill behind the text. Use on colored or busy backgrounds where a solid panel would feel heavy.

Alerts styled like a paper card with subtle texture and soft edges. Use for printed style notices, receipts, or warm document driven layouts.

Alerts with a border that gently pulses to catch attention over time. Use for live updates, countdowns, or urgent notices that should not be missed.

Alerts with a colored bar on the right edge for a mirrored accent. Use in right aligned layouts or when the left side already holds an icon.

Alerts topped with a colored bar across the upper edge for a header cue. Use for grouped notices where the accent reads like a small banner.

A badge with layered shadows and depth that lifts off the surface. Use it to spotlight a featured tag or premium label that needs to stand out.

A badge with a springy bounce animation that draws the eye on entry. Use it to flag new arrivals or fresh updates that should grab attention.

A badge paired with a small colored dot that shows status at a glance. Use it to show online, busy, or away states next to a name or avatar.

A badge raised above the surface with a soft drop shadow. Use it to mark a priority label or count that should read as floating above content.

An oversized badge with generous padding and bold text for high visibility. Use it on hero areas or banners where a tag must read from a distance.

A badge wrapped in a colorful gradient outline around plain fill. Use it to mark beta, pro, or featured labels that need a vivid accent edge.

A badge that grows slightly when the pointer rests on it. Use it for interactive tags or filters where a touch of feedback invites a quick click.

A badge that pairs a small icon with a label for instant meaning. Use it to tag categories, statuses, or actions where text alone reads slowly.

A roomy badge with extra padding and larger text for clear reading. Use it to highlight a plan tier, count, or status across busy interfaces.

A badge with a soft pulsing ring that radiates outward on a loop. Use it to signal live activity, unread items, or a recording session in progress.

A badge styled as a corner ribbon that drapes over a card edge. Use it to flag sale, new, or sold out states across product and gallery tiles.

A badge with sharp square corners and a compact footprint. Use it for crisp version tags, counts, or labels that suit a structured grid layout.

A breadcrumb trail wrapped in a soft tinted background bar. Anchors the top of a page and keeps navigation links readable above busy content.

A breadcrumb sitting inside a thin outlined container. Frames the navigation path cleanly on a dashboard header or any content section toolbar.

A breadcrumb housed in a rounded card with a subtle shadow. Lifts the navigation path off the page for detail views and account settings screens.

A tight breadcrumb with reduced spacing between its links. Fits crowded toolbars and mobile headers where horizontal room is in short supply.

A breadcrumb that separates each link with a small round dot. Offers a quiet, minimal path indicator for clean app layouts and page headers.

A breadcrumb pairing each link with a leading icon. Helps users scan the path at a glance across sections like home, docs, billing, and settings.

A breadcrumb that numbers each step in the path. Clarifies order for sequential flows such as checkout, onboarding, or a multi step setup wizard.

A breadcrumb where each link sits inside a rounded pill shape. Adds a friendly, tappable feel to navigation on dashboards and profile pages.

A breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.

A breadcrumb that divides its links with a forward slash. Mirrors a file path style for code tools, documentation, and folder browsing screens.

A breadcrumb that pins to the top of the view as the page scrolls. Keeps the current location visible on long articles and deep settings pages.

A breadcrumb laid out as a connected timeline of steps. Maps a journey through stages, ideal for order tracking and live project status views.

Buttons with borders that animate and trace around the edge on hover. Draw attention to a primary action without changing the button fill at rest.

Buttons with angled, clipped corners for a sharp geometric look. Fits gaming, tech, or editorial interfaces that want an edgy call to action.

Oversized buttons with generous padding and large type. Use them as the main hero call to action where one tap should be impossible to miss.

Compact, low height buttons with tight padding and small type. Ideal for dense toolbars, table rows, and inline controls where space is limited.

Buttons that scale up smoothly on hover to feel responsive. Add a touch of motion feedback to cards, pricing tiers, and primary form actions.

Buttons that react to hover and click with motion and state changes. Make signups, downloads, and key actions feel alive and worth clicking.

Buttons with a flowing liquid fill that sweeps across the surface on hover. A playful accent for landing pages and creative product sites today.

Buttons that morph their shape, size, or label between states. Use for loading, success, and submit flows that confirm progress to the user.

Buttons with a blocky pixel art finish and retro styling. Perfect for games, indie projects, and brands that lean on a nostalgic visual theme.

Buttons with a soft pulsing glow that draws the eye over time. Highlight a single primary action like start trial or buy now on a busy page.

Buttons that rotate an icon or the whole label on hover. Add subtle motion to refresh, settings, and other action icons across your app today.

Buttons with layered shadows that lift or shift on hover. Give actions a tactile, raised feel across cards, forms, and toolbars in any layout.

Buttons with a skewed, slanted shape for a sense of dynamic energy. Suits sports, fitness, and bold marketing pages that want forward momentum.

Buttons with a color or label that slides in on hover. Reveal a second state to guide users toward the next step in a clear and simple flow.

Buttons branded for Google, GitHub, Apple, and more providers. Drop them into sign in and sign up screens for fast one click authentication.

Buttons that squeeze inward on press for satisfying tactile feedback. Use on mobile flows and forms where every tap should feel confirmed fast.

Buttons styled with an animated underline that grows in on hover. A clean, minimal accent for text links and quiet secondary actions in any UI.

A card with a colored accent line along one edge that draws the eye. Use it to group related text and labels while signaling category or status.

A card whose border traces a moving outline around the edges. Use it to spotlight a featured plan, offer, or item that needs attention on the page.

A card framed by a shifting gradient border that flows around the edges. Use it to highlight a premium tier or hero item in a grid of options.

A card that brightens its border when focused or hovered. Use it to mark the recommended choice in a pricing grid or a selected option in a form.

A card with a diagonal ribbon pinned to one corner for a short label. Use it to flag New, Sale, or Featured items in a product or listing grid.

A card with a notched border that carves out shape along its edge. Use it for tickets, coupons, or passes where a distinct outline reads as a stub.

A card outlined with a dashed border for a light, sketch feel. Use it for empty states, upload zones, or placeholders that invite the user to add content.

A card wrapped in two stacked outlines for a framed, formal look. Use it for certificates, awards, or quotes that deserve emphasis on the page.

A card that grows to reveal more text or controls when opened. Use it for FAQs, settings, or summaries that hide detail until the reader wants it.

A card edged with a static gradient outline that adds color without noise. Use it to set apart a key offer or profile in an otherwise plain grid.

A card that lifts, scales, or shades when the pointer moves over it. Use it for clickable tiles in a gallery, menu, or dashboard to signal they react.

A card that hides extra text or actions until hover uncovers them. Use it for portfolio tiles or features where the cover stays clean until needed.

A card led by a single icon above a short title and blurb. Use it for feature grids, service lists, or steps where a glyph anchors each point made.

A card that drifts toward the cursor as it nears, with a subtle pull. Use it for playful landing pages or feature tiles that reward a hovering pointer.

A card ringed by a glowing neon outline that pops on dark backgrounds. Use it for gaming, music, or tech pages where a bright frame fits the mood.

A card that rotates in 3D space as the pointer crosses it for depth. Use it for hero items or showcases where motion makes a tile feel tactile.

A card pairing a progress bar with a label and value reading. Use it to show task completion, goals, or usage limits inside a dashboard or account view.

A card with a border that pulses softly to draw a glance over. Use it for live alerts, fresh items, or a call to action that should feel active now.

A card with a light sweep that glides across its surface. Use it as a loading skeleton or to add gentle motion to a featured tile in a busy grid.

A card layered over offset copies to suggest a deck behind it. Use it for collections, albums, or grouped items where many sit under one cover here.

A card showing a state badge, label, and short note together. Use it on dashboards to surface health, order, or system status at a quick glance.

A card that tilts under the cursor to follow its position closely. Use it for interactive feature tiles or showcases where slight motion adds polish.

A card that expands to reveal extra detail when clicked, keeping the summary visible. Use it on dashboards to tuck away long notes inside a tidy tile.

Several collapsible panels stacked together so readers open one section at a time. Good for settings pages where related options sit in separate groups.

A collapsible row with a chevron icon that rotates as the panel opens and closes. Use it in menus where a clear visual cue tells readers it expands.

A collapsible panel with a soft shadow that lifts it off the page. Use it to highlight an expandable block of content inside a busy layout or feed.

A collapsible panel with a colored bar down one side to mark its state. Use it for alerts or notes whose details readers can show or hide on demand.

Numbered collapsible steps that reveal instructions one at a time. Use it for onboarding or setup guides where readers work through tasks in order.

A pagination row where each page number sits inside its own outlined button. The clear borders separate pages cleanly across data tables and search results.

Pagination wrapped in a raised card surface with page numbers and prev next controls. Groups navigation neatly below a list or grid of cards.

A tight pagination row that fits page numbers, prev, and next into a small footprint. Good for sidebars, panels, and dense admin tables with limited space.

Pagination shown as a row of dots, with the active page filled. Ideal for image carousels, onboarding steps, and short sequences where numbers feel heavy.

A pagination bar that hovers above the content with soft elevation. Stays visible while readers scroll through long articles, feeds, or paginated galleries.

Pagination built from chevron icons for previous and next, with no page numbers. Keeps mobile toolbars and image viewers clean when only direction matters.

A very small pagination control showing the current page and arrows to step through results. Fits inline next to filters, counts, or table footers.

Pagination that shows full page numbers on desktop and collapses to arrows on mobile. Keeps navigation usable across phones, tablets, and wide screens.

A pagination row with fully rounded pill buttons for each page. The soft circular shape suits friendly product pages, blogs, and modern marketing layouts.

Pagination with subtle drop shadows on each button for depth. The lifted look helps the controls stand out over busy backgrounds and image grids.

Pagination with prev and next pushed to opposite edges and page numbers centered. Spreads controls across wide footers and full width content areas.

Tabs styled as raised cards, where the active panel lifts above the rest. Great for settings pages or dashboards that group related content into sections.

Tabs with a soft color gradient on the active trigger for a vivid accent. Use them on landing pages or feature views where the switcher should draw the eye.

Tabs that pair a small icon with each label so options read at a glance. Good for navigation menus and toolbars where space is tight and clarity matters.

Clean tabs with a thin underline marking the active item and no extra borders. Fits content heavy pages where the switcher should stay quiet and unobtrusive.

Tabs wrapped in a light border that frames each trigger and the active panel. Suits forms or profile screens that need clear structure between grouped fields.

Tabs shaped as rounded pills with a filled background on the active one. Ideal for filter bars and segmented controls that toggle between a few short views.

Tabs where the selected trigger gains a subtle drop shadow for depth and focus. Works well on cards and panels that need a tactile, layered feel to the switch.

Tabs stacked in a sidebar column with panels rendered to the right. Built for settings, account, and documentation pages with many sections to navigate.