# Patternbook

> Layout patterns for developers building with AI agents.

Neutral layout patterns as React + Tailwind v4 or HTML + CSS. Apply the host project's design tokens and content. Each link returns a markdown brief with full source code. Use /catalog.json for metadata and /c/<slug>.react.md or /c/<slug>.html.md for one format.

## Sections

### Hero

- [Hero — Announcement rail and wide pitch](https://patternbook-w0x7y.vercel.app/c/hero-announcement-rail.md): A narrow announcement rail anchors the side of a wide text-only hero with two supporting facts.
- [Hero — Bento tiles](https://patternbook-w0x7y.vercel.app/c/hero-bento-tiles.md): A five-tile opening with a large headline tile, two media regions, a metric and a dark callout. Use it to introduce several kinds of evidence together.
- [Hero — Centred search bar](https://patternbook-w0x7y.vercel.app/c/hero-search-bar.md): A centred heading above a two-field search card and popular-query links. Use it when searching is the primary entry point.
- [Hero — Centred with email form](https://patternbook-w0x7y.vercel.app/c/hero-centered-form.md): A narrow centred hero with an inline email form, a hint and overlapping avatars. Use it to lead with one signup task without a large image.
- [Hero — Centred with media below](https://patternbook-w0x7y.vercel.app/c/hero-centered-media.md): A centred introduction and action pair above a wide screenshot and a logo row. Use it when a product overview and social proof should support the opening message.
- [Hero — Editorial headline and paired media](https://patternbook-w0x7y.vercel.app/c/hero-editorial-dual-media.md): A broad headline leads an unequal image pair with the lede and action in a narrow upper column.
- [Hero — Headline over wide media band](https://patternbook-w0x7y.vercel.app/c/hero-media-band.md): A divided headline and action intro above a panoramic image and three caption facts. Use it when a wide visual needs its own uninterrupted region.
- [Hero — Headline with stats row](https://patternbook-w0x7y.vercel.app/c/hero-headline-stats.md): An asymmetric opening with a supporting note and four figures below a divider. Use it when measured results reinforce the main claim.
- [Hero — Invitation with a request form](https://patternbook-w0x7y.vercel.app/c/hero-form-sidebar.md): A wide invitation pitch and expectation list sit beside a compact two-field request form.
- [Hero — Pitch beside a benefit checklist](https://patternbook-w0x7y.vercel.app/c/hero-pitch-checklist.md): A hero pairs the main pitch with a bordered benefit summary instead of a visual.
- [Hero — Split with image](https://patternbook-w0x7y.vercel.app/c/hero-split-image.md): Two-column hero with the pitch and actions beside one large image. Use it to open a landing page where a product shot or photo matters as much as the headline.
- [Hero — Text hero above an endorsement band](https://patternbook-w0x7y.vercel.app/c/hero-stacked-proof-band.md): A left-aligned text hero ends with a divided proof band containing one endorsement and a two-column logo group.
- [Hero — Text over full-bleed media](https://patternbook-w0x7y.vercel.app/c/hero-overlay-media.md): A full-width media background with a dark scrim and centred white opening copy. Use it when the background image sets the context for the headline.
- [Hero — Video with an explanatory sidebar](https://patternbook-w0x7y.vercel.app/c/hero-video-caption-sidebar.md): A spanning headline introduces a wide video with its caption and a separate narrow explanation column.

### Navbar

- [Navbar — Announcement, search and categories](https://patternbook-w0x7y.vercel.app/c/navbar-two-row-search.md): An announcement strip sits above a logo and search row, followed by wrapping category links; search stays visible on mobile. Use it when people browse categories and search equally often.
- [Navbar — App header with tabs](https://patternbook-w0x7y.vercel.app/c/navbar-app-tabs.md): Breadcrumbs, a project toolbar and page links form an app header, with an account menu that drops below the avatar and a scrollable tab strip on mobile. Use it for signed-in app pages that need global utilities and local navigation.
- [Navbar — Brand beside stacked navigation](https://patternbook-w0x7y.vercel.app/c/navbar-brand-utility-stack.md): An identity block sits beside two right-aligned rows for utility links and main destinations.
- [Navbar — Brand row and category tiles](https://patternbook-w0x7y.vercel.app/c/navbar-category-tile-strip.md): A compact brand row is followed by four equal bordered category destinations with inline icons.
- [Navbar — Breadcrumb and section toolbar](https://patternbook-w0x7y.vercel.app/c/navbar-breadcrumb-toolbar.md): A compact project bar pairs contextual breadcrumbs with a native section menu and sharing action.
- [Navbar — Centered brand with three zones](https://patternbook-w0x7y.vercel.app/c/navbar-centered-brand-zones.md): A centered brand separates destination links on the left from account actions on the right.
- [Navbar — Centred masthead](https://patternbook-w0x7y.vercel.app/c/navbar-centered-masthead.md): Utility links, a centred identity and a ruled topic row form a three-level masthead. Use it when the identity deserves more space than navigation.
- [Navbar — Dropdown menus](https://patternbook-w0x7y.vercel.app/c/navbar-dropdown-menus.md): A compact bar has two native dropdowns beside ordinary links, each panel listing four destinations with short descriptions. Use it for two small destination groups whose descriptions help readers choose.
- [Navbar — Floating pill](https://patternbook-w0x7y.vercel.app/c/navbar-floating-pill.md): A rounded navigation pill with four links and one action floats above a quiet section, and its mobile menu opens as a separate two-column card. Use it above a sparse landing page where navigation should float clear of the content.
- [Navbar — Link index with callout](https://patternbook-w0x7y.vercel.app/c/navbar-index-callout.md): A static header spreads identity, a numbered two-column index of eight destinations and a callout across unequal columns. Use it for a directory or archive where every destination should stay visible.
- [Navbar — Logo, links and actions](https://patternbook-w0x7y.vercel.app/c/navbar-links-actions.md): A logo, five page links, a login link and a primary action share one compact bar, and a native mobile menu keeps the primary action visible. Use it for a landing page with a small primary navigation and a conversion action.
- [Navbar — Mega menu panel](https://patternbook-w0x7y.vercel.app/c/navbar-mega-menu.md): A wide product panel pairs six destinations with a featured resource card, and mobile uses one flat native menu. Use it for a broad product suite whose destinations need short descriptions and a featured resource.
- [Navbar — Open two-column menu panel](https://patternbook-w0x7y.vercel.app/c/navbar-split-menu-panel.md): A simple brand row opens into an always-visible panel of large primary links and smaller resource destinations.
- [Navbar — Workspace sidebar rail](https://patternbook-w0x7y.vercel.app/c/navbar-sidebar-rail.md): A vertical navigation rail sits beside the current page heading and its actions.

### Features

- [Features — Accordion beside media](https://patternbook-w0x7y.vercel.app/c/features-accordion-media.md): Four expandable feature descriptions sit beside one shared media placeholder. Use it to keep detailed explanations compact while retaining visual context.
- [Features — Alternating media rows](https://patternbook-w0x7y.vercel.app/c/features-alternating-rows.md): Three spacious feature rows alternate a media placeholder and a detailed text block. Use it for benefits that each need their own visual and supporting checklist.
- [Features — Before and after panels](https://patternbook-w0x7y.vercel.app/c/features-comparison-panels.md): Two parallel panels compare a starting state and an improved state. Use it to make the change in a workflow easy to scan.
- [Features — Bento grid](https://patternbook-w0x7y.vercel.app/c/features-bento-grid.md): Unequal feature tiles combine one large media card, a metric, and three compact icon cards. Use it to give a leading capability more weight than supporting details.
- [Features — Capability scope matrix](https://patternbook-w0x7y.vercel.app/c/features-capability-matrix.md): A fixed-width semantic table compares capability scope across three working modes.
- [Features — Expandable capability cards](https://patternbook-w0x7y.vercel.app/c/features-expandable-card-grid.md): Three native disclosure cards reveal a short explanation, included details and a capability link.
- [Features — Icon grid](https://patternbook-w0x7y.vercel.app/c/features-icon-grid.md): Centred introduction above six icon-led features in an equal-column grid. Use it when benefits have similar weight and need quick scanning.
- [Features — Intro beside numbered list](https://patternbook-w0x7y.vercel.app/c/features-sidebar-list.md): A sticky introduction sits beside four numbered explanation rows. Use it for a longer sequence whose context should stay visible while readers scan the list.
- [Features — List beside media](https://patternbook-w0x7y.vercel.app/c/features-media-list.md): An icon-led feature list and introduction sit beside one large image. Use it when one screenshot supports several related capabilities.
- [Features — Numbered capability ledger](https://patternbook-w0x7y.vercel.app/c/features-numbered-ledger.md): Full-width numbered rows align a title, explanation and destination link in four columns.
- [Features — Numbered steps](https://patternbook-w0x7y.vercel.app/c/features-numbered-steps.md): Three numbered steps in equal columns lead to a full-width note and action. Use it to explain a short sequence with clear timing.
- [Features — Paired media and shared capabilities](https://patternbook-w0x7y.vercel.app/c/features-paired-media-shared-list.md): Two equal visual panels share one compact capability strip beneath their individual captions.
- [Features — Two grouped capability checklists](https://patternbook-w0x7y.vercel.app/c/features-grouped-checklists.md): Two labelled capability lists sit beneath one introduction with a shared action beneath them.
- [Features — Wide showcase with three captions](https://patternbook-w0x7y.vercel.app/c/features-wide-showcase-captions.md): A centered introduction leads one wide visual whose three caption columns explain separate capabilities.

### Pricing

- [Pricing — Annual price with a payment schedule](https://patternbook-w0x7y.vercel.app/c/pricing-annual-payment-schedule.md): A large annual amount sits beside a three-step timeline of payment, reminder and renewal.
- [Pricing — Base plan with optional additions](https://patternbook-w0x7y.vercel.app/c/pricing-base-plan-addons.md): One horizontal base plan sits above a separate three-card row of priced additions.
- [Pricing — Comparison table](https://patternbook-w0x7y.vercel.app/c/pricing-comparison-table.md): Grouped comparison table with three plan columns and a highlighted middle column. Use when precise limits and inclusions drive the choice.
- [Pricing — Free access and a custom pricing form](https://patternbook-w0x7y.vercel.app/c/pricing-free-custom-contact.md): An unequal pair contrasts a complete free offer with an email form for a custom agreement.
- [Pricing — Intro beside two plans](https://patternbook-w0x7y.vercel.app/c/pricing-intro-plans.md): An explanatory column beside two plans, with a shared-inclusions row below. Use to describe the offer outside its plan cards.
- [Pricing — License rows with shared inclusions](https://patternbook-w0x7y.vercel.app/c/pricing-license-rows-inclusions.md): Three selectable license rows keep prices aligned while one side panel holds the common inclusions.
- [Pricing — Option picker](https://patternbook-w0x7y.vercel.app/c/pricing-option-picker.md): Radio-card option picker with a changing price and adjacent inclusions panel. Use for one offer sold in three sizes.
- [Pricing — Price list rows](https://patternbook-w0x7y.vercel.app/c/pricing-price-list.md): Four indexed rows with descriptions, scope notes and right-aligned prices. Use for independently scoped options.
- [Pricing — Rates beside image](https://patternbook-w0x7y.vercel.app/c/pricing-media-rates.md): Portrait-format media beside four rates and one action. Use when an image explains what the rates provide access to.
- [Pricing — Seat cost and first payment breakdown](https://patternbook-w0x7y.vercel.app/c/pricing-seat-payment-breakdown.md): A highlighted first-payment total sits beside an invoice-style seat and setup breakdown.
- [Pricing — Single plan with benefits](https://patternbook-w0x7y.vercel.app/c/pricing-single-plan.md): One annual plan beside a six-benefit introduction and a member-count footer. Use when there is one paid offer to explain.
- [Pricing — Three tiers, middle highlighted](https://patternbook-w0x7y.vercel.app/c/pricing-three-tiers.md): Three equal plan cards beneath a monthly and yearly billing selector, with the middle plan emphasized. Use to compare three levels of access.
- [Pricing — Two plans](https://patternbook-w0x7y.vercel.app/c/pricing-two-plans.md): Two balanced plans with a dark second card and bottom-aligned actions. Use for an entry-level versus expanded-access choice.
- [Pricing — Usage bands with an example bill](https://patternbook-w0x7y.vercel.app/c/pricing-usage-bands-summary.md): Graduated unit rates sit beside a static example bill that shows how the bands combine.

### Testimonials

- [Testimonials — Audience and outcome table](https://patternbook-w0x7y.vercel.app/c/testimonials-audience-outcome-table.md): A three-column table pairs each audience with a quote and its result. Use it when readers compare proof relevant to different needs.
- [Testimonials — Before and after columns](https://patternbook-w0x7y.vercel.app/c/testimonials-before-after-columns.md): Two equally weighted quote panels separate the earlier difficulty from the later result. Use it to show a change through two customer statements.
- [Testimonials — Card grid](https://patternbook-w0x7y.vercel.app/c/testimonials-card-grid.md): Six equally weighted quote cards with ratings and bottom-aligned attributions. Use for several short endorsements.
- [Testimonials — Featured quote mosaic](https://patternbook-w0x7y.vercel.app/c/testimonials-featured-mosaic.md): A full-height lead quote beside two stacked supporting figures. Use to emphasize one customer story.
- [Testimonials — Lead quote over a supporting strip](https://patternbook-w0x7y.vercel.app/c/testimonials-lead-quote-strip.md): One centered lead quote spans above three borderless supporting statements. Use it to give a shared benefit prominence while preserving several voices.
- [Testimonials — Masonry wall](https://patternbook-w0x7y.vercel.app/c/testimonials-masonry.md): Eight variable-length quotes in CSS columns with one dark featured tile. Use for a dense wall of customer voices.
- [Testimonials — Quote timeline](https://patternbook-w0x7y.vercel.app/c/testimonials-quote-timeline.md): A date rail accompanies three vertically ordered customer quotes. Use it for evidence collected across a sequence of milestones.
- [Testimonials — Quote with metrics](https://patternbook-w0x7y.vercel.app/c/testimonials-quote-metrics.md): A muted quote panel beside a story introduction and three results. Use to connect endorsements with measurable outcomes.
- [Testimonials — Quotes beside image](https://patternbook-w0x7y.vercel.app/c/testimonials-media-quote.md): A portrait-format image beside two quotes separated by a hairline. Use when a visual connects related customer voices.
- [Testimonials — Rating distribution beside quotes](https://patternbook-w0x7y.vercel.app/c/testimonials-rating-distribution.md): A rating histogram sits beside two detailed quote panels. Use it to connect the distribution of feedback with specific customer experiences.
- [Testimonials — Rating summary and review list](https://patternbook-w0x7y.vercel.app/c/testimonials-review-list.md): A rating summary above four detailed reviews with reviewer identity columns. Use for scannable review content with dates.
- [Testimonials — Scrolling card row](https://patternbook-w0x7y.vercel.app/c/testimonials-scroll-row.md): Keyboard-scrollable strip of six quote cards with the next card peeking into view. Use for a compact collection without carousel buttons.
- [Testimonials — Single large quote](https://patternbook-w0x7y.vercel.app/c/testimonials-large-quote.md): One centred quote with glyph, attribution and story link. Use when one strong statement carries the proof.
- [Testimonials — Video stories with transcripts](https://patternbook-w0x7y.vercel.app/c/testimonials-video-transcript-grid.md): Three equal video panels pair short quotes with native transcript disclosures. Use it when readers can either watch a story or read its context.

### Call to action

- [Call to action — Audience choice cards](https://patternbook-w0x7y.vercel.app/c/cta-audience-choice-cards.md): Two equal action cards separate routes for readers with different needs. Use it when the next step depends on readiness or the kind of help required.
- [Call to action — Card with image](https://patternbook-w0x7y.vercel.app/c/cta-split-image.md): An inset panel with an edge-to-edge image on the left and action copy plus a detail footer on the right. Use it when an offer benefits from a visual and one extra decision detail.
- [Call to action — Centred with actions](https://patternbook-w0x7y.vercel.app/c/cta-centered-actions.md): A centred next-step message on an alternate surface with two actions and a reassurance line. Use it to close a page with a clear decision.
- [Call to action — Contact form](https://patternbook-w0x7y.vercel.app/c/cta-contact-form.md): A contact invitation and alternate email beside a compact form card. Use it when readers need to send a short enquiry.
- [Call to action — Contact route directory](https://patternbook-w0x7y.vercel.app/c/cta-contact-directory.md): Three full-width contact rows pair an icon and explanation with a text action. Use it to route several kinds of request without a form.
- [Call to action — Dated detail card](https://patternbook-w0x7y.vercel.app/c/cta-detail-card.md): An invitation beside a dated detail card with price, availability and a full-width action. Use it when the date and remaining capacity shape the decision.
- [Call to action — Detail card over media](https://patternbook-w0x7y.vercel.app/c/cta-overlay-media.md): A full-width media backdrop with left-aligned invitation copy and a white details card. Use it when readers need practical details before choosing an action.
- [Call to action — Email sign-up](https://patternbook-w0x7y.vercel.app/c/cta-email-signup.md): A top-divided signup band with copy beside a labelled email form. Use it for a newsletter or update subscription after other page content.
- [Call to action — Inline banner](https://patternbook-w0x7y.vercel.app/c/cta-inline-banner.md): A dark inset banner with a headline and lede beside an action pair. Use it as a compact callout between page sections.
- [Call to action — Numbered steps](https://patternbook-w0x7y.vercel.app/c/cta-numbered-steps.md): A next-step introduction beside a bordered three-step list. Use it when a short process makes the action easier to understand.
- [Call to action — Price and inclusions strip](https://patternbook-w0x7y.vercel.app/c/cta-price-inclusions-strip.md): A title, price and action share a top row above three inclusions and a terms strip. Use it for one clearly scoped paid next step.
- [Call to action — Readiness checklist close](https://patternbook-w0x7y.vercel.app/c/cta-readiness-checklist.md): A centered prerequisite checklist ends with one action beneath a divider. Use it when confirming readiness makes the next step easier.
- [Call to action — Resource download columns](https://patternbook-w0x7y.vercel.app/c/cta-resource-download.md): A document cover, topic checklist and download panel form three desktop columns. Use it when the content and file details help readers decide to download.
- [Call to action — Session time options](https://patternbook-w0x7y.vercel.app/c/cta-schedule-options.md): A centered invitation leads three radio choices and a confirmation action. Use it when readers need to select a session time before continuing.

### FAQ

- [FAQ — Accordion](https://patternbook-w0x7y.vercel.app/c/faq-accordion.md): A centred heading and introduction above five expandable question rows. Use it to answer common questions while keeping the section easy to scan.
- [FAQ — Accordion beside image](https://patternbook-w0x7y.vercel.app/c/faq-media-accordion.md): A tall image and caption sit beside an introduction and four expandable questions. Use it when a contextual visual supports the answers.
- [FAQ — Accordion beside intro](https://patternbook-w0x7y.vercel.app/c/faq-sidebar-accordion.md): An introduction and contact card sit beside six expandable questions. Use it to keep help information visible beside a compact answer list.
- [FAQ — Answer spotlight with contents](https://patternbook-w0x7y.vercel.app/c/faq-answer-spotlight.md): A compact contents panel accompanies one expanded answer with requirements and a next step. Use it for a single complex question.
- [FAQ — Category sidebar](https://patternbook-w0x7y.vercel.app/c/faq-category-sidebar.md): A sticky topic navigation sits beside four grouped accordion lists. Use it for a longer FAQ where readers need direct access to a topic.
- [FAQ — Comparison answer table](https://patternbook-w0x7y.vercel.app/c/faq-comparison-answers.md): Three questions are answered for two options in a comparison table. Use it when the same questions help readers choose between two routes.
- [FAQ — Decision branches](https://patternbook-w0x7y.vercel.app/c/faq-decision-branches.md): Two question panels each expose yes and no answer branches. Use it when the answer depends on the reader situation.
- [FAQ — Glossary answer rows](https://patternbook-w0x7y.vercel.app/c/faq-glossary-answers.md): Alphabet markers and term labels sit beside the questions they explain. Use it when unfamiliar terms cause repeated questions.
- [FAQ — Grouped topic cards](https://patternbook-w0x7y.vercel.app/c/faq-grouped-topics.md): Two topic cards each hold three independent expandable questions. Use it when a small FAQ naturally falls into two named groups.
- [FAQ — Nested topic disclosures](https://patternbook-w0x7y.vercel.app/c/faq-nested-topics.md): Two outer topic disclosures each contain two independent question disclosures. Use it to keep both topics and their answers compact.
- [FAQ — Open answer grid](https://patternbook-w0x7y.vercel.app/c/faq-qa-grid.md): Six always-visible answers form an icon-led three-column grid. Use it for short questions whose answers should remain available for scanning.
- [FAQ — Question and answer rows](https://patternbook-w0x7y.vercel.app/c/faq-question-rows.md): Five full-width static rows place questions beside their answers. Use it when answers are long enough to need a dedicated reading column.
- [FAQ — Question index over answers](https://patternbook-w0x7y.vercel.app/c/faq-question-index.md): A two-column anchor index sits above four always-visible answers. Use it for long-form answers that readers should be able to locate quickly.
- [FAQ — Two-column accordion](https://patternbook-w0x7y.vercel.app/c/faq-two-column-accordion.md): Eight independent questions form two separate accordion columns beneath an introduction and help note. Use it for a broad list with several answers open at once.

### Footer

- [Footer — Accordion sitemap](https://patternbook-w0x7y.vercel.app/c/footer-accordion-sitemap.md): A closing identity and back-to-top link precede three expandable sitemap groups. Use it for a compact directory that readers can reveal as needed.
- [Footer — Address beside a map](https://patternbook-w0x7y.vercel.app/c/footer-address-map.md): An identity and address sit beside a map placeholder and short page directory. Use it when finding a physical location is a useful final action.
- [Footer — Brand and link columns](https://patternbook-w0x7y.vercel.app/c/footer-link-columns.md): An identity block and four link groups lead into a copyright and legal row. Use it for a broad site directory.
- [Footer — Centred links](https://patternbook-w0x7y.vercel.app/c/footer-centered-links.md): A centred identity, wrapping links and social icons form a compact footer. Use it when six destinations are enough.
- [Footer — Closing call to action band](https://patternbook-w0x7y.vercel.app/c/footer-cta-band.md): A centred closing headline, lede and two actions sit above identity, three link groups and legal information. Use it to repeat the main conversion after a long page.
- [Footer — Contact, hours and directory](https://patternbook-w0x7y.vercel.app/c/footer-contact-hours.md): A phone and visit action lead into identity, a seven-day schedule and a two-column directory. Use it for visiting information.
- [Footer — Directory rows with descriptions](https://patternbook-w0x7y.vercel.app/c/footer-directory-rows.md): Three full-width directory rows pair group titles with descriptions and link sets. Use it when a broad directory should read from top to bottom.
- [Footer — Document register](https://patternbook-w0x7y.vercel.app/c/footer-document-register.md): A compact policy table includes document links, formats and update dates above copyright. Use it when published documents are the primary footer destinations.
- [Footer — Large numbered links](https://patternbook-w0x7y.vercel.app/c/footer-large-links.md): Identity and an audience figure sit beside three numbered destinations with descriptions. Use it for a short directory with prominent links.
- [Footer — Newsletter above links](https://patternbook-w0x7y.vercel.app/c/footer-newsletter-columns.md): A labelled signup form sits above four navigation groups and a legal bar. Use it when subscription is the final page action.
- [Footer — Oversized wordmark](https://patternbook-w0x7y.vercel.app/c/footer-big-wordmark.md): A dark divided footer ends with a giant, cropped Logo wordmark, with closing copy, links and contact above it. Use it for a strong visual close with a short directory and a contact route.
- [Footer — Single row](https://patternbook-w0x7y.vercel.app/c/footer-single-row.md): Identity and copyright, four links and social icons share one desktop row, and mobile stacks the three groups. Use it on a short page or an app shell.
- [Footer — Two audience directories](https://patternbook-w0x7y.vercel.app/c/footer-audience-directories.md): Two equally sized directory panels lead into a shared identity and legal bar. Use it when different audiences need separate final navigation.
- [Footer — Utility rail beside directory](https://patternbook-w0x7y.vercel.app/c/footer-utility-rail.md): A narrow utility panel contains identity, service status and language selection beside three directory columns. Use it when site-wide utilities belong in the footer.

## Cards & profiles

### Profile cards

- [Profile cards — Biography above a portrait footer](https://patternbook-w0x7y.vercel.app/c/profile-card-biography-identity-footer.md): A text-first profile introduction closes with a compact portrait, identity and profile link.
- [Profile cards — Centred with stats row](https://patternbook-w0x7y.vercel.app/c/profile-card-centered-stats.md): A centred avatar and identity above three metrics and a paired follow and message row. Use it for a compact public profile where activity counts matter.
- [Profile cards — Cover banner with overlapping avatar](https://patternbook-w0x7y.vercel.app/c/profile-card-cover-avatar.md): A short cover image above an overlapping avatar, biography and two profile facts. Use it when a cover and a compact identity need to share one card.
- [Profile cards — Expandable details](https://patternbook-w0x7y.vercel.app/c/profile-card-expandable-details.md): A right-aligned avatar beside identity text above expandable credentials and a profile link. Use it when background details can stay behind a native disclosure.
- [Profile cards — Identity and credential timeline](https://patternbook-w0x7y.vercel.app/c/profile-card-credential-timeline.md): A short chronological background list follows a compact identity row.
- [Profile cards — Identity and featured project](https://patternbook-w0x7y.vercel.app/c/profile-card-project-preview.md): A compact identity row sits above a wide project preview with a short caption and destination link.
- [Profile cards — Identity beside a vertical metric rail](https://patternbook-w0x7y.vercel.app/c/profile-card-vertical-stat-rail.md): Three small metrics form a narrow vertical rail beside the main profile content.
- [Profile cards — Identity row with details list](https://patternbook-w0x7y.vercel.app/c/profile-card-identity-details.md): A left-aligned identity row above three practical details and a full-width booking action. Use it when availability and profile facts inform the next step.
- [Profile cards — Identity with a contact grid](https://patternbook-w0x7y.vercel.app/c/profile-card-contact-grid.md): An identity row and brief biography precede four equal contact destinations.
- [Profile cards — Identity with available time slots](https://patternbook-w0x7y.vercel.app/c/profile-card-availability-slots.md): An identity card presents three native time choices and a booking destination.
- [Profile cards — Portrait column beside text](https://patternbook-w0x7y.vercel.app/c/profile-card-portrait-side.md): A persistent portrait column beside a short identity, followed by a full-width current-focus strip. Use it when a person and one current project deserve equal attention.
- [Profile cards — Row with follow toggle](https://patternbook-w0x7y.vercel.app/c/profile-card-inline-follow.md): A compact identity row with a native follow checkbox, a short bio and two counts. Use it for a suggested person or lightweight social profile.
- [Profile cards — Status badge with skill tags](https://patternbook-w0x7y.vercel.app/c/profile-card-status-skills.md): An availability badge beside an avatar, followed by identity, a positioning statement and skill tags. Use it for a person whose availability and skills drive contact.

### Team

- [Team — Centred header with portrait grid](https://patternbook-w0x7y.vercel.app/c/team-portrait-grid.md): A centred introduction above eight portraits with names, roles and contact links. Use it for an equally weighted overview of a team.
- [Team — Chronological roster with avatar ends](https://patternbook-w0x7y.vercel.app/c/team-chronological-roster.md): A year rail and aligned biography rows trace when four people joined the group.
- [Team — Department columns with compact rosters](https://patternbook-w0x7y.vercel.app/c/team-department-columns.md): Three equal department columns contain a short focus statement and small avatar rosters.
- [Team — Expandable biography list](https://patternbook-w0x7y.vercel.app/c/team-expandable-bios.md): A narrow list of five people with native expandable biographies and contact links. Use it to keep longer introductions available without showing every biography at once.
- [Team — Featured lead with roster](https://patternbook-w0x7y.vercel.app/c/team-featured-lead-roster.md): A featured lead card with a wide portrait beside a compact four-person roster. Use it when one person needs a fuller introduction than the rest of the team.
- [Team — Group portrait and individual contacts](https://patternbook-w0x7y.vercel.app/c/team-group-media-roster.md): A shared group photograph sits beside a two-column set of individual contact summaries.
- [Team — Groups with label column](https://patternbook-w0x7y.vercel.app/c/team-grouped-label-column.md): Two labelled groups of portraits beneath a split header and open-roles link. Use it when readers need to understand the teams within an organisation.
- [Team — Intro beside roster list](https://patternbook-w0x7y.vercel.app/c/team-split-roster-list.md): A sticky introduction beside a six-person avatar roster with email controls. Use it for a compact team overview with a recruitment action.
- [Team — Portrait and biography rows](https://patternbook-w0x7y.vercel.app/c/team-bio-rows.md): Two spacious biography rows with a portrait column and two paragraphs of text. Use it for people whose experience and working approach need a fuller introduction.
- [Team — Team roster as a contact table](https://patternbook-w0x7y.vercel.app/c/team-roster-contact-table.md): A compact semantic table aligns names, roles, focus areas and individual email links.
- [Team — Tile directory](https://patternbook-w0x7y.vercel.app/c/team-tile-directory.md): Six compact contact tiles in one hairline-divided panel beneath a split header. Use it for a directory where names, roles, time zones and email matter more than portraits.
- [Team — Two horizontal profile spotlights](https://patternbook-w0x7y.vercel.app/c/team-duo-spotlights.md): Two bordered horizontal portrait profiles share a short collaboration note beneath them.
- [Team — Working principles with identity footers](https://patternbook-w0x7y.vercel.app/c/team-principle-profile-cards.md): Text-first cards introduce each person through a working principle and close with identity and profile links.

### Product cards

- [Product cards — Compact product order summary](https://patternbook-w0x7y.vercel.app/c/product-card-compact-order-summary.md): A small product thumbnail and quantity lead a three-row order cost summary.
- [Product cards — Digital product with included files](https://patternbook-w0x7y.vercel.app/c/product-card-included-download-list.md): A small icon-led identity block lists three included digital files above its price and action.
- [Product cards — Featured product and related list](https://patternbook-w0x7y.vercel.app/c/product-card-featured-collection-list.md): One large featured product sits beside three compact related item rows.
- [Product cards — Four-column product grid](https://patternbook-w0x7y.vercel.app/c/product-card-four-column-grid.md): Eight product tiles in a responsive two-to-four-column grid under a heading and catalogue link. Use it for a product collection with image, variant count and price.
- [Product cards — Horizontal with media column](https://patternbook-w0x7y.vercel.app/c/product-card-horizontal-media.md): A compact product row with an image column beside product information and an add action. Use it in search results, recommendations or a list view.
- [Product cards — Image with overlaid badge and actions](https://patternbook-w0x7y.vercel.app/c/product-card-overlay-actions.md): A frameless product card with a sale badge, wishlist checkbox and cart action over its image. Use it when shoppers need quick actions directly in a grid.
- [Product cards — Image with price footer](https://patternbook-w0x7y.vercel.app/c/product-card-media-footer.md): A full-width product image above a short description and a separate price-and-link footer. Use it for product cards where the next step is viewing details.
- [Product cards — Paired product bundle](https://patternbook-w0x7y.vercel.app/c/product-card-paired-item-bundle.md): Two equal item images lead one shared bundle description and a price comparison.
- [Product cards — Specs row with price footer](https://patternbook-w0x7y.vercel.app/c/product-card-spec-columns.md): A compact product card with a media band, three specification columns and a price/action footer. Use it for products whose format and quantities inform the purchase.
- [Product cards — Three-view gallery card](https://patternbook-w0x7y.vercel.app/c/product-card-three-view-gallery.md): A large product image and two stacked thumbnails sit above an aligned name, price and action.
- [Product cards — Thumbnail and expandable specifications](https://patternbook-w0x7y.vercel.app/c/product-card-expandable-specifications.md): A thumbnail-led identity block reveals three specification rows through a native disclosure.
- [Product cards — Variant picker](https://patternbook-w0x7y.vercel.app/c/product-card-variant-picker.md): A product card with colour swatches and size radios above a cart action. Use it when shoppers can choose variants without opening a detail page.

### Stat cards

- [Stat cards — Activity calendar](https://patternbook-w0x7y.vercel.app/c/stat-card-activity-calendar.md): A current count leads a four-week calendar heatmap and a text explanation. Use it to show activity frequency over a short period.
- [Stat cards — Benchmark range](https://patternbook-w0x7y.vercel.app/c/stat-card-benchmark-range.md): A horizontal range shows the current figure and a separate benchmark marker above two comparison details. Use it when a reference point matters more than a completion target.
- [Stat cards — Figure with bar chart](https://patternbook-w0x7y.vercel.app/c/stat-card-bar-chart.md): A figure and comparison sit above six bottom-aligned monthly bars, followed by a chart note. Use it when the shape of a recent trend matters alongside its current value.
- [Stat cards — Figure with change and link](https://patternbook-w0x7y.vercel.app/c/stat-card-figure-delta.md): A single metric above an explicit change badge and a report link in a divided footer. Use it for a dashboard figure that needs a comparison and a route to detail.
- [Stat cards — Icon, label and value row](https://patternbook-w0x7y.vercel.app/c/stat-card-icon-inline.md): An icon tile, a label and figure, and a directional change badge share one compact row. Use it for stacked dashboard summaries or a row of short metrics.
- [Stat cards — Paired reporting periods](https://patternbook-w0x7y.vercel.app/c/stat-card-paired-periods.md): Current and previous values occupy two equal columns above an absolute-change footer. Use it when both totals are needed for a fair comparison.
- [Stat cards — Progress toward a target](https://patternbook-w0x7y.vercel.app/c/stat-card-progress-target.md): A current value shares a baseline with its target above a horizontal progress bar and remaining amount. Use it for a bounded goal with a clear total and deadline.
- [Stat cards — Ranked contributor list](https://patternbook-w0x7y.vercel.app/c/stat-card-ranked-contributors.md): A total leads three ranked names with counts and an all-contributors link. Use it when readers need to identify the main contributors to a metric.
- [Stat cards — Ring gauge beside summary](https://patternbook-w0x7y.vercel.app/c/stat-card-ring-gauge.md): A percentage ring and comparison sit side by side above two totals and a report link. Use it for a rate that needs both a quick visual and supporting counts.
- [Stat cards — Stage funnel](https://patternbook-w0x7y.vercel.app/c/stat-card-stage-funnel.md): Three sequential stage totals descend beneath an overall conversion figure. Use it to expose where a process narrows.
- [Stat cards — Three metrics in one panel](https://patternbook-w0x7y.vercel.app/c/stat-card-joined-trio.md): Three linked metrics share a panel, appearing as rows on mobile and equal columns on desktop. Use it for a related group of dashboard figures with one reporting period.
- [Stat cards — Threshold status rail](https://patternbook-w0x7y.vercel.app/c/stat-card-threshold-status.md): A three-band status rail sits beside the current percentage and its allowed limits. Use it to summarize a metric with lower and upper thresholds.
- [Stat cards — Total with breakdown rows](https://patternbook-w0x7y.vercel.app/c/stat-card-breakdown-rows.md): A headline total and icon sit above three labelled share bars and an expandable counting note. Use it to show the composition of one metric without a full chart.

### Testimonial cards

- [Testimonial cards — Attribution rail beside quote](https://patternbook-w0x7y.vercel.app/c/testimonial-card-attribution-rail.md): A narrow avatar and author rail sits beside a quote and interview link. Use it when author identity should stay visible alongside the statement.
- [Testimonial cards — Before and after statements](https://patternbook-w0x7y.vercel.app/c/testimonial-card-before-after.md): Two short quote regions distinguish the previous difficulty from the later result above one shared author. Use it for a concise transformation statement.
- [Testimonial cards — Centred quote with logo](https://patternbook-w0x7y.vercel.app/c/testimonial-card-centered-quote.md): A centred logo and balanced quote sit above a vertically stacked avatar, name and role. Use it for a short statement that should read as a single focal point.
- [Testimonial cards — Criteria scores with quote](https://patternbook-w0x7y.vercel.app/c/testimonial-card-criteria-scores.md): A reviewer header leads three criterion scores and one explanatory quote. Use it when feedback covers several specific qualities.
- [Testimonial cards — Outcome figure above quote](https://patternbook-w0x7y.vercel.app/c/testimonial-card-metric-lead.md): An outcome figure and label lead a short quote, byline and case-study link. Use it when a measurable result is the most useful proof point.
- [Testimonial cards — Portrait column beside quote](https://patternbook-w0x7y.vercel.app/c/testimonial-card-portrait-side.md): A narrow portrait stretches beside a quote and bottom-aligned author, with both columns retained on mobile. Use it when the author image should be part of the card's main structure.
- [Testimonial cards — Quote and source citation](https://patternbook-w0x7y.vercel.app/c/testimonial-card-source-citation.md): A slim numbered annotation rail aligns with a quote and a separate source block. Use it when the original interview or publication should be easy to trace.
- [Testimonial cards — Quote with author footer](https://patternbook-w0x7y.vercel.app/c/testimonial-card-quote-author.md): A logo leads a left-aligned quote, followed by an author and avatar under a divider. Use it for a standalone recommendation with clear company attribution.
- [Testimonial cards — Social post](https://patternbook-w0x7y.vercel.app/c/testimonial-card-social-post.md): An author-first post card with a handle, platform glyph, mention and timestamp doubles as a link to the source. Use it for public feedback whose original context matters.
- [Testimonial cards — Speech bubble with author below](https://patternbook-w0x7y.vercel.app/c/testimonial-card-speech-bubble.md): A tinted quotation bubble with a small tail sits above an indented avatar and author. Use it when the quote and attribution should read as separate regions.
- [Testimonial cards — Star rating review](https://patternbook-w0x7y.vercel.app/c/testimonial-card-rating-review.md): A star rating and verified badge lead a review title and body, with reviewer, date and usage details below a divider. Use it for a review where rating and provenance matter.
- [Testimonial cards — Two connected voices](https://patternbook-w0x7y.vercel.app/c/testimonial-card-two-voices.md): Two short quotes and compact bylines share one divided card. Use it when two perspectives support the same outcome.
- [Testimonial cards — Video with transcript excerpt](https://patternbook-w0x7y.vercel.app/c/testimonial-card-video-transcript.md): A compact video region leads a quote, byline and expandable transcript excerpt. Use it when a short recorded statement benefits from a readable alternative.

### Blog cards

- [Blog cards — Abstract and citation](https://patternbook-w0x7y.vercel.app/c/blog-card-abstract-citation.md): An article title leads an indented abstract and a labelled citation block. Use it for research or analysis whose provenance should remain visible.
- [Blog cards — Article contents card](https://patternbook-w0x7y.vercel.app/c/blog-card-table-of-contents.md): A title and short excerpt lead a three-link contents list and author metadata. Use it for a structured article whose sections help readers choose what to read.
- [Blog cards — Cover image above text](https://patternbook-w0x7y.vercel.app/c/blog-card-cover-stacked.md): A cover image above article metadata, headline and excerpt, with a separate author footer. Use it for article grids where covers establish the browsing rhythm.
- [Blog cards — Date column beside text](https://patternbook-w0x7y.vercel.app/c/blog-card-date-column.md): A narrow publication-date column separated from headline and excerpt by a vertical divider. Use it for news, announcements and event write-ups.
- [Blog cards — Document preview and report](https://patternbook-w0x7y.vercel.app/c/blog-card-document-preview.md): A narrow document-page preview accompanies report metadata, title and excerpt above a shared footer. Use it for long-form downloadable editorial content.
- [Blog cards — Featured post with list](https://patternbook-w0x7y.vercel.app/c/blog-card-featured-with-list.md): A prominent featured article beside three compact article rows. Use it for an editorial section with one leading story and supporting links.
- [Blog cards — Issue editorial](https://patternbook-w0x7y.vercel.app/c/blog-card-issue-editorial.md): A large issue number shares a header with publication metadata above the article title. Use it for an editorial series with recognizable issue numbering.
- [Blog cards — Media column beside text](https://patternbook-w0x7y.vercel.app/c/blog-card-media-left.md): An article card that stacks on mobile and places a full-height image beside its text on desktop. Use it for a prominent story in a feed or search result.
- [Blog cards — Ordered article series](https://patternbook-w0x7y.vercel.app/c/blog-card-series-index.md): Three numbered article links form a compact series card beneath a shared heading. Use it when reading order is part of the content.
- [Blog cards — Paired article digest](https://patternbook-w0x7y.vercel.app/c/blog-card-paired-digest.md): Two equally weighted article summaries share a digest header and form desktop columns. Use it for a small curated reading pair.
- [Blog cards — Text only with author header](https://patternbook-w0x7y.vercel.app/c/blog-card-text-only.md): An author row leads a text-only article card, with the date and category below the excerpt. Use it for updates and essays where the writer helps readers choose what to read.
- [Blog cards — Text over full-bleed media](https://patternbook-w0x7y.vercel.app/c/blog-card-text-on-media.md): A full-bleed article image with a category badge and a dark bottom headline panel. Use it for one featured or pinned post.
- [Blog cards — Text with thumbnail at right](https://patternbook-w0x7y.vercel.app/c/blog-card-thumb-right.md): A compact article card with headline text beside a right thumbnail and an excerpt below. Use it when a small image supports a text-led list.

## Elements

### Buttons

- [Buttons — Bulk selection bar](https://patternbook-w0x7y.vercel.app/c/buttons-bulk-selection-bar.md): A selection summary and clear control form one row above a grouped pair of batch actions. Use for a compact selection toolbar.
- [Buttons — Command tiles with descriptions](https://patternbook-w0x7y.vercel.app/c/buttons-command-tiles.md): Four large command buttons form a two-column grid with icons, titles and one-line descriptions. Use to present a small set of starting actions.
- [Buttons — Confirmation footer](https://patternbook-w0x7y.vercel.app/c/buttons-confirmation-footer.md): A short decision summary leads to a divided footer with Cancel and Confirm on opposite sides. Use when an action needs a final explanation before confirmation.
- [Buttons — Icon toolbar with primary action](https://patternbook-w0x7y.vercel.app/c/buttons-toolbar.md): A compact toolbar groups icon actions beside a primary save action. Use it when frequent editing tools need short accessible names and hover or focus tooltips.
- [Buttons — Inline actions below item rows](https://patternbook-w0x7y.vercel.app/c/buttons-item-row-actions.md): Two divided item summaries each carry a row of text actions below the title and update date. Use when item commands should remain visible without a menu.
- [Buttons — Joined button groups](https://patternbook-w0x7y.vercel.app/c/buttons-joined-group.md): Three connected control groups show related actions, an action paired with a count, and pagination. Use them where adjoining controls share one task or value.
- [Buttons — Previous and next destination cards](https://patternbook-w0x7y.vercel.app/c/buttons-directional-links.md): Two outlined destination links pair directional icons with small Previous or Next labels and item titles. Use for browsing adjacent records or lessons.
- [Buttons — Primary, secondary and tertiary](https://patternbook-w0x7y.vercel.app/c/buttons-hierarchy.md): An action hierarchy with primary, secondary and tertiary buttons, plus destructive, icon-only, disabled and loading variants. Use it to compare action emphasis and control states.
- [Buttons — Sizes and icon placement](https://patternbook-w0x7y.vercel.app/c/buttons-sizes-icons.md): Three captioned size rows compare leading icons, trailing icons and icon-only actions. Use them to choose a control size without changing the action hierarchy.
- [Buttons — Split button with menu](https://patternbook-w0x7y.vercel.app/c/buttons-split-menu.md): Two split buttons pair immediate actions with native expandable option panels. Use them to keep a common action visible while offering related alternatives.
- [Buttons — Stacked full-width actions](https://patternbook-w0x7y.vercel.app/c/buttons-stacked-full-width.md): A compact action card places a full-width primary button above two secondary actions, a tertiary link and guidance. Use it for a focused action group with a clear first choice.
- [Buttons — Step navigation with progress](https://patternbook-w0x7y.vercel.app/c/buttons-wizard-navigation.md): A three-step progress strip sits above a Back and Continue pair, with a separate save link. Use at the end of a short multi-step form.

### Inputs

- [Inputs — Date range with a shared note](https://patternbook-w0x7y.vercel.app/c/inputs-date-range.md): A bordered date-range fieldset contains labelled Start and End inputs with a shared timezone note. Use for a bounded reporting or booking period.
- [Inputs — Dimensions with proportions and units](https://patternbook-w0x7y.vercel.app/c/inputs-dimension-pair.md): Two numeric dimension fields share a multiplication divider, followed by a proportion checkbox and a units select. Use for a compact width and height editor.
- [Inputs — Field grid with mixed widths](https://patternbook-w0x7y.vercel.app/c/inputs-field-grid.md): Three field rows combine full width, flexible plus fixed width, and equal columns. Use for compact related information with different expected lengths.
- [Inputs — Label, hint and error states](https://patternbook-w0x7y.vercel.app/c/inputs-field-anatomy.md): Three labelled fields compare default, error and disabled anatomy. Use them to keep field messages and state cues consistent.
- [Inputs — Labels inside tall fields](https://patternbook-w0x7y.vercel.app/c/inputs-floating-labels.md): Two tall fields keep their labels inside the border and raise them when focused or filled. Use when compact forms need persistent field names.
- [Inputs — Leading and trailing addons](https://patternbook-w0x7y.vercel.app/c/inputs-leading-trailing-addons.md): Four labelled fields show attached text, a currency pair, an inset icon and a trailing action. Use when a field needs context inside its boundary.
- [Inputs — One-time code row](https://patternbook-w0x7y.vercel.app/c/inputs-otp-row.md): Six single-digit fields are grouped around a dash above Verify and Resend actions. Use for a short numeric verification code.
- [Inputs — Range with endpoints and an exact field](https://patternbook-w0x7y.vercel.app/c/inputs-range-endpoints.md): A range slider shows its minimum and maximum beneath the track, beside a compact numeric field. Use when users may choose approximately or enter an exact value.
- [Inputs — Search with scope filters](https://patternbook-w0x7y.vercel.app/c/inputs-search-scopes.md): A search field sits above radio scope pills and three recent-query links. Use for a compact search entry point with native scope selection.
- [Inputs — Textarea with counter and action bar](https://patternbook-w0x7y.vercel.app/c/inputs-textarea-counter.md): A labelled textarea shares a boundary with attach, mention, counter and Post controls. Use for a short optional message composer.
- [Inputs — URL field with a linked-page preview](https://patternbook-w0x7y.vercel.app/c/inputs-linked-url-preview.md): A labelled URL field sits above a small linked-page summary with a remove control. Use when a saved link needs context beyond its address.
- [Inputs — Upload zone with a native file field](https://patternbook-w0x7y.vercel.app/c/inputs-file-dropzone.md): A dashed upload zone places a file glyph, a short heading and a native file chooser above format guidance. Use for one accessible document attachment.

### Badges

- [Badges — Access badges in a comparison table](https://patternbook-w0x7y.vercel.app/c/badges-access-matrix.md): A small comparison table uses status pills across two access columns for three named groups. Use when readers need to compare permissions at a glance.
- [Badges — Capability badges in a small grid](https://patternbook-w0x7y.vercel.app/c/badges-capability-grid.md): A two-column grid places a small capability icon and state badge above each feature title. Use to compare availability without a large feature table.
- [Badges — Counts and dot indicators](https://patternbook-w0x7y.vercel.app/c/badges-count-indicators.md): Three icon or avatar links carry overlapping indicators above navigation rows with counts. Use for unread counts and compact presence cues.
- [Badges — Document header with provenance](https://patternbook-w0x7y.vercel.app/c/badges-provenance-header.md): A document heading pairs with a compact version badge, followed by ownership metadata and a divided verification footer. Use to summarize one maintained document.
- [Badges — Featured credential with tags](https://patternbook-w0x7y.vercel.app/c/badges-credential-plate.md): A credential card pairs a grade plate with its name, issuer and verification, followed by tags and issue metadata. Use for one compact credential summary.
- [Badges — Grouped totals with state labels](https://patternbook-w0x7y.vercel.app/c/badges-grouped-counters.md): Three divided counter columns pair totals with descriptive labels and state pills. Use to show a compact breakdown of one collection.
- [Badges — Joined label and value tokens](https://patternbook-w0x7y.vercel.app/c/badges-label-value-tokens.md): Four joined metadata tokens divide a muted field label from its current value. Use for a small attribute summary where each value needs its own label.
- [Badges — Labelled tag groups](https://patternbook-w0x7y.vercel.app/c/badges-tag-groups.md): An item ID and title lead three labelled metadata groups for priority, labels and owners. Use for compact item classification.
- [Badges — Milestone status strip](https://patternbook-w0x7y.vercel.app/c/badges-milestone-strip.md): Three milestone columns pair a status badge with a short title and date beneath a continuous rule. Use to summarize progress across a small sequence.
- [Badges — Removable filter chips](https://patternbook-w0x7y.vercel.app/c/badges-removable-chips.md): Active filters appear as wrapping chips with individual remove actions, an add control and a result count. Use for a compact applied-filter summary.
- [Badges — Status in list rows](https://patternbook-w0x7y.vercel.app/c/badges-status-list.md): Four divided item rows pair names and timestamps with distinct status glyphs and words. Use for a compact status summary.
- [Badges — Styles, sizes and indicators](https://patternbook-w0x7y.vercel.app/c/badges-variant-set.md): Three captioned rows compare badge treatments, indicators, and shape or size. Use as a neutral badge vocabulary with each variation named.

### Toggles

- [Toggles — Checkbox group with nested options](https://patternbook-w0x7y.vercel.app/c/toggles-checkbox-nested.md): A checkbox fieldset reveals two indented choices while its parent is checked. Use it for independent preferences with optional detail choices and a disabled example.
- [Toggles — Checkbox tile grid](https://patternbook-w0x7y.vercel.app/c/toggles-checkbox-tile-grid.md): Seven day tiles combine independent checkboxes with visible check marks. Use them to select a recurring schedule while preserving clear names and disabled states.
- [Toggles — Checklist rows with descriptions](https://patternbook-w0x7y.vercel.app/c/toggles-checklist-rows.md): A compact checklist pairs native checkboxes with item descriptions and small requirement badges. Use when independent choices need a little context.
- [Toggles — Consent row with a separate explanation](https://patternbook-w0x7y.vercel.app/c/toggles-inline-consent.md): A short policy explanation sits above a divided checkbox row with a status word that follows its checked state. Use for one explicit consent decision.
- [Toggles — Enabled mode with a summary preview](https://patternbook-w0x7y.vercel.app/c/toggles-master-detail-summary.md): A checkbox header switches between a disabled note and a compact two-column summary preview. Use when one mode changes the information shown below it.
- [Toggles — Icon radio choice grid](https://patternbook-w0x7y.vercel.app/c/toggles-icon-choice-grid.md): Four layout radios appear as a two-column icon grid with short labels and checked markers. Use for a small set of visual presentation choices.
- [Toggles — Permission checkbox matrix](https://patternbook-w0x7y.vercel.app/c/toggles-permission-matrix.md): A permission table places native checkboxes at the intersections of three groups and three capabilities. Use when each capability can be enabled independently.
- [Toggles — Radio cards](https://patternbook-w0x7y.vercel.app/c/toggles-radio-cards.md): Three selectable cards combine a radio indicator, short plan details and a price. Use them when mutually exclusive choices need more explanation than a segmented control can hold.
- [Toggles — Segmented controls and toggle buttons](https://patternbook-w0x7y.vercel.app/c/toggles-segmented-control.md): Three compact fieldsets combine a text radio group, an icon radio group and independent formatting toggles. Use them to distinguish mutually exclusive choices from multi-select controls.
- [Toggles — Settings list with switches](https://patternbook-w0x7y.vercel.app/c/toggles-switch-list.md): A compact settings card lists four labelled switches with supporting hints and one managed setting. Use it when each preference takes effect independently.
- [Toggles — Switch states and sizes](https://patternbook-w0x7y.vercel.app/c/toggles-switch-states.md): Two columns compare default and small switches in off, on and disabled states. Use them to choose switch dimensions and review native state and focus behavior.
- [Toggles — Switch with dependent delivery options](https://patternbook-w0x7y.vercel.app/c/toggles-switch-dependent-options.md): An enabling switch sits above a separate bordered group of delivery choices that appears when enabled. Use for a parent preference with optional details.

### Tabs

- [Tabs — Bottom bar with icons](https://patternbook-w0x7y.vercel.app/c/tabs-bottom-icon-bar.md): A framed preview sits above four icon-and-label radio choices in a bottom bar. Use for compact views where a media region should retain visual prominence.
- [Tabs — Centered period choices and a metric](https://patternbook-w0x7y.vercel.app/c/tabs-centered-metric.md): A centered heading and three period choices sit above a prominent total and short explanation. Use to compare one metric over a few time periods.
- [Tabs — Counted links with More menu](https://patternbook-w0x7y.vercel.app/c/tabs-link-overflow.md): Navigation links with count pills share an underline row, and extra destinations move into a More disclosure on narrow screens. Use it for page navigation with counts when some secondary destinations should collapse on mobile.
- [Tabs — Counted views beneath a toolbar](https://patternbook-w0x7y.vercel.app/c/tabs-counted-toolbar.md): A collection heading and add control sit above counted view choices and a short item list. Use when a collection needs both view selection and a nearby creation action.
- [Tabs — Disclosure selector that becomes a tab row](https://patternbook-w0x7y.vercel.app/c/tabs-responsive-disclosure.md): A mobile disclosure lists three view choices above the active panel and becomes a simple row on wider screens while open. Use when the selector needs a compact mobile affordance.
- [Tabs — Enclosed tabs on a bordered panel](https://patternbook-w0x7y.vercel.app/c/tabs-enclosed-panel.md): Folder-shaped radio choices merge into a bordered content panel. Use to group a short explanation and action within one framed record view.
- [Tabs — Grouped view choices in two columns](https://patternbook-w0x7y.vercel.app/c/tabs-grouped-navigation.md): Two labelled groups arrange four view choices in a two-column selector above one shared content panel. Use when related views fall into two clear categories.
- [Tabs — Numbered stage views](https://patternbook-w0x7y.vercel.app/c/tabs-numbered-stages.md): Three numbered radio stages sit above a compact requirement panel. Use to inspect the content expected at each stage of a short process.
- [Tabs — Segmented pills with panel](https://patternbook-w0x7y.vercel.app/c/tabs-segmented-pills.md): A three-segment radio track switches between compact avatar lists. Use for inbox views, saved items or another short collection.
- [Tabs — Selector cards above a content panel](https://patternbook-w0x7y.vercel.app/c/tabs-selector-cards.md): Two descriptive selector cards switch a bordered panel between a prose preview and key-value summary. Use when the view choices need more context than short tab labels.
- [Tabs — Underline with panels](https://patternbook-w0x7y.vercel.app/c/tabs-underline-panels.md): Three underline radio choices switch between a heading, supporting copy and compact label/value rows. Use for related views of one record.
- [Tabs — Vertical rail with panel](https://patternbook-w0x7y.vercel.app/c/tabs-vertical-rail.md): Four radio choices form a narrow icon rail beside a bordered content panel. Use when category navigation should stay beside a compact explanation and action.

### Dropdowns

- [Dropdowns — Account menu with profile header](https://patternbook-w0x7y.vercel.app/c/dropdowns-account-menu.md): A right-aligned avatar disclosure opens a profile header, account links and a separate sign-out action. Use for compact signed-in account navigation.
- [Dropdowns — Action menu with sections and shortcuts](https://patternbook-w0x7y.vercel.app/c/dropdowns-action-menu.md): An open action disclosure groups icon commands, shortcut hints and a separate deletion action. Use for compact secondary actions on one item.
- [Dropdowns — Breadcrumb branch disclosure](https://patternbook-w0x7y.vercel.app/c/dropdowns-breadcrumb-branch.md): A breadcrumb row opens a branch list beneath its middle segment, exposing a parent collection and two sibling destinations. Use to navigate a shallow hierarchy.
- [Dropdowns — Disclosure with paired native settings](https://patternbook-w0x7y.vercel.app/c/dropdowns-display-settings.md): An outlined display-settings trigger opens two labelled native selects with a shared explanation. Use to adjust compact collection preferences in one place.
- [Dropdowns — Filter menu with checkboxes](https://patternbook-w0x7y.vercel.app/c/dropdowns-filter-checkboxes.md): An open filter disclosure combines search, counted checkbox rows and separate Clear and Apply actions. Use when several pending filter choices need one apply step.
- [Dropdowns — Navigation flyout with descriptions](https://patternbook-w0x7y.vercel.app/c/dropdowns-nav-flyout.md): A compact navigation row opens a full-width flyout with icon tiles, description links and a muted footer. Use for a small set of product destinations.
- [Dropdowns — Nested destination disclosures](https://patternbook-w0x7y.vercel.app/c/dropdowns-nested-destinations.md): A destination panel groups links in nested native disclosures and ends with a browse-all link. Use for a small hierarchy that benefits from collapsible groups.
- [Dropdowns — Picker with option tiles](https://patternbook-w0x7y.vercel.app/c/dropdowns-tile-picker.md): An input-shaped time disclosure opens a three-column grid of radio tiles. Use it to choose one time from a short list of slots.
- [Dropdowns — Select menu with descriptions](https://patternbook-w0x7y.vercel.app/c/dropdowns-select-descriptions.md): An input-shaped disclosure opens three radio options, each with a short description. Use it to choose one option when each choice needs an explanation.
- [Dropdowns — Sort field and direction panel](https://patternbook-w0x7y.vercel.app/c/dropdowns-sort-direction.md): A sorting disclosure combines a vertical field choice with two side-by-side direction controls. Use when the sort key and direction should be changed independently.
- [Dropdowns — Two-column commands and resources](https://patternbook-w0x7y.vercel.app/c/dropdowns-two-column-commands.md): An open disclosure places record commands beside helpful resource links, followed by one full-width destination. Use to keep action and guidance groups visible together.
- [Dropdowns — Workspace switcher with a create action](https://patternbook-w0x7y.vercel.app/c/dropdowns-workspace-switcher.md): A workspace disclosure lists two radio choices with initials, access hints and a separate create action. Use when one active workspace needs an explicit identity.

## App UI

### Login

- [Login — Account picker with credential pane](https://patternbook-w0x7y.vercel.app/c/login-account-picker.md): Saved accounts form a selection column beside the password pane. Use when people return to one of several accounts.
- [Login — Card over full-bleed media](https://patternbook-w0x7y.vercel.app/c/login-card-on-media.md): A floating credential card over a full-width image placeholder, aligned right on desktop. Use when media should fill the sign-in view.
- [Login — Centred card](https://patternbook-w0x7y.vercel.app/c/login-centered-card.md): A compact credential card with a logo, password recovery and remember-me row. Use it for a familiar sign-in page with no supporting content.
- [Login — Context column beside form](https://patternbook-w0x7y.vercel.app/c/login-split-context.md): An account-context column with three icon rows beside a bordered credential form. Use to explain access, protection or availability before users sign in.
- [Login — Inline credential row](https://patternbook-w0x7y.vercel.app/c/login-inline-row.md): A heading band over a single desktop credential row with recovery and registration links below. Use for compact sign-in embedded in a broader page.
- [Login — Organization domain gateway](https://patternbook-w0x7y.vercel.app/c/login-organization-gateway.md): A wide domain-entry band opens organization access above three policy notes. Use before routing someone to their organization identity provider.
- [Login — Passkey action with fallback disclosure](https://patternbook-w0x7y.vercel.app/c/login-passkey-options.md): A passkey instruction pane sits beside a large device action and an expandable password fallback. Use when passkeys are the preferred access method.
- [Login — Passwordless email link](https://patternbook-w0x7y.vercel.app/c/login-magic-link.md): An open passwordless sign-in column with one email field, delivery tips and a password alternative. Use when access begins with an emailed link.
- [Login — Pending device approval with session details](https://patternbook-w0x7y.vercel.app/c/login-device-approval.md): A waiting message is paired with a session summary and approval steps. Use when access needs confirmation on another device.
- [Login — Recovery steps beside email form](https://patternbook-w0x7y.vercel.app/c/login-recovery-panel.md): A recovery explanation and numbered steps sit beside an email request form. Use to make the reset process clear before requesting a link.
- [Login — Single sign-on first](https://patternbook-w0x7y.vercel.app/c/login-sso-first.md): A provider-first login card with three stacked choices and email as a later-step alternative. Use when workplace or provider authentication is the main route.
- [Login — Split with media panel](https://patternbook-w0x7y.vercel.app/c/login-split-media.md): An inset media panel beside a vertically centred credential form, with a logo above and legal links below. Use when a large visual should accompany account access.
- [Login — Verification code with delivery rail](https://patternbook-w0x7y.vercel.app/c/login-verification-code.md): Six code inputs sit beside delivery details and recovery links. Use as an explicit second verification step after account identification.

### Sign-up

- [Sign-up — Accept an invitation](https://patternbook-w0x7y.vercel.app/c/signup-invite-accept.md): A compact invitation card that identifies the workspace and role above a read-only invited email. Use when account creation begins from a specific invitation.
- [Sign-up — Benefits panel beside form](https://patternbook-w0x7y.vercel.app/c/signup-split-benefits.md): A trial-and-benefits panel beside workspace registration, with the form first on smaller screens. Use when sign-up needs a clear explanation of what is included.
- [Sign-up — Centred card with providers](https://patternbook-w0x7y.vercel.app/c/signup-centered-social.md): A registration card with a logo-and-login header, two side-by-side providers and a three-field form. Use when users can create an account through a provider or email.
- [Sign-up — Consent checklist with account strip](https://patternbook-w0x7y.vercel.app/c/signup-consent-checklist.md): A list of individually described agreements precedes a compact identity and registration band. Use when several consent decisions need space and clarity.
- [Sign-up — Form with next-steps aside](https://patternbook-w0x7y.vercel.app/c/signup-form-aside.md): A detailed registration form with paired identity and address fields beside a next-steps aside. Use when users need to supply more information and understand what follows.
- [Sign-up — Interest choices with email footer](https://patternbook-w0x7y.vercel.app/c/signup-interest-grid.md): Four interest tiles feed into an email registration row. Use to personalize an account before asking for credentials.
- [Sign-up — Multi-step with progress](https://patternbook-w0x7y.vercel.app/c/signup-multi-step.md): A static second-step registration form beneath a three-step progress indicator. Use to collect workspace details while showing completed and upcoming steps.
- [Sign-up — Plan choice then details](https://patternbook-w0x7y.vercel.app/c/signup-plan-choice.md): Three selectable plan cards above account fields and a consent/action strip. Use when users choose a plan as part of account creation.
- [Sign-up — Profile identity above credential panel](https://patternbook-w0x7y.vercel.app/c/signup-profile-first.md): A prominent identity setup row precedes a bordered credential panel. Use when the visible member profile is the first onboarding decision.
- [Sign-up — Purpose rail beside credentials](https://patternbook-w0x7y.vercel.app/c/signup-role-selection.md): A vertical account-purpose selector sits beside a bordered credential pane. Use to adapt onboarding around the intended account role.
- [Sign-up — Referral entry with benefit summary](https://patternbook-w0x7y.vercel.app/c/signup-referral-code.md): An invitation-code field and email form sit opposite a concise referral summary. Use when a code unlocks a specific account offer.
- [Sign-up — Waitlist with inline email](https://patternbook-w0x7y.vercel.app/c/signup-waitlist-inline.md): A centred waitlist pitch with an inline email action, usage hint and overlapping member initials. Use to collect interest before access opens.
- [Sign-up — Workspace form with setup summary](https://patternbook-w0x7y.vercel.app/c/signup-workspace-setup.md): Workspace naming and account fields sit beside an ordered setup summary. Use when registration creates a workspace as well as a personal account.

### Settings

- [Settings — Active sessions with security footer](https://patternbook-w0x7y.vercel.app/c/settings-session-list.md): A divided device-session list ends in a security action band. Use for reviewing current access and revoking old sessions.
- [Settings — Billing cards and invoices](https://patternbook-w0x7y.vercel.app/c/settings-billing-overview.md): Current plan and payment method cards above an invoice history table. Use to gather the billing information a workspace owner needs in one section.
- [Settings — Danger zone](https://patternbook-w0x7y.vercel.app/c/settings-danger-zone.md): A separate workspace-action card with explicit consequences and an expandable deletion confirmation. Use to keep irreversible actions clearly labelled and away from everyday settings.
- [Settings — Described rows](https://patternbook-w0x7y.vercel.app/c/settings-described-rows.md): A single form of described setting rows, with explanations beside controls. Use when every choice needs context before it is changed.
- [Settings — Grouped keyboard shortcuts](https://patternbook-w0x7y.vercel.app/c/settings-keyboard-shortcuts.md): Two command groups sit below a shortcut preference and above a reset link. Use for a readable overview of keyboard navigation and editing commands.
- [Settings — Integration directory with access scopes](https://patternbook-w0x7y.vercel.app/c/settings-integration-directory.md): Three connection cards expose status, permissions and a per-provider action. Use to compare and manage available account connections.
- [Settings — Item list with detail panel](https://patternbook-w0x7y.vercel.app/c/settings-master-detail.md): Selectable member rows beside a permissions detail panel. Use when several items share the same settings fields and need editing one at a time.
- [Settings — Live preview beside controls](https://patternbook-w0x7y.vercel.app/c/settings-preview-split.md): A large appearance preview beside radio cards and display controls. Use when settings benefit from a visual reference while choices are made.
- [Settings — Locale choices with format examples](https://patternbook-w0x7y.vercel.app/c/settings-locale-panel.md): Language, timezone and clock choices are paired with a static formatting example. Use to explain the visible effect of regional preferences.
- [Settings — Notification channel matrix](https://patternbook-w0x7y.vercel.app/c/settings-notification-matrix.md): Notification topics cross two delivery channels in a compact table, with guidance beside it. Use when each topic can be enabled independently by channel.
- [Settings — Profile editor with identity rail](https://patternbook-w0x7y.vercel.app/c/settings-profile-editor.md): A compact identity and visibility rail sits beside a profile form with public and contact sections. Use when account identity needs its own editing layout.
- [Settings — Sidebar navigation with sections](https://patternbook-w0x7y.vercel.app/c/settings-sidebar-sections.md): A settings sidebar beside a divided form with identity fields and notification switches. Use for a workspace with several settings destinations.
- [Settings — Stacked cards with save rows](https://patternbook-w0x7y.vercel.app/c/settings-stacked-cards.md): Three independent settings forms with a save footer on each card. Use when profile, password and notification changes are saved separately.

### Data table

- [Data table — Audit log with date bands](https://patternbook-w0x7y.vercel.app/c/data-table-audit-log.md): A compact chronological event table places time and actor beside an action description. Use for reviewing changes during a reporting day.
- [Data table — Dense table with priority columns](https://patternbook-w0x7y.vercel.app/c/data-table-priority-columns.md): A ranked numeric table with a sticky header and mobile column priorities. Use when the main figures must stay in a real table on narrow screens.
- [Data table — Expandable rows](https://patternbook-w0x7y.vercel.app/c/data-table-expandable-rows.md): A table-like list of native expandable records with supporting fields and actions. Use when scanning summary rows and opening one record in place is easier than adding more columns.
- [Data table — Filter sidebar](https://patternbook-w0x7y.vercel.app/c/data-table-sidebar-filters.md): Collapsible filter groups beside an applied-filter row and record table. Use when a list needs several filter dimensions visible at once.
- [Data table — Grouped table sections](https://patternbook-w0x7y.vercel.app/c/data-table-grouped-sections.md): A single table separates records into named row groups with aligned numeric columns. Use when grouping gives context without separate filters or nested cards.
- [Data table — Inline editable record rows](https://patternbook-w0x7y.vercel.app/c/data-table-inline-edit.md): Names and counts can be edited directly in a table with a save action for each row. Use for small datasets where opening a separate editor would slow the task.
- [Data table — Line items with totals footer](https://patternbook-w0x7y.vercel.app/c/data-table-totals-footer.md): A concise line-item table ends in a subtotal, adjustment and emphasized total. Use for reconciling a small set of quantities and amounts.
- [Data table — People-by-day availability grid](https://patternbook-w0x7y.vercel.app/c/data-table-availability-grid.md): Names form rows and days form columns in a simple availability matrix. Use to scan a small team schedule without a full calendar.
- [Data table — Row selection with bulk actions](https://patternbook-w0x7y.vercel.app/c/data-table-row-selection.md): Native row checkboxes reveal a shared bulk-action bar. Use when records need selection for operations that apply to several items.
- [Data table — Rows become cards on mobile](https://patternbook-w0x7y.vercel.app/c/data-table-stacked-cards.md): A member table that becomes labelled cards on small screens. Use when each row has an identity and several attributes that must remain readable on mobile.
- [Data table — Side-by-side record comparison](https://patternbook-w0x7y.vercel.app/c/data-table-record-comparison.md): Attribute rows align two records side by side with actions in their column headers. Use to compare a small selected set without scanning a long table.
- [Data table — Summary metrics above table](https://patternbook-w0x7y.vercel.app/c/data-table-metrics-header.md): Three summary figures above a numeric table with a totals row. Use when the overall result and the records behind it should be read together.
- [Data table — Toolbar, tabs and pagination](https://patternbook-w0x7y.vercel.app/c/data-table-toolbar-pagination.md): A status-tabbed table with search, filters, sort links and pagination. Use for a larger record list that needs several ways to find and browse items.

### Empty state

- [Empty state — Access required](https://patternbook-w0x7y.vercel.app/c/empty-state-permission.md): A left-aligned access request panel with a named owner and an account-switch link. Use it when a signed-in person lacks permission to view a resource.
- [Empty state — Centred icon with action](https://patternbook-w0x7y.vercel.app/c/empty-state-centered-icon.md): A centred icon, explanation and stacked actions inside a compact card. Use it when a collection is empty and creating the first item is the main next step.
- [Empty state — Empty archive with retention summary](https://patternbook-w0x7y.vercel.app/c/empty-state-archive-explainer.md): An empty archive message sits opposite a retention-policy summary. Use to distinguish intentionally empty archived content from missing active content.
- [Empty state — Empty collection beside example gallery](https://patternbook-w0x7y.vercel.app/c/empty-state-example-gallery.md): An empty-state message shares a wide layout with two sample previews. Use when seeing a finished structure helps people create their first record.
- [Empty state — Empty workspace with starting paths](https://patternbook-w0x7y.vercel.app/c/empty-state-starting-paths.md): Three equally weighted first-content routes sit under an empty-workspace explanation. Use when manual creation, import and examples are all valid starting choices.
- [Empty state — Error with retry](https://patternbook-w0x7y.vercel.app/c/empty-state-error-retry.md): A retry panel with paired actions and optional technical details. Use it when content could not load and a retry may recover it.
- [Empty state — First-run checklist](https://patternbook-w0x7y.vercel.app/c/empty-state-first-run-checklist.md): A setup panel with progress and three full-row step links. Use it to guide a first-time user through a short sequence without a separate primary button.
- [Empty state — Illustration beside text](https://patternbook-w0x7y.vercel.app/c/empty-state-media-side.md): An illustration placeholder beside compact empty-state copy and actions. Use it when a visual can explain the next step in a wider panel.
- [Empty state — Import area with format guidance](https://patternbook-w0x7y.vercel.app/c/empty-state-import-area.md): An empty collection presents a large file-selection area alongside import requirements. Use when importing a file is the quickest path to initial content.
- [Empty state — Maintenance notice with time window](https://patternbook-w0x7y.vercel.app/c/empty-state-maintenance-window.md): A centered maintenance notice is followed by a three-part service window. Use when temporarily unavailable content has an announced return time.
- [Empty state — No results with suggestions](https://patternbook-w0x7y.vercel.app/c/empty-state-no-results.md): A left-aligned no-results panel with a query badge, three suggestions and recovery actions. Use it after a search or filter returns no matches.
- [Empty state — Offline notice with saved-content rail](https://patternbook-w0x7y.vercel.app/c/empty-state-offline-cache.md): An unavailable live view offers reconnect actions beside locally saved content. Use when people can still open a small set of cached records.
- [Empty state — Preview rows above action](https://patternbook-w0x7y.vercel.app/c/empty-state-skeleton-preview.md): Ghost rows show the anatomy of a future list above a creation action. Use it to explain what will appear before the first item is added.

### Dashboard

- [Dashboard — Activity feed](https://patternbook-w0x7y.vercel.app/c/dashboard-activity-feed.md): A dated timeline of seven activity items with a quoted comment and file chip. Use it to show a readable history of changes in one column.
- [Dashboard — App shell with sidebar](https://patternbook-w0x7y.vercel.app/c/dashboard-sidebar-shell.md): A responsive app shell with sidebar navigation, search, four KPIs, a bar-chart placeholder and recent activity. Use it for a dashboard that needs persistent app navigation.
- [Dashboard — Bento overview](https://patternbook-w0x7y.vercel.app/c/dashboard-bento.md): An unequal tile grid combines a large trend, two KPIs, activity, progress and an announcement. Use it for a mixed overview whose modules have different priorities.
- [Dashboard — Calendar beside daily agenda](https://patternbook-w0x7y.vercel.app/c/dashboard-schedule-agenda.md): A compact month calendar anchors a larger chronological day agenda. Use when upcoming events are the primary dashboard task.
- [Dashboard — Goal progress with review sidebar](https://patternbook-w0x7y.vercel.app/c/dashboard-goal-tracker.md): A goal ledger with owners and progress sits beside a review-period summary. Use to keep a few longer-term targets visible beside their next review.
- [Dashboard — KPI row, chart and ranked list](https://patternbook-w0x7y.vercel.app/c/dashboard-kpi-chart-list.md): Four KPI cells above a wide chart and a narrow ranked list. Use it to compare period totals while keeping the largest contributors visible.
- [Dashboard — Main list with summary rail](https://patternbook-w0x7y.vercel.app/c/dashboard-main-rail.md): A schedule list beside a fixed summary rail that moves above the list on mobile. Use it when current items need a concise total and supporting context.
- [Dashboard — Request inbox with detail pane](https://patternbook-w0x7y.vercel.app/c/dashboard-inbox-workbench.md): A request list and selected-message detail share a two-pane workbench, with summary counts above. Use when reviewing inbound work is the dashboard’s primary task.
- [Dashboard — Resource allocation ledger](https://patternbook-w0x7y.vercel.app/c/dashboard-resource-capacity.md): A weekly capacity summary leads to person-by-person allocation bars and remaining hours. Use when workload balance matters more than activity counts.
- [Dashboard — Sequential conversion funnel](https://patternbook-w0x7y.vercel.app/c/dashboard-funnel-stages.md): Four numbered stage cards show entry counts and retention, followed by a conversion summary. Use to inspect drop-off through a short process.
- [Dashboard — Status tile board](https://patternbook-w0x7y.vercel.app/c/dashboard-tile-board.md): Twelve equal linked tiles encode active, idle and offline states with words and border treatments. Use it to scan many compact entities at once.
- [Dashboard — Status-column work board](https://patternbook-w0x7y.vercel.app/c/dashboard-kanban-board.md): Three status columns group task cards with per-column creation links. Use to view work progression without a dense metrics dashboard.
- [Dashboard — Two panels, trend and list](https://patternbook-w0x7y.vercel.app/c/dashboard-split-panels.md): Two equal panels pair a headline trend with a four-row operational list. Use it when the trend and current items deserve equal emphasis.