shadcn-ui-blocks/blocks

Files

CodeInfo

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

Simple Cardsapplication-application-stats-simple-cardsClean 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.

With Badgesapplication-application-stats-with-badgesStat 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.

With Colored Iconsapplication-application-stats-with-colored-iconsMetric 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.

With Descriptionapplication-application-stats-with-descriptionStat 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.

With Iconsapplication-application-stats-with-iconsMetric cards with a small icon beside every value for quick recognition. Use on overview screens where users skim totals by category very fast.

With Progressapplication-application-stats-with-progressStat 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.

Complex Formapplication-form-layouts-complex-formA dense form with grouped sections, multiple field types, and a sticky action bar. Use it for detailed settings, account creation, or admin record editing.

Stackedapplication-form-layouts-stackedA 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.

Two Columnapplication-form-layouts-two-columnA 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.

Split With Imageapplication-login-split-with-imageA 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.

Simple Centeredapplication-page-headings-simple-centeredA centered page title with optional description text, balanced on the screen. Use it on focused app views like settings or a single record detail.

With Actionsapplication-page-headings-with-actionsA 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.

With Search Filtersapplication-page-headings-with-search-filtersA 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.

With Statsapplication-page-headings-with-statsA 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.

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

With Tabsapplication-page-headings-with-tabsA 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.

A11y Checklist Panelapplication-pro-accessibility-a11y-checklist-panelWCAG 2.1 audit checklist with pass, fail, and manual badges per criterion, an overall score, and per-row links to the W3C understanding docs.

A11y Issue Trendsapplication-pro-accessibility-a11y-issue-trendsStacked bar chart card tracking open accessibility issues by severity across six release audits with a headline count and remediation note.

A11y Preferences Panelapplication-pro-accessibility-a11y-preferences-panelAccessibility settings panel with a text size selector, live sample line, and grouped vision, motion, and screen reader switches with helper text.

Alt Text Review Queueapplication-pro-accessibility-alt-text-review-queueA review list of flagged images, each row pairing a thumbnail, page location, current alt state, and a suggested description to approve or edit.

Assistive Tech Matrixapplication-pro-accessibility-assistive-tech-matrixScreen reader support matrix crossing core app flows with four assistive tech pairings, labeled status cells, and an open findings list.

Conformance Report Cardapplication-pro-accessibility-conformance-report-cardA VPAT style summary with product metadata, one section per WCAG principle showing a segmented support bar and criteria counts, plus notable criterion rows.

Contrast Checker Cardapplication-pro-accessibility-contrast-checker-cardTheme token contrast audit card showing computed ratios and AA and AAA pass badges for normal and large text across four Acme token pairings.

Focus Order Inspectorapplication-pro-accessibility-focus-order-inspectorSplit audit view pairing a dialog blueprint with numbered focus markers beside a stop list showing selectors, roles, and flagged order issues.

Heading Outline Treeapplication-pro-accessibility-heading-outline-treeIndented document heading tree with landmark chips, level tags, and issue badges for skipped levels, empty headings, and a duplicate H1.

Keyboard Nav Guideapplication-pro-accessibility-keyboard-nav-guideKeyboard shortcut reference table covering global browser keys and Acme app shortcuts rendered with Kbd components, action descriptions, and context labels.

Live Region Logapplication-pro-accessibility-live-region-logARIA live region event log with timestamps, politeness badges, source selectors, and flags for duplicate, chatty, and empty announcements.

Media Captions Auditapplication-pro-accessibility-media-captions-auditMedia library audit pairing coverage tiles and progress bars with a per asset table of caption, transcript, and audio description chips.

Reduced Motion Auditapplication-pro-accessibility-reduced-motion-auditAn animation inventory with per effect trigger, a duration bar on a shared scale, and a badge for whether each honors the reduced motion setting.

Screen Reader Labels Tableapplication-pro-accessibility-screen-reader-labels-tableAccessible name audit table listing Acme workspace UI elements with their computed label, ARIA role, labeled or missing status, and an exact fix hint.

Touch Target Auditapplication-pro-accessibility-touch-target-auditInteractive control audit showing hit areas at true scale in 44px frames with measured sizes, AA and AAA badges, and fix hints.

Zoom Reflow Auditapplication-pro-accessibility-zoom-reflow-auditA WCAG reflow report led by two wireframe legends, then a per page table of pass and fail results at 200 and 400 percent zoom.

Activity Calendarapplication-pro-activity-activity-calendarMonth grid calendar with per-day activity dots scaled by event count and a selected-day event list beside it.

Activity Heatmapapplication-pro-activity-activity-heatmapWeekday by hour heatmap of workspace events with intensity cells, a Less to More legend, and peak and quiet window callouts.

Approvals Queueapplication-pro-activity-approvals-queuePending requests with context and age, approve or deny, expiry told to the asker.

Audit Export Cardapplication-pro-activity-audit-export-cardCompliance export form with date range, event count, format selector, and an append-only log disclosure note.

Audit Trail Timelineapplication-pro-activity-audit-trail-timelineThe compliance log grouped by day, mono actions, second precision, source IPs.

Automation Run Logapplication-pro-activity-automation-run-logA card listing scheduled automation runs with a status icon, workflow name and trigger, duration, finish time, an expanded error row, and a next run footer.

Catch Up Digestapplication-pro-activity-catch-up-digestA digest card grouping activity accrued while away by project, each with a total badge, typed summary lines, an avatar cluster, and a review action.

Changelog Feedapplication-pro-activity-changelog-feedIn-app changelog grouped by month with dated entries, type badges for Feature, Fix, Improvement, and Performance.

Comment Mentions Listapplication-pro-activity-comment-mentions-listComment mentions inbox showing each document and section, the quoted comment with your name highlighted, and a jump to reply action.

Comment Thread Panelapplication-pro-activity-comment-thread-panelA thread with one nested reply, a resolved marker with reopen, and the composer.

Deploy Activity Feedapplication-pro-activity-deploy-activity-feedEngineering deploy timeline showing who shipped what service to which environment with status, commit SHA, and one rollback event.

Edit History Diffapplication-pro-activity-edit-history-diffDocument version history with a selectable edit list on the left and an inline before and after diff panel on the right using theme token opacity.

Filtered Activity Logapplication-pro-activity-filtered-activity-logActivity log in a filtered state with type chips, an applied person filter, a clear all action, and the matching events with counts.

Inactivity Watch Cardapplication-pro-activity-inactivity-watch-cardWatchlist of projects gone quiet showing owner avatar, last event summary, a days idle count, and a nudge action per row.

Live Presence Barapplication-pro-activity-live-presence-barRealtime presence strip with stacked avatars, status dots for editing and viewing states, and a plus-overflow count.

Member Activity Panelapplication-pro-activity-member-activity-panelSingle member drill down with an avatar header, three weekly stat columns, and a recent actions list with typed icons and timestamps.

Mention Feedapplication-pro-activity-mention-feedMentions inbox showing author, document context, highlighted snippet, timestamp, and a reply affordance per item.

Pinned Updates Cardapplication-pro-activity-pinned-updates-cardAnnouncements widget showing three pinned workspace updates with author, tag badge, body text, and an unpin action.

Project Activity Breakdownapplication-pro-activity-project-activity-breakdownA card ranking projects by weekly activity volume, each row showing the top member, a proportional bar, the event count, and a trend delta.

Reaction Activity Feedapplication-pro-activity-reaction-activity-feedSocial activity feed showing who reacted to or commented on your work, with emoji badges and inline comment quotes.

Sign In Activity Listapplication-pro-activity-sign-in-activity-listA card listing recent account sessions, each with a device icon tile, browser and OS, location with IP, timestamp, current session badge, and revoke actions.

Status Change Logapplication-pro-activity-status-change-logVertical timeline of status transitions for one entity with actor names, timestamps, and time-in-state durations.

Team Activity Feedapplication-pro-activity-team-activity-feedWorkspace events on a timeline rail with avatars and one expanded comment.

Team Pulse Cardapplication-pro-activity-team-pulse-cardWeekly team activity summary with commit, comment, and task stats, inline sparklines, and a most-active member row.

Version History Listapplication-pro-activity-version-history-listNamed saves with autosaves collapsed, restore always creates, never rewinds.

Who Did What Tableapplication-pro-activity-who-did-what-tableWorkspace activity table with actor avatars, plain-English action verbs, target resources, and result badges.

Audit Search Panelapplication-pro-admin-moderation-audit-search-panelCompliance audit log with actor, action type, and date range filters, monospace action chips, IP column, and CSV export.

Automation Rules Panelapplication-pro-admin-moderation-automation-rules-panelAutomated rule cards in a two column grid with enabled switches, monospace When and Then chips, and match, precision, and overturned stats.

Ban Appeal Panelapplication-pro-admin-moderation-ban-appeal-panelBan appeal review with the original enforcement reason, appellant statement, prior enforcement history, and uphold or reverse actions each requiring a written note.

Bulk Review Tableapplication-pro-admin-moderation-bulk-review-tableA checkbox review table with per row selection, a bulk action bar showing the selection count with approve, escalate, and remove actions, and an audit note.

Content Flags Tableapplication-pro-admin-moderation-content-flags-tableModeration flags overview table with content snippets, flag reasons, sortable flag counts, status badges, and per-row review actions.

Escalation Path Panelapplication-pro-admin-moderation-escalation-path-panelVertical escalation stepper with numbered tiers on a rail showing response SLAs, on call avatars, routed category badges, and auto escalation rules.

Feature Toggle Adminapplication-pro-admin-moderation-feature-toggle-adminFeature flag rows with environment badges, rollout percentage bars, kill-switch toggles, and a callout that kill switches take effect within 10 seconds globally.

IP Blocklist Managerapplication-pro-admin-moderation-ip-blocklist-managerSplit blocklist manager pairing an add rule form with scope and duration choices beside ruled entries showing CIDR chips, hit counts, and expiry.

Keyword Filter Managerapplication-pro-admin-moderation-keyword-filter-managerFiltered terms grouped into three ruled sections by enforcement action, each term a monospace chip with its 7 day match count and an edit control.

Moderation Queueapplication-pro-admin-moderation-moderation-queueReported items as prioritized cards with content snippet, reason, reporter count, age, and Approve, Remove, and Escalate actions per item.

Moderator Performance Boardapplication-pro-admin-moderation-moderator-performance-boardModerator table with focus queues, decision counts, seven day sparklines, median handle time, agreement meters, and overturned counts.

Queue Health Panelapplication-pro-admin-moderation-queue-health-panelFour stat tiles above a ruled queue list with open counts, oldest item age, SLA status badges, load bars, and assigned moderator avatars.

Report Review Cardapplication-pro-admin-moderation-report-review-cardSingle report case with reported content, reporter identity, author flag history, and a decision panel that names the consequence of every action.

Role Permissions Matrixapplication-pro-admin-moderation-role-permissions-matrixA permissions matrix with category grouped rows and four role columns showing member counts and check or minus access marks per cell.

User Admin Tableapplication-pro-admin-moderation-user-admin-tableAdmin member roster with status badges, signup date, last seen, flag counts, and per-row impersonate and suspend actions logged to the audit trail.

User Risk Profileapplication-pro-admin-moderation-user-risk-profileAn identity rail of account facts and linked accounts beside a composite risk score, a segmented meter, weighted signals, and enforcement actions.

Violation Trends Panelapplication-pro-admin-moderation-violation-trends-panelEight weeks of report volume as stacked bars segmented by policy category, beside a category breakdown with totals, four week deltas, and share bars.

Action Approval Cardapplication-pro-ai-assistant-action-approval-cardApproval gate for a proposed assistant bulk change showing sample before and after field values with approve and reject buttons.

Agent Run Traceapplication-pro-ai-assistant-agent-run-traceVertical timeline of agent tool steps with status icons, tool badges, mono query detail lines, durations, and a raw log link.

Ai Usage Cardapplication-pro-ai-assistant-ai-usage-cardAI token usage panel with a monthly progress bar, a per feature breakdown, and the overage policy stated in the same view.

Assistant Chat Panelapplication-pro-ai-assistant-assistant-chat-panelConversation thread with alternating user and assistant bubbles, inline source chips, and regenerate and copy affordances.

Assistant Empty Stateapplication-pro-ai-assistant-assistant-empty-statePre-conversation assistant panel with 4 example prompt chips and plain lists of what the assistant can see and cannot do yet.

Citations Panelapplication-pro-ai-assistant-citations-panelSources side panel listing 4 cited documents with title, matched snippet, relevance chip, and an honest footer note.

Context Sources Panelapplication-pro-ai-assistant-context-sources-panelData access panel listing assistant readable sources with icon, item count, last sync time, and a switch, plus one excluded source.

Conversation History Listapplication-pro-ai-assistant-conversation-history-listChat history sidebar listing past assistant threads grouped by recency with title, snippet, timestamp, and a delete affordance.

Feedback Thumbs Rowapplication-pro-ai-assistant-feedback-thumbs-rowAI response feedback row with thumbs up and down, a copy and regenerate action, and a reason picker revealed on negative feedback.

Guardrails Panelapplication-pro-ai-assistant-guardrails-panelRuled rows pairing each safety rule with an icon, explanation, and switch, above a blocked topics list and an audit logging note.

Inline Suggestion Cardapplication-pro-ai-assistant-inline-suggestion-cardText editor surface showing an AI ghost-text completion with Tab to accept and Esc to dismiss keyboard hints and an authorship notice.

Memory Panelapplication-pro-ai-assistant-memory-panelA header switch and ruled list of remembered facts, each with its source, date, and a forget button, above a permanent deletion note.

Model Picker Cardapplication-pro-ai-assistant-model-picker-cardModel selection card with three rows showing tier, cost per 1k tokens, a one-line tradeoff, and the balanced model pre-selected.

Prompt Composerapplication-pro-ai-assistant-prompt-composerAI input surface with a model chip, attach and slash command buttons, a token counter, and a keyboard hinted send button.

Prompt Library Gridapplication-pro-ai-assistant-prompt-library-gridSaved prompt cards in a filterable grid showing title, description, category badge, and use count with a create prompt affordance.

Response Compareapplication-pro-ai-assistant-response-compareA shared prompt panel above two side by side response cards, each with a model badge, answer body, latency and token stats, and a prefer button.

Scheduled Agents Listapplication-pro-ai-assistant-scheduled-agents-listRuled rows of recurring assistant tasks, each with cadence, delivery target, last run badge, next run time, and a pause switch, plus inline errors.

Thread Summary Cardapplication-pro-ai-assistant-thread-summary-cardAI generated thread summary with an overview paragraph, checked decision list, owner assigned action items, and regenerate and copy controls.

Anchor Nav Shellapplication-pro-app-shells-anchor-nav-shellA full-page docs shell with a slim topbar, a column of anchored section cards, and a sticky On this page rail tracking the active section.

Bottom Panel Shellapplication-pro-app-shells-bottom-panel-shellIDE style shell with a slim run bar, an open canvas, a docked console panel with log tabs, and a pinned status bar.

Breadcrumb Header Shellapplication-pro-app-shells-breadcrumb-header-shellFull-page shell for deep detail views with a breadcrumb trail, page title, meta row, and action buttons above two content panels.

Card Grid Shellapplication-pro-app-shells-card-grid-shellA gallery workspace shell with an icon nav rail, a toolbar with search, sort, and view toggle, and a responsive card grid of projects.

Centered Content Shellapplication-pro-app-shells-centered-content-shellA slim top bar and a max-w-3xl reading column on a muted background for docs, articles, or single settings detail pages.

Checklist Shellapplication-pro-app-shells-checklist-shellAn onboarding home shell with a topbar, welcome header, a setup checklist card with progress and one expanded step, plus a resources rail.

Collapsible Sidebar Shellapplication-pro-app-shells-collapsible-sidebar-shellIcon-only nav rail with an expand affordance, badge count on Projects, and an inline tooltip hint on one item.

Command Bar Shellapplication-pro-app-shells-command-bar-shellShell with a centered command bar in the top header, a keyboard shortcut hint, and a recent commands list below.

Dashboard Home Shellapplication-pro-app-shells-dashboard-home-shellThe assembled overview, greeting header, KPI strip, recent list, one open chart slot.

Document Tabs Shellapplication-pro-app-shells-document-tabs-shellEditor workspace shell with a strip of open document tabs, close buttons, an unsaved dot, and the active document content below.

Dual Sidebar Shellapplication-pro-app-shells-dual-sidebar-shellApp shell with a primary icon nav rail and a grouped contextual sub-nav panel for deep two-level navigation.

Empty State Shellapplication-pro-app-shells-empty-state-shellA sidebar and header frame with a first run canvas: a centered empty state with icon, heading, primary and secondary actions, and a starter template row.

Environment Banner Shellapplication-pro-app-shells-env-banner-shellApp shell with a pinned staging environment banner, a switch action, a topbar, and a deployments page with an environment facts panel.

Focus Mode Shellapplication-pro-app-shells-focus-mode-shellMinimal top bar with back link, document title, save state badge, and a centered max-w content column with no sidebar.

Full Bleed Shellapplication-pro-app-shells-full-bleed-shellEdge-to-edge canvas shell with a floating toolbar for maps, boards, and diagram editors that need every pixel of viewport space.

Icon Sidebar Shellapplication-pro-app-shells-icon-sidebar-shellThe icon only rail with aria labels, maximum width left for dense tool content.

Inbox Shellapplication-pro-app-shells-inbox-shellThree pane mail shell with a labeled folder sidebar, an unread message list, and a reading pane with triage actions and a reply footer.

Nested Nav Sidebar Shellapplication-pro-app-shells-nested-nav-sidebar-shellSidebar with Projects expanded to three indented children, one active.

Right Rail Shellapplication-pro-app-shells-right-rail-shellThree-column shell with an icon nav rail, main content area, and a right context rail showing a live activity list.

Settings Shellapplication-pro-app-shells-settings-shellThree column settings scaffold, icon rail, secondary nav with Danger zone, content column.

Sidebar Shellapplication-pro-app-shells-sidebar-shellThe navigation rail with active state, command hint, and labeled drop zones for your pages.

Split Content Shellapplication-pro-app-shells-split-content-shellFull-page shell with a slim top bar and a 50/50 editor and preview pane split for authoring and live-preview workflows.

Sticky Toolbar Shellapplication-pro-app-shells-sticky-toolbar-shellApp shell with a sticky bulk-actions and filter toolbar that stays pinned above a scrollable data table.

Tabbed Page Shellapplication-pro-app-shells-tabbed-page-shellA full-page shell with a sidebar, a named resource header, and a horizontal tab row delivering sub-view content below.

Topbar Shellapplication-pro-app-shells-topbar-shellHorizontal nav with the Acme lockup, five links, a command hint, and the page below.

Two Pane Shellapplication-pro-app-shells-two-pane-shellMaster-detail layout with a six-row project list pane and a wide detail pane showing the selected item header.

Wizard Shellapplication-pro-app-shells-wizard-shellMulti-step flow shell with a slim header step indicator, centered content column, and sticky back and continue footer.

Accept Invite Pageapplication-pro-auth-pages-accept-invite-pageThe invite named, inviter, role, what it grants, and the days left to accept.

Account Linking Pageapplication-pro-auth-pages-account-linking-pageAn account collision gate showing a Google sign in beside an existing password account, a link action, and a password sign in fallback.

Account Recovery Pageapplication-pro-auth-pages-account-recovery-pageAccount recovery card with an email lookup form and three recovery options listed by speed, plus a plain explanation of why identity review takes up to 3 days.

Approval Pending Pageapplication-pro-auth-pages-approval-pending-pageA workspace join waiting state with a step timeline, the named admins who decide, the typical response time, and a withdraw request action.

Backup Codes Pageapplication-pro-auth-pages-backup-codes-pageRecovery code save step with an eight code grid, download and copy actions, a saved confirmation checkbox, and a one time use warning.

Deactivated Account Pageapplication-pro-auth-pages-deactivated-account-pageAccount deactivation state page naming who deactivated the account and when, listing what reactivation restores, and linking directly to the named admin for recovery.

Device Approval Pageapplication-pro-auth-pages-device-approval-pageNew device verification gate showing device, location, time, and account with approve and deny actions and an honest account-lock security note.

Email Changed Confirmapplication-pro-auth-pages-email-changed-confirmEmail change confirmation page showing the new and old address with timestamp and device, a lock account alarm for unauthorized changes, and a dual address notice.

Forgot Password Pageapplication-pro-auth-pages-forgot-password-pagePassword reset form that openly explains its anti enumeration response and states reset link timing facts.

Join Workspace Pageapplication-pro-auth-pages-join-workspace-pageWorkspace entry page for invited and domain-matched users with a member preview, join or request buttons, and a note that joining is visible to admins immediately.

Locked Account Pageapplication-pro-auth-pages-locked-account-pageAccount lockout page stating the 15-minute duration, a password reset shortcut, and the reassurance that lockouts are never permanent.

Magic Link Pageapplication-pro-auth-pages-magic-link-pagePasswordless sign in showing both the request and sent states with expiry and resend throttle facts.

MFA Enrollment Pageapplication-pro-auth-pages-mfa-enrollment-pageA required two factor enrollment gate with three method rows ranked by strength, the authenticator app preselected, a grace period deadline, and a skip link.

Oauth Callback Pageapplication-pro-auth-pages-oauth-callback-pageOAuth connecting state card with a Spinner, three step rows showing progress for a GitHub org link, and fallback links if the page hangs.

Oauth Consent Pageapplication-pro-auth-pages-oauth-consent-pageThird party app authorization card listing granted scopes and explicit exclusions, the acting account, and authorize or cancel actions with a revoke note.

Passkey Setup Pageapplication-pro-auth-pages-passkey-setup-pageCentered auth card prompting passkey enrollment with three benefit rows, a device save target panel, and a skip fallback that keeps the existing password active.

Password Expired Pageapplication-pro-auth-pages-password-expired-pageA forced password rotation gate with current and new password fields, a policy panel explaining the deadline, and a reset by email fallback.

Reset Password Pageapplication-pro-auth-pages-reset-password-pageNew password form reached from a reset link with a requirements checklist, a session sign out panel, and the note that nothing changes until save.

Session Expired Pageapplication-pro-auth-pages-session-expired-pageCalm session timeout screen that promises local draft restore and prefills the email for one click return.

Sign In Pageapplication-pro-auth-pages-sign-in-pageSSO first sign in with the password fallback and honest reset link timing.

Sign Up Pageapplication-pro-auth-pages-sign-up-pageWorkspace signup with SSO buttons first, slug preview, and plain 14 day read only trial terms.

Sso Error Pageapplication-pro-auth-pages-sso-error-pageSSO failure page with the specific error reason, a named admin contact, numbered steps to resolve, and retry plus password fallback actions.

Sso Login Pageapplication-pro-auth-pages-sso-login-pageSSO-enforced sign in card with org domain shown, a single Continue with SSO button, and a named admin fallback for lockouts.

Two Factor Pageapplication-pro-auth-pages-two-factor-pageTOTP verification with six OTP slots, device trust checkbox, backup code link, and human recovery promise.

Verify Email Pageapplication-pro-auth-pages-verify-email-pageCheck-your-inbox state showing the sent address, a throttled resend button, a change-email link, and the 24-hour expiry note.

Welcome Back Loginapplication-pro-auth-pages-welcome-back-loginReturning user login showing the known account avatar and email with a single password field, passkey option, and a use a different account escape hatch.

Workspace Picker Pageapplication-pro-auth-pages-workspace-picker-pagePost sign in workspace chooser listing memberships with marks, member counts, and role badges, plus a create workspace action and sign out link.

Add-ons Panelapplication-pro-billing-addons-panelAn add-ons panel with active add-on rows and toggles, available add-ons to enable, and a subtotal for the next invoice.

Billing Contacts Cardapplication-pro-billing-billing-contacts-cardWho gets invoices, the add contact field, and the PO number printed on every one.

Billing Cycle Switchapplication-pro-billing-billing-cycle-switchMonthly and annual cycle options side by side with per seat pricing, the yearly saving, and ruled rows stating when the switch takes effect.

Cancel Flow Blueprintapplication-pro-billing-cancel-flow-blueprintCancel subscription dialog showing what you keep until the period ends, what changes after, a downgrade suggestion, and an optional reason select.

Cost Allocation Panelapplication-pro-billing-cost-allocation-panelA cost by team panel with ruled rows of member count, a proportional meter, share percentage, and amount, reconciling to the invoice total.

Coupon Redemption Cardapplication-pro-billing-coupon-redemption-cardActive promotion with mono code, discount terms, per invoice saving, the next discounted total, and a labeled field to apply another code.

Credits Balance Cardapplication-pro-billing-credits-balance-cardPrepaid credits wallet showing current balance, a ruled grants and spends ledger, and the application policy.

Current Plan Usageapplication-pro-billing-current-plan-usageTeam plan header with renewal date and three usage meters each stating the overage policy beneath the bar.

Dunning Bannerapplication-pro-billing-dunning-bannerPayment-failed notice with the card charged, retry schedule, exact access-pause date, and an update payment method action.

Invoice Detail Pageapplication-pro-billing-invoice-detail-pageSingle printable invoice with mono number, from/to addresses, tabular line items, subtotal/tax/total, a Paid badge, and download/print actions.

Invoice History Tableapplication-pro-billing-invoice-history-tableCompact invoice archive with the estimated next invoice previewed at the top.

Pause Subscription Panelapplication-pro-billing-pause-subscription-panelThree pause lengths with exact resume dates, a checklist of what happens while paused, and a pause action beside the cancel alternative.

Payment History Tableapplication-pro-billing-payment-history-tableTransactions ledger with date, description, card brand chip with last four digits, tabular amount, status badge, and a per row receipt link.

Payment Method Panelapplication-pro-billing-payment-method-panelThe saved card, billing email, the optional backup slot, and the token footer.

Plan Change Historyapplication-pro-billing-plan-change-historyDated log of upgrades, seat additions, promotions, and cycle switches, each with a type badge and the teammate who made the change.

Plan Comparison Tableapplication-pro-billing-plan-comparison-tableThree-plan feature matrix with Check and Minus cells, per-plan prices, current plan marker, and a quiet most-popular note.

Proration Preview Cardapplication-pro-billing-proration-preview-cardUpgrade proration preview with credit and charge line items, due-today total, and next renewal amount.

Receipt Cardapplication-pro-billing-receipt-cardSingle payment receipt with amount, date, card, transaction ID, a download PDF action, and a link to the formal tax invoice.

Refund Status Cardapplication-pro-billing-refund-status-cardRefund in progress with amount, dates, returning card, and a four stage pipeline showing current processing state.

Seat Management Panelapplication-pro-billing-seat-management-panelIdle seats listed with last active and the keep or free choice priced per month.

Spend Trend Chartapplication-pro-billing-spend-trend-chartA spend trend panel with three stat columns above a six month stacked bar chart splitting invoices into plan, seats, and usage.

Spending Limit Cardapplication-pro-billing-spending-limit-cardMonthly cap widget showing current spend on a Progress bar with alert threshold markers and an explicit policy for what pauses at the limit.

Tax and Invoice Settingsapplication-pro-billing-tax-and-invoice-settingsVAT and Tax ID panel with VIES validation note, billing address fields, reverse charge callout, and invoice appearance.

Trial Status Cardapplication-pro-billing-trial-status-cardA trial card with a day meter, a ruled list of what the team set up, an end date outcome, and an add payment action.

Upgrade Comparison Cardapplication-pro-billing-upgrade-comparison-cardThe seat limit upsell with the delta priced for your seats and the honest alternative.

Usage Alerts Panelapplication-pro-billing-usage-alerts-panelAlert rules as a ruled list with metric thresholds, recipient emails, and toggles, plus an add alert action and a hard cap caveat.

Usage Breakdown Billapplication-pro-billing-usage-breakdown-billThe period charges line by line with a dated projection and its method stated.

Availability Gridapplication-pro-calendar-scheduling-availability-gridSingle-day slot picker with taken slots disabled, the selected slot highlighted, timezone line, and a buffer note.

Booking Confirmation Cardapplication-pro-calendar-scheduling-booking-confirmation-cardPost-booking summary card with meeting title, attendee avatars, dual-timezone times, add-to-calendar buttons, and a cancellation policy note.

Calendar Sync Statusapplication-pro-calendar-scheduling-calendar-sync-statusConnected calendars panel with per account sync freshness, slot blocking modes, an inline reconnect row for expired auth, and a privacy note.

Event Detail Panelapplication-pro-calendar-scheduling-event-detail-panelFull read view of a calendar event with a header, agenda and attachments column, a guest list with RSVP state, and viewer response buttons.

Event List Dayapplication-pro-calendar-scheduling-event-list-dayDay schedule list with an all-day item pinned at top, ruled timed event rows, and an explicit free-time gap row.

Invite RSVP Cardapplication-pro-calendar-scheduling-invite-rsvp-cardIncoming invitation card showing the organizer, event details, and a conflict warning, closing with accept, maybe, decline, and propose new time actions.

Meeting Poll Panelapplication-pro-calendar-scheduling-meeting-poll-panelGroup scheduling poll with three proposed times, voter avatar stacks, vote share bars, a highlighted leading option, and finalize actions.

Mini Calendar Cardapplication-pro-calendar-scheduling-mini-calendar-cardCompact sidebar month picker with today highlighted, event dots on three dates, and prev and next navigation.

Month Calendarapplication-pro-calendar-scheduling-month-calendarMonth grid for June 2026 with event chips, overflow badges, today highlighted, and muted out-of-month days.

Recurring Event Formapplication-pro-calendar-scheduling-recurring-event-formRecurrence rule builder with interval input, weekday toggle chips, end condition selector, and a plain-English rule summary.

Reschedule Request Panelapplication-pro-calendar-scheduling-reschedule-request-panelReschedule request panel placing the current and proposed slots side by side with the requester reason, an availability line, and accept or counter actions.

Room Booking Timelineapplication-pro-calendar-scheduling-room-booking-timelineRoom picker where each meeting room is a day track with existing bookings drawn as blocks and the requested slot outlined across every row.

Scheduling Link Cardapplication-pro-calendar-scheduling-scheduling-link-cardBooking link share card with a copy chip, three meeting types with buffers, availability hours, and a double-booking note.

Team Availability Heatmapapplication-pro-calendar-scheduling-team-availability-heatmapWeek by hour heat grid of team overlap with day columns, a ring highlighted best slot, density legend, and a propose time callout.

Timezone Compare Rowapplication-pro-calendar-scheduling-timezone-compare-rowProposed meeting time shown side by side across four attendee timezones with local time, offset, and working hours status for each.

Week Agendaapplication-pro-calendar-scheduling-week-agendaWeek view with a vertical time column, five day columns, CSS-positioned event blocks, and a current-time line.

Working Hours Editorapplication-pro-calendar-scheduling-working-hours-editorWeekly availability settings with per day switches, bookable time range chips, a timezone note, weekly total badge, and save actions.

Area With Range Chartapplication-pro-charts-area-with-range-chartAn area chart showing actuals with a muted 80% confidence band and a dashed projection tail for future months.

Bubble Chartapplication-pro-charts-bubble-chartScatterChart plotting accounts by usage score, monthly revenue, and seat count encoded as bubble size.

Bullet KPI Rowsapplication-pro-charts-bullet-kpi-rowsA card panel of five quarterly KPIs as bullet rows, each with qualitative range bands, a quarter to date measure bar, a target tick, and a shared axis.

Cohort Retention Heatmapapplication-pro-charts-cohort-retention-heatmapA CSS grid heatmap of weekly cohort retention shaded by foreground opacity tokens with no chart library.

Conversion Funnel Barsapplication-pro-charts-conversion-funnel-barsThe funnel as horizontal bars with each rate against the prior stage, labeled.

Diverging Survey Barsapplication-pro-charts-diverging-survey-barsLikert survey responses as diverging stacked bars around a center axis with a four segment legend and agree share per question.

Dumbbell Latency Chartapplication-pro-charts-dumbbell-latency-chartDumbbell rows comparing p95 latency per endpoint before and after a release, with connector bars, paired dots, and an axis row.

Gauge Progress Chartapplication-pro-charts-gauge-progress-chartA radial gauge showing a single SLA percentage with the value centred and the target threshold named in the footnote.

Grouped Bar Chartapplication-pro-charts-grouped-bar-chartFeature usage grouped bar chart comparing this billing period against the previous across six categories with a shared legend.

Heatmap Calendar Chartapplication-pro-charts-heatmap-calendar-chartCSS grid calendar heatmap shading daily activity by foreground opacity across a six month window.

Histogram Distribution Chartapplication-pro-charts-histogram-distribution-chartA card panel charting API response times bucketed into 100 ms bins as a single distribution, with a p95 callout and a dashed reference line.

Horizontal Bar Rankingapplication-pro-charts-horizontal-bar-rankingHorizontal bar chart ranking the top 6 pages by view count with inline value labels and a footnote naming the 3x lead of the top page.

Latency Percentile Chartapplication-pro-charts-latency-percentile-chartAPI request latency as p50, p95, and p99 lines over 24 hourly points with ms axis formatting.

Mrr Stacked Barsapplication-pro-charts-mrr-stacked-barsMRR movement as stacked bars with new and expansion above zero and contraction and churn below, last 6 months.

Multi Line Trendapplication-pro-charts-multi-line-trendThree-series line chart tracking monthly active seats across Starter, Growth, and Enterprise plans with a legend and a footnote naming the September crossover.

Pareto Error Chartapplication-pro-charts-pareto-error-chartA Pareto chart pairing error category bars sorted by volume with a cumulative share line on a second percentage axis.

Percent Stacked Barsapplication-pro-charts-percent-stacked-barsA card panel charting monthly signups by acquisition channel as bars normalized to 100 percent, so the chart reads as share of mix over volume.

Plan Mix Donutapplication-pro-charts-plan-mix-donutDonut chart of active workspaces by plan tier with a center total label and a four plan legend.

Radar Chartapplication-pro-charts-radar-chartRadarChart comparing two plans across five feature dimensions with filled polygons and a shared legend.

Radial Usage Ringsapplication-pro-charts-radial-usage-ringsConcentric radial rings showing percent of quota used per storage resource beside a breakdown list with exact allocations.

Revenue Area Chartapplication-pro-charts-revenue-area-chartStacked area chart showing new business and expansion MRR added each month across an 8 month window.

Scatter Plot Chartapplication-pro-charts-scatter-plot-chartAccounts scatter chart plotting monthly API usage against revenue with reference-line quadrants to surface expansion targets.

Signups Bar Chartapplication-pro-charts-signups-bar-chartWeekly new account signups as a single series bar chart over 10 weeks with a labeled launch spike.

Slope Comparison Chartapplication-pro-charts-slope-comparison-chartA card panel joining average active seats per plan across two quarters with slope lines between paired axes, the biggest mover drawn in full ink.

Sparkbar Rowapplication-pro-charts-sparkbar-rowFour compact metric tiles each with a label, headline value, and a mini 8-week bar chart for a glanceable ops comparison strip.

Stacked Category Barsapplication-pro-charts-stacked-category-barsA stacked bar chart of support tickets by category over six weeks with a footnote naming the fastest growing series.

Stepped Area Chartapplication-pro-charts-stepped-area-chartActive seats area chart using stepAfter type so each provisioning event reads as an instantaneous jump, not gradual growth.

Usage Line Chartapplication-pro-charts-usage-line-chartAPI requests per day as two lines separating production and sandbox volume across a 14 day window.

Waterfall Chartapplication-pro-charts-waterfall-chartMRR movement chart with floating bars for new business, expansion, and churn across a billing period.

Weekly Active Users Chartapplication-pro-charts-weekly-active-users-chartDistinct active users per ISO week as a filled area over 12 weeks with a dashed quarter target reference line.

Active Call Panelapplication-pro-chat-messaging-active-call-panelLive huddle surface with elapsed timer, presenting banner, participant tiles showing mute and speaking states, and a call control bar.

Channel Directoryapplication-pro-chat-messaging-channel-directoryA browse and join panel with a create action, labeled search field, sort chips, and rows showing each channel name, description, members, and a join state.

Channel List Sidebarapplication-pro-chat-messaging-channel-list-sidebarWorkspace nav rail with channel and DM sections, unread badges, a muted channel indicator, and per section add affordances.

Channel Settings Panelapplication-pro-chat-messaging-channel-settings-panelChannel settings panel with name and topic fields, public/private radio with consequence notes, a members list, notification level selector, and an archive action.

Conversation Listapplication-pro-chat-messaging-conversation-listInbox rail with six conversation rows showing avatar, preview, timestamp, and unread count badges on two threads.

Dm Thread Panelapplication-pro-chat-messaging-dm-thread-panelComplete 1:1 panel combining a presence header, a grouped message thread with read receipt, and a full composer bar.

Emoji Reactions Blueprintapplication-pro-chat-messaging-emoji-reactions-blueprintStatic open-state emoji picker inline above a message with a recents row, category grid, search input, and existing reaction chips.

Member Profile Drawerapplication-pro-chat-messaging-member-profile-drawerA person panel with a large avatar and presence dot, name and status line, message and huddle actions, contact rows, and shared channels.

Mentions Activity Feedapplication-pro-chat-messaging-mentions-activity-feedAn activity panel with a mark all read header, mentions and reactions filter chips, and rows pairing actor, event, source channel, quoted snippet, and time.

Message Composerapplication-pro-chat-messaging-message-composerChat send bar with attach, emoji, and slash affordances, a typing indicator row, and a Send button with an Enter keyboard hint.

Message Threadapplication-pro-chat-messaging-message-threadChat thread with grouped sender bubbles, a Today day divider, a reaction chip, and a read receipt on the last outgoing message.

Pinned Messages Panelapplication-pro-chat-messaging-pinned-messages-panelChannel pinned messages list showing author, snippet, pinned time and pinner, a jump-to link, and an unpin button per entry.

Poll Message Cardapplication-pro-chat-messaging-poll-message-cardInline thread poll with vote share bars per option, a check on your vote, voter avatar cluster, total count, and close time.

Scheduled Messages Panelapplication-pro-chat-messaging-scheduled-messages-panelQueued outgoing messages list with destination, draft snippet, exact send time, and per row send now, edit, and delete actions.

Search Messages Resultsapplication-pro-chat-messaging-search-messages-resultsChat search results grouped by channel and DM with author, inline highlighted match term, timestamp, and a jump-to-message affordance.

Shared Files Panelapplication-pro-chat-messaging-shared-files-panelConversation files tab with type filter chips and rows showing a file icon, name, size, uploader, share date, and a download action.

Thread Reply Panelapplication-pro-chat-messaging-thread-reply-panelSide panel showing a parent channel message, a reply count divider, four threaded replies, and a scoped reply composer.

Voice Message Threadapplication-pro-chat-messaging-voice-message-threadAn audio thread of chat bubbles, each with a play control, waveform, and duration, plus an active note with elapsed time and a transcript preview.

Annotation Layers Railapplication-pro-comments-annotations-annotation-layers-railA document page mockup where marks from each reviewer form a colored layer, beside a rail of reviewers with color keys, counts, and visibility toggles.

Annotation Toolbar Blueprintapplication-pro-comments-annotations-annotation-toolbar-blueprintStatic open-state blueprint of a text-selection toolbar with comment, highlight, suggest-edit, and link affordances plus a five-color swatch row.

Canvas Pin Commentsapplication-pro-comments-annotations-canvas-pin-commentsDesign canvas mockup with four numbered comment pins and a side rail listing each pin thread with author, note, and resolve actions.

Code Review Threadapplication-pro-comments-annotations-code-review-threadCode diff panel with line numbers, added and removed rows, and a line anchored review thread with replies, composer, and resolve action.

Comment Assignmentsapplication-pro-comments-annotations-comment-assignmentsReview feedback promoted into action items, with filter chips above rows pairing each source quote with an assignee, due date, and status badge.

Comment Composerapplication-pro-comments-annotations-comment-composerStandalone comment composer with a formatting toolbar, file attach, at mention hint, and a Cmd Enter keyboard shortcut hint.

Comment Notification Inboxapplication-pro-comments-annotations-comment-notification-inboxCross document notification feed with mention, reply, and resolve items, unread dots, type filter chips, and a mark all read action.

Comment Sidebarapplication-pro-comments-annotations-comment-sidebarDocument comment sidebar with four threads anchored to quoted text, reply counts, resolve affordances, and one collapsed resolved thread.

Inline Annotation Threadapplication-pro-comments-annotations-inline-annotation-threadHighlighted text excerpt with an attached margin thread showing two comments, a reply composer, emoji reactions, and resolve and delete controls.

Mention Picker Blueprintapplication-pro-comments-annotations-mention-picker-blueprintStatic open state of an at mention picker showing six workspace members with one row highlighted and keyboard navigation hints.

Outdated Comments Panelapplication-pro-comments-annotations-outdated-comments-panelComment threads on a versioned document, split into ones matched to the new version and ones whose anchors broke, with stale quotes and reattach actions.

Pending Review Trayapplication-pro-comments-annotations-pending-review-trayDraft comments held for one review, each with a section anchor, quote, and edit controls, above a summary field, verdict choices, and a submit button.

Reaction Barapplication-pro-comments-annotations-reaction-barEmoji reaction chips with counts showing active and inactive states, an add reaction affordance, and a static hover panel listing who reacted.

Resolved Comments Listapplication-pro-comments-annotations-resolved-comments-listAudit list of closed comment threads with quoted references, resolution attribution, reply counts, a reopen affordance, and an all vs resolved filter.

Spreadsheet Cell Commentsapplication-pro-comments-annotations-spreadsheet-cell-commentsA budget sheet with corner markers on flagged cells beside a rail showing the selected cell thread and a list of other commented cells.

Suggestion Review Rowapplication-pro-comments-annotations-suggestion-review-rowPending edit review rows showing the struck original beside the proposed replacement with author attribution and accept and reject actions per suggestion.

Video Timestamp Commentsapplication-pro-comments-annotations-video-timestamp-commentsVideo review timeline with avatar markers at comment timestamps and a list of time anchored notes with reply and mark done controls.

Audit Log Tableapplication-pro-data-tables-audit-log-tableAppend only security log with mono timestamps, actor avatars, code chip action keys, targets, and source IPs.

Column Visibility Tableapplication-pro-data-tables-column-visibility-tableA customers table beside a checkbox rail that shows and hides columns live, with a locked identity column and a running column count.

Comparison Tableapplication-pro-data-tables-comparison-tablePlan comparison table with features as rows, plans as columns, differing cells highlighted, and a per-column upgrade CTA.

Csv Preview Tableapplication-pro-data-tables-csv-preview-tableCSV import preview with column to field mapping Selects, an unmapped column flag, and a row issue count.

Dense Data Tableapplication-pro-data-tables-dense-data-tableThe compact variant fitting eight webhook rows where a standard table fits five.

Density Toggle Tableapplication-pro-data-tables-density-toggle-tableA deployments table with a segmented comfortable and compact toggle in the header that swaps every row's vertical padding live, above a density note.

Diff Review Tableapplication-pro-data-tables-diff-review-tableA config change review table striking old values beside proposed ones, with change badges, a left rule accent, and approve and reject actions.

Editable Cells Tableapplication-pro-data-tables-editable-cells-tableQuarterly budget grid with one cell in active edit mode, tab navigation hint, and per-row save and cancel actions.

Empty State Tableapplication-pro-data-tables-empty-state-tableProjects table filtered to zero rows keeping active filter chips and the header visible above a centered empty state with recovery actions.

Feature Flags Tableapplication-pro-data-tables-feature-flags-tableFlags with mono keys, environment badges, rollout percentages, a Switch per row.

Grouped Columns Tableapplication-pro-data-tables-grouped-columns-tableAn endpoint latency table with a two tier header spanning grouped metric columns for production and staging, split by vertical rules down the body.

Grouped Rows Tableapplication-pro-data-tables-grouped-rows-tableIssues table with shaded status subheader rows showing group name and count above each set of member rows.

Heatmap Cells Tableapplication-pro-data-tables-heatmap-cells-tableFeature usage matrix with weekday columns, value shaded cells, per row totals, and an intensity legend beneath the table.

Inline Edit Tableapplication-pro-data-tables-inline-edit-tableProjects table with one row in edit mode showing Input and Select cells with save and cancel affordances.

Invoices Tableapplication-pro-data-tables-invoices-tableBilling history with mono invoice ids, status badges, and right aligned amounts.

Multi Select Toolbar Tableapplication-pro-data-tables-multi-select-toolbar-tableContacts table with per row checkboxes, a select all header, and a contextual bulk action toolbar.

Nested Detail Tableapplication-pro-data-tables-nested-detail-tableProjects table where one row expands inline to a key value metadata panel and a recent activity list.

Paginated Tableapplication-pro-data-tables-paginated-tableCustomers table with a working pagination footer showing numbered page buttons, previous and next controls, and a live range summary line.

Pinned Columns Tableapplication-pro-data-tables-pinned-columns-tableWide pipeline table with the name column visually pinned via sticky positioning while remaining columns scroll horizontally.

Row Actions Menu Blueprintapplication-pro-data-tables-row-actions-menu-blueprintStatic blueprint of a documents table with one per-row overflow menu rendered open inline showing Edit, Duplicate, Move, and Delete actions without any Radix portal.

Search Highlight Tableapplication-pro-data-tables-search-highlight-tableAn environment variables table with a filter input that narrows rows live and marks the matched substring inside each key, above a live count line.

Selectable Bulk Tableapplication-pro-data-tables-selectable-bulk-tableRow checkboxes with a select all header and a bulk bar with Remove and Export.

Sortable Header Tableapplication-pro-data-tables-sortable-header-tableProjects table with sort affordance icons on every column header, one column actively sorted descending, and a shift-click secondary sort hint in the footnote.

Sparkline Metrics Tableapplication-pro-data-tables-sparkline-metrics-tableKey metrics table pairing each row with its current value, week over week change, and an inline SVG trend sparkline.

Status Summary Tableapplication-pro-data-tables-status-summary-tableSupport queue with an Open, Blocked, and Done count strip above the ticket rows and a status badge per row.

Sticky Footer Totals Tableapplication-pro-data-tables-sticky-footer-totals-tableInvoice lines table with right-aligned tabular numbers, status badges, and a sticky footer row showing the line item count and running total for billing pages.

Sticky Header Tableapplication-pro-data-tables-sticky-header-tableA background jobs table inside a fixed height scroll viewport with the column header pinned by sticky positioning, so headers stay readable as rows scroll.

Table With Expandable Rowsapplication-pro-data-tables-table-with-expandable-rowsOrders with one row expanded to its line items in a muted inset, statically.

Table With Filtersapplication-pro-data-tables-table-with-filtersProjects with filter chips narrowing rows live, the count updating per click.

Timeline Tableapplication-pro-data-tables-timeline-tableProject schedule table with an inline proportional bar per row showing each project span within a defined date window.

Tree Tableapplication-pro-data-tables-tree-tableHierarchical cost center table with expand chevrons, indented child rows, and rolled-up budget totals per parent.

Users Tableapplication-pro-data-tables-users-tableMembers with role badges, last active times, and the seat math beside the invite button.

Api Consoleapplication-pro-developer-tools-api-consoleREST request builder with a method and path row, query params and headers tabs, a Send affordance, and a JSON response panel.

Build Status Listapplication-pro-developer-tools-build-status-listCI pipeline list with branch, commit message, status Badges, duration, a running progress bar, and a view-logs affordance on failed builds.

Cron Jobs Monitorapplication-pro-developer-tools-cron-jobs-monitorRows with a job name, cron expression, cadence, a dot strip of recent runs, last and next run times, and a status badge.

Dependency Auditapplication-pro-developer-tools-dependency-auditSeverity count tiles above a vulnerability table with package names, advisory ids, installed and patched versions, and an update action.

Deploy Panelapplication-pro-developer-tools-deploy-panelDeployment surface showing the current build steps progress, actor, commit sha, and a recent deploy history list with rollback.

Diff Viewerapplication-pro-developer-tools-diff-viewerA code review diff with a compare header, branch chips, change totals, per file cards, and a unified diff tinting added and removed lines.

Env Vars Managerapplication-pro-developer-tools-env-vars-managerSecrets configuration table with mono keys, sha256 hash chips, a disabled reveal button, target Badges, and a write-only honesty note.

Error Inboxapplication-pro-developer-tools-error-inboxA master list of grouped exceptions with event counts and sparkline bars beside a detail pane showing the selected issue and its stack trace.

Feature Flags Panelapplication-pro-developer-tools-feature-flags-panelAn environment chip row above flag rows with a mono key, rollout meter, kind badge, last editor avatar, and an enable switch.

Log Viewerapplication-pro-developer-tools-log-viewerLive log stream with level Badges, mono timestamps, per-service labeling, level filter chips, and a tail affordance.

Migrations Panelapplication-pro-developer-tools-migrations-panelA database migrations timeline with a header and apply action above a railed list of pending migrations and applied ones with run times.

SDK Quickstartapplication-pro-developer-tools-sdk-quickstartA three step SDK onboarding stepper with package manager install tabs, a client initialization snippet, a first event call, and a live waiting panel.

Secrets Rotation Cardapplication-pro-developer-tools-secrets-rotation-cardSecret rotation panel listing active secrets with age nudges, masked prefixes, and a rotate button that keeps the old secret valid for 24 hours.

SQL Query Editorapplication-pro-developer-tools-sql-query-editorA query workspace pairing a schema sidebar of tables and row counts with a syntax tinted SQL editor and a results table with timing.

Terminal Panelapplication-pro-developer-tools-terminal-panelEmbedded terminal blueprint with a named session tab row, realistic command output, and a blinking prompt cursor.

Trace Waterfallapplication-pro-developer-tools-trace-waterfallA distributed trace waterfall with a header of id, status, and duration above indented span rows whose bars sit on a shared time axis.

Webhook Logs Tableapplication-pro-developer-tools-webhook-logs-tableWebhook delivery log with event name, endpoint, HTTP status badge, duration, attempt ratio, and inline response body for failed rows.

Api Key Created Dialogapplication-pro-dialogs-api-key-created-dialogOne-time API key reveal dialog with a monospaced copy field, a one-time-only warning, scoped permissions, and a checkbox-gated Done button.

Archive Project Dialogapplication-pro-dialogs-archive-project-dialogArchive confirmation dialog with icon rows for what changes, a kept and restorable stats strip, a notify members checkbox, and a restore note.

Bulk Edit Dialogapplication-pro-dialogs-bulk-edit-dialogBulk-edit dialog for 14 selected items with a status Select, a change-preview callout, optional fields, and a 30-second undo-window note.

Cancel Subscription Dialogapplication-pro-dialogs-cancel-subscription-dialogA cancel subscription dialog with a reason radio list, a pause offer panel, a period end access note, and a keep plan primary action.

Confirm Delete Dialogapplication-pro-dialogs-confirm-delete-dialogWhat deleting Apollo destroys and what survives, gated by typing the name.

Connect Account Dialogapplication-pro-dialogs-connect-account-dialogIntegration connect dialog listing exact OAuth scopes, a minimal-scope trust note, and both an OAuth button and an API key path.

Create Webhook Dialogapplication-pro-dialogs-create-webhook-dialogA create webhook dialog with an endpoint URL field, a checklist of subscribable events showing volume estimates, a signing note, and create actions.

Edit Conflict Dialogapplication-pro-dialogs-edit-conflict-dialogEdit conflict dialog with a three column yours versus theirs field diff, a radio list of resolutions, and a version history safety note.

Export Data Dialogapplication-pro-dialogs-export-data-dialogFormat and scope choices with real counts, delivered in minutes, not 30 days.

Feedback Dialogapplication-pro-dialogs-feedback-dialogFeedback dialog with a Bug, Idea, or Other type toggle, a message textarea, an optional screenshot attachment, and honest per-type routing copy.

Import Result Dialogapplication-pro-dialogs-import-result-dialogPost-import report dialog showing created, skipped, and failed row counts with named skip reasons and a download link for the skipped rows.

Invite Members Dialogapplication-pro-dialogs-invite-members-dialogEmails, role, and the seat consequence stated before send, not after.

Keyboard Help Dialogapplication-pro-dialogs-keyboard-help-dialogKeyboard shortcuts reference dialog with two columns of grouped Kbd combos, a search bar, and a roadmap note that remapping is not yet available.

Keyboard Shortcuts Dialogapplication-pro-dialogs-keyboard-shortcuts-dialogTwo columns of Kbd combos with the honest note that remapping is not here yet.

Merge Duplicates Dialogapplication-pro-dialogs-merge-duplicates-dialogA merge dialog pairing two contact records with per field radio picks for the winning value, a retention note, and keep or merge actions.

Move To Project Dialogapplication-pro-dialogs-move-to-project-dialogBulk-move dialog for 8 selected items with a searchable project list, a what-moves callout, and a 30-minute undo window note.

Payment Failed Dialogapplication-pro-dialogs-payment-failed-dialogPayment failed dialog with the invoice in label and value rows, an expired card flagged inline, a dated retry schedule, and card actions.

Remove Member Dialogapplication-pro-dialogs-remove-member-dialogA remove member dialog with the member card, a counted list of what they still own, a reassign select, and a confirm and reassign action.

Request Access Dialogapplication-pro-dialogs-request-access-dialogRequest access dialog with a locked document card, an access level radio list from view to edit, a message field, and a response note.

Restore Version Dialogapplication-pro-dialogs-restore-version-dialogA version history dialog with the current revision pinned above a radio list of prior versions showing authors, timestamps, and change summaries.

Role Change Dialogapplication-pro-dialogs-role-change-dialogRole change confirmation for Maya Chen from Member to Admin with three access gain bullets and an effective immediately note.

Schedule Action Dialogapplication-pro-dialogs-schedule-action-dialogPublish now or schedule for later dialog with a date and time pair, inline timezone, and an offline-safe run note.

Session Expiring Dialogapplication-pro-dialogs-session-expiring-dialogSession expiry warning dialog giving two minutes notice, a stay-signed-in action, and a guarantee that open drafts are saved regardless of choice.

Share Link Dialogapplication-pro-dialogs-share-link-dialogThe link as a copyable chip, access level, expiry, and who already has it.

Sign Out Sessions Dialogapplication-pro-dialogs-sign-out-sessions-dialogA sign out sessions dialog with the current device pinned, a checkbox list of other active sessions, an unfamiliar flag, and a sign out action.

Transfer Ownership Dialogapplication-pro-dialogs-transfer-ownership-dialogTransfer-ownership dialog with a member Select, two named consequence rows, a type-to-confirm input, and the irreversible-without-them note.

Two Factor Setup Dialogapplication-pro-dialogs-two-factor-setup-dialogA two factor setup dialog with a QR mockup beside a copyable manual key, a six cell code entry, and a one time recovery codes note.

Unsaved Changes Dialogapplication-pro-dialogs-unsaved-changes-dialogLeave confirmation dialog listing three specific unsaved field changes with Discard, Keep editing, and Save and leave actions.

Upgrade Plan Dialogapplication-pro-dialogs-upgrade-plan-dialogA plan limit dialog with per resource usage meters, a bordered next tier card listing features and price, and a prorated billing note.

Verify Domain Dialogapplication-pro-dialogs-verify-domain-dialogA verify domain dialog with two copyable DNS record rows showing type and host, a found or pending status each, and a check again action.

Archived Project Stateapplication-pro-empty-states-archived-project-stateRead only archived project page with a preserved banner, a snapshot count grid, an archive record card, and restore and export actions.

Cleared Inbox Stateapplication-pro-empty-states-cleared-inbox-stateInbox zero panel showing 14 handled today, 0 open, and 2 snoozed with a calm no-action-needed message.

Coming Soon Stateapplication-pro-empty-states-coming-soon-stateFeature placeholder naming the section, two capability bullets, a notify-me email form, and an honest no-date timeframe.

Deleted Resource Stateapplication-pro-empty-states-deleted-resource-stateA not found panel for a deleted document with a struck through breadcrumb trail, a deletion record, a restore note, and two recovery actions.

Empty Automations Stateapplication-pro-empty-states-empty-automations-stateEmpty automations panel pairing a build from scratch action with three starter template recipe rows and a facts row on run speed and quota.

Empty Chart Stateapplication-pro-empty-states-empty-chart-stateAnalytics panel keeping the full chart frame and axis ticks, with a zero range message offering wider ranges and their real event counts.

Empty Comments Stateapplication-pro-empty-states-empty-comments-stateEmpty discussion panel with a zero comment header, a watcher avatar row, and an inline composer with a mention hint and visibility note.

Empty Table Stateapplication-pro-empty-states-empty-table-stateMembers table with the real header row visible and an empty body explaining which filters hid all 14 rows.

Empty Uploads Dropzoneapplication-pro-empty-states-empty-uploads-dropzoneAn empty file library with a dashed dropzone, browse and import from URL actions, a facts row for formats and storage, and a privacy note.

Error Boundary Cardapplication-pro-empty-states-error-boundary-cardIn-place panel fallback showing a mono error reference, a section-scoped retry button, and confirmation that the rest of the page is unaffected.

Error Page 404application-pro-empty-states-error-page-404Centered 404 page showing the failed path in mono, three reasons a workspace link goes stale, and search or dashboard as recovery actions.

Error Page 500application-pro-empty-states-error-page-500The 500 with a mono incident id, the team already paged, retry and status links.

First Run Checklist Emptyapplication-pro-empty-states-first-run-checklist-emptyEmpty dashboard state with a 4-step setup checklist, progress bar, and honest note that panels appear as steps are completed.

Import In Progress Stateapplication-pro-empty-states-import-in-progress-stateA panel for a running data import with a three step pipeline, a live progress bar, meta rows for timing, and notify or cancel actions.

Maintenance Pageapplication-pro-empty-states-maintenance-pageFull-page planned maintenance screen with a stated window, estimated time remaining, a do-nothing instruction, and a status-page link.

No Access Yet Stateapplication-pro-empty-states-no-access-yet-statePending-access gate naming the reviewer with avatar and ETA, plus a list of surfaces the user can reach in the meantime.

No Data Yet Stateapplication-pro-empty-states-no-data-yet-stateEmpty panel with a geometric illustration, an events headline, an explanation of when data appears, and a primary API call action.

No Integrations Stateapplication-pro-empty-states-no-integrations-stateEmpty integrations surface with unlock bullets, a browse CTA, and Slack, GitHub, and Jira quick-connect chips.

No Search Results Stateapplication-pro-empty-states-no-search-results-stateThe query kept, three scopes to widen, and what search covers stated.

Offline Stateapplication-pro-empty-states-offline-stateOffline state panel listing what still works locally and what is paused until reconnection, with a guarantee that queued drafts are never lost.

Onboarding Empty Dashboardapplication-pro-empty-states-onboarding-empty-dashboardThe dashboard before data, zeroed KPIs and the five minute fill promise.

Payment Failed Stateapplication-pro-empty-states-payment-failed-statePayment failed billing gate showing the card on file, the exact decline code, a three attempt retry schedule, and update and retry actions.

Permission Denied Stateapplication-pro-empty-states-permission-denied-stateThe 403 that names the role, the owners who grant it, and the request flow.

Rate Limited Stateapplication-pro-empty-states-rate-limited-stateRate limit panel showing the 60 requests per minute cap, the reset time, and upgrade or support paths to increase the limit.

Search No Matchesapplication-pro-empty-states-search-no-matchesZero-result state echoing 3 active filter chips, the count 0 of 124, and per-filter recovery suggestions with item counts.

Session Expired Stateapplication-pro-empty-states-session-expired-stateSession expired screen showing the account for one click resume, a saved draft note, meta rows naming the policy, and sign in actions.

Storage Full Stateapplication-pro-empty-states-storage-full-stateA storage quota panel with a segmented usage bar at capacity, a category breakdown, paused versus working lists, and free space or upgrade actions.

Trial Expired Stateapplication-pro-empty-states-trial-expired-stateTrial expired gate stating the end date, side by side lists of what stays read only versus what is paused, the plan price, and export.

Welcome Back Stateapplication-pro-empty-states-welcome-back-stateReturning-user digest showing three dated workspace changes, a resume link, and an explicit note that nothing was deleted.

File Activity Feedapplication-pro-file-manager-file-activity-feedA folder activity timeline grouping events by day on a vertical rail, each with an action icon, actor avatar, action sentence, and folder path.

File Browser Tableapplication-pro-file-manager-file-browser-tableFolder contents table with file-type icons, owner avatars, tabular sizes, modified times, and per-row actions.

File Conflict Resolverapplication-pro-file-manager-file-conflict-resolverA sync conflict resolver with one card per file comparing the device copy against the cloud copy by radio choice, plus an apply summary bar.

File Detail Panelapplication-pro-file-manager-file-detail-panelFile inspector with a preview, ruled metadata rows, a shareable link chip, version count, and action buttons.

File Grid Galleryapplication-pro-file-manager-file-grid-galleryMedia grid of eight thumbnail tiles with type badges, filename captions, one selected tile, and a view toggle.

File Request Panelapplication-pro-file-manager-file-request-panelA two column file request workspace pairing a create form with title, folder, deadline, and notify switch beside an open requests list with progress.

File Search Resultsapplication-pro-file-manager-file-search-resultsA file search panel with a query field, removable filter chips, a result count, and rows with highlighted matches, paths, size, and dates.

File Version Historyapplication-pro-file-manager-file-version-historyA version history card with the current revision highlighted and earlier versions as ruled rows showing editor, note, size, restore, and download.

Folder Tree Navapplication-pro-file-manager-folder-tree-navRecursive folder tree sidebar with expand chevrons, item counts, one active node, and Trash and Shared rows.

Recent Files Listapplication-pro-file-manager-recent-files-listRecent files list grouped by Today and This week showing file type icon, name, folder path, last editor, and relative time.

Share Permissions Panelapplication-pro-file-manager-share-permissions-panelA file share panel with an invite by email row, a people with access list showing roles, general link access, and footer actions.

Shared Links Tableapplication-pro-file-manager-shared-links-tableA shared links table listing each file, link access badge, creator avatar, download count, and expiry, with per row copy and actions buttons.

Shared With Me Tableapplication-pro-file-manager-shared-with-me-tableShared files table showing owner avatar, shared date, and access level badge per file with an open affordance on each row.

Storage Cleanup Panelapplication-pro-file-manager-storage-cleanup-panelA storage cleanup panel with a reclaimable space summary, checkbox large files and duplicates sections, an old trash row, and a selection bar.

Storage Usage Cardapplication-pro-file-manager-storage-usage-cardStorage quota card showing 142 of 250 GB used with a type breakdown bar and a recoverable trash hint.

Sync Status Panelapplication-pro-file-manager-sync-status-panelA sync status panel with a linked devices list showing per device state, followed by a selective sync section with per folder toggle switches.

Trash Bin Tableapplication-pro-file-manager-trash-bin-tableTrash table listing deleted files with deleter, deletion time, days until permanent removal, and per-row restore and delete-forever actions.

Upload Dropzone Cardapplication-pro-file-manager-upload-dropzone-cardDashed dropzone with accepted types and a transfer list showing uploading, done, and failed states with errors.

Advanced Filter Builderapplication-pro-filters-and-search-advanced-filter-builderThree condition rows with AND OR logic and the live match count.

Applied Filters Summaryapplication-pro-filters-and-search-applied-filters-summaryActive filter summary bar that renders the current filter state as a plain sentence with removable tokens and a result count.

Column Filter Blueprintapplication-pro-filters-and-search-column-filter-blueprintStatic open state of a column header filter popover with a search box, checkbox value list with counts, and apply and clear controls.

Date Range Panelapplication-pro-filters-and-search-date-range-panelPresets beside a two month grid with a highlighted range and the timezone line.

Faceted Filter Barapplication-pro-filters-and-search-faceted-filter-barThree facet chips with removable tokens and the live count per change.

Filter Chips Rowapplication-pro-filters-and-search-filter-chips-rowRemovable filter chips above results with a live match count and a clear all control.

Filter Funnel Panelapplication-pro-filters-and-search-filter-funnel-panelA filter funnel showing active filters as ordered steps, each with a proportional bar and the results remaining, above a clear all footer.

Find In View Barapplication-pro-filters-and-search-find-in-view-barIn panel find bar over a log view with a query input, live match count, previous and next navigation, and case and whole word toggles.

Group By Selectorapplication-pro-filters-and-search-group-by-selectorGrouping control with dimension chips for Status, Assignee, and Priority that previews the resulting group headers with per-group counts and mini progress bars.

Grouped Results Blueprintapplication-pro-filters-and-search-grouped-results-blueprintGlobal search panel in its open state with a query input, results grouped into Projects, People, and Documents, and a keyboard hint footer.

Include Exclude Tagsapplication-pro-filters-and-search-include-exclude-tagsTri state tag filter where each tag cycles from neutral to required to excluded, a summary line, and a demo alert list that responds.

Multi Facet Panelapplication-pro-filters-and-search-multi-facet-panelFaceted filter sidebar with collapsible groups for Status, Owner, Label, and Date, with checkbox value lists and hit counts.

Multi Sort Builderapplication-pro-filters-and-search-multi-sort-builderOrdered sort rules with a field chip, a direction toggle, and remove controls, an add sort button, and a demo issue list that reorders live.

Query Language Barapplication-pro-filters-and-search-query-language-barPower-search bar with a structured query input, token-highlighted echo of parsed filters, a syntax reference panel, and a live result count.

Quick Filter Togglesapplication-pro-filters-and-search-quick-filter-togglesA rail of switch based quick filters above a task queue, a live result count with reset, the filtered list, and an inline empty row.

Range Filter Histogramapplication-pro-filters-and-search-range-filter-histogramA numeric range facet with a distribution histogram, a dual thumb slider, min and max readouts, quick range presets, and a live match count.

Recent And Saved Blueprintapplication-pro-filters-and-search-recent-and-saved-blueprintStatic open state of a search dropdown with recent queries, named saved searches, and a keyboard hint footer.

Results Density Toggleapplication-pro-filters-and-search-results-density-toggleView-controls toolbar with independent density and layout toggles wired to a demo list that visibly responds with changed padding and grid or list arrangement.

Saved Filter Pillsapplication-pro-filters-and-search-saved-filter-pillsNamed saved-search pills row with active state inversion, per-pill result counts, a star save affordance, and a pencil edit control.

Saved Searches Managerapplication-pro-filters-and-search-saved-searches-managerA saved searches panel listing each search with its query, visibility, owner, and last used time, plus default, edit, and delete row actions.

Saved Views Tabsapplication-pro-filters-and-search-saved-views-tabsNamed queries as tabs, the active view spelling out its query in plain text.

Scope Selector Barapplication-pro-filters-and-search-scope-selector-barSearch scope chip switcher showing result counts per scope alongside a query input that updates its placeholder to match the active scope.

Search Preview Paneapplication-pro-filters-and-search-search-preview-paneA master detail search view with a hit list beside a live preview pane that shows the selected result body with every query match highlighted.

Search Results Highlightsapplication-pro-filters-and-search-search-results-highlightsA search results list with matched query terms highlighted in every title and snippet, entity type tabs with counts, and per result meta lines.

Search With Recentapplication-pro-filters-and-search-search-with-recentSearch input with its suggestion panel open showing recent searches, suggested filter shortcuts, and a prefix tip.

Sort Density Toolbarapplication-pro-filters-and-search-sort-density-toolbarWorking sort and density controls wired to a demo table that responds.

Sort Menu Blueprintapplication-pro-filters-and-search-sort-menu-blueprintStatic open-state sort popover with four sort options, an active checkmark, and a Desc/Asc direction toggle rendered inline without a Radix portal.

View Changes Barapplication-pro-filters-and-search-view-changes-barA saved view change bar listing unsaved edits as rows with per row undo, the resulting query, and update, save as new, and discard actions.

Zero Results Panelapplication-pro-filters-and-search-zero-results-panelA zero results search state with the failed query, a spelling suggestion, the active filters that may hide matches, and tips for broadening.

Address Form Cardapplication-pro-forms-address-form-cardAddress form with country Select first, locale aware field order and labels, and an autofill correction tip.

API Token Create Formapplication-pro-forms-api-token-create-formAPI token form with scope checkboxes, an admin warning line, expiry select, and a shows once footer notice.

Bulk Import CSV Cardapplication-pro-forms-bulk-import-csv-cardDrop zone, column mapping with one flagged field, and the dry run promise.

Conditional Fields Formapplication-pro-forms-conditional-fields-formAlert rule form where a channel Select reveals dependent fields, with the email branch shown expanded.

Create Project Formapplication-pro-forms-create-project-formName with slug preview, the immutable region warning, framework tiles, visibility.

Cron Schedule Formapplication-pro-forms-cron-schedule-formRecurring schedule builder with a frequency select, day-of-week toggle chips, time and timezone selects, and a summary listing the next three runs.

Danger Zone Formapplication-pro-forms-danger-zone-formDestructive delete form with an itemized consequence list, two acknowledgment checkboxes, and a type-to-confirm input that gates the delete button.

Date Range Formapplication-pro-forms-date-range-formDate range input with preset chips, from and to fields, a resolved range summary, and a workspace timezone note.

Feedback Form Cardapplication-pro-forms-feedback-form-cardCompact feedback card with Bug, Idea, and Praise kind chips and honest routing copy in the footer.

File Field Formapplication-pro-forms-file-field-formForm with a dropzone stating accepted types and size limit, an uploaded file chip with remove, and an honest note about decoupled upload timing.

Inline Edit Formapplication-pro-forms-inline-edit-formProfile card where each row shows its saved value with an Edit action that swaps a single row into an input with Save and Cancel.

Inline Validation Fieldsapplication-pro-forms-inline-validation-fieldsForm showing all three live validation states side by side: a valid field with a checkmark, a checking field with a spinner, and an error field with a corrective message.

Managed Fields Formapplication-pro-forms-managed-fields-formA profile form where a policy banner explains directory sync, identity fields render locked with a synced marker, and other fields stay editable.

Multi Step Form Panelapplication-pro-forms-multi-step-form-panelThree step form shown mid flight at the Configuration step with autosave reassurance in the footer.

Notification Matrix Formapplication-pro-forms-notification-matrix-formNotification matrix with event rows crossed against email, push, and Slack checkbox columns, a locked security row, and an email frequency select.

Password Strength Formapplication-pro-forms-password-strength-formChange password card with current and new fields, a live requirement checklist, a four segment strength meter, a confirm field, and a footer action.

Payment Details Formapplication-pro-forms-payment-details-formCard payment form with number, expiry, CVC, postal code, a save card toggle, and a processor security note.

Query Builder Formapplication-pro-forms-query-builder-formA segment builder with a match mode select, condition rows pairing field, operator, and value controls, plus a live estimate of matching contacts.

Repeatable Rows Formapplication-pro-forms-repeatable-rows-formDynamic line-item form with editable description, quantity, and unit price columns, a remove button per row, an add row affordance, and a live running total.

Review and Submit Cardapplication-pro-forms-review-and-submit-cardMulti-section form summary with inline edit links per section, a terms acceptance checkbox, and a submit button that stays disabled until the user confirms.

Rich Text Formapplication-pro-forms-rich-text-formA compose form with a title field and an editor toolbar of formatting actions, a write and preview toggle, plus attach, mention, and publish controls.

Searchable Select Blueprintapplication-pro-forms-searchable-select-blueprintStatic open combobox blueprint with a search input, grouped options, one highlighted and one checked, and a create new row.

Settings Form Two Colapplication-pro-forms-settings-form-two-colTwo column settings form with label and helper text on the left and the field on the right, with a save bar.

Stepper Wizard Reviewapplication-pro-forms-stepper-wizard-reviewFinal review step of a multi-step wizard with a checked stepper, per-step value summaries with Edit links, and a confirm button.

Tag Input Formapplication-pro-forms-tag-input-formForm with a tag input showing existing chips, an inline suggestion list on partial match, a create new tag option, and a per-project tag limit note.

Threshold Slider Formapplication-pro-forms-threshold-slider-formAlert threshold form with paired warning and critical sliders, live readouts, a zone bar that redraws as thumbs move, and a duration select.

Unsaved Changes Formapplication-pro-forms-unsaved-changes-formA settings form in its dirty state with per field edited markers, revert actions, saved values, and a footer counting unsaved changes beside save.

Validation States Formapplication-pro-forms-validation-states-formBlueprint showing valid, invalid, and warning field states side by side with actionable error copy guidance.

View Only Formapplication-pro-forms-view-only-formRead only form state with a permission banner, every field disabled at its saved value, and a footer explaining why save is off.

Weekly Hours Formapplication-pro-forms-weekly-hours-formWeekly availability editor with one row per day, an on/off switch, from and to time selects for open days, and an apply-to-weekdays shortcut.

Article Readerapplication-pro-help-support-article-readerHelp article layout with a breadcrumb, sectioned body, a sticky table-of-contents rail, and a was-this-helpful feedback row.

Canned Responses Blueprintapplication-pro-help-support-canned-responses-blueprintStatic open-state blueprint of a saved replies picker beside a reply composer, with a searchable snippet list and one highlighted row ready to insert.

Community Q&A Threadapplication-pro-help-support-community-qa-threadA voted community question card with author meta and tags above an answers list, an accepted staff answer pinned first, and a reply footer.

Contact Support Panelapplication-pro-help-support-contact-support-panelSupport contact page with three channel cards and an email form that states the honest no priority queue policy.

Contextual Help Drawerapplication-pro-help-support-contextual-help-drawerA contextual help layout pairing a dimmed billing settings canvas with a docked help drawer of matched articles, a walkthrough card, and contact actions.

CSAT Survey Panelapplication-pro-help-support-csat-survey-panelPost resolution survey card with solved ticket context, a 1 to 5 rating scale, a what stood out checklist, comment field, and submit row.

Diagnostics Report Panelapplication-pro-help-support-diagnostics-report-panelA diagnostics report with a rerun action, automatic checks in pass, warn, and fail states, an environment rail, and copy or attach actions.

Faq Accordion Panelapplication-pro-help-support-faq-accordion-panelIn-app FAQ card with six common questions in an accordion, first item open, and a link to open a support ticket.

Getting Started Checklistapplication-pro-help-support-getting-started-checklistAn onboarding setup card with a completion count, a segmented progress bar, completed steps, an expanded current step with actions, and upcoming numbered steps.

Guided Troubleshooterapplication-pro-help-support-guided-troubleshooterA troubleshooting wizard with a progress bar, an answered steps summary, the current question as selectable option rows, and step actions.

Help Center Homeapplication-pro-help-support-help-center-homeHelp center landing with a search bar, six icon category tiles with article counts, and a popular articles list.

Help Search Resultsapplication-pro-help-support-help-search-resultsA help center search field and facet rail beside a results list of breadcrumbs, excerpts, and meta badges, with a support fallback strip.

Known Issues Boardapplication-pro-help-support-known-issues-boardA known issues board with a page header, status filter chips with counts, and a list of confirmed issues showing area, reports, and workarounds.

Product Glossaryapplication-pro-help-support-product-glossaryA glossary filter field, an A to Z index strip, and letter sections listing terms with definitions, area tags, and cross links.

Shortcuts Referenceapplication-pro-help-support-shortcuts-referenceA keyboard shortcuts panel with a platform toggle, a two column grid of categories pairing action labels with keycap combinations, and a customize footer.

SLA Response Matrixapplication-pro-help-support-sla-response-matrixA support SLA panel with a plan header, a severity by plan matrix of first response targets with your plan highlighted, and coverage notes.

Submit Request Formapplication-pro-help-support-submit-request-formA support ticket form with subject, area, severity, description, and attachments beside a rail of suggested articles and response time targets.

Ticket Detailapplication-pro-help-support-ticket-detailSupport ticket view with a header, customer and agent conversation thread, internal notes, and a reply composer.

Ticket Listapplication-pro-help-support-ticket-listAgent support queue showing ticket subject, requester avatar, status and priority badges, last update time, and assigned agent with a filter strip.

Ticket Status Trackerapplication-pro-help-support-ticket-status-trackerCustomer ticket page with a five stage progress timeline, latest agent update card, reply button, and a details rail with next update time.

Video Tutorials Libraryapplication-pro-help-support-video-tutorials-libraryA tutorials header with topic chips, a continue watching card with progress and an up next list, and a browse grid of video cards.

Attachment Galleryapplication-pro-inbox-email-attachment-galleryA mailbox files view with type filter chips, month grouped cards showing a file icon, sender, and size, plus a storage usage footer.

Bulk Actions Toolbarapplication-pro-inbox-email-bulk-actions-toolbarEmail list with a contextual toolbar showing Archive, Mark read, Label, Snooze, and Delete when messages are selected.

Compose Blueprintapplication-pro-inbox-email-compose-blueprintStatic blueprint of a bottom-right docked compose window with To, Cc, and Subject fields, a body area, formatting affordances, and a Send button with a keyboard shortcut hint.

Delivery Statusapplication-pro-inbox-email-delivery-statusSent message tracking pane with an engagement summary and recipient rows pairing each status badge with a last activity detail line.

Email Filters Rulesapplication-pro-inbox-email-email-filters-rulesEmail rules manager with ruled rows describing each rule in plain English, action badges, a toggle switch, and an add-rule affordance.

Email Listapplication-pro-inbox-email-email-listInbox message list with sender avatars, subjects, snippets, unread indicators, star toggles, and attachment markers per row.

Email Readerapplication-pro-inbox-email-email-readerFull message reading pane with sender row, body paragraphs, attachment chip, collapsed quoted reply, and reply or forward actions.

Inbox Sidebarapplication-pro-inbox-email-inbox-sidebarMail navigation sidebar with a Compose button, standard folders with unread counts, and a labeled section of color-coded labels with message counts.

Label Managerapplication-pro-inbox-email-label-managerLabel settings panel with a ruled table of color-swatched labels, message counts, rename and delete actions, an inline create row, and a drag-to-nest note.

Quick Reply Blueprintapplication-pro-inbox-email-quick-reply-blueprintStatic open-state blueprint of a compact inline reply composer with canned-reply chips and an edit-before-sending note.

Scheduled Send Queueapplication-pro-inbox-email-scheduled-send-queueAn outbox pane grouping queued messages by send window, each row showing recipient, subject, snippet, send time, and edit and send actions.

Search Resultsapplication-pro-inbox-email-search-resultsA mail search pane with a token filled search bar, folder scope chips, ruled result rows highlighting the matched term, and a result count footer.

Sender Profile Railapplication-pro-inbox-email-sender-profile-railContact detail rail beside an open message with an identity header, quick actions, relationship stats, recent conversations, and shared files.

Shared Inbox Triageapplication-pro-inbox-email-shared-inbox-triageA shared support mailbox with queue tabs, conversation rows showing customer, subject, and status, and an assignee chip or Assign action.

Signature Editorapplication-pro-inbox-email-signature-editorA left rail of saved signatures and default pickers beside a main pane with a formatting toolbar, source editor, and rendered message preview.

Snooze Email Blueprintapplication-pro-inbox-email-snooze-email-blueprintStatic open snooze popover beside a message row with four preset return times and a pick-a-date option.

Spam Quarantineapplication-pro-inbox-email-spam-quarantineA quarantine pane listing held messages with a monogram, sender, subject, a detection reason badge, an auto delete countdown, and per row actions.

Split Inboxapplication-pro-inbox-email-split-inboxSplit inbox pane that sorts mail into labeled sections, each with an unread count, a view all link, and compact sender rows.

Template Libraryapplication-pro-inbox-email-template-libraryCanned reply template library with category filter chips and a card grid showing each template name, body preview, slash shortcut, and usage count.

Thread Collapsedapplication-pro-inbox-email-thread-collapsedEmail thread view with earlier messages collapsed to one-line summaries and the latest message fully expanded with body, attachment chip, and a reply prompt.

Unsubscribe Managerapplication-pro-inbox-email-unsubscribe-managerRuled rows of low engagement senders, each with a monogram, address, weekly volume, last opened stat, and unsubscribe or keep actions.

Vacation Responderapplication-pro-inbox-email-vacation-responderAn out of office settings panel with a master switch, date range fields, subject and message inputs, audience checkboxes, and a save footer.

Api Explorer Panelapplication-pro-integrations-api-explorer-panelIn-app REST console with an endpoint row, editable query parameter rows, a Send button, and a response area showing a JSON snippet with a status badge and timing.

API Keys Panelapplication-pro-integrations-api-keys-panelA one time reveal banner for a freshly created key, then rows of active keys with environment, masked prefix, scopes, and revoke actions.

Api Usage Cardapplication-pro-integrations-api-usage-cardUsage against allowance, top endpoints, and the observed rate limit peak.

API Version Panelapplication-pro-integrations-api-version-panelA version summary card with an upgrade action above a list of date named API versions with status badges, change highlights, and sunset warnings.

Connected Accounts Listapplication-pro-integrations-connected-accounts-listOAuth accounts with scopes and the guard rail on the only sign in method.

Connected Services Statusapplication-pro-integrations-connected-services-statusProvider status board where each connected service shows live status, response time, and last incident, plus an impact note on the degraded provider.

Field Mapping Panelapplication-pro-integrations-field-mapping-panelSource CRM fields on the left mapped to destination fields on the right, with transform badges, one unmapped row flagged, and a save footer.

Github Repo Pickerapplication-pro-integrations-github-repo-pickerGitHub repo selection panel with a searchable repository list, per-repo checkboxes, private badges, a minimal-scope note, and a save action.

Incoming Webhook Setupapplication-pro-integrations-incoming-webhook-setupIncoming webhook setup panel with a generated endpoint URL, masked signing secret, accepted event types, and a JSON payload sample.

Integration Detail Panelapplication-pro-integrations-integration-detail-panelGitHub integration page with connected account, permissions list, configure rows, and disconnect consequence.

Integration Health Cardapplication-pro-integrations-integration-health-cardPer-integration health panel showing connected status, last sync time, sync frequency, error count, and a five-run sync history.

Integration Logs Tableapplication-pro-integrations-integration-logs-tableIntegration event log with timestamp, direction, event name, HTTP status badge, duration, and an expanded error detail row for failed events.

Integration Marketplaceapplication-pro-integrations-integration-marketplaceBrowseable integration directory with category chips, a search field, and six cards showing brand name, one-line description, Install or Installed state, and a verified trust line.

Integration Request Boardapplication-pro-integrations-integration-request-boardRequest board for missing integrations with a submission form, then top requested tools ranked by votes with upvote buttons and roadmap status badges.

Integration Setup Wizardapplication-pro-integrations-integration-setup-wizardA guided setup wizard with a vertical step rail beside a pane of sync direction cards, a conflict rule note, and Back and Continue actions.

Integrations Galleryapplication-pro-integrations-integrations-gallerySix integration tiles with category chips, Connected badges on active connections, and a support footer.

IP Allowlist Panelapplication-pro-integrations-ip-allowlist-panelAn allowlist panel with an enforcement badge, a current address warning, an add form, and rows of CIDR ranges with owners and last match times.

Oauth Consent Blueprintapplication-pro-integrations-oauth-consent-blueprintOAuth grant screen listing exact permissions granted and a cannot list, connecting as a named account, with Authorize and Cancel actions.

Oauth Scopes Reviewapplication-pro-integrations-oauth-scopes-reviewOAuth permissions audit panel listing each app scope with a plain-English description, risk level, and a per-scope revoke affordance.

Rate Limit Cardapplication-pro-integrations-rate-limit-cardAPI rate limit card showing current rpm usage against the plan cap with a progress bar, rolling window details, and the queue-not-drop policy.

SDK Quickstart Panelapplication-pro-integrations-sdk-quickstart-panelA quickstart panel with a language tab strip, three numbered steps for install, auth, and a first request with copyable code, and reference links.

Slack Connect Panelapplication-pro-integrations-slack-connect-panelSlack integration config panel showing the connected workspace, a channel selector, per-event notification toggles, a test-message affordance, and a disconnect section.

Sync Conflict Resolverapplication-pro-integrations-sync-conflict-resolverConflict queue where two systems changed one field, shown as side by side value panels with per side keep actions and a default rule note.

Sync Dry Run Previewapplication-pro-integrations-sync-dry-run-previewPre sync dry run report with create, update, skip, and conflict summary tiles, a sample of exact field changes, and a gated enable action.

Sync Status Panelapplication-pro-integrations-sync-status-panelIntegration sync health panel with per object type record counts, last success times, one error row with the exact message and retry countdown.

Webhook Settings Panelapplication-pro-integrations-webhook-settings-panelEndpoints with delivery status, the failing one shown as ops, not shame.

Webhook Test Consoleapplication-pro-integrations-webhook-test-consoleWebhook debugging surface with an event-type selector, a JSON sample payload, a send-test action, and a recent-deliveries strip with inline failure responses.

Blocked Cards Boardapplication-pro-kanban-boards-blocked-cards-boardKanban release board where blocked cards take a tinted border and Blocked chip, column headers count blockers, and the board totals every blocker.

Board Automation Panelapplication-pro-kanban-boards-board-automation-panelA board automation surface pairing a rules list with enable switches and run counts beside a When, If, Then rule editor and save actions.

Board Column Cardapplication-pro-kanban-boards-board-column-cardIsolated kanban column with header count, add affordance, and cards showing label, assignee, due date, and subtask progress.

Board Filters Barapplication-pro-kanban-boards-board-filters-barBoard toolbar with assignee avatar toggles, label chips, a group-by control, search, and a visible filtered card count.

Board Header Toolbarapplication-pro-kanban-boards-board-header-toolbarBoard name, Board and Table and Timeline view switcher, member avatar filters, an active filter badge, group-by selector, and a share button.

Board Template Pickerapplication-pro-kanban-boards-board-template-pickerBoard creation grid of workflow templates, each with a mini column mockup, a description, and a columns and automations meta line; one is selected.

Card Aging Boardapplication-pro-kanban-boards-card-aging-boardA kanban board where each card carries a days in column chip tiered fresh, aging, or stale, with stale cards flagged and a threshold legend.

Card Checklist Panelapplication-pro-kanban-boards-card-checklist-panelSubtask checklist inside an open kanban card with a progress bar, five items, two pre-checked, and an add-item affordance.

Card Composer Columnapplication-pro-kanban-boards-card-composer-columnKanban board with an open inline card composer in the first column, offering a title field, label, owner, due date, and estimate chips.

Card Detail Blueprintapplication-pro-kanban-boards-card-detail-blueprintStatic open-card panel over a scrim showing status, assignee, description, a checklist with progress, and comment count.

Collapsed Columns Boardapplication-pro-kanban-boards-collapsed-columns-boardA kanban board where quiet stages collapse into slim vertical rails showing name and count, while active stages stay expanded with cards.

Column Policy Boardapplication-pro-kanban-boards-column-policy-boardKanban board where every column carries a dashed entry policy panel listing the criteria a card must meet before it can move into that stage.

Drag State Boardapplication-pro-kanban-boards-drag-state-boardA kanban board frozen mid drag with a dashed pickup ghost, a tilted lifted card over an insertion indicator, and a move status line.

Kanban Boardapplication-pro-kanban-boards-kanban-boardFull four-column product board with issue cards showing label badges, assignee avatars, and muted Done column.

Swimlane Boardapplication-pro-kanban-boards-swimlane-boardKanban grid with two assignee lanes crossing three workflow columns and dashed empty-cell placeholders.

WIP Limit Boardapplication-pro-kanban-boards-wip-limit-boardA kanban board with per column work in progress limits, count against limit chips, an over limit column flagged, and story point totals per stage.

Format Settingsapplication-pro-localization-format-settingsFormat settings panel with date, time, week start, number, and currency Selects each showing a live preview value and an auto-detect from locale toggle.

Glossary Managerapplication-pro-localization-glossary-managerA master detail glossary pairing a term list with the selected term's definition, usage rules, banned variants, and approved translations per locale.

Language Switcher Blueprintapplication-pro-localization-language-switcher-blueprintStatic open language picker panel with 10 locales in their native scripts, the current selection checked, and partial coverage notes on two languages.

Locale Coverage Matrixapplication-pro-localization-locale-coverage-matrixCoverage grid crossing string namespaces with target locales, percent cells with banded square indicators, a totals row, and a legend.

Locale Fallback Chainapplication-pro-localization-locale-fallback-chainA locale fallback chain with an ordered resolution list, coverage bars, and role badges, plus a trace showing a key served by the next locale.

Locale Preview Cardapplication-pro-localization-locale-preview-cardSide-by-side locale comparison card showing how dates, numbers, currency, and a sample sentence render in English versus the selected target locale.

Pseudo Locale Testerapplication-pro-localization-pseudo-locale-testerA pseudo locale tester with a strategy switch and ruled rows pairing each English string with its accented render, growth percentage, and fit badge.

RTL Preview Panelapplication-pro-localization-rtl-preview-panelA right to left preview mocking a settings screen in English beside Arabic, plus a bidi checklist marking each check pass or issue.

String Editor Panelapplication-pro-localization-string-editor-panelSingle string translation editor with source text, placeholder chip, machine suggestion row, target textarea with counters, and queue navigation.

Translation Progress Cardapplication-pro-localization-translation-progress-cardTranslation progress panel listing each language with a percent complete bar, exact string counts, and a Live, Preview, or Draft status badge.

Translation Tableapplication-pro-localization-translation-tableTranslation string table with mono keys, source English, French target, and Translated, Fuzzy, and Missing status badges with a per-row edit action.

Address Cardapplication-pro-maps-location-address-cardSaved address card with a static map thumbnail, edit and copy actions, coordinate line, and a default-address toggle with an invoice caveat.

Distance Radius Cardapplication-pro-maps-location-distance-radius-cardStatic map blueprint with a dashed SVG radius circle, a stepped radius control, and a count of locations within the selected distance.

Geofence Zonesapplication-pro-maps-location-geofence-zonesStatic map blueprint with polygon and radius zones above ruled rows pairing each zone with its trigger rule, event count, and toggle.

IP Lookup Panelapplication-pro-maps-location-ip-lookup-panelA query field and lookup action above a result card that pairs resolved detail rows with a static map blueprint and a reputation footer strip.

Location Historyapplication-pro-maps-location-location-historyA visit timeline listing each place with arrival window, time spent, and travel between stops, beside a breadcrumb map and a totals strip.

Location Pickerapplication-pro-maps-location-location-pickerAddress search input with an open suggestion list and a static map preview blueprint showing the resolved pin and coordinates.

Location Sharing Settingsapplication-pro-maps-location-location-sharing-settingsA master sharing switch, a precision choice between precise and approximate, a list of people who can see you, and a history retention row.

Map With Pins Blueprintapplication-pro-maps-location-map-with-pins-blueprintStatic office locations map with an SVG grid surface, five absolutely-positioned pins, zoom controls, and a side list of pinned locations.

Region Selectorapplication-pro-maps-location-region-selectorData-residency region picker with latency indicators, compliance notes per region, and a footer stating region is set once at workspace creation.

Route Plannerapplication-pro-maps-location-route-plannerOrdered stop timeline with per leg distances and ETAs beside a static map tracing the route with numbered markers and a vehicle dot.

Territory Listapplication-pro-maps-location-territory-listSales territory table with static map thumbs, assigned rep avatars, account counts, and an assign affordance for unassigned rows.

Timezone Overlapapplication-pro-maps-location-timezone-overlapA teammate list showing avatar, city, and local time beside a 24 hour UTC strip of working hour cells, with a legend and best window footer.

Album Listapplication-pro-media-gallery-album-listCollection organizer listing albums with a cover thumbnail, item count, last updated date, and a create album affordance.

Asset Detail Panelapplication-pro-media-gallery-asset-detail-panelAsset inspector with a preview, ruled metadata rows for dimensions and usage, a copy URL chip, and replace, download, and delete actions.

Asset Version Historyapplication-pro-media-gallery-asset-version-historyA file version history with a header, then ruled rows per version showing a thumbnail, change note, uploader, timestamp, size, and restore action.

Bulk Media Actionsapplication-pro-media-gallery-bulk-media-actionsMedia bulk-ops toolbar showing selection count with Move, Tag, Download, and Delete actions and a clear-selection affordance.

Folder Breadcrumb Barapplication-pro-media-gallery-folder-breadcrumb-barMedia folder toolbar with a clickable path, grid and list view toggle, sort picker, and New Folder and Upload actions.

Image Crop Blueprintapplication-pro-media-gallery-image-crop-blueprintStatic crop tool blueprint with a Placeholder canvas, rule of thirds grid, corner handles, aspect ratio chips, and apply and cancel actions.

Lightbox Blueprintapplication-pro-media-gallery-lightbox-blueprintStatic open state lightbox with a centered image, prev and next controls, a caption strip, and a five thumbnail filmstrip.

Media Library Gridapplication-pro-media-gallery-media-library-gridAsset browser grid with filename, type badge, and size captions, plus a toolbar with search, filter, view toggle, and upload.

Media List Viewapplication-pro-media-gallery-media-list-viewA dense asset table with select checkboxes, a thumbnail and filename column, type badge, size, modified date, uploader avatar, and per row actions.

Storage Usage Panelapplication-pro-media-gallery-storage-usage-panelA storage quota panel with a used versus quota headline, a segmented usage bar by type, per type breakdown rows, and a trash reclaim row.

Upload Queue Panelapplication-pro-media-gallery-upload-queue-panelBatch upload tracker with per file progress bars, a cancel button, a completed row, and a failed row showing the size limit error.

Video Trim Blueprintapplication-pro-media-gallery-video-trim-blueprintA static video trim tool with a preview frame and timecode, a transport row, a filmstrip timeline with trim handles and playhead, and readout chips.

App Switcher Gridapplication-pro-navigation-app-switcher-gridStatic open product suite switcher panel with six app tiles, a current badge, and a manage apps footer row.

Breadcrumb Dropdown Blueprintapplication-pro-navigation-breadcrumb-dropdown-blueprintBreadcrumb bar with the middle segment expanded into a sibling-project switcher panel showing the current item checked.

Breadcrumbs With Actionsapplication-pro-navigation-breadcrumbs-with-actionsThe detail page header, breadcrumb trail, title, and right aligned actions.

Command Palette Openapplication-pro-navigation-command-palette-openStatic open command palette with grouped Pages, Actions with Kbd shortcuts, and People results with avatars.

Context Menu Blueprintapplication-pro-navigation-context-menu-blueprintStatic open-state context menu over a document row with grouped actions, keyboard hints, a submenu arrow on Move to, and Delete in muted weight.

Global Search Resultsapplication-pro-navigation-global-search-resultsFull in-app search results page with grouped Projects, People, and Files sections, counts, and a filter rail.

Help Menu Blueprintapplication-pro-navigation-help-menu-blueprintStatic open-state help menu with a docs search field, five action rows including keyboard shortcuts and a changelog unread dot, and a status footer.

Jump To Blueprintapplication-pro-navigation-jump-to-blueprintStatic open-state jump-to bar with a typed query, matching destinations grouped and one highlighted, and keyboard navigation hints in the footer.

Mega Menu Blueprintapplication-pro-navigation-mega-menu-blueprintStatic open mega-menu with three grouped link columns and a featured announcement panel, rendered without a Radix portal.

Page Outline Railapplication-pro-navigation-page-outline-railA sticky on this page outline rail listing document anchors along a guide line with the active section marked, beside doc content with a code sample.

Pagination Barapplication-pro-navigation-pagination-barTable footer pagination in two densities: a numbered bar with a row range and rows per page control, plus a compact prev and next variant.

Pinned Items Railapplication-pro-navigation-pinned-items-railIcon-only sidebar rail with a pinned shortcuts section above the main nav, inline tooltip labels, and an add-pin affordance.

Recent History Menu Blueprintapplication-pro-navigation-recent-history-menu-blueprintStatic open recents menu grouped into Today and Yesterday with item type chips, visit times, and a clear history action.

Record Pager Headerapplication-pro-navigation-record-pager-headerA record detail header with a back link, a prev and next position counter with keyboard hints, and a title row with a status badge and actions.

Secondary Settings Navapplication-pro-navigation-secondary-settings-navThe settings nav column with grouped links and the Danger zone last and muted.

Section Switcherapplication-pro-navigation-section-switcherPill-style segmented toggle for switching in-page views with a per-segment item count, shown in mailbox and calendar range examples.

Sidebar Footer Menu Openapplication-pro-navigation-sidebar-footer-menu-openStatic open user menu at the sidebar foot with profile, settings, theme toggle, command shortcut, and sign out.

Sidebar Nav Treeapplication-pro-navigation-sidebar-nav-treeAn expanded workspace sidebar with flat items, a Projects group opened to indented children along a guide line, and two collapsed groups with counts.

Sidebar Search Resultsapplication-pro-navigation-sidebar-search-resultsSidebar in its active filter state with the query filled, matching nav items highlighted and non-matches hidden, and a clear button to restore the full list.

Tab Bar Mobileapplication-pro-navigation-tab-bar-mobileMobile bottom tab bar with five thumb-sized tabs, one active indicator, and a notification badge rendered in a phone frame context strip.

Tab Navigation Panelapplication-pro-navigation-tab-navigation-panelUnderline tab row for within-page navigation with counts on two tabs and an active panel content area.

Topbar With Command Hintapplication-pro-navigation-topbar-with-command-hintPersistent app topbar with breadcrumb trail, centered search with Kbd hint, notifications, and avatar.

Workspace Switcher Openapplication-pro-navigation-workspace-switcher-openStatic open workspace switcher showing three workspaces with plan badges, member counts, and a create row.

Activity Digest Email Previewapplication-pro-notifications-activity-digest-email-previewIn-app framed preview of the daily activity digest email with grouped Mentions, Assignments, and Comments sections and a preference footer.

Alert Banner Stackapplication-pro-notifications-alert-banner-stackThree calm ops banners, maintenance, expiring card, and the resolved incident.

Banner With Actionsapplication-pro-notifications-banner-with-actionsPersistent workspace notice card with a titled message, consequence body, two action buttons, and a dismiss control.

Digest Settings Cardapplication-pro-notifications-digest-settings-cardActivity digest frequency picker with an include list and the note that digests pause while you are active.

Escalation Policy Cardapplication-pro-notifications-escalation-policy-cardAn escalation policy panel with a named header, a numbered timeline of timed steps naming recipients and channels, and footer behavior notes.

In App Message Cardapplication-pro-notifications-in-app-message-cardFeature announcement card with a badge, title, body, illustration slot, primary CTA, and a permanent dismiss action.

Inbox List Paneapplication-pro-notifications-inbox-list-paneThe full inbox grouped under Today and Earlier, read rows muted.

Mute Thread Rowapplication-pro-notifications-mute-thread-rowMuted threads manager listing silenced threads with their context, muted date, expiry or forever status, and a per row unmute action.

Notification Center Openapplication-pro-notifications-notification-center-openThe bell panel open, tabs, four notifications, one unread, mark all read.

Notification Empty Stateapplication-pro-notifications-notification-empty-stateNotifications inbox zero view with a today tally of cleared, snoozed, and archived counts plus a settings link.

Notification Grouping Listapplication-pro-notifications-notification-grouping-listInbox panel collapsing notifications by source with inline thread expansion and unread count badges.

Notification Rules Listapplication-pro-notifications-notification-rules-listAn ordered rules list where each row names a rule, shows its conditions as chips, points to delivery channels, and carries an enable switch.

Notification Settings Inlineapplication-pro-notifications-notification-settings-inlineFive notification type rows with email, push, and in-app channel switches grouped into Account and Workspace sections.

Priority Inbox Listapplication-pro-notifications-priority-inbox-listPriority sorted notification inbox with a Needs You section for mentions and assignments and a FYI section for everything else.

Push Preview Settingsapplication-pro-notifications-push-preview-settingsPush appearance settings beside a live lock screen mockup, three preview visibility options, sound and grouping switches, and a test push action.

Quiet Hours Scheduleapplication-pro-notifications-quiet-hours-scheduleA do not disturb panel with a master quiet hours switch, seven per day toggle rows, and a card of alerts that always break through.

Realtime Toast Blueprintapplication-pro-notifications-realtime-toast-blueprintStatic blueprint of a live comment toast with avatar, quoted body, view action, and an auto-dismiss timer track.

Snooze Options Blueprintapplication-pro-notifications-snooze-options-blueprintStatic blueprint of an open snooze menu with four preset options and resolved wall-clock times per option.

Subscription Preferencesapplication-pro-notifications-subscription-preferencesFollowed items panel listing subscribed projects, people, and labels as ruled rows with per-row unfollow actions.

Toast Stackapplication-pro-notifications-toast-stackThree transient toasts: a success, an undoable deletion with a timer track, and a loading export state.

Unread Digest Cardapplication-pro-notifications-unread-digest-cardWhile you were away, grouped counts since yesterday, paused when you are active.

Whats New Panelapplication-pro-notifications-whats-new-panelThe changelog panel, three dated releases badged, no marketing allowed in it.

Checklist Widgetapplication-pro-onboarding-checklist-widgetCorner card onboarding widget with a progress ring, five setup tasks, two complete, the next step highlighted, and an honest dismiss note.

Choose Plan Stepapplication-pro-onboarding-choose-plan-stepThree plan cards with real limits stated, Free preselected, and a no sales call promise for Team.

Connect Source Cardapplication-pro-onboarding-connect-source-cardFour source tiles including a no engineering CSV option and a read only credentials promise in the footer.

Connect Tools Stepapplication-pro-onboarding-connect-tools-stepOnboarding integrations step with Slack, GitHub, Calendar, and Drive tiles showing one pre-connected state.

Data Source Statusapplication-pro-onboarding-data-source-statusOnboarding panel showing three data source connection rows with connected, connecting, and failed states including an actionable error and continue-anyway link.

Feature Spotlight Blueprintapplication-pro-onboarding-feature-spotlight-blueprintStatic open-state coach-mark that highlights a new bulk-actions toolbar with a callout card, New badge, and a Got it dismiss button.

Finish Setup Cardapplication-pro-onboarding-finish-setup-cardSetup complete card with a personalized header, a three item onboarding recap, and a single suggested next action.

First Project Empty Stateapplication-pro-onboarding-first-project-empty-stateDay one empty dashboard with two create paths, a three step next preview, and a sample project offer.

Goal Selection Stepapplication-pro-onboarding-goal-selection-stepOnboarding step with four goal tiles that order the sidebar, one pre-selected, and a note that every feature stays available regardless of the choice.

Import Data Stepapplication-pro-onboarding-import-data-stepOnboarding import step with CSV dropzone, tool and API source tiles, a dry-run preview promise, and a skip link.

Install CLI Stepapplication-pro-onboarding-install-cli-stepA developer install step with per platform commands behind tabs, numbered login and test commands, and a live row waiting for the first event.

Invite Preview Cardapplication-pro-onboarding-invite-preview-cardShows the rendered invite email teammates will receive above an editable personal message field, with recipient chips and a send button.

Invite Team Panelapplication-pro-onboarding-invite-team-panelThree email and role rows with the retention stat that explains why the invite ask happens at onboarding.

Notification Defaults Stepapplication-pro-onboarding-notification-defaults-stepA notification setup step with four channel toggle rows, a recommended badge, an email digest chooser, and a note that defaults apply per user.

Product Tour Tooltipapplication-pro-onboarding-product-tour-tooltipInline product-tour step blueprint with a highlighted target, coach-mark card, step 2 of 5 badge, and progress dots.

Role Selection Stepapplication-pro-onboarding-role-selection-stepOnboarding role picker with three tiles showing what each role changes in the default layout, one selected.

Sample Data Bannerapplication-pro-onboarding-sample-data-bannerBanner notifying users they are viewing sample data, with connect and clear actions and demo KPI cards below.

Setup Progress Stepperapplication-pro-onboarding-setup-progress-stepperFour step horizontal stepper with dot states and an open invite panel under the current step.

Team Onboarding Trackerapplication-pro-onboarding-team-onboarding-trackerAn admin tracker with invited, finished, and stalled counts above per person rows showing avatar, setup progress, next step, and a nudge action.

Template Gallery Stepapplication-pro-onboarding-template-gallery-stepOnboarding step with six template cards showing what each pre-wires, a start-blank tile, and a search bar for fast workspace setup.

Welcome Checklistapplication-pro-onboarding-welcome-checklistSetup checklist with 5 tasks, time estimates, a progress bar, and a one time dismiss promise.

Welcome Modal Blueprintapplication-pro-onboarding-welcome-modal-blueprintStatic first-login welcome dialog over a scrim: greeting by name, three things to try, and start or tour actions.

Workspace Profile Stepapplication-pro-onboarding-workspace-profile-stepA workspace setup step with name, URL slug, logo upload, and data region on the left beside a live app chrome preview on the right.

Admin Pageapplication-pro-prebuilt-pages-admin-pageStaff admin console composing a sidebar shell, content moderation queue, and user admin table.

Analytics Pageapplication-pro-prebuilt-pages-analytics-pageAnalytics dashboard composing a sidebar shell, KPI row, revenue area chart, usage line chart, and users table.

Auth Flow Pageapplication-pro-prebuilt-pages-auth-flow-pageAuth sequence showcase composing the sign-in page and two-factor page stacked for end-to-end flow review.

Billing Pageapplication-pro-prebuilt-pages-billing-pageBilling page composing the settings shell, current plan usage, invoice history, and payment method panel.

Dashboard Pageapplication-pro-prebuilt-pages-dashboard-pageOverview dashboard composing the sidebar shell, KPI cards row, revenue area chart, and team activity feed.

Help Center Pageapplication-pro-prebuilt-pages-help-center-pageSelf-service help page composing a topbar shell, category search home, and FAQ accordion panel.

Inbox Pageapplication-pro-prebuilt-pages-inbox-pageThree-pane email inbox composing a folder sidebar, thread list, and message reader with reply controls.

Members Pageapplication-pro-prebuilt-pages-members-pageWorkspace members admin page composing the sidebar shell, users table, and member roles table.

Onboarding Pageapplication-pro-prebuilt-pages-onboarding-pageShellless new user activation flow composing a progress stepper, welcome checklist, and connect source card.

Project Detail Pageapplication-pro-prebuilt-pages-project-detail-pageFull project detail view composing a sidebar shell, KPI cards row, kanban board, and team activity feed.

Reports Pageapplication-pro-prebuilt-pages-reports-pageAnalytics page composing the sidebar shell, KPI cards, conversion funnel bars, usage line chart, and invoices table.

Settings Pageapplication-pro-prebuilt-pages-settings-pageFull settings page composing the settings shell, profile, security, API keys, and danger zone sections.

Addon Selectorapplication-pro-pricing-plans-addon-selectorRuled add-on rows for extra seats, priority support, and advanced security each with a toggle and a live running monthly total.

Billing Period Toggleapplication-pro-pricing-plans-billing-period-toggleBilling period switcher with monthly and yearly cards showing effective monthly price, a savings badge on yearly, and the selected state highlighted.

Feature Gate Cardapplication-pro-pricing-plans-feature-gate-cardLocked feature placeholder card naming the required plan, describing the feature, listing plan highlights, and offering an upgrade CTA or an ask your admin note.

Plan Comparison Tableapplication-pro-pricing-plans-plan-comparison-tableA dense feature matrix comparing Free, Team, and Business plans by category, with checks, values, a current plan badge, and per column actions.

Plan Downgrade Warningapplication-pro-pricing-plans-plan-downgrade-warningDowngrade confirmation panel listing features lost, named members made read-only, what is kept, and confirm or keep plan actions.

Plan Limits Overviewapplication-pro-pricing-plans-plan-limits-overviewCurrent plan usage meters for members, workspaces, events, and storage against Team limits, a near limit flag, and an upgrade prompt.

Plan Picker Cardsapplication-pro-pricing-plans-plan-picker-cardsIn-app upgrade surface with Free, Team, and Business plan cards, a monthly/yearly billing toggle, feature lists, and current plan indicator.

Seat Management Panelapplication-pro-pricing-plans-seat-management-panelPurchased seats with an occupancy meter, a breakdown of active members and pending invites, a seat stepper, and a live next invoice preview.

Trial Banner Cardapplication-pro-pricing-plans-trial-banner-cardTrial status card showing days remaining, what happens at expiry, an add payment method CTA, and an explicit no silent charge pledge.

Upgrade Proration Summaryapplication-pro-pricing-plans-upgrade-proration-summaryAn upgrade confirmation showing the plan change, prorated line items with credit, the amount due today, next renewal, and confirm actions.

Usage Tier Selectorapplication-pro-pricing-plans-usage-tier-selectorStepped chip selector for event volume tiers from 10k to 2 million per month with a live price summary and proration note.

Account Overview Cardapplication-pro-profile-account-account-overview-cardAccount home card showing plan, role, key dates, connected identity, and settings quick links.

Account Switcher Blueprintapplication-pro-profile-account-account-switcher-blueprintStatic open-state blueprint of an account switcher panel listing three accounts with the current one checked and an add-account row.

Activity Summary Cardapplication-pro-profile-account-activity-summary-cardActivity card with an inline SVG contribution heatmap, monthly event count, and three recent items.

Away Status Cardapplication-pro-profile-account-away-status-cardStatus setter card with four presence options, a custom message field, a clear-after duration picker, and a note on when Do Not Disturb actually silences alerts.

Change Password Cardapplication-pro-profile-account-change-password-cardA three field password form beside a live requirements checklist, a segmented strength meter, the last changed date, and a passkey suggestion.

Connected Identities Cardapplication-pro-profile-account-connected-identities-cardSign-in identities panel listing Google, GitHub, and SSO rows with connected dates, a primary badge, and a disconnect guard.

Danger Zone Cardapplication-pro-profile-account-danger-zone-cardRuled destructive rows for transfer, deactivate, and delete, each with its consequence, a sole owner guard, and an export reminder above.

Data Download Cardapplication-pro-profile-account-data-download-cardPersonal data export card listing exactly what is included, the zip plus JSON delivery format, a minutes-not-days timing promise, and a not-collected reassurance section.

Edit Profile Formapplication-pro-profile-account-edit-profile-formSettings form with avatar change, name and headline inputs, bio with char count, and a save bar.

Email Addresses Cardapplication-pro-profile-account-email-addresses-cardRuled rows for each account email with primary and verification badges, resend and remove actions, and an inline add address form below.

Login History Tableapplication-pro-profile-account-login-history-tableA sign-in audit table with timestamp, method, device, location, IP, and a result badge, plus a failed-attempt callout and a CSV export action.

Notification Badge Rowapplication-pro-profile-account-notification-badge-rowProfile notification summary strip with linked cards for Mentions, Assigned, and Reviews showing unread counts derived from a single array and a digest timing note.

Preferences Summaryapplication-pro-profile-account-preferences-summaryRead-only ruled summary of six personal settings including theme, language, timezone, and notification level with inline edit links.

Profile Completion Cardapplication-pro-profile-account-profile-completion-cardProfile setup progress card with a 70% bar, three remaining steps with quick-action buttons, and completed steps struck through.

Profile Headerapplication-pro-profile-account-profile-headerProfile header band with avatar, name, role, bio, fact chips, and Message and Edit profile actions.

Public Profile Cardapplication-pro-profile-account-public-profile-cardCompact profile card with avatar, name, headline, a three stat strip, and a Follow button.

Sessions List Cardapplication-pro-profile-account-sessions-list-cardActive sessions card listing every signed-in device with browser, location, last active time, per-row revoke, and a sign-out-everywhere action.

Two Factor Status Cardapplication-pro-profile-account-two-factor-status-cardTwo-factor authentication status panel showing the active method, backup codes remaining, and an enrollment prompt with the security case for new accounts.

Cohort Retention Gridapplication-pro-reports-cohort-retention-gridA retention heatmap with weekly signup cohorts as rows, weeks since signup as columns, shaded cells, a shade legend, and a methodology note.

Dashboard Grid Layoutapplication-pro-reports-dashboard-grid-layoutEditable dashboard canvas with a KPI tile, bar chart frame, plan revenue list, stat tile, and an add widget affordance.

Export Options Cardapplication-pro-reports-export-options-cardExport settings card with format radio rows, a current view versus all rows scope choice, a headers toggle, and a button that labels the exact row count and format.

Metric Detail Drilldownapplication-pro-reports-metric-detail-drilldownDrill-in view for a KPI click showing a headline metric, period context, and a segment breakdown table with share bars.

Report Annotations Panelapplication-pro-reports-report-annotations-panelAn annotated trend chart with numbered markers pinned to dates beside a side rail listing each annotation with author, date, note, and an add control.

Report Builderapplication-pro-reports-report-builderSelf-serve report panel with metric and dimension selects, a date-range chip, visualization toggle, and a live stub preview area.

Report Comparison Viewapplication-pro-reports-report-comparison-viewA period over period comparison with two period chips, a swap control, a metrics summary line, and a table of current, previous, and change values.

Report Filters Barapplication-pro-reports-report-filters-barReport filter strip with a removable date-range chip, three dimension selects, a compare to previous period toggle, and an apply button showing the live matching row count.

Report Run Historyapplication-pro-reports-report-run-historyA run history log with a summary strip above a table of runs showing status badges, start times, durations, row counts, and trigger sources.

Report Summary Headerapplication-pro-reports-report-summary-headerSaved report header showing the title, removable filter chips echoing active date range and dimensions, last-refreshed time, and export and share actions.

Saved Reports Listapplication-pro-reports-saved-reports-listTable of saved reports with creator, last run time, a schedule chip when scheduled, and per-row run, share, and options actions.

Scheduled Report Formapplication-pro-reports-scheduled-report-formForm to schedule a report delivery with frequency, run time, a tag-style recipient list, format radios, and a no-reply address notice.

Scheduled Reports Tableapplication-pro-reports-scheduled-reports-tableTable of workspace delivery schedules with recurrence, recipient avatar stacks, format badges, last sent times, and run or edit actions per row.

Api Keys Panelapplication-pro-settings-pages-api-keys-panelAPI keys list with prefix-masked values, environment badges, created and last used dates, and a Revoke action.

Appearance Settingsapplication-pro-settings-pages-appearance-settingsTheme tile selector, accent color swatches, interface density toggle, and a reduce-motion Switch for personal look-and-feel.

Audit Log Settingsapplication-pro-settings-pages-audit-log-settingsAudit log configuration with a retention period select, an admins-only access note, a CSV export with recent export history, and an immutability callout.

Billing Alerts Settingsapplication-pro-settings-pages-billing-alerts-settingsSpend alert switches at 80 and 100 percent of plan, a hard-cap option with stated consequence, and a recipient email field.

Branding Settingsapplication-pro-settings-pages-branding-settingsWorkspace branding panel with logo upload, accent color swatches, a subdomain field, and an honest note on where branding actually appears.

Connected Apps Settingsapplication-pro-settings-pages-connected-apps-settingsRuled list of OAuth apps with scope badges, connected date, authorizing member, and an instant Revoke action per row.

Danger Zone Cardapplication-pro-settings-pages-danger-zone-cardThree escalating workspace actions stating exactly what each destroys and what survives, with outline buttons.

Data Retention Settingsapplication-pro-settings-pages-data-retention-settingsPer-data-type retention period Selects with export and deletion consequence panels, a legal hold note, and a save bar.

Email Domain Settingsapplication-pro-settings-pages-email-domain-settingsSending domain panel with a monospace DNS record grid, per-record verified badges, a from-address field, and a deliverability fallback note for unverified domains.

Guest Access Settingsapplication-pro-settings-pages-guest-access-settingsA guest access panel with an allow guests switch, a permitted email domain list, default permission options, and an active guest count row.

Import Export Settingsapplication-pro-settings-pages-import-export-settingsData portability panel with an export card listing every included data type and an import dropzone with a dry-run promise before any write.

IP Allowlist Settingsapplication-pro-settings-pages-ip-allowlist-settingsAn IP allowlist panel with an enforcement switch, a list of CIDR ranges with owners and last match times, and an add range form.

Language Region Settingsapplication-pro-settings-pages-language-region-settingsLanguage and timezone selects with a live date and number format preview row and a first-day-of-week toggle.

Member Roles Tableapplication-pro-settings-pages-member-roles-tableSix permissions across three roles, with the honest custom roles roadmap note.

Notification Preferencesapplication-pro-settings-pages-notification-preferencesThe email and in app switch matrix with the billing row locked on, honestly.

Plan and Usage Settingsapplication-pro-settings-pages-plan-usage-settingsA plan and usage panel with a current plan row, metered usage bars with per limit notes, a near limit badge, and a policy note.

Profile Settingsapplication-pro-settings-pages-profile-settingsProfile panel with avatar upload, name and email inputs, a read-only timezone row, and a save bar.

SCIM Provisioning Settingsapplication-pro-settings-pages-scim-provisioning-settingsA SCIM provisioning panel with sync stats, the base URL and masked bearer token, an attribute mapping grid, and deprovisioning options.

Security Settingsapplication-pro-settings-pages-security-settingsSecurity panel with password row, two factor status, and a ruled active sessions list with per device revoke.

Session Timeout Settingsapplication-pro-settings-pages-session-timeout-settingsSession control panel with an idle timeout selector, a remember this device toggle, and a sign out all sessions action with its consequences listed.

Sso And Domain Settingsapplication-pro-settings-pages-sso-and-domain-settingsVerified domain, IdP metadata, and the enforce switch with its full consequence.

Team Settingsapplication-pro-settings-pages-team-settingsTeam identity panel with name and identifier fields, a default member role Select, who-can-invite radio rows, and a discoverable toggle with its privacy consequence spelled out.

Two Factor Settingsapplication-pro-settings-pages-two-factor-settings2FA settings panel with authenticator app, SMS fallback, and backup codes rows plus a workspace-wide require 2FA toggle.

Webhooks Settingsapplication-pro-settings-pages-webhooks-settingsWebhook endpoint list with mono URLs, event Badges, per-row delivery status, a masked signing secret with reveal and roll actions, and retry policy prose.

Workspace General Settingsapplication-pro-settings-pages-workspace-general-settingsWorkspace identity panel with name, slug, URL preview, rename warning, logo upload, and default role select.

Big Number Tilesapplication-pro-stat-cards-big-number-tilesFour oversized tiles for wallboards, deploys, incidents, latency, queue depth.

Bullet Chart Cardsapplication-pro-stat-cards-bullet-chart-cardsThree stat cards, each with a label, value, delta, and a bullet chart bar showing actual against qualitative bands and a target tick.

Comparison Stat Cardsapplication-pro-stat-cards-comparison-stat-cardsThree cards comparing This month and Last month side by side with a computed delta footer per metric.

Delta List Cardapplication-pro-stat-cards-delta-list-cardCompact card listing five metrics as ruled rows each with a tabular value and an up or down delta chip for a multi-metric movers panel.

Donut Stat Cardapplication-pro-stat-cards-donut-stat-cardStat card with an inline SVG donut showing a 2 to 3 part breakdown beside the headline number and a ruled legend, no chart library.

Forecast Stat Cardapplication-pro-stat-cards-forecast-stat-cardA forecast card with the month to date value, a cumulative line turning dashed past today, and a footer of close, target, and range.

Funnel Stat Cardapplication-pro-stat-cards-funnel-stat-cardAcquisition funnel card with four shrinking horizontal bars, step conversion percentages, and an end-to-end rate headline.

Goal Progress Cardsapplication-pro-stat-cards-goal-progress-cardsThree Q2 goal cards each with a progress bar, current vs target value, and a projected pace line.

Heatmap Stat Cardapplication-pro-stat-cards-heatmap-stat-cardActivity heatmap card with a CSS grid of cells shaded by foreground opacity across hours and days, no chart lib.

Kpi Cards Rowapplication-pro-stat-cards-kpi-cards-rowFour headline metrics with deltas and the context line that stops misreadings.

Live Counter Cardapplication-pro-stat-cards-live-counter-cardAn active user counter with a pulsing dot, a static sparkline, and an honest refresh cadence footnote.

Metric With Target Cardapplication-pro-stat-cards-metric-with-target-cardA single metric versus its target on a horizontal progress track with the gap and pace stated plainly.

Multi Metric Cardapplication-pro-stat-cards-multi-metric-cardOne card holding three related metrics in a row with vertical dividers, each showing a value, label, and small delta.

North Star Metric Cardapplication-pro-stat-cards-north-star-metric-cardOne hero metric with a sparkline and a versioned definition against drift.

Percentile Stat Cardapplication-pro-stat-cards-percentile-stat-cardA latency card with the p95 headline, a distribution track marking each percentile, and a ruled row per percentile with a magnitude bar and value.

Progress Ring Cardapplication-pro-stat-cards-progress-ring-cardStat card with a centered inline SVG progress ring showing a single percentage, a used of total sub-line, and a plan limit footer row.

Segmented Stat Cardapplication-pro-stat-cards-segmented-stat-cardA headline total with a stacked horizontal bar and legend showing the breakdown by source or category.

Sparkline Grid Cardapplication-pro-stat-cards-sparkline-grid-cardA card with a 2x2 grid of compact metrics each paired with an inline SVG sparkline, no chart library.

Stat With Breakdown Listapplication-pro-stat-cards-stat-with-breakdown-listOne wide card with a headline user count and a ruled breakdown list by plan with counts and share percentages.

Stats With Sparklinesapplication-pro-stat-cards-stats-with-sparklinesFour stat cards with decorative inline SVG sparklines showing value, delta, and trailing 7 week trend.

Status Tiles Rowapplication-pro-stat-cards-status-tiles-rowOps summary strip of four Badge-styled status tiles showing service counts for Operational, Degraded, Partial outage, and Maintenance.

Streak Cardapplication-pro-stat-cards-streak-cardA consistency card showing a current streak count, an inline SVG week-row of filled and empty day cells, and supporting stats.

Team Leaderboard Statsapplication-pro-stat-cards-team-leaderboard-statsFive teammates ranked by tickets closed, equal styling, a quality caveat footer.

Threshold Alert Cardapplication-pro-stat-cards-threshold-alert-cardA stat card in breach state showing a live metric against its configured threshold with a calm next-action line.

Trend Comparison Tilesapplication-pro-stat-cards-trend-comparison-tilesTwo side by side tiles comparing the same metric across two segments with values, deltas, and a summary read.

Waterfall Stat Cardapplication-pro-stat-cards-waterfall-stat-cardAn MRR movement card with a headline total, offset horizontal bars for each gain and loss, a color legend, and an axis note.

Component Status Listapplication-pro-status-health-component-status-listEditable internal status list with a per-row Select for Operational, Degraded, Partial outage, or Down and a publish to status page action.

Dependency Map Blueprintapplication-pro-status-health-dependency-map-blueprintStatic architecture health map with service nodes on an SVG grid, connecting lines, and a degraded dependency highlighted.

Error Budget Burndownapplication-pro-status-health-error-budget-burndownAn SLO panel with a header badge, a four stat budget and burn rate row, and a line chart tracking remaining budget against ideal burn.

Incident Bannerapplication-pro-status-health-incident-bannerSlim dismissible incident alert bar with the incident start time, a status page link, and a subscribe affordance.

Incident Timelineapplication-pro-status-health-incident-timelineIncident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.

Incident Update Composerapplication-pro-status-health-incident-update-composerAn incident update form with a header, a status phase radio group, a message field, component checkboxes, notification switches, and post actions.

Maintenance Window Cardapplication-pro-status-health-maintenance-window-cardScheduled maintenance notice showing the UTC window, timezone conversions, affected services, and a remind-me email affordance.

Past Incidents Listapplication-pro-status-health-past-incidents-listResolved incidents grouped by month with duration, impact summary, and a postmortem link per row.

Regional Status Matrixapplication-pro-status-health-regional-status-matrixA table matrix with services as rows and four regions as columns, each cell showing a status dot and latency, with a legend below.

Service Health Tableapplication-pro-status-health-service-health-tableInternal ops table listing services with status badges, p95 latency, error rate, last incident time, and the on-call engineer avatar.

Sla Summary Cardapplication-pro-status-health-sla-summary-cardSLA card showing the uptime target, actual this period, error budget bar, and the last published breach record.

Status Pageapplication-pro-status-health-status-pagePublic status page with an overall operational banner, per-service uptime badges, 90-day tick strips, and a subscribe affordance.

Synthetic Checks Panelapplication-pro-status-health-synthetic-checks-panelA panel listing probe rows, each with a status dot, check name and target, type badge, region, interval, median latency, and a run result strip.

Uptime Gridapplication-pro-status-health-uptime-grid30-day per-service reliability grid with each cell shaded by status using foreground opacity tokens and a per-row uptime figure.

Assigned To Me Listapplication-pro-tasks-todos-assigned-to-me-listPersonal task queue grouped by Overdue, Today, and This week, each row showing a project badge, checkbox, and due date.

Assignee Workloadapplication-pro-tasks-todos-assignee-workloadA team workload panel with one row per teammate showing avatar, open task count, a capacity bar, scheduled hours, and a load badge.

Blocked Tasks Panelapplication-pro-tasks-todos-blocked-tasks-panelA blocked tasks panel where each row shows a waiting task with priority and due date, then an indented blocker line and a ready action.

Checklist Cardapplication-pro-tasks-todos-checklist-cardCompact checklist card with six items, a Progress bar at 3 of 6, and a note that checklists do not block task completion.

Completed Logapplication-pro-tasks-todos-completed-logA completed tasks log grouped by day, each row with a check icon, title, project badge, completer avatar, and time, beside a weekly bar strip.

My Day Panelapplication-pro-tasks-todos-my-day-panelPersonal daily plan card grouped into Morning, Afternoon, and No time sections with time chips and a free gap callout.

Priority Matrixapplication-pro-tasks-todos-priority-matrixEisenhower-style 2x2 grid with task chips in each urgency and importance quadrant, per-quadrant counts, and a note that Do Now should be the emptiest column.

Recurring Task Rowapplication-pro-tasks-todos-recurring-task-rowRecurring task list showing each rule summary badge, the next three occurrence dates, and a note that past occurrences are never retroactively changed.

Subtask Treeapplication-pro-tasks-todos-subtask-treeNested subtask view with two levels of indented checkboxes, expand chevrons on parent nodes, and a progress bar that rolls up only leaf-node completion.

Task Board Compactapplication-pro-tasks-todos-task-board-compactDense three column task board with one line cards showing a checkbox dot, truncated title, and assignee avatar for sidebar or split pane use.

Task Comments Panelapplication-pro-tasks-todos-task-comments-panelTask discussion thread with avatar bubbles, timestamps, emoji reactions, an inline status-change event, and a composer with mention and task-link hints.

Task Detail Blueprintapplication-pro-tasks-todos-task-detail-blueprintStatic blueprint of an open task detail panel with meta rows, a subtask checklist with Progress, an activity strip, and a comment composer.

Task Filters Barapplication-pro-tasks-todos-task-filters-barInteractive filter toolbar with assignee, status, priority, and due chips, active-filter tokens, a saved-view dropdown, and a live task count.

Task Listapplication-pro-tasks-todos-task-listRuled task list with label badges, assignee avatars, due dates, a done count header, and muted overdue signaling.

Task Quick Addapplication-pro-tasks-todos-task-quick-addQuick add composer with a highlighted capture line, a parsed chip row for due date, project, priority, and assignee, and a keyboard hint footer.

Domain Verification Cardapplication-pro-teams-orgs-domain-verification-cardA verified domains card showing each domain's auto join behavior and member count, with a pending domain that expands into a DNS record panel.

Guest Access Panelapplication-pro-teams-orgs-guest-access-panelA guest access panel listing external collaborators with avatar and email, the projects they can reach, an expiry date, and convert or remove actions.

Invite Members Formapplication-pro-teams-orgs-invite-members-formBulk invite form with a tag email input, role select, optional message, and seat consequence note before sending.

Member Offboarding Panelapplication-pro-teams-orgs-member-offboarding-panelA member offboarding card with the departing member, a transfer ownership selector, a checklist of owned items to reassign, and a deactivate action.

Membership Activity Logapplication-pro-teams-orgs-membership-activity-logA day grouped membership timeline of joins, role changes, invites, and removals, each with an event icon, actor avatar, detail line, and timestamp.

Org Chartapplication-pro-teams-orgs-org-chartAn org chart showing two levels of the Engineering hierarchy with avatar cards and border connectors, no chart library required.

Pending Invites Listapplication-pro-teams-orgs-pending-invites-listTable of outstanding invites with email, role, sent date, sender avatar, days until expiry, and per row resend and revoke actions.

Permissions Matrixapplication-pro-teams-orgs-permissions-matrixRole permissions table with Check and Minus cells across Viewer, Member, Admin, and Owner columns and the current role highlighted.

Role Assignment Panelapplication-pro-teams-orgs-role-assignment-panelA panel for editing a workspace member role with a role selector listing permission descriptions, a scope list, and an effective immediately callout.

Seat Allocation Cardapplication-pro-teams-orgs-seat-allocation-cardSeat usage panel showing total, used, and free seats with a per-team breakdown and an honest end-of-cycle removal note.

Team Detail Cardapplication-pro-teams-orgs-team-detail-cardA team profile card with purpose statement, lead avatar, member avatar stack with overflow count, quick links, and a join request action.

Team Directoryapplication-pro-teams-orgs-team-directoryA searchable grid of member cards with avatar, role, team badge, and online status dot for finding people across the workspace.

Team Switcher Blueprintapplication-pro-teams-orgs-team-switcher-blueprintA static open state blueprint of a team switcher panel listing four teams with role and member count, rendered as plain markup for stable preview screenshots.

Changelog Feedapplication-pro-timeline-roadmap-changelog-feedA vertical changelog timeline grouped by month, each entry showing a type badge, a title, a summary line, and the date with affected area.

Dependency Listapplication-pro-timeline-roadmap-dependency-listRoadmap item dependency panel with blocked-by and blocking sections, each row showing status and an inline blocking note.

Gantt Rowsapplication-pro-timeline-roadmap-gantt-rowsCSS-grid Gantt chart with a task-name column, week-column timeline, positioned duration bars with in-progress fills, and a today line.

Launch Planapplication-pro-timeline-roadmap-launch-planA launch countdown with a summary header and a two column grid of T minus phases, each a checklist of tasks with owners and states.

Milestone Trackerapplication-pro-timeline-roadmap-milestone-trackerVertical stepper of four milestones with done, in-progress, and upcoming status, owner avatars, target dates, and progress bars.

Now Next Laterapplication-pro-timeline-roadmap-now-next-laterCompact roadmap list with three sections each showing initiative rows with a confidence chip and an honest status note per item.

Plan Vs Actualapplication-pro-timeline-roadmap-plan-vs-actualTwin planned and actual bars for each initiative on a shared six month grid, each with a slip badge, above on time and late totals.

Quarter Plannerapplication-pro-timeline-roadmap-quarter-plannerQ3 roadmap grid with CSS span bars, capacity hints, and status badges for 8 initiatives across 5 teams.

Release Timelineapplication-pro-timeline-roadmap-release-timelineHorizontal release rail showing shipped, current, and upcoming version markers each with a date and a one-line scope note.

Roadmap Boardapplication-pro-timeline-roadmap-roadmap-boardProduct roadmap board with Now, Next, and Later columns showing initiative cards with team badges, quarter chips, and progress bars.

Sprint Timelineapplication-pro-timeline-roadmap-sprint-timelineSprint at-a-glance panel with a capacity versus committed summary, a ten-day CSS-grid task board, and a today line across all rows.

Theme Lanesapplication-pro-timeline-roadmap-theme-lanesThree strategic themes as stacked lanes, each with an owner, a progress bar, and initiative rows carrying a status dot, quarter chip, and note.

Approval Queueapplication-pro-workflow-automation-approval-queueA human approval queue where each card names the automation, the action awaiting sign off, context chips, the requester, and approve or decline actions.

Automation Builderapplication-pro-workflow-automation-automation-builderVertical trigger, filter, and action step editor with dashed connectors, a Draft badge, and Save automation for a single linear flow.

Automation Error Cardapplication-pro-workflow-automation-automation-error-cardFailed automation card with the error in plain words, a retry meter showing attempts used and remaining, and a payload replay affordance.

Automation Templates Gridapplication-pro-workflow-automation-automation-templates-gridTemplate gallery with six categorised automation cards, use counts, a search field, and a start-from-scratch tile.

Automation Usage Statsapplication-pro-workflow-automation-automation-usage-statsAn automation analytics panel with four stat tiles for runs, success rate, time saved, and active count above a runs per day bar chart.

Condition Branch Cardapplication-pro-workflow-automation-condition-branch-cardBranch decision panel with an If row of field, operator, and value chips, Then and Else path summaries, and an add condition affordance.

Connection Health Panelapplication-pro-workflow-automation-connection-health-panelA connected apps panel where each row shows the account, a status badge, dependent automation count, and a reconnect action for broken connections.

Run Detail Panelapplication-pro-workflow-automation-run-detail-panelAutomation run debugger showing the run header, a per step status list, and the input and output of the failed step expanded.

Run History Tableapplication-pro-workflow-automation-run-history-tableAutomation execution log with timestamp, automation name, status badge, duration, items affected, and inline error text on failed rows.

Schedule Trigger Panelapplication-pro-workflow-automation-schedule-trigger-panelA schedule trigger configuration card with frequency chips, day of week toggles, time and timezone rows, and a preview of the next queued runs.

Trigger Action Rowapplication-pro-workflow-automation-trigger-action-rowAutomations index with ruled rows summarising each automation as trigger to action text, a live Switch, last run time, and run count.

Workflow Canvas Blueprintapplication-pro-workflow-automation-workflow-canvas-blueprintStatic node-graph canvas with four positioned cards connected by dashed SVG lines, parallel branches, a merge node, and a zoom toolbar.

Email OTP Resetapplication-reset-password-email-otp-resetA 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.

Security Question Resetapplication-reset-password-security-question-resetA reset password form that verifies identity with a saved security question and answer before allowing a new password. Use as a passwordless recovery path.

Simple Resetapplication-reset-password-simple-resetA 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.

Token Resetapplication-reset-password-token-resetA 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.

Billingapplication-user-profiles-billingA profile billing view with current plan, payment method, invoice history, and an upgrade prompt. Use it where members manage subscriptions and receipts.

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

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

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

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

Security Logsapplication-user-profiles-security-logsA profile security view showing recent sign ins, devices, locations, and times. Use it so members can spot odd activity and protect their account.

Simpleapplication-user-profiles-simpleA 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.

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

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

With Statsapplication-user-profiles-with-statsA profile header paired with metrics like followers, posts, and reputation. Use it on social or community pages to show a member at a glance.

Border Fade Accordioncomponents-accordions-border-fade-accordionAn accordion where each item border softly fades on open. Adds a quiet visual cue for active panels in FAQs and settings without loud styling.

Card Accordioncomponents-accordions-card-accordionAn accordion built from separated cards, each panel raised on its own surface. Good for FAQs or feature details that need clear visual separation.

Dash Line Accordioncomponents-accordions-dash-line-accordionAn accordion divided by dashed lines between items. The light dashed rhythm keeps long FAQ lists readable while staying subtle and unobtrusive.

Dotted Border Accordioncomponents-accordions-dotted-border-accordionAn accordion framed by a dotted border around each panel. The playful dotted outline suits informal FAQs, help docs, and friendly onboarding tips.

Double Border Accordioncomponents-accordions-double-border-accordionAn accordion with a double line framing every item. The layered borders add clear structure for FAQs and specs where rows need firm definition.

Fade In Content Accordioncomponents-accordions-fade-in-content-accordionAn 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.

Floating Label Accordioncomponents-accordions-floating-label-accordionAn accordion where the question label lifts up as the panel opens. The floating title keeps context visible while reading through long FAQ answers.

Glow Border Accordioncomponents-accordions-glow-border-accordionAn 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.

Highlight Active Accordioncomponents-accordions-highlight-active-accordionAn accordion that tints the background of the open item. The highlighted row keeps your place in long FAQ lists and dense product documentation.

Minimal Line Accordioncomponents-accordions-minimal-line-accordionAn accordion with thin divider lines and no boxes at all. The stripped back style fits clean FAQs, sidebars, and content heavy marketing pages.

Nested Border Accordioncomponents-accordions-nested-border-accordionAn accordion supporting nested items inside bordered panels. Use it for layered FAQs, docs, and settings where topics branch into subtopics.

Numbered Accordioncomponents-accordions-numbered-accordionAn accordion with a number beside every question. The counted order suits step guides, ranked FAQs, and any sequence readers follow in turn.

Shadow Reveal Accordioncomponents-accordions-shadow-reveal-accordionAn accordion that lifts each item with a soft shadow on open. The raised panel clearly signals the active answer in FAQs and feature breakdowns.

Stepped Accordioncomponents-accordions-stepped-accordionAn accordion styled as numbered steps with connecting markers. Ideal for setup flows, tutorials, and any process that readers complete in order.

Thick Side Border Accordioncomponents-accordions-thick-side-border-accordionAn 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.

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

Accent Border Alertscomponents-alerts-accent-border-alertsAlerts 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.

All Sides Accent Alertscomponents-alerts-all-sides-accent-alertsAlerts 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.

Basic Alertscomponents-alerts-basic-alertsPlain alerts with an icon, title, and message in a soft container. Use for everyday notices like saved changes, confirmations, and short tips.

Bottom Accent Alertscomponents-alerts-bottom-accent-alertsAlerts 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.

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

Dashed Border Alertscomponents-alerts-dashed-border-alertsAlerts outlined with a dashed border for a lighter, sketch like feel. Use for draft notices, placeholders, or optional tips in a quiet tone.

Dismissible Alertscomponents-alerts-dismissible-alertsAlerts with a close button so users can clear a notice once read. Use for cookie banners, promotions, and warnings that should not stay forever.

Dotted Border Alertscomponents-alerts-dotted-border-alertsAlerts wrapped in a dotted border for a soft, playful outline. Use for casual reminders, tips, or low priority notes in friendly interfaces.

Double Border Alertscomponents-alerts-double-border-alertsAlerts with a layered double border for a refined, framed look. Use to highlight important notices that deserve extra visual weight on a page.

Elevated Alertscomponents-alerts-elevated-alertsAlerts raised with a soft shadow so they lift off the surface. Use for floating notifications or messages that should feel above the content.

Frosted Glass Alertscomponents-alerts-frosted-glass-alertsAlerts with a blurred, translucent backdrop that reveals content behind. Use over images or hero sections where a glassy notice fits the design.

Glow Border Alertscomponents-alerts-glow-border-alertsAlerts ringed by a soft glowing border that draws the eye gently. Use for promotions or new feature notices that need a warm, inviting accent.

Icon Only Alertscomponents-alerts-icon-only-alertsCompact 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.

Inset Alertscomponents-alerts-inset-alertsAlerts with an inset shadow that sinks slightly into the surface. Use for grouped notices inside cards or panels that feel part of the layout.

Monospace Alertscomponents-alerts-monospace-alertsAlerts set in a monospace typeface for a technical, code style tone. Use for build output, terminal messages, or warnings aimed at developers.

Outlined Alertscomponents-alerts-outlined-alertsAlerts 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.

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

Pulse Border Alertscomponents-alerts-pulse-border-alertsAlerts with a border that gently pulses to catch attention over time. Use for live updates, countdowns, or urgent notices that should not be missed.

Right Accent Alertscomponents-alerts-right-accent-alertsAlerts 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.

Top Accent Alertscomponents-alerts-top-accent-alertsAlerts 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.

3D Badgecomponents-badges-3d-badgeA 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.

Bounce Badgecomponents-badges-bounce-badgeA 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.

Dot Indicator Badgecomponents-badges-dot-indicator-badgeA 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.

Elevated Badgecomponents-badges-elevated-badgeA 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.

Extra Large Badgecomponents-badges-extra-large-badgeAn 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.

Gradient Border Badgecomponents-badges-gradient-border-badgeA 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.

Hover Scale Badgecomponents-badges-hover-scale-badgeA 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.

Icon Badgecomponents-badges-icon-badgeA 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.

Large Badgecomponents-badges-large-badgeA roomy badge with extra padding and larger text for clear reading. Use it to highlight a plan tier, count, or status across busy interfaces.

Pulse Badgecomponents-badges-pulse-badgeA 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.

Ribbon Badgecomponents-badges-ribbon-badgeA 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.

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

Background Breadcrumbcomponents-breadcrumbs-background-breadcrumbA breadcrumb trail wrapped in a soft tinted background bar. Anchors the top of a page and keeps navigation links readable above busy content.

Bordered Breadcrumbcomponents-breadcrumbs-bordered-breadcrumbA breadcrumb sitting inside a thin outlined container. Frames the navigation path cleanly on a dashboard header or any content section toolbar.

Card Breadcrumbcomponents-breadcrumbs-card-breadcrumbA breadcrumb housed in a rounded card with a subtle shadow. Lifts the navigation path off the page for detail views and account settings screens.

Compact Breadcrumbcomponents-breadcrumbs-compact-breadcrumbA tight breadcrumb with reduced spacing between its links. Fits crowded toolbars and mobile headers where horizontal room is in short supply.

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

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

Numbered Breadcrumbcomponents-breadcrumbs-numbered-breadcrumbA breadcrumb that numbers each step in the path. Clarifies order for sequential flows such as checkout, onboarding, or a multi step setup wizard.

Pill Breadcrumbcomponents-breadcrumbs-pill-breadcrumbA breadcrumb where each link sits inside a rounded pill shape. Adds a friendly, tappable feel to navigation on dashboards and profile pages.

Progress Breadcrumbcomponents-breadcrumbs-progress-breadcrumbA breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.

Slash Breadcrumbcomponents-breadcrumbs-slash-breadcrumbA breadcrumb that divides its links with a forward slash. Mirrors a file path style for code tools, documentation, and folder browsing screens.

Sticky Breadcrumbcomponents-breadcrumbs-sticky-breadcrumbA 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.

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

Border Animation Buttonscomponents-buttons-border-animation-buttonsButtons with borders that animate and trace around the edge on hover. Draw attention to a primary action without changing the button fill at rest.

Cut Corners Buttonscomponents-buttons-cut-corners-buttonsButtons with angled, clipped corners for a sharp geometric look. Fits gaming, tech, or editorial interfaces that want an edgy call to action.

Extra Large Buttonscomponents-buttons-extra-large-buttonsOversized buttons with generous padding and large type. Use them as the main hero call to action where one tap should be impossible to miss.

Extra Small Buttonscomponents-buttons-extra-small-buttonsCompact, low height buttons with tight padding and small type. Ideal for dense toolbars, table rows, and inline controls where space is limited.

Grow Buttonscomponents-buttons-grow-buttonsButtons that scale up smoothly on hover to feel responsive. Add a touch of motion feedback to cards, pricing tiers, and primary form actions.

Interactive Buttonscomponents-buttons-interactive-buttonsButtons that react to hover and click with motion and state changes. Make signups, downloads, and key actions feel alive and worth clicking.

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

Morphing Buttonscomponents-buttons-morphing-buttonsButtons that morph their shape, size, or label between states. Use for loading, success, and submit flows that confirm progress to the user.

Pixel Buttonscomponents-buttons-pixel-buttonsButtons with a blocky pixel art finish and retro styling. Perfect for games, indie projects, and brands that lean on a nostalgic visual theme.

Pulse Buttonscomponents-buttons-pulse-buttonsButtons 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.

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

Shadow Buttonscomponents-buttons-shadow-buttonsButtons with layered shadows that lift or shift on hover. Give actions a tactile, raised feel across cards, forms, and toolbars in any layout.

Skew Buttonscomponents-buttons-skew-buttonsButtons with a skewed, slanted shape for a sense of dynamic energy. Suits sports, fitness, and bold marketing pages that want forward momentum.

Slide Buttonscomponents-buttons-slide-buttonsButtons 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.

Social Buttonscomponents-buttons-social-buttonsButtons branded for Google, GitHub, Apple, and more providers. Drop them into sign in and sign up screens for fast one click authentication.

Squeeze Buttonscomponents-buttons-squeeze-buttonsButtons that squeeze inward on press for satisfying tactile feedback. Use on mobile flows and forms where every tap should feel confirmed fast.

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

Border Accent Cardcomponents-cards-border-accent-cardA 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.

Border Animation Cardcomponents-cards-border-animation-cardA 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.

Border Gradient Animation Cardcomponents-cards-border-gradient-animation-cardA 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.

Border Highlight Cardcomponents-cards-border-highlight-cardA 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.

Corner Ribbon Cardcomponents-cards-corner-ribbon-cardA 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.

Cutout Border Cardcomponents-cards-cutout-border-cardA 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.

Dashed Border Cardcomponents-cards-dashed-border-cardA 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.

Double Border Cardcomponents-cards-double-border-cardA card wrapped in two stacked outlines for a framed, formal look. Use it for certificates, awards, or quotes that deserve emphasis on the page.

Expandable Cardcomponents-cards-expandable-cardA 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.

Gradient Border Cardcomponents-cards-gradient-border-cardA 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.

Hover Effect Cardcomponents-cards-hover-effect-cardA 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.

Hover Reveal Cardcomponents-cards-hover-reveal-cardA 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.

Icon Cardcomponents-cards-icon-cardA 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.

Magnetic Cardcomponents-cards-magnetic-cardA 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.

Neon Border Cardcomponents-cards-neon-border-cardA 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.

Perspective Hover Cardcomponents-cards-perspective-hover-cardA 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.

Progress Cardcomponents-cards-progress-cardA 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.

Pulse Border Cardcomponents-cards-pulse-border-cardA 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.

Shimmer Effect Cardcomponents-cards-shimmer-effect-cardA 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.

Stacked Cardcomponents-cards-stacked-cardA 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.

Status Cardcomponents-cards-status-cardA 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.

Tilt Effect Cardcomponents-cards-tilt-effect-cardA card that tilts under the cursor to follow its position closely. Use it for interactive feature tiles or showcases where slight motion adds polish.

Card Collapsiblecomponents-collapsible-card-collapsibleA 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.

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

Icon Collapsiblecomponents-collapsible-icon-collapsibleA 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.

Shadowed Collapsiblecomponents-collapsible-shadowed-collapsibleA 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.

Side Bordered Collapsiblecomponents-collapsible-side-bordered-collapsibleA 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.

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

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

Card Paginationcomponents-pagination-card-paginationPagination wrapped in a raised card surface with page numbers and prev next controls. Groups navigation neatly below a list or grid of cards.

Compact Paginationcomponents-pagination-compact-paginationA 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.

Dot Indicator Paginationcomponents-pagination-dot-indicator-paginationPagination shown as a row of dots, with the active page filled. Ideal for image carousels, onboarding steps, and short sequences where numbers feel heavy.

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

Icon Only Paginationcomponents-pagination-icon-only-paginationPagination built from chevron icons for previous and next, with no page numbers. Keeps mobile toolbars and image viewers clean when only direction matters.

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

Responsive Paginationcomponents-pagination-responsive-paginationPagination that shows full page numbers on desktop and collapses to arrows on mobile. Keeps navigation usable across phones, tablets, and wide screens.

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

Shadow Paginationcomponents-pagination-shadow-paginationPagination with subtle drop shadows on each button for depth. The lifted look helps the controls stand out over busy backgrounds and image grids.

Split Paginationcomponents-pagination-split-paginationPagination with prev and next pushed to opposite edges and page numbers centered. Spreads controls across wide footers and full width content areas.

Card Tabscomponents-tabs-card-tabsTabs styled as raised cards, where the active panel lifts above the rest. Great for settings pages or dashboards that group related content into sections.

Gradient Tabscomponents-tabs-gradient-tabsTabs 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.

Icon Tabscomponents-tabs-icon-tabsTabs 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.

Minimal Tabscomponents-tabs-minimal-tabsClean 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.

Outline Tabscomponents-tabs-outline-tabsTabs 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.

Pill Tabscomponents-tabs-pill-tabsTabs 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.

Shadow Tabscomponents-tabs-shadow-tabsTabs 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.

Vertical Tabscomponents-tabs-vertical-tabsTabs stacked in a sidebar column with panels rendered to the right. Built for settings, account, and documentation pages with many sections to navigate.

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

Filter Drawerecommerce-category-filters-filter-drawerA 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.

Horizontal Filtersecommerce-category-filters-horizontal-filtersA row of filter dropdowns and chips sitting above the product grid. Lets shoppers narrow by category, price, and brand without giving up vertical space.

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

Expandable Previewecommerce-category-preview-expandable-previewA 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.

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

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

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

Split Previewecommerce-category-preview-split-previewA 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.

Three Column Previewecommerce-category-preview-three-column-previewA category preview laid out in three balanced columns of image tiles, sorting collections into clear groups for a wide ecommerce navigation page.

Builderecommerce-ecommerce-bundle-upsells-builderA 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.

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

Minimalist Gridecommerce-ecommerce-bundle-upsells-minimalist-gridA 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.

Side By Sideecommerce-ecommerce-bundle-upsells-side-by-sideTwo 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.

Stackecommerce-ecommerce-bundle-upsells-stackA 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.

Feature Iconsecommerce-ecommerce-cross-sells-feature-iconsRecommended products laid out with an icon, short benefit, and price for each item. Highlights why shoppers should add a related pick to the cart.

Simple Gridecommerce-ecommerce-cross-sells-simple-gridA 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.

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

With Badgesecommerce-ecommerce-cross-sells-with-badgesRelated 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.

With Ratingsecommerce-ecommerce-cross-sells-with-ratingsRecommended products shown with star ratings and review counts beside each price. Uses social proof to push complementary items into the cart.

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

Compact Review Listecommerce-ecommerce-customer-reviews-compact-review-listA tight vertical list of reviews with star ratings and short quotes. Fits narrow sidebars or product pages where space for feedback is limited.

Review Cards Gridecommerce-ecommerce-customer-reviews-review-cards-gridA 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.

Review Comparisonecommerce-ecommerce-customer-reviews-review-comparisonA 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.

Review Stats Overviewecommerce-ecommerce-customer-reviews-review-stats-overviewA 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.

Social Proof Reviewsecommerce-ecommerce-customer-reviews-social-proof-reviewsFeatured customer quotes paired with ratings and verified buyer badges. Builds confidence near the buy button to encourage shoppers to checkout.

Multi Columnecommerce-ecommerce-footers-muti-columnA footer with several columns of grouped links for shop, support, company, and legal. Organizes a large storefront so customers find any page fast.

Simple Linksecommerce-ecommerce-footers-simple-linksA 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.

With Newsletterecommerce-ecommerce-footers-with-newsletterA footer pairing link columns with an email signup field and button. Captures subscribers for promotions and offers while customers browse your store.

With Paymentsecommerce-ecommerce-footers-with-paymentsA footer that displays accepted card and wallet badges beside the usual store links. Reassures shoppers about secure checkout right before they buy.

With Socialsecommerce-ecommerce-footers-with-socialsA 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.

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

Checklistecommerce-ecommerce-shipping-returns-checklistA checklist that lays out shipping steps and return conditions as ticked items. Helps buyers confirm eligibility before they start a refund request.

Full Textecommerce-ecommerce-shipping-returns-full-textA 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.

Split Columnsecommerce-ecommerce-shipping-returns-split-columnsA 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.

With Iconsecommerce-ecommerce-shipping-returns-with-iconsAn icons layout pairing each shipping and returns point with a small symbol. Makes delivery speed, free returns, and refund windows scannable at a glance.

Badge Rowecommerce-ecommerce-trust-guarantee-badge-rowA horizontal row of trust badges showing secure payment, returns, and warranty icons. Place under an add to cart button to calm buyer worry.

Checklistecommerce-ecommerce-trust-guarantee-checklistA 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.

Highlighted Quoteecommerce-ecommerce-trust-guarantee-highlighted-quoteA 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.

Icon Listecommerce-ecommerce-trust-guarantee-icon-listA 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 Pillarsecommerce-ecommerce-trust-guarantee-three-pillarsThree equal columns, each with an icon, heading, and a line on quality, security, and support. Builds buyer confidence across the full storefront.

Accessibility Feature Filtersecommerce-pro-accessibility-sections-accessibility-feature-filtersA shop filter panel of verified accessibility checkboxes and counts, beside product rows carrying feature tags, a reason line, and the price.

Accessibility Feedback Cardecommerce-pro-accessibility-sections-accessibility-feedback-cardA dated changelog of real fixes credited by first name, with a two day reply promise and a report button.

Accessibility Statementecommerce-pro-accessibility-sections-accessibility-statementDated statement pairing what works with three named gaps, quarter targets, and the next review date.

Accessible Delivery Preferencesecommerce-pro-accessibility-sections-accessible-delivery-preferencesA list of four courier instructions you set once, beside a reproduction of the driver instruction screen, over a strip noting reorders inherit them.

Accessible Packaging Cardecommerce-pro-accessibility-sections-accessible-packaging-cardBox opens without tools, large print and braille care cards on request, for four named products in stock.

Accessible Returns Flowecommerce-pro-accessibility-sections-accessible-returns-flowFour numbered return steps covering keyboard start, label free drop off, courier pickup, and readable refund emails, over a paused window strip.

Alternative Format Documentsecommerce-pro-accessibility-sections-alternative-format-documentsA two by two card grid of large print, braille, audio, and tagged text formats with turnaround badges, over a strip for setting one default.

Assisted Ordering Optionsecommerce-pro-accessibility-sections-assisted-ordering-optionsThree bordered channel cards for phone, email, and relay ordering with hours and reply promises, above a parity strip naming the team.

Assistive Tech Compatibilityecommerce-pro-accessibility-sections-assistive-tech-compatibilityA published table of screen reader, voice, and magnifier pairings with status and last tested date, beside a card defining what a pass means.

Captioned Product Videosecommerce-pro-accessibility-sections-captioned-product-videosVideo player mockup with caption bar and timestamped transcript rows beside four checked standards for captions, transcripts, and audio description.

Checkout Without Time Limitsecommerce-pro-accessibility-sections-checkout-without-time-limitsThree checked promises that nothing expires mid checkout beside a static session panel showing saved rows after an overnight pause.

Display Preferences Panelecommerce-pro-accessibility-sections-display-preferences-panelStatic display settings card with text size, motion, contrast, and link underline rows beside three checked promises about persistence.

In Store Accessibilityecommerce-pro-accessibility-sections-in-store-accessibilityDivided list of three stores with checked access features beside an assisted visit booking card, over a corrections strip.

Independent Audit Resultsecommerce-pro-accessibility-sections-independent-audit-resultsAudit method card with firm, testers, scope, and totals beside four WCAG principle rows of found and fixed counts, over a retest strip.

Keyboard And Screen Reader Guideecommerce-pro-accessibility-sections-keyboard-and-screen-reader-guideReal keyboard paths for search, cart, and checkout, rough edges named, and a direct developer inbox.

Written Product Descriptionsecommerce-pro-accessibility-sections-written-product-descriptionsFour written description standards in a divided list beside an annotated product panel printing its alt text and spec rows in full.

Account Overview Dashboardecommerce-pro-account-sections-account-overview-dashboardNext delivery, guarantee clocks, credit balance, and subscription as four linked cards, none a feed.

Account Overview Tilesecommerce-pro-account-sections-account-overview-tilesThe account dashboard where every tile reports a live fact instead of a label.

Account Security Cardecommerce-pro-account-sections-account-security-cardPasskey first, password demoted, sessions visible with sign out everywhere.

Data Privacy Controlsecommerce-pro-account-sections-data-privacy-controlsView, download, and delete as buttons, generated on the spot, no support form.

Download Your Data Cardecommerce-pro-account-sections-download-your-data-cardOne button, the export by email in minutes, with contents and absences listed honestly.

Email History Logecommerce-pro-account-sections-email-history-logEvery email sent to this account as a dated list, each row naming the reason it was sent.

Fit Profile Cardecommerce-pro-account-sections-fit-profile-cardConfirmed sizes per category with fit notes in a panel, beside plain rules on what the profile changes and never touches.

Gift Cards Panelecommerce-pro-account-sections-gift-cards-panelGift cards account panel with balance cards for held cards, a redeem row for paper codes, and a list of sent cards showing delivery status.

Guarantee Registrations Listecommerce-pro-account-sections-guarantee-registrations-listEvery owned product with its guarantee clock, expired ones kept for the bench.

Household Accounts Cardecommerce-pro-account-sections-household-accounts-cardTwo adults, one address, separate logins and wishlists, shared history by consent, one membership.

Invoices and Documents Panelecommerce-pro-account-sections-invoices-documents-panelInvoices, a credit note, and a yearly statement as download rows, with editable billing details that print on every future invoice.

Loyalty Points Cardecommerce-pro-account-sections-loyalty-points-cardStore credit in dollars with a plain ledger, money not points, never expires.

Membership Value Cardecommerce-pro-account-sections-membership-value-cardMembership value card weighing what the plan cost against what it returned, benefits priced from real usage, with the renewal date and cancel button.

Notification Preferencesecommerce-pro-account-sections-notification-preferencesEvery email type on a working switch with honest cadence, locked rows explained.

Notification Preferences Panelecommerce-pro-account-sections-notification-preferences-panelTopic and channel checkboxes with marketing off by default and order updates locked on with the reason.

Order Again Gridecommerce-pro-account-sections-order-again-gridConsumables sorted by what runs out, the bag listed with anti rebuy advice.

Order History Listecommerce-pro-account-sections-order-history-listPast orders with state matched actions, track, buy again, and the return kept visible.

Payment Methods Listecommerce-pro-account-sections-payment-methods-listSaved cards with expiry warnings and the storage honesty line up front.

Product Reviews Panelecommerce-pro-account-sections-product-reviews-panelDelivered items waiting on a review beside published ones with stars, edit and delete in your hands, no coupons for praise.

Referral Dashboard Cardecommerce-pro-account-sections-referral-dashboard-cardBoth get $15 in dollars, not points, with a ledger including the honest zero.

Returns and Refunds Trackerecommerce-pro-account-sections-returns-refunds-trackerOpen returns as cards with a four stage progress line, refund amount and destination named, and the carrier scan clock explained.

Saved Addresses Cardsecommerce-pro-account-sections-saved-addresses-cardsLabeled address cards with courier notes that travel with every order.

Saved Payment Methods Panelecommerce-pro-account-sections-saved-payment-methods-panelSaved cards as token rows with the processor architecture explained and the no silent save footer.

Store Credit Walletecommerce-pro-account-sections-store-credit-walletBalance, dated ledger, and the three rules that make credit behave like cash the store owes you.

Subscription Managementecommerce-pro-account-sections-subscription-managementSkip, pause, swap at equal weight, cancel visible, no exit interview.

Support Conversations Listecommerce-pro-account-sections-support-conversations-listSupport conversations account list with each question as a row showing subject, last reply, and a status badge, plus a reply time promise below.

Trade In Offers Gridecommerce-pro-account-sections-trade-in-offers-gridTrade in offers grid of owned products with a standing quote on each, one trade already in progress, and three grading rules printed below.

Wishlist Gridecommerce-pro-account-sections-wishlist-gridSaved items with price drop and restock notes, a wishlist that watches for you.

Your Impact Cardecommerce-pro-account-sections-your-impact-cardThe personal ledger of seven years with us: bags, repairs, a trade in, and zero replacements bought.

Archive In Numbersecommerce-pro-archive-sections-archive-in-numbersA section heading, a four card ledger stat grid, and a year by year bar strip of units shipped with a labelled baseline axis.

Archive Wall Pageecommerce-pro-archive-sections-archive-wall-pageThe physical archive wall at the workshop: 64 pieces, Friday visits, and nothing on it for sale.

Bring Back Ballotecommerce-pro-archive-sections-bring-back-ballotAn interactive reissue ballot with three retired candidates, honest retirement notes, live vote bars, and a single vote button per row.

Catalog Scans Galleryecommerce-pro-archive-sections-catalog-scans-galleryFour dated pieces of printed matter across eleven years, the price rise letter kept public among them.

Colorway Indexecommerce-pro-archive-sections-colorway-indexAn archive table of every colorway ever sold with years, units made, live or retired badges, and the honest note behind each retirement.

Discontinued Graveyardecommerce-pro-archive-sections-discontinued-graveyardThree retired products with the honest reason each died and the parts pledge that outlives them.

Fabric Shelfecommerce-pro-archive-sections-fabric-shelfSection heading over a three column grid of swatch cards, each with a placeholder swatch, status badge, mill spec, note, and years.

First Bag Storyecommerce-pro-archive-sections-first-bag-storyA 2015 origin letter: eight bags sewn at a kitchen table with 90 percent of that pattern unchanged today.

Guarantee Transferecommerce-pro-archive-sections-guarantee-transferA two column split with three numbered transfer promises beside a serial registration card that reveals the transferred record on submit.

Pattern Changelogecommerce-pro-archive-sections-pattern-changelogA ruled revision timeline of the flagship pattern with version chips, beside a bordered panel listing everything unchanged since the first batch.

Prototype Museumecommerce-pro-archive-sections-prototype-museumFour failed prototypes kept on purpose, each photographed with the failure and the lesson it left.

Reissue Runecommerce-pro-archive-sections-reissue-runA two column split with a placeholder image on one side and a heading, details list, numbered change notes, and reserve buttons on the other.

Serial Lookup Cardecommerce-pro-archive-sections-serial-lookup-cardType a bag serial and its full history appears: made date, repairs, resale, and guarantee status.

Still in Serviceecommerce-pro-archive-sections-still-in-serviceThree registry cards for the oldest bags in daily use, each led by a big years count with serial, service rows, and an owner line.

Announcement With Detailsecommerce-pro-banners-and-alerts-announcement-with-detailsA headline band with a static open details row for announcements that one line cannot contain honestly.

Back In Stock Bannerecommerce-pro-banners-and-alerts-back-in-stock-bannerThe June batch landed, 140 units live, and an honest pace estimate so buyers know the real window.

Cookie Consent Barecommerce-pro-banners-and-alerts-cookie-consent-barTwo cookies named, zero tracking confirmed, with Accept and Decline at equal visual weight.

Counterfeit Warning Bannerecommerce-pro-banners-and-alerts-counterfeit-warning-bannerA card splitting the three places we actually sell against the channels that are never us, plus the serial check link.

Customs Duties Noticeecommerce-pro-banners-and-alerts-customs-duties-noticeA slim notice band with a heading that rules out surprise charges, then one row per region stating who collects which duties and taxes.

Extended Returns Bannerecommerce-pro-banners-and-alerts-extended-returns-bannerA card band explaining a longer holiday returns window, with three fact columns for the purchase window, standard policy, and extended deadline.

Free Shipping Threshold Barecommerce-pro-banners-and-alerts-free-shipping-threshold-barThe $6 flat rate and $75 free line stated as the entire rule, with a slim progress track showing the cart at $62.

Holiday Cutoff Bannerecommerce-pro-banners-and-alerts-holiday-cutoff-bannerDecember 24 delivery cutoffs as plain calendar dates for two service levels, no countdown timers.

Payment Methods Update Bannerecommerce-pro-banners-and-alerts-payment-methods-update-bannerA slim edge band announcing a payment methods change in one sentence, with a chip row naming the two methods arriving and the one retiring.

Phishing Alert Bannerecommerce-pro-banners-and-alerts-phishing-alert-bannerA card band pairing a phishing warning and a never-asked list against a panel showing how a genuine order email reads.

Price Error Apology Bannerecommerce-pro-banners-and-alerts-price-error-apology-bannerA June 8 mispricing owned in the headline, a three row timestamped account, and all 23 wrong price orders shipping as placed.

Price Rise Preannounce Bannerecommerce-pro-banners-and-alerts-price-rise-preannounce-bannerFour canvas products repricing July 1 announced three weeks early as a courtesy window, not a sales push.

Product Recall Noticeecommerce-pro-banners-and-alerts-product-recall-noticeA recall card naming the valve fault, affected batch codes as mono pills, the unaffected batches, and return label actions.

Service Status Bannerecommerce-pro-banners-and-alerts-service-status-bannerRepair bench paused until June 15 with the mechanical reason published and the full scope of what holds.

Shipping Delay Bannerecommerce-pro-banners-and-alerts-shipping-delay-bannerA carrier disruption dated and scoped, standard delayed two days this week with express confirmed unaffected.

Brand Timelineecommerce-pro-brand-story-sections-brand-timelineThe company history as dated rows, the near collapse year kept in.

Complaints Changelogecommerce-pro-brand-story-sections-complaints-changelogFour full customer complaint quotes, each paired with the product change it shipped and the date it landed, laid out as a release log.

Decade Timelineecommerce-pro-brand-story-sections-decade-timelineEleven years in ruled rows, bad years kept in, because a timeline of only wins is marketing.

Design Principles Listecommerce-pro-brand-story-sections-design-principles-listFour product rules, each proven by the decision it most recently forced.

Factory Partners Listecommerce-pro-brand-story-sections-factory-partners-listWho makes what, where, with maker counts, median tenure, and audit dates.

First Product Storyecommerce-pro-brand-story-sections-first-product-storyThe catalog's first product beside every dated revision it survived, each row naming the failure that forced it.

Founder Interview Q&Aecommerce-pro-brand-story-sections-founder-interview-qaA transcript card of five hard questions answered on the record by the founder, each with an avatar byline and a checkable number.

Founder Letterecommerce-pro-brand-story-sections-founder-letterThe origin story as signed prose with one number per claim and a dated signature.

Made In Numbersecommerce-pro-brand-story-sections-made-in-numbersThe brand as six stat tiles, including the numbers a conventional brand would hide.

Makers Rosterecommerce-pro-brand-story-sections-makers-rosterSix named makers with avatars, bench, city, and tenure, each owning one checkable fact about the work they do.

Making Process Stepsecommerce-pro-brand-story-sections-making-process-stepsA numbered process stepper of six making stations, each showing its duration, the hands on it, a detail paragraph, and the check it must pass.

Materials Provenance Rowsecommerce-pro-brand-story-sections-materials-provenance-rowsFour inputs with suppliers named to the city, tenure, and one audit grade fact each.

Numbers We Track Cardecommerce-pro-brand-story-sections-numbers-we-track-cardFour KPIs published with the reason each earns its place, including the one the store refuses to optimize.

Open Questions Cardecommerce-pro-brand-story-sections-open-questions-cardThree unresolved decisions posted publicly with where the thinking sits.

Ownership Split Rowsecommerce-pro-brand-story-sections-ownership-split-rowsA cap table shown as a stacked proportion bar and holder rows with share and note, plus what is deliberately absent from it.

Plain Words Glossaryecommerce-pro-brand-story-sections-plain-words-glossaryA definition list of six store terms, each pinned to a checkable meaning and the claim the word will never be stretched to cover.

Price Breakdown Rowsecommerce-pro-brand-story-sections-price-breakdown-rowsOne product's retail price split into cost rows with proportion bars, a note per line, and the margin admitted.

Refusals Gridecommerce-pro-brand-story-sections-refusals-gridSix standing refusals of common store tactics in a card grid, each dated and priced with what holding the line costs.

Repairs Ledgerecommerce-pro-brand-story-sections-repairs-ledgerA repair promise shown as running totals beside a signed log of last week at the bench, so the warranty reads as bookkeeping.

Retired Products Rowsecommerce-pro-brand-story-sections-retired-products-rowsA discontinued products archive in rows, each with lifespan, units made, the honest reason it was pulled, and what owners kept.

Supply Chain Listecommerce-pro-brand-story-sections-supply-chain-listEvery supplier named with place and tenure, plus the one we left and why.

Then Vs Now Columnsecommerce-pro-brand-story-sections-then-vs-now-columnsA founding year and today set side by side across the same measured rows, including the number that moved in the wrong direction.

Why We Exist Proseecommerce-pro-brand-story-sections-why-we-exist-proseThe manifesto with its thesis at display weight and one number per argument.

Workshop Photo Essayecommerce-pro-brand-story-sections-workshop-photo-essaySix workshop frames in a 3x2 grid, each captioned like a photo essay, no people, just the room.

Workshop Tour Galleryecommerce-pro-brand-story-sections-workshop-tour-galleryFive captioned frames from the making floor where the captions are the tour.

Year In Review Letterecommerce-pro-brand-story-sections-year-in-review-letterThe founder's annual letter with the bad paragraph priced and signed.

Advice Inboxecommerce-pro-buying-advice-sections-advice-inboxThree real buying questions laid out as correspondence, the quoted question and sender on the left, the honest reply and staffer on the right.

Ask Before You Buyecommerce-pro-buying-advice-sections-ask-before-you-buyAccordion of five honest questions asked before checkout, first item opened, each answer printed even where it costs the sale.

Break In Expectationsecommerce-pro-buying-advice-sections-break-in-expectationsFour ruled stage columns walk week one through year five of canvas break in, closed by a straight note on the return window.

Buy Once Math Cardecommerce-pro-buying-advice-sections-buy-once-math-cardTwo mono ledgers show the decade math at $21.50 a year versus $36, caveats printed beside the sums.

Checkout Extras Adviceecommerce-pro-buying-advice-sections-checkout-extras-adviceA verdict table for five checkout add ons, each row naming the item and price, a badge, and an honest reason to buy or skip.

Colorway Adviceecommerce-pro-buying-advice-sections-colorway-adviceTwo framed colorway panels side by side, each with a swatch, share stat, and honest wear rows, closed by an exchange ledger note.

Do You Need It Checklistecommerce-pro-buying-advice-sections-do-you-need-it-checklistThree numbered honest questions before the buy, boredom named, the bench ready to talk you out of it.

Honest Alternatives Guideecommerce-pro-buying-advice-sections-honest-alternatives-guideFour jobs the store loses at, each card naming the winner and the reason, closed by what is left.

Repair Or Replace Pathecommerce-pro-buying-advice-sections-repair-or-replace-pathThree numbered failure questions each branch into yes and no outcomes, closed by the bench's photo triage counts from last year.

Second Bag Advice Cardecommerce-pro-buying-advice-sections-second-bag-advice-cardThree verdict rules backed by support log counts, 184 of 312 second bag inquiries routed to a repair.

Secondhand Buying Guideecommerce-pro-buying-advice-sections-secondhand-buying-guideFour numbered inspection cards for buying a used bag, each showing good wear and a walk away sign, closed by a fair price ledger.

What Fits Insideecommerce-pro-buying-advice-sections-what-fits-insideA capacity guide listing four real packed loads, each with its contents, a fill bar showing how full the bag runs, and a plain verdict.

What The Bench Carriesecommerce-pro-buying-advice-sections-what-the-bench-carriesThree repair bench staff cards with avatar headers, the size each carries, the reason, and a ruled wear report footer.

When Not To Buy From Usecommerce-pro-buying-advice-sections-when-not-to-buy-from-usFour ruled rows naming who wins instead, each a genuine disqualifier with the better option printed.

When To Buy Timelineecommerce-pro-buying-advice-sections-when-to-buy-timelineVertical timeline of four honest purchase windows, each with a bordered price pill and straight advice, closed by a printed footnote.

Which Size To Buyecommerce-pro-buying-advice-sections-which-size-to-buyTwo size columns compare specs, weight, and honest use cases, closed by an exchange ledger verdict favoring the smaller pack.

Alphabetical Indexecommerce-pro-category-sections-alphabetical-indexThe whole catalog as a lettered text directory for visits that know the name.

Alternating Category Bandsecommerce-pro-category-sections-alternating-category-bandsTwo full width category bands with images on alternating sides, each pairing a written lead with ruled subcategory rows and a shop all link.

Archive And Seconds Bandecommerce-pro-category-sections-archive-and-seconds-bandTwo outlet tiles, seconds with named flaws and resale archive graded, each with an honest count.

Bestsellers By Categoryecommerce-pro-category-sections-bestsellers-by-categoryFour aisle cards each led by the single item bought first most often, with units shipped, a price, and one honest line.

Capacity Ladder Bandecommerce-pro-category-sections-capacity-ladder-bandPacks sorted by liters on proportional bars, four ruled rungs with counts and one line on what each size swallows.

Category Comparison Tableecommerce-pro-category-sections-category-comparison-tableThree bag families compared in one table across price, fabric, weight, and laptop room, since shape is the real decision.

Category Ratings Bandecommerce-pro-category-sections-category-ratings-bandThree category columns each led by a large average rating, a five star row, review count, price floor, and one quoted customer line.

Category Stats Tilesecommerce-pro-category-sections-category-stats-tilesAisles as stat tiles with counts, price ranges, and one verifiable fact each.

Category Tiles Gridecommerce-pro-category-sections-category-tiles-gridSix aisles as image tiles with caption bars carrying counts and price floors.

Category With Buying Guide Bandecommerce-pro-category-sections-category-with-buying-guide-bandA category grid with an inline buying guide that names which bag to buy first, by job, by name.

Circle Category Rowecommerce-pro-category-sections-circle-category-rowAisles as round image chips in one scannable strip, the mobile commerce pattern.

Collection List Rowsecommerce-pro-category-sections-collection-list-rowsCapsules as ruled editorial rows with one written sentence and a piece count each.

Gifting Tiles Rowecommerce-pro-category-sections-gifting-tiles-rowThree recipient cuts with counts, and the gift card named as the no guess option.

Material Tiles Rowecommerce-pro-category-sections-material-tiles-rowBrowse by material, each tile with its source and product count.

New Vs Classics Bandecommerce-pro-category-sections-new-vs-classics-bandThe drop against the permanent range, two kinds of buying explained.

Occasion Tilesecommerce-pro-category-sections-occasion-tilesThe catalog cut by life situation, categories are for warehouses.

Portrait Category Scrollerecommerce-pro-category-sections-portrait-category-scrollerEight tall portrait category tiles in one horizontally snapping strip, each with a caption bar carrying its name, style count, and price floor.

Seasonal Category Bandecommerce-pro-category-sections-seasonal-category-bandOne card, one season, a wide image beside the edit with a credible curator named.

Seasonal Rotation Bandecommerce-pro-category-sections-seasonal-rotation-bandThe two drop calendar with March batches, September heavy canvas, and the permanent range constant below.

Shop All Bandecommerce-pro-category-sections-shop-all-bandThe whole catalog on one ruled band with counts and price ranges.

Shop By Price Bandecommerce-pro-category-sections-shop-by-price-bandThree wide tiles cutting the range by budget with real item counts and one line of what lives in each band.

Shop By Price Bandsecommerce-pro-category-sections-shop-by-price-bandsBudget as navigation, three bands with counts and the same guarantee at every price.

Split Category Navecommerce-pro-category-sections-split-category-navA two column split pairing the full aisle list as a ruled nav with one large featured category panel and its caption bar.

Subcategory Accordionecommerce-pro-category-sections-subcategory-accordionA ruled accordion of category rows that each expand into a columned grid of subcategory links, every one carrying a style count and price floor.

Tabbed Category Previewecommerce-pro-category-sections-tabbed-category-previewOne tab per aisle, each panel previewing three products with prices, an honest aisle line, and a shop all link.

Three Tile Featureecommerce-pro-category-sections-three-tile-featureOne tall lead category beside two stacked tiles, traffic steered by area.

Use Case Category Bandecommerce-pro-category-sections-use-case-category-bandThree job tiles with counts and one honest line each plus the admission that most bags do two jobs fine.

With Banner Tileecommerce-pro-category-sections-with-banner-tileFour category tiles plus one solid banner tile carrying the month's single message.

Address Validation Helperecommerce-pro-checkouts-address-validation-helperYour spelling beside the database's, differences bolded, keep mine respected.

Billing Address Toggleecommerce-pro-checkouts-billing-address-toggleA working switch keeps billing matched to shipping or reveals the full billing form, with the decline warning that explains why banks care.

Business Purchase Checkoutecommerce-pro-checkouts-business-purchase-checkoutCompany, VAT, and invoice fields with the EU reverse charge mechanics and VIES fallback stated honestly.

Delivery Date Pickerecommerce-pro-checkouts-delivery-date-pickerPick the arrival day from real options, same price any day, holidays shown honestly.

Delivery Notes Stepecommerce-pro-checkouts-delivery-notes-stepDriver note field with safe place chips and the honest limit that notes land about 90% of the time.

Duties And Taxes Stepecommerce-pro-checkouts-duties-and-taxes-stepInternational checkout choosing prepaid import charges or courier collection at the door, both totals shown and the handling fee stated honestly.

Express Checkout Wallecommerce-pro-checkouts-express-checkout-wallWallet buttons stacked full width first with the measured 40 second reason stated, card form collapsed below.

Express Pay Buttonsecommerce-pro-checkouts-express-pay-buttonsThe wallet stack above an equal card path, same price either way stated plainly.

Gift Receipt Toggle Stepecommerce-pro-checkouts-gift-receipt-toggle-stepA working switch flips the order to gift mode and re-renders both slip states as a live checklist.

Guest Or Account Choiceecommerce-pro-checkouts-guest-or-account-choiceThe fork without a thumb on the scale, guest first, account earning its column with perks.

Installment Plan Choiceecommerce-pro-checkouts-installment-plan-choicePay in full, four payments, or twelve months as selectable rows, the written schedule re-renders live and the costlier option admits it.

Invoice Details Formecommerce-pro-checkouts-invoice-details-formCompany, VAT with reverse charge, PO, and cost center, asked once for the PDF.

Multi Step Checkoutecommerce-pro-checkouts-multi-step-checkoutThe three stage flow mid journey with editable recaps and a stepper without color dependence.

One Page Checkoutecommerce-pro-checkouts-one-page-checkoutContact, shipping, and payment in one visible column, nine fields, no account required.

Order Confirmation Pageecommerce-pro-checkouts-order-confirmation-pageThe thank you with the window, a live cancel countdown, and the account ask after.

Order For Someone Else Stepecommerce-pro-checkouts-order-for-someone-else-stepTheir address and phone, your payment, every email routed per line and the gift flag consequences listed.

Order Review Stepecommerce-pro-checkouts-order-review-stepThree editable ruled sections plus a pay button that promises to charge exactly the number printed on it.

Order Summary Sidebarecommerce-pro-checkouts-order-summary-sidebarThe checkout companion panel with quantity badges and totals that explain themselves.

Payment Failed Recoveryecommerce-pro-checkouts-payment-failed-recoveryThe decline without shame, three ways forward and the cart held.

Payment Form Sectionecommerce-pro-checkouts-payment-form-sectionCard fields beside a panel answering where the numbers actually go.

Pickup Point Selectorecommerce-pro-checkouts-pickup-point-selectorHome, locker, or shop with real prices, the courier saving passed on.

Promo Code Stepecommerce-pro-checkouts-promo-code-stepA working code field that applies live, adds the discount line, reprices the pay button, and states plainly what codes exclude.

Quote To Checkoutecommerce-pro-checkouts-quote-to-checkoutTrade quote as a review screen with locked prices honored, Net 30 or card, a PO field and one button.

Returning Customer Checkoutecommerce-pro-checkouts-returning-customer-checkoutPrefilled address, delivery, and card from the last order as review rows with one pay button.

Review And Place Orderecommerce-pro-checkouts-review-and-place-orderFour editable recap cards above a button that says what it does and what it costs.

Shipping Options Listecommerce-pro-checkouts-shipping-options-listThree speeds as selectable rows with real date windows, including the no rush option.

Accessory Fit Matrixecommerce-pro-comparison-tables-accessory-fit-matrixCompatibility matrix of five accessories against three bags with fits, fits with a named caveat, and no states plus a legend.

Bag Size Side By Sideecommerce-pro-comparison-tables-bag-size-side-by-sideFour bags drawn to one scale with SVG silhouettes and spec rows, the size answer photos never give.

Canvas Weight Comparisonecommerce-pro-comparison-tables-canvas-weight-comparisonThree canvas weights judged row by row, the check moves, and the verdict row refuses to name a winner.

Cost Per Year Tableecommerce-pro-comparison-tables-cost-per-year-tableCumulative ten year spend on a cheap bag replaced against one bag repaired, ending in per year math and a caveat.

Good Better Best Cardsecommerce-pro-comparison-tables-good-better-best-cardsThree material tiers with what the extra money buys stated per step.

Leather Vs Vegan Tableecommerce-pro-comparison-tables-leather-vs-vegan-tableBridle leather against waxed cotton across six rows where each column wins real rows and one is a draw.

Material Comparison Tableecommerce-pro-comparison-tables-material-comparison-tableThree materials judged row by row with the check moving and the verdict refusing to crown any one winner.

Model Comparison Tableecommerce-pro-comparison-tables-model-comparison-tableThe product family side by side with four number rows and a best for verdict.

New Vs Refurb Vs Seconds Tableecommerce-pro-comparison-tables-new-vs-refurb-vs-seconds-tableOne bag at three honest price points, new, refurbished, and second, with the guarantee row identical.

Old Vs New Generationecommerce-pro-comparison-tables-old-vs-new-generationThe v2 against the v1 including what did not change, upgrade advice, no mostly.

Size Variant Comparisonecommerce-pro-comparison-tables-size-variant-comparisonThree sizes with relatively scaled images and packed lists instead of liters.

Spec Side By Sideecommerce-pro-comparison-tables-spec-side-by-sideTwo products dueled with differences emphasized and sameness admitted.

Upkeep Comparison Cardsecommerce-pro-comparison-tables-upkeep-comparison-cardsThree materials compared by minutes of care per year, the ritual itself with cadences, and what skipping it costs.

Us Vs Them Tableecommerce-pro-comparison-tables-us-vs-them-tableOur pack against the big label equivalent in grouped rows, losses printed first, wins second, and one honest draw.

Which One Guideecommerce-pro-comparison-tables-which-one-guideThe decision written like advice, four situations routed to products with reasons.

Contact Form Splitecommerce-pro-contact-sections-contact-form-splitThe form beside who reads it, per topic reply times, and no ticket numbers.

Contact Routes Pageecommerce-pro-contact-sections-contact-routes-pageFour named inboxes with reply medians and the no phone line explained honestly.

Damaged Item Flowecommerce-pro-contact-sections-damaged-item-flowThe photo is the claim, cheap items are replaced and kept, the 0.4% rate published.

How To Complain Cardecommerce-pro-contact-sections-how-to-complain-cardThe complaints route in three plain steps, plus the quarterly ledger of every complaint received and what each one changed.

Live Chat Honesty Cardecommerce-pro-contact-sections-live-chat-honesty-cardWhy there is no chat bubble, in two paragraphs, with the one condition that could change the answer.

Missing Parcel Flowecommerce-pro-contact-sections-missing-parcel-flowMarked delivered, not there, in three steps with base rates and reship or refund.

Response Times Bandecommerce-pro-contact-sections-response-times-bandSupport numbers published like specs, median reply, resolution rate, slowest day named.

Send It To The Bench Cardecommerce-pro-contact-sections-send-it-to-the-bench-cardRepairs by post with no forms: a packing checklist beside a shipping label mockup where the note in the box is the ticket.

Skip The Queue FAQecommerce-pro-contact-sections-skip-the-queue-faqThe five questions that filled half of June's inbox as an accordion with ask counts, beside the case for writing anyway.

Visit The Workshop Cardecommerce-pro-contact-sections-visit-the-workshop-cardFriday hours, one address, and the warning that it is a working workshop.

Who Has The Inbox Cardecommerce-pro-contact-sections-who-has-the-inbox-cardThe weekly support rota as a three person card, this week highlighted, with the handover ritual that keeps threads intact.

Write To The Founder Cardecommerce-pro-contact-sections-write-to-the-founder-cardThe elena@ inbox as a real channel: when it is read, what to send, and what the bench does with it.

Canvas Run Splitsecommerce-pro-custom-orders-sections-canvas-run-splitsThe 80 meter mill minimum drawn as a two segment bar, your bags against the shelf run, over three past runs listed.

Custom Build Logecommerce-pro-custom-orders-sections-custom-build-logFour finished custom builds with placeholder thumbs, the ask, an owner line, and a work, weeks, and paid meta row each.

Custom Or Shelfecommerce-pro-custom-orders-sections-custom-or-shelfThree qualifying question cards with a shelf answer and a custom answer each, closed by the half of intake ends at the shelf bar.

Custom Order Intakeecommerce-pro-custom-orders-sections-custom-order-intakeIntake gate with three yes types, three decline types, and a published one in three acceptance rate.

Custom Orders Faqecommerce-pro-custom-orders-sections-custom-orders-faqFive intake inbox questions with the schedule and multiplier in them, first item opened.

Custom Pricing Tableecommerce-pro-custom-orders-sections-custom-pricing-tableFour custom work types priced in public, fleet runs at standard price, one off argued against.

Custom Queue Statusecommerce-pro-custom-orders-sections-custom-queue-statusThe custom bench queue published live, the current build named, scarcity stated as a schedule.

Made To Measure Explainerecommerce-pro-custom-orders-sections-made-to-measure-explainerFour steps with real durations, the 1.6x multiplier itemized, and no return caveat before any form.

Monogram Galleryecommerce-pro-custom-orders-sections-monogram-galleryThree initials styles priced by longevity, closed by the three character rule and its reason.

Pattern Remake Fileecommerce-pro-custom-orders-sections-pattern-remake-fileSplit section pairing remake pricing at 1.1x with a static pattern record card of measurements, materials, and builds to date.

Back In Stock Captureecommerce-pro-email-capture-sections-back-in-stock-captureWatch any sold out item, one email when it lands, then the address is deleted.

Cart Reminder Opt Inecommerce-pro-email-capture-sections-cart-reminder-opt-inA centered consent card spelling out the single cart reminder as a four step timeline, from saved cart to deletion, above the email form.

Drop Alerts Captureecommerce-pro-email-capture-sections-drop-alerts-captureThe release list sold on access, 48 hours early, four to six emails a year.

Drop List Signupecommerce-pro-email-capture-sections-drop-list-signupThe 48 hour head start explained as sequence not exclusivity, beside the last drop counted in four stats.

First Order Offer Captureecommerce-pro-email-capture-sections-first-order-offer-captureThe welcome discount as a page, not a popup, with terms in the open.

Newsletter Signup Bandecommerce-pro-email-capture-sections-newsletter-signup-bandThe monthly letter pitched with cadence, open rate, and unsubscribe speed.

Newsletter With Archiveecommerce-pro-email-capture-sections-newsletter-with-archiveThe last three issues readable before sign up with both subscriber and unsubscribe counts published live.

One Email A Season Signupecommerce-pro-email-capture-sections-one-email-a-season-signupThe four email contract published above the field, with the open rate that earns it.

Preferences First Signupecommerce-pro-email-capture-sections-preferences-first-signupThree topic checkboxes before the email field so consent is specific from the first send.

Price Drop Watchecommerce-pro-email-capture-sections-price-drop-watchA split price watch capture with a labeled email form beside a product card listing every price the item has ever held.

Sample Email Previewecommerce-pro-email-capture-sections-sample-email-previewA card band pairing the signup form with last month's issue rendered as a static email, header rows, body, and footer included.

Sms Alerts Cardecommerce-pro-email-capture-sections-sms-alerts-cardThree texts we send, the never list sworn, median 4 texts a year.

Unsubscribe Promise Cardecommerce-pro-email-capture-sections-unsubscribe-promise-cardFive email commitments naming the industry practices they refuse.

Zero Tracking Signupecommerce-pro-email-capture-sections-zero-tracking-signupA capture section printing the entire stored record beside the list of tracking data never collected, with the labeled form beneath.

Account Signed Out Stateecommerce-pro-empty-states-account-signed-out-stateThe signed out account page selling sign in by what it unlocks.

Category Sold Out Stateecommerce-pro-empty-states-category-sold-out-stateThe whole category gone, the restock batch dated, and the alert signup.

Compare List Emptyecommerce-pro-empty-states-compare-list-emptyAn empty compare page blueprint with three dashed product slots above skeleton spec rows, a headline, and a primary action to add products.

Empty Cart Stateecommerce-pro-empty-states-empty-cart-stateThe guilt free empty cart with three honest starting points.

Empty Wishlist Stateecommerce-pro-empty-states-empty-wishlist-stateThe unused wishlist explained by what saving actually does, then two routes in.

Filter No Resultsecommerce-pro-empty-states-filter-no-resultsZero matches diagnosed, the one filter to loosen named with its count.

Notifications Empty Stateecommerce-pro-empty-states-notifications-empty-stateAn empty notifications inbox with a muted bell icon, a headline, and the full alert menu listed with live switches, all off until asked.

Order History Empty Stateecommerce-pro-empty-states-order-history-empty-stateTwo honest reasons for an empty history, a guest order claim form inline, and no shopping push.

Reviews Empty Stateecommerce-pro-empty-states-reviews-empty-stateThe no reviews yet state for a new product with a bench take and the promise that critical ones stay.

Rewards Empty Stateecommerce-pro-empty-states-rewards-empty-stateA two column rewards layout with a zero balance headline, four ways to earn with point values, and a panel showing the reward ladder.

Search No Resultsecommerce-pro-empty-states-search-no-resultsA search dead end with a spelling correction and result count, three near miss product rows, and a footer to report a missing search.

Store 404ecommerce-pro-empty-states-store-404The missing page owned plainly with search and the four most wanted routes.

Event Recap Galleryecommerce-pro-events-sections-event-recap-galleryLast clinic counted, including the two bags pronounced beyond saving.

Event RSVP Formecommerce-pro-events-sections-event-rsvp-formA two column RSVP split pairing event facts and context on one side with a labeled form, slot picker, and opt in on the other.

Fitting Appointment Cardecommerce-pro-events-sections-fitting-appointment-cardBook a 30 minute fitting with the do not buy verdict promised up front and three next slots as plain buttons.

Host An Event Cardecommerce-pro-events-sections-host-an-event-cardHost a care clinic, the responsibilities split and past hosts listed plainly.

Know Before You Goecommerce-pro-events-sections-know-before-you-goA split layout pairing an intro column with an icon led two column grid of plain logistics answers from transport to rain plan.

Open Day Scheduleecommerce-pro-events-sections-open-day-scheduleA vertical timeline laying out an open day hour by hour with a time rail, dot markers, titled rows, and a closing note.

Past Events Archiveecommerce-pro-events-sections-past-events-archiveDated ruled rows with attendance and the one thing each event changed at the company afterward.

Repair Clinic Dayecommerce-pro-events-sections-repair-clinic-dayThe free clinic with timed fixes by type, any brand welcome, the business case stated.

Tour Stops Gridecommerce-pro-events-sections-tour-stops-gridA responsive grid of city tour stops, each tile carrying a venue, date, and booking status badge, beside a heading, button, and footer note.

Trunk Show Bannerecommerce-pro-events-sections-trunk-show-bannerTwo days at a stockist announced as a wide bordered band with what is coming stated as three plain tile facts.

Workshop Calendar Listecommerce-pro-events-sections-workshop-calendar-listUpcoming events as dated rows with real seat counts and next dates over waitlists.

Customer Questions FAQecommerce-pro-faq-sections-customer-questions-faqA feed of dated buyer questions, each with an avatar and an indented reply signed by its maker, closing with an invite to ask.

FAQ Tabsecommerce-pro-faq-sections-faq-tabsA tabbed FAQ split into four shopper moments, ordering, delivery, returns, and product, with three open answers per tab and a contact line below.

Faq Topics Indexecommerce-pro-faq-sections-faq-topics-indexSix help topics with counts, the most asked question linked from each tile.

Faq With Contact Cardecommerce-pro-faq-sections-faq-with-contact-cardThe month's top questions beside the human exit with measured response times.

Guarantee Faqecommerce-pro-faq-sections-guarantee-faqFive answers drawing the defect versus wear line in examples, lifetime answered honestly.

Most Asked FAQecommerce-pro-faq-sections-most-asked-faqA ranked list of the top eight support questions, each row showing its rank, ticket share, a short answer, and a small distribution bar.

Ordering Faqecommerce-pro-faq-sections-ordering-faqSix order flow questions answered with mechanisms: the change window, base rate, and no phone explained.

Ordering Faq Listecommerce-pro-faq-sections-ordering-faq-listSix buying mechanics stated plainly, charge timing, cancels, and combined orders.

Policies Changelogecommerce-pro-faq-sections-policies-changelogEvery policy change as dated rows with the reason, the receipt that outlives announcements.

Preorder Faqecommerce-pro-faq-sections-preorder-faqSix made to order questions answered with dates, written from the inbox.

Product Care Faqecommerce-pro-faq-sections-product-care-faqCare rituals as accordion answers beside a sticky image, prevention as content.

Returns Faq Two Colecommerce-pro-faq-sections-returns-faq-two-colThe whole returns policy as eight open answers, no accordion for anxious readers.

Secondhand Buyers Faqecommerce-pro-faq-sections-secondhand-buyers-faqFive answers for the used buyer, serial checks, guarantee transfer, first repair free.

Shipping Faqecommerce-pro-faq-sections-shipping-faqSix shipping questions answered with cutoffs by day, couriers named, and the misdrop and locker rules.

Shipping Faq Accordionecommerce-pro-faq-sections-shipping-faq-accordionThe six shipping questions support actually receives, answered with real numbers.

Sizing Faq Compactecommerce-pro-faq-sections-sizing-faq-compactThe four sizing answers as one band, each sentence ending its question.

Straight Answers FAQecommerce-pro-faq-sections-straight-answers-faqA verdict first FAQ where a bold answer leads each row, Yes, Free, 60 days, with the question and one line of mechanics trailing.

Corporate Gift Cards Cardecommerce-pro-gift-card-sections-corporate-gift-cards-cardBulk gift cards for teams of ten or more, no discount, no logo, free letterpress, invoice accepted.

Corporate Gifting Cardecommerce-pro-gift-card-sections-corporate-gifting-cardTeam gifting as logistics solved, one CSV, one invoice, and a charity swap option.

Gift A Repair Cardecommerce-pro-gift-card-sections-gift-a-repair-cardThe $40 repair credit card for the friend with the beloved dying bag, delivered as a letterpress card.

Gift Card Amount Guideecommerce-pro-gift-card-sections-gift-card-amount-guideThree denomination columns map each amount to catalog items it covers, with product thumbnails, prices, and a covers line under each.

Gift Card Balance Checkecommerce-pro-gift-card-sections-gift-card-balance-checkCode in, balance out, with the three balance anxieties answered beneath.

Gift Card Balance Checkerecommerce-pro-gift-card-sections-gift-card-balance-checkerCard number in, balance out, no account needed and no expiry to fear.

Gift Card Design Pickerecommerce-pro-gift-card-sections-gift-card-design-pickerFour occasion design tiles drive a live full size card preview, beside a picker column and rows listing what the design changes.

Gift Card Faqecommerce-pro-gift-card-sections-gift-card-faqGift card questions answered like money questions, five rows, no asterisks.

Gift Card Heroecommerce-pro-gift-card-sections-gift-card-heroThe gift card reframed as respect for their taste, with three term tiles.

Gift Card How It Worksecommerce-pro-gift-card-sections-gift-card-how-it-worksThree numbered step tiles trace the path from checkout to redemption, each grounded by a small interface chip, above a send button.

Gift Card Purchaseecommerce-pro-gift-card-sections-gift-card-purchaseAmount chips updating a live card preview, with delivery date and no expiry terms.

Last Minute Gift Cardecommerce-pro-gift-card-sections-last-minute-gift-cardDelivery timing facts sit beside a static blueprint of the exact email the recipient receives, with card art, a personal note, and code row.

Physical Gift Cardecommerce-pro-gift-card-sections-physical-gift-cardThe letterpress card you can wrap, no expiry, value reissued if lost.

Corporate Gifting Tiersecommerce-pro-gifting-sections-corporate-gifting-tiersA corporate gifting section with four order size tiers in a table of discounts and lead times, three coordinator facts, and an email handoff.

Egift Card Builderecommerce-pro-gifting-sections-egift-card-builderA gift card builder with amount chips and timing facts beside a live preview panel showing the card, delivery details, and a spam fallback note.

Gift Concierge Cardecommerce-pro-gifting-sections-gift-concierge-cardEmail three facts and a budget, a human replies with one pick and one alternative within a day.

Gift Finder Quizecommerce-pro-gifting-sections-gift-finder-quizA gift finder quiz with three question chip rows beside the match panel it produces, showing the pick, its reasoning, and a cheaper backup.

Gift Note Previewecommerce-pro-gifting-sections-gift-note-previewA gift note section pairing the rules a handwritten note follows and three starter lines with a serif stationery preview and a blank card option.

Gift Reminder Serviceecommerce-pro-gifting-sections-gift-reminder-serviceA split pairing a three email reminder timeline and save a date button with an example saved dates panel showing budgets and statuses.

Gift Returns Promise Bandecommerce-pro-gifting-sections-gift-returns-promise-bandFour facts that cover the recipient through January 31 with the buyer never told about a return.

Gift Wrapping Galleryecommerce-pro-gifting-sections-gift-wrapping-galleryThree bench photos of the actual wrap with the $6 broken into paper, ribbon, and four bench minutes.

Group Gift Explainerecommerce-pro-gifting-sections-group-gift-explainerOne person starts it, others chip in by link, with three honest rules stated before it goes wrong.

Last Minute Gifts Gridecommerce-pro-gifting-sections-last-minute-gifts-gridThree tiers ordered by certainty for December 23, the e gift card first and bags honestly ruled out.

Occasion Gift Guideecommerce-pro-gifting-sections-occasion-gift-guideFour occasion cards with a photo, plain reasoning, the pick with price, and a smaller pick, closing with a gift desk handoff.

About Our Pricesecommerce-pro-incentives-sections-about-our-pricesThe bestseller's tag itemized to the margin, a price defended, not apologized for.

Bulk Pricing Tiersecommerce-pro-incentives-sections-bulk-pricing-tiersA volume pricing section showing four quantity tiers as a card row with per unit prices, then three ruled rules that govern bulk orders.

Community Discount Gridecommerce-pro-incentives-sections-community-discount-gridAn eligibility discount grid of four groups as icon cards stating the proof required and how long it lasts, plus a document privacy footer band.

Duties Included Bandecommerce-pro-incentives-sections-duties-included-bandThe checkout price is the last number, with the refuse and email us record.

Financing Explainerecommerce-pro-incentives-sections-financing-explainerPay in three with worked math, return mechanics, and who should skip it.

First Repair Free Cardecommerce-pro-incentives-sections-first-repair-free-cardFirst repair free even secondhand, the mechanics ruled and the commercial reasoning published.

Free Adjustments Cardecommerce-pro-incentives-sections-free-adjustments-cardStrap, holes, and handles adjusted free forever on any product with bench minutes and the cost honest.

Free Shipping Threshold Barecommerce-pro-incentives-sections-free-shipping-threshold-barThe $75 threshold with the real $7 cost, advising against padding the cart.

Gift Wrapping Calloutecommerce-pro-incentives-sections-gift-wrapping-calloutThe wrap pictured with three gifting promises, free paper wrap and priceless receipts.

Guarantee Bandecommerce-pro-incentives-sections-guarantee-bandThe ten year promise in a primary band with honored, declined, and median repair time.

Holiday Returns Extensionecommerce-pro-incentives-sections-holiday-returns-extensionGift returns through January 31, automatic, with the unchanged rules listed.

Lifetime Guarantee Spotlightecommerce-pro-incentives-sections-lifetime-guarantee-spotlightHardware covered for the life of the bag with five things that do not void it and one thing that does.

Loyalty Not Points Explainerecommerce-pro-incentives-sections-loyalty-not-points-explainerWhy there is no points program, the breakage math stated, and the three real alternatives listed.

Packaging Explainerecommerce-pro-incentives-sections-packaging-explainerThe parcel layer by layer, material and disposal route, one bin.

Payment Options Rowecommerce-pro-incentives-sections-payment-options-rowAccepted methods as text chips with the three payment facts that actually reassure.

Price Match Promiseecommerce-pro-incentives-sections-price-match-promiseAutomatic refunds on our own price drops, with last year's count and no asterisk.

Price Match Promise Cardecommerce-pro-incentives-sections-price-match-promise-cardOwn-price match only, with the nightly diff mechanic and a worked example showing $27 back automatically.

Referral Give Getecommerce-pro-incentives-sections-referral-give-getA referral section pairing the give and get amounts as twin cards, then a ruled list of payout timing, the cap, and what it skips.

Returns Rate Transparencyecommerce-pro-incentives-sections-returns-rate-transparencyThe published 6.2 percent return rate with its category context, named culprit, and named fix.

Shipping Protection Cardecommerce-pro-incentives-sections-shipping-protection-cardProtection included free with three plain claim rules and the 0.4% rate.

Shipping Returns Rowecommerce-pro-incentives-sections-shipping-returns-rowThe three column trust band where every policy claim carries a number.

Sustainability Notesecommerce-pro-incentives-sections-sustainability-notesFour numbered environmental facts with the unfinished one stated as a percentage.

Warranty Tableecommerce-pro-incentives-sections-warranty-tableCoverage by failure type, including what is not covered and what happens anyway.

Welcome Code Explainerecommerce-pro-incentives-sections-welcome-code-explainerA welcome offer split pairing the signup discount and its three plain rules with a dated archive of every email actually sent this year.

Country Shipping Tableecommerce-pro-international-sections-country-shipping-tableSix regions with real day ranges, a duties column naming the collector, and tracking confirmed on every row.

Cross Border Delivery Timelineecommerce-pro-international-sections-cross-border-delivery-timelineA vertical rail walking a parcel through five international shipping stages, each with an honest day range and the customs stage called out.

Currency And Duties Toggleecommerce-pro-international-sections-currency-and-duties-toggleOne product repriced across three currencies with the bank rate disclosure inside the card.

Customs Paperwork Explainerecommerce-pro-international-sections-customs-paperwork-explainerThe customs form field by field, and the gift undervalue request declined as the fraud it is.

Duties Calculator Cardecommerce-pro-international-sections-duties-calculator-cardCountry chips reveal landed cost, with who collects duties stated per region.

Global Fulfillment Hubsecommerce-pro-international-sections-global-fulfillment-hubsA network stat strip above three dispatch hub cards, each naming the regions it serves, its dispatch promise, and what it keeps in stock.

International Orders Faqecommerce-pro-international-sections-international-orders-faqFive cross border questions answered, duties first, the customs delay named honestly.

International Returns Stepsecommerce-pro-international-sections-international-returns-stepsA split layout pairing the returns promise and money facts with a numbered four step card covering label, duties, drop off, and refund.

Landed Cost Comparisonecommerce-pro-international-sections-landed-cost-comparisonTwo side by side receipts pricing the same international order both ways, duties prepaid at checkout versus collected at the door.

Where We Ship Listecommerce-pro-international-sections-where-we-ship-listWhere we ship with per region notes, and the refusal list with reasons published.

Article List Rowsecommerce-pro-journal-sections-article-list-rowsThe journal as dated rows, category, read time, and a one line standfirst each.

Care Column Splitecommerce-pro-journal-sections-care-column-splitThe care column with a routine readers can finish, five minutes a month.

Field Notes Gridecommerce-pro-journal-sections-field-notes-gridA heading and intro over a responsive grid of reader dispatch cards, each showing a location, a quoted note, the reader name, and years carried.

From The Bench Columnecommerce-pro-journal-sections-from-the-bench-columnThree repair cases told as what failed and the lesson, written by the bench.

From The Floor Qaecommerce-pro-journal-sections-from-the-floor-qaThree inbox questions answered by whoever actually knows, name and job on every answer.

Guide Cards Gridecommerce-pro-journal-sections-guide-cards-gridSix evergreen guides as cards, each promising a decision rather than content.

How To Steps Articleecommerce-pro-journal-sections-how-to-steps-articleOne repair taught in four numbered steps with the bail out point marked.

Issue Archive Timelineecommerce-pro-journal-sections-issue-archive-timelineA centered heading and intro above back issues grouped by year, each row linking an issue title with its number, month, and a read cue.

Journal Hero Featureecommerce-pro-journal-sections-journal-hero-featureThe lead story big with a placeholder, three secondary headlines stacked beside it.

Journal Newsletter Signupecommerce-pro-journal-sections-journal-newsletter-signupA two column split pairing an email signup form with a list of recent issue subject lines, each showing a date and reading time.

Journal Topics Indexecommerce-pro-journal-sections-journal-topics-indexThe journal mapped by topic with article counts and the best first read.

Materials Deep Dive Articleecommerce-pro-journal-sections-materials-deep-dive-articleThe 18 oz canvas argued by the buyer who picks it, the contract spec callout, and the trade offs named.

Workshop Film Chaptersecommerce-pro-journal-sections-workshop-film-chaptersA heading and intro above a wide video still with a play button and runtime, then a two column list of timestamped chapters with notes.

Year Of Wear Photo Logecommerce-pro-journal-sections-year-of-wear-photo-logSix months from twelve, the same bag photographed with no wax touch ups, the honest aging record.

Archive Lookbooks Indexecommerce-pro-lookbook-sections-archive-lookbooks-indexEvery season kept online, each tile counting what is still made.

Behind The Scenes Rowecommerce-pro-lookbook-sections-behind-the-scenes-rowFour outtakes with captions from the actual shoot day, the seams shown.

Behind The Shoot Notesecommerce-pro-lookbook-sections-behind-the-shoot-notesThree lookbook frames with honest production captions and the full shoot budget published at the footer.

Campaign Strip Bandecommerce-pro-lookbook-sections-campaign-strip-bandThree campaign frames with an offset middle and one button to the full lookbook.

Contact Sheet Selectsecommerce-pro-lookbook-sections-contact-sheet-selectsA dense numbered grid of shoot frames with the selects that made the book marked, closed by a tally of shot, published, and chosen counts.

Customer Styled Lookbookecommerce-pro-lookbook-sections-customer-styled-lookbookSix owner photos, unretouched, paid in store credit and disclosed.

Editorial Spread Splitecommerce-pro-lookbook-sections-editorial-spread-splitOne magazine spread, a large frame beside styling notes and the itemized pieces.

Lookbook Cover Creditsecommerce-pro-lookbook-sections-lookbook-cover-creditsA centered lookbook cover with title, standfirst, and two actions over one wide frame, closed by a masthead credits row of four roles.

Lookbook Film Chaptersecommerce-pro-lookbook-sections-lookbook-film-chaptersA lookbook film player blueprint with a chapter marked progress bar beside a timestamped chapter list, each row naming the pieces on screen.

Numbered Look Listecommerce-pro-lookbook-sections-numbered-look-listThe outfit image beside numbered pieces in dressing order, no overlaid pins.

One Piece Three Waysecommerce-pro-lookbook-sections-one-piece-three-waysThree captioned frames in a row showing one overshirt styled three ways, each with its supporting pieces, closed by a constant piece anchor row.

Seasonal Gallery Gridecommerce-pro-lookbook-sections-seasonal-gallery-gridThe lookbook as mixed ratio frames with shopping in the captions, not on the photos.

Seasonal Lookbook Spreadecommerce-pro-lookbook-sections-seasonal-lookbook-spreadThe AW26 spread: one large frame, three supporting squares, and the pieces in the photos as priced rows.

Shop The Shoot Gridecommerce-pro-lookbook-sections-shop-the-shoot-gridOne lookbook frame with every item in it priced or declared not for sale, nothing in frame left unnamed.

Gift Membership Panelecommerce-pro-membership-sections-gift-membership-panelA two column layout with numbered how it works steps beside a gift certificate card listing benefits and a sample redemption code.

Join Flow Cardecommerce-pro-membership-sections-join-flow-cardThe signup card with cancel mechanics spelled out before the button, not after.

Member Early Access Calendarecommerce-pro-membership-sections-member-early-access-calendarThe next drops with member and everyone dates side by side, sequence not exclusivity.

Member Number Cardecommerce-pro-membership-sections-member-number-cardThe member number framed as a birthday not a rank, with renewal date and a two click cancel path.

Member Price Stripecommerce-pro-membership-sections-member-price-stripA heading and intro above a four column product grid, each card showing the everyone price beside the member price with a savings line.

Member Savings Chartecommerce-pro-membership-sections-member-savings-chartA two column split with heading and copy beside a card holding a line chart of cumulative member savings crossing a flat fee reference line.

Member Stories Rowecommerce-pro-membership-sections-member-stories-rowThree members quoted on their own verified math rather than enthusiasm.

Member Year Recapecommerce-pro-membership-sections-member-year-recapA centered heading and intro above an itemized recap card totaling one membership year down to the net, with the negative net policy stated below.

Membership Benefits Tableecommerce-pro-membership-sections-membership-benefits-tableGuest, free account, and member side by side, nothing free ever moves paid.

Membership Faqecommerce-pro-membership-sections-membership-faqFive membership questions including the one that says do not join and the honest early access caveat.

Membership Landing Heroecommerce-pro-membership-sections-membership-landing-heroThe program as a calculator, not a club, with the breakeven stated against the sale.

Membership Math Explainerecommerce-pro-membership-sections-membership-math-explainerThe fee worked three ways, including the spender who is told not to join.

All Orders Timelineecommerce-pro-order-tracking-all-orders-timelineEvery open order as a compact row with its one line status and link, one page, every parcel, no tabs.

Carrier Handoff Cardecommerce-pro-order-tracking-carrier-handoff-cardTwo stacked carrier legs, each with its own tracking number and status badge, joined by a handoff marker that explains the switch.

Courier Contact Cardecommerce-pro-order-tracking-courier-contact-cardThe courier for the van, the store for everything else, split honestly.

Delivery Day Timelineecommerce-pro-order-tracking-delivery-day-timelineThe day-of courier scan feed: stop count, firming window, and the driver note shown verbatim.

Delivery Instructions Cardecommerce-pro-order-tracking-delivery-instructions-cardRanked fallbacks with honor rates from real delivery data and the keep it short finding.

Delivery Photo Confirmationecommerce-pro-order-tracking-delivery-photo-confirmationThe courier's proof photo with privacy terms and the that is not my door path.

Delivery Route Mapecommerce-pro-order-tracking-delivery-route-mapA static street grid with the traveled route solid and remaining route dotted, beside a live stops away count, driver card, and stop list.

Delivery Window Cardecommerce-pro-order-tracking-delivery-window-cardThe window as the headline with the narrowing schedule and day of options.

Guest Order Lookupecommerce-pro-order-tracking-guest-order-lookupTwo column lookup with a headline, three hints on where the order number lives, and a card form for order number and email.

International Tracking Viewecommerce-pro-order-tracking-international-tracking-viewFive stage tracker with the customs stage annotated honestly and the filing threshold stated.

Late Order Compensation Cardecommerce-pro-order-tracking-late-order-compensation-cardThe automatic shipping refund when the miss is ours, help not compensation when it is the courier.

Order Issues Cardecommerce-pro-order-tracking-order-issues-cardThe three delivery failures with paths that never start with prove it.

Order Status Cardecommerce-pro-order-tracking-order-status-cardOne order as a compact card with status chip, delivery window, and two actions.

Pickup Instructions Cardecommerce-pro-order-tracking-pickup-instructions-cardLocker collection with the code at display size and the deadline policy stated.

Pickup Ready Statusecommerce-pro-order-tracking-pickup-ready-statusPickup code shown large, hold date in calendar not a countdown, and the ID rules by pickup type.

Preorder Progress Trackerecommerce-pro-order-tracking-preorder-progress-trackerFive dated production stages, yours is bag 14 of 32 in the batch.

Reschedule Delivery Cardecommerce-pro-order-tracking-reschedule-delivery-cardA centered card with a tappable week of day chips, three arrival windows as radio rows, and a confirm button naming the chosen slot.

Return Status Trackerecommerce-pro-order-tracking-return-status-trackerThe return as a refund tracker, every stage says where the money is.

Shipment Updates Listecommerce-pro-order-tracking-shipment-updates-listCourier scan codes translated into human sentences, the raw code kept visible.

Split Shipment Trackerecommerce-pro-order-tracking-split-shipment-trackerTwo parcels, one order, the split explained and shipping charged once.

Tracking Faq Stripecommerce-pro-order-tracking-tracking-faq-stripThe four questions people ask while staring at tracking, answered in one band.

Tracking Timelineecommerce-pro-order-tracking-tracking-timelineFour stages on a vertical line with timestamps, the current one pulsing.

Weather Delay Noticeecommerce-pro-order-tracking-weather-delay-noticeStorm pause with the courier reasoning published, the new date stated, and nothing to do.

Accepted Methods Rowecommerce-pro-payment-sections-accepted-methods-rowPayment options in three named groups as italic chips with one honest line each and two absences stated.

Bank Transfer Invoice Cardecommerce-pro-payment-sections-bank-transfer-invoice-cardInvoice payment for orders over 500 in three numbered rows with the speed caveat printed at the bottom.

Declined Card Playbookecommerce-pro-payment-sections-declined-card-playbookA four step vertical timeline of what happens when a card declines, from the same second through the 48 hour hold to release, with common causes named.

Installments Honest Mathecommerce-pro-payment-sections-installments-honest-mathThe BNPL split printed in mono arithmetic with the late fee row and the cheaper lookalike named openly.

Multi Currency Pricing Tableecommerce-pro-payment-sections-multi-currency-pricing-tableOne product priced across three regions with the tax content of each price written into the table.

No Surcharge Receiptecommerce-pro-payment-sections-no-surcharge-receiptA two column zero surcharge promise where a left list names three fees other checkouts add and a right mono receipt prints each at $0.00.

Payment Security Explainerecommerce-pro-payment-sections-payment-security-explainerThree plain rows on where the card number goes by architecture with no padlock icons and no badge images.

Refund Speed By Methodecommerce-pro-payment-sections-refund-speed-by-methodA refund timing comparison where each payment method row names its method, days to land, a proportional bar, and one line on where the wait lives.

Saved Card Controlsecommerce-pro-payment-sections-saved-card-controlsA two column saved card explainer where a left list states what saving stores and what removal does beside a static account panel blueprint.

Why No Crypto Cardecommerce-pro-payment-sections-why-no-crypto-cardThe honest no on crypto with the 60 day refund volatility math and a promise to update when it changes.

Delivery Feedback Cardecommerce-pro-post-purchase-sections-delivery-feedback-cardOne handover question with four chips, where the answer goes, and why it never touches the driver.

First Use Guide Cardecommerce-pro-post-purchase-sections-first-use-guide-cardThree timed steps before the first rain, each with the failure mode it prevents and the honest why.

Honest Review Requestecommerce-pro-post-purchase-sections-honest-review-requestThe review email shown in full at three weeks, no incentive stated inside it and one reminder maximum.

Missed Delivery Playbookecommerce-pro-post-purchase-sections-missed-delivery-playbookA centered heading over three ordered attempt cards, each pairing an icon, step label, delivery detail, and its limit, closed by a policy line.

Order Edit Window Cardecommerce-pro-post-purchase-sections-order-edit-window-cardThe 60 minute self serve window: address, size, or cancel from the order email with no contact needed.

Packaging Recycling Guideecommerce-pro-post-purchase-sections-packaging-recycling-guideA left aligned heading above four material tiles, each with an icon, description, a bin badge, and a disposal note, followed by a closing line.

Packing Slip Explainerecommerce-pro-post-purchase-sections-packing-slip-explainerAnnotated slip mockup: contents and serials, gift prices stripped, QR return, and initials in pen.

Product Registration Cardecommerce-pro-post-purchase-sections-product-registration-cardSerial plus email attaches the guarantee to the product itself, with three things registration unlocks.

Reorder Reminder Cardecommerce-pro-post-purchase-sections-reorder-reminder-cardA centered column with a usage curve card marking the single reminder day, a three rule grid explaining the timing, and a closing note.

Spare Parts Counterecommerce-pro-post-purchase-sections-spare-parts-counterA two column split pairing three checkmark promises with a parts panel listing each part by thumbnail, fit, price, and stock above an order button.

What Happens Next Timelineecommerce-pro-post-purchase-sections-what-happens-next-timelineFour stage dot timeline from payment to door, with the quiet stretch named as the system working.

Care Hub Pageecommerce-pro-prebuilt-pages-care-hub-pageFull care page sorted by material, with a schedule table, a kit picker, and a step by step how to article.

Contact Pageecommerce-pro-prebuilt-pages-contact-pageFull contact page routing each question to the right channel, with real reply times and a FAQ index.

Home Pageecommerce-pro-prebuilt-pages-home-pageStorefront home with category bar nav, mosaic hero, catalog split, ranked bestsellers, and reviews milestone.

Membership Pageecommerce-pro-prebuilt-pages-membership-pageMembership landing that argues with arithmetic including the profile where joining loses money.

Product Pageecommerce-pro-prebuilt-pages-product-pageProduct detail with sustainability panel, photo review wall, care kit attach, and shipping protection.

Repairs Hub Pageecommerce-pro-prebuilt-pages-repairs-hub-pageRepairs hub with the published price table, live bench queue, request form, and turnaround stats.

Resale Landing Pageecommerce-pro-prebuilt-pages-resale-landing-pageResale landing, the estimator first for sellers, graded listings and the loop counted for buyers.

Returns Center Pageecommerce-pro-prebuilt-pages-returns-center-pageReturns center with plain policy first, start flow, refund timeline, and a full FAQ before the footer.

Cost Breakdown Barsecommerce-pro-pricing-transparency-sections-cost-breakdown-barsThe $185 tote split into five labeled bars with dollar amounts and a note on each line that adds to the price.

Cost Of Free Returns Explainerecommerce-pro-pricing-transparency-sections-cost-of-free-returns-explainerThe $6.10 per return, the 6.2% rate, and the 38 cents on every order with the arithmetic printed.

Cost Per Wear Mathecommerce-pro-pricing-transparency-sections-cost-per-wear-mathThree equation tiles divide the price across a ten year design life, above a marked decade strip and a list of milestones it covers.

Input Cost Indexecommerce-pro-pricing-transparency-sections-input-cost-indexFour stat cards hold each raw input cost with its current rate, twelve month movement, and a trend sparkline, above the pass through rule line.

No Sales Policy Cardecommerce-pro-pricing-transparency-sections-no-sales-policy-cardWhy no sales ever, in three numbered rows, with the archive exception.

Price History Tableecommerce-pro-pricing-transparency-sections-price-history-tableEvery price since 2015 with the published reason per change including the year the price went down.

Price Questions Accordionecommerce-pro-pricing-transparency-sections-price-questions-accordionAn accordion answers five blunt questions about the price, each written plainly, with the first item expanded by default.

Retail Markup Comparisonecommerce-pro-pricing-transparency-sections-retail-markup-comparisonTwo side by side channel cards break the same tote into additive cost rows, one priced through a store, one sold direct.

Wage Transparency Cardecommerce-pro-pricing-transparency-sections-wage-transparency-cardFloor rate, median, and the local living wage published beside the labor cost line.

What Margin Pays Forecommerce-pro-pricing-transparency-sections-what-margin-pays-forThe $40 margin itemized, repairs to reserve, profit stated without apology.

Why This Price Explainerecommerce-pro-pricing-transparency-sections-why-this-price-explainerThe case for $185 against the $90 lookalike, with the sincere concession included.

Care By Material Tabsecommerce-pro-product-care-sections-care-by-material-tabsThree material routines in tabs, numbered steps, a frequency line, one product each.

Care Dos and Dontsecommerce-pro-product-care-sections-care-dos-dontsTwo side by side panels list five care habits to always do and five to never do, each with a one line reason, closed by an honest footer note.

Care Kit Pickerecommerce-pro-product-care-sections-care-kit-pickerThree kits with the recommended tag on the cheapest one, on purpose.

Care Label Decoderecommerce-pro-product-care-sections-care-label-decoderA static mockup of the sewn in care label sits beside its five stitched symbols, each translated into a plain instruction and the damage it prevents.

Care Schedule Tableecommerce-pro-product-care-sections-care-schedule-tableFour seasons, one five minute task each, and a Summer row that says do nothing.

Care Video Libraryecommerce-pro-product-care-sections-care-video-libraryThree short tutorial cards, each with a video thumbnail, runtime, a job summary, and the tools it uses, closed by a filming note.

Leather Aging Timelineecommerce-pro-product-care-sections-leather-aging-timelineYear 0 to 5 as four tiles, what patina is normal at each, cracking named as a claim, not aging.

Leather Care Faqecommerce-pro-product-care-sections-leather-care-faqFive bench answers, early cracking is a claim, and the vegan question unguarded.

Repair Bench Menuecommerce-pro-product-care-sections-repair-bench-menuA three step mail in repair process sits beside a six line price list with turnaround times and a closing note on repair claims.

Stain First Aid Guideecommerce-pro-product-care-sections-stain-first-aid-guideFour stains with do now, never do, and bench it if, ink answered honestly.

Storage Guide Splitecommerce-pro-product-care-sections-storage-guide-splitStorage rules beside the image, the shipping bag revealed as the storage bag.

Winterizing Checklistecommerce-pro-product-care-sections-winterizing-checklistFive steps with minute estimates, seams first, and the paid bench option offered without apology on row five.

Bag Finder Quizecommerce-pro-product-finders-bag-finder-quizTwo questions narrow nineteen bags to a shortlist, with the logic stated.

Budget Finder Bandecommerce-pro-product-finders-budget-finder-bandThree price tiles stating what each number buys, $200 answered honestly.

Finalist Duelecommerce-pro-product-finders-finalist-duelTwo finalist bags side by side with spec rows where bold marks the better number and ties grey out, closed by one decider question.

Finder Decision Treeecommerce-pro-product-finders-finder-decision-treeThe finder logic printed as a static branching tree of yes and no questions leading to four bag leaf cards you trace by hand.

Finder Entry Tilesecommerce-pro-product-finders-finder-entry-tilesThree ways into the catalog by question asked, not category browsed.

Finder Results Gridecommerce-pro-product-finders-finder-results-gridThe quiz verdict, one best match argued and two alternatives with trade offs.

First Bag Finderecommerce-pro-product-finders-first-bag-finderThree questions pre filled to the most common answers, the verdict card and the honest fork stated.

Gift Finder Cardecommerce-pro-product-finders-gift-finder-cardRecipient and budget in, three candidates out, with the safe pick flagged.

Load Calculatorecommerce-pro-product-finders-load-calculatorChecklist of everyday carry items that tallies liters live beside a verdict panel recommending one bag with a fill meter and headroom rows.

Quiz Step Cardecommerce-pro-product-finders-quiz-step-cardOne finder question as a full card, progress shown, skippable by design.

Use Case Matrixecommerce-pro-product-finders-use-case-matrixA fit matrix with five weeks down the side and four bags across the top, each cell a three state dot rating the fit.

Archive Pieces Gridecommerce-pro-product-grids-archive-pieces-gridResale one of ones at grid scale, each card carrying its serial, grade, price, and one line of history.

Bestsellers By Numbers Gridecommerce-pro-product-grids-bestsellers-by-numbers-gridFour products ranked by units sold this year, the count on every card and last place included with affection.

Bestsellers Railecommerce-pro-product-grids-bestsellers-railA snap scrolling ranked strip with units sold, no carousel scripts.

Colorway Family Gridecommerce-pro-product-grids-colorway-family-gridOne product in every colorway it has ever had: permanent, live batch count, and retired linked to resale.

Complete Collection Gridecommerce-pro-product-grids-complete-collection-gridAll 19 products on one page with the honest admission that there is no page two.

Dense List Rowsecommerce-pro-product-grids-dense-list-rowsProducts as comparison rows with mono spec lines, ratings, and add buttons.

Editorial Two Columnecommerce-pro-product-grids-editorial-two-columnFour products with large images and a full written sentence under each.

Featured Tile Gridecommerce-pro-product-grids-featured-tile-gridA mixed size product grid where one hero piece spans a double tile beside four supporting products, each card carrying its name and price.

Gift Guide Grid Pricedecommerce-pro-product-grids-gift-guide-grid-pricedPicks under budget bands where every why is gifting logic, not product copy.

Grid With Filters Sidebarecommerce-pro-product-grids-grid-with-filters-sidebarThe standard category page, a filter rail with result counts beside a rated product grid.

Grid With Sort Pillsecommerce-pro-product-grids-grid-with-sort-pillsWorking sort pills reorder the grid live, bestselling, price, and newest.

Last Chance Gridecommerce-pro-product-grids-last-chance-gridDiscontinued stock with live counts and the reason each is leaving.

Most Repaired Gridecommerce-pro-product-grids-most-repaired-gridFour tiles wearing repair counts as proof of service and the reframe that repairs mean kept.

New In Grid Datedecommerce-pro-product-grids-new-in-grid-datedArrivals grouped by week so returning visitors know where they left off.

One Of Each Gridecommerce-pro-product-grids-one-of-each-gridThe four piece starter set with total stated and a footer that advises to start with just the bag.

Preorder Gridecommerce-pro-product-grids-preorder-gridA preorder grid for a numbered batch, each card showing its ship window, price, a claimed progress bar, and a reserve button.

Recently Restocked Gridecommerce-pro-product-grids-recently-restocked-gridThis week's returns, each card dated with how long it was gone.

Sale Grid With Badgesecommerce-pro-product-grids-sale-grid-with-badgesThe markdown rack with percent badges, both prices, and live stock notes per card.

Simple Four Columnecommerce-pro-product-grids-simple-four-columnThe catalog reduced to image, name, and price in four disciplined columns.

Split Category Gridecommerce-pro-product-grids-split-category-gridA sticky editorial column beside the grid, the magazine category page.

Staff Picks Gridecommerce-pro-product-grids-staff-picks-gridFour picks from repairs, the bench, the returns desk, and email with the cost discount disclosed up front.

Tabbed Category Gridecommerce-pro-product-grids-tabbed-category-gridA product grid split across category tabs, each tab showing four bestsellers with a total count and a link to view the whole shelf.

Under 50 Gifts Gridecommerce-pro-product-grids-under-50-gifts-gridReal range items under $50 with who it suits captions, gift cards as the fallback.

With Color Swatchesecommerce-pro-product-grids-with-color-swatchesA grid with colorway dots and overflow counts, inventory truth on every card.

With Quick Addecommerce-pro-product-grids-with-quick-addConsumable cards with add buttons so replenishment never leaves the listing.

With Rating Rowsecommerce-pro-product-grids-with-rating-rowsCards led by their rating row and closed with one quoted review line each.

With Size Availabilityecommerce-pro-product-grids-with-size-availabilityA product grid printing every size on each card, live sizes as chips and sold out sizes struck through with a one line restock note.

Accessory Overviewecommerce-pro-product-overviews-accessory-overviewThe $22 brass fob page with three spec rows, the straight faced guarantee, and shipping honesty.

Bundle Kit Overviewecommerce-pro-product-overviews-bundle-kit-overviewEvery kit piece priced on its own row with the belt advisory directing belt owners to skip and save.

Bundle Productecommerce-pro-product-overviews-bundle-productA set priced against its itemized total with every included piece and its solo price.

Capacity Overviewecommerce-pro-product-overviews-capacity-overviewA product overview pairing a numbered interior map of every compartment with a matching legend that names what each one holds.

Digital Downloadecommerce-pro-product-overviews-digital-downloadA digital product with its exact file manifest, license terms, and a free sample.

Gallery With Detailsecommerce-pro-product-overviews-gallery-with-detailsThe canonical product top, gallery with thumbnail rail beside price, rating, and buy stack.

Heavy Freight Overviewecommerce-pro-product-overviews-heavy-freight-overviewThe furniture page where delivery gets equal billing, crew, room, doorway.

Limited Colorway Overviewecommerce-pro-product-overviews-limited-colorway-overviewOne dye lot of 200, live counts, the restock verdict, and the permanent alternative named below.

Made To Order Overviewecommerce-pro-product-overviews-made-to-order-overviewThe bespoke product with its make week, live queue, and charged at dispatch promise.

Minimal Product Spececommerce-pro-product-overviews-minimal-product-specA spec table doing the persuading, seven concrete rows and no imagery by design.

Overview With Inline Faqecommerce-pro-product-overviews-overview-with-inline-faqProduct page ending in three inbox sourced questions answered with the specificity that reduces returns.

Overview With Trade In Offerecommerce-pro-product-overviews-overview-with-trade-in-offerProduct page with the trade in card inline, credit landing at the courier scan, any brand accepted.

Personalised Product Overviewecommerce-pro-product-overviews-personalised-product-overviewLive initials preview on the product as you type, placement honesty included.

Product Video Splitecommerce-pro-product-overviews-product-video-splitThe demo video chaptered, jump straight to the rain test or the pockets.

Refurbished Grade Overviewecommerce-pro-product-overviews-refurbished-grade-overviewOne traded in unit with its serial, inspection report, and price against new.

Split With Sticky Buyecommerce-pro-product-overviews-split-with-sticky-buyA long product story scrolls while a compact buy panel stays pinned beside it.

Subscription Optionsecommerce-pro-product-overviews-subscription-optionsOne time versus subscribe as selectable cards with the cancel terms inside the option.

Trade Unit Overviewecommerce-pro-product-overviews-trade-unit-overviewThe B2B product page with volume bands, one fleet spec change stated, Net 30 terms, and an order pad CTA.

With Accordion Detailsecommerce-pro-product-overviews-with-accordion-detailsA clean buy fold with materials, care, shipping, and guarantee folded into an accordion.

With Ingredients Listecommerce-pro-product-overviews-with-ingredients-listEvery ingredient named with purpose and source, the INCI pattern for goods.

With Model Comparisonecommerce-pro-product-overviews-with-model-comparisonA product overview above a full comparison table of every model in the range, the viewed column highlighted with its buy button inside.

With Monogram Optionsecommerce-pro-product-overviews-with-monogram-optionsLetters, placement chips, and the return gate stated before the button changes to say no returns.

With Press Quoteecommerce-pro-product-overviews-with-press-quoteThe buy decision anchored on one earned press sentence, framed and linked.

With Review Snapshotecommerce-pro-product-overviews-with-review-snapshotA two column product overview pairing an image and buy stack with a star rating histogram and owner scored fit scales beneath.

With Shipping Estimatorecommerce-pro-product-overviews-with-shipping-estimatorPostcode in, a dated delivery answer out, the when question solved on the page.

With Size Guide Linkecommerce-pro-product-overviews-with-size-guide-linkFit guidance at the size row, a crowd verdict banner and a measured guide link.

With Store Pickupecommerce-pro-product-overviews-with-store-pickupA product overview with delivery and pickup modes, a nearby store list showing live stock and hours, and the route echoed in the cart button.

With Sustainability Panelecommerce-pro-product-overviews-with-sustainability-panelCheckable environment facts with the mill named, repairs counted, and the carbon badge refused until measured.

With Trust Rowecommerce-pro-product-overviews-with-trust-rowThe buy stack closing on four promise tiles that lead with numbers, not adjectives.

With Variant Swatchesecommerce-pro-product-overviews-with-variant-swatchesWorking color and size selection with the chosen pair echoed in the add to cart button.

With Wear Photos Overviewecommerce-pro-product-overviews-with-wear-photos-overviewA gallery aging timeline shows the same bag at new, year one, and year three before checkout.

Birthday Club Cardecommerce-pro-promo-sections-birthday-club-cardThe birthday perk that asks for the month, not the date, terms in one line.

Bogo Promo Splitecommerce-pro-promo-sections-bogo-promo-splitBuy one gift one with the mechanics in three lines and a live unit counter.

Bundle And Save Bandecommerce-pro-promo-sections-bundle-and-save-bandKit math published in full, both prices printed, the shipping logic underneath.

Bundle Deal Cardecommerce-pro-promo-sections-bundle-deal-cardTwo products joined by a plus with the pair price and the saving in the button.

Countdown Sale Bannerecommerce-pro-promo-sections-countdown-sale-bannerA real deadline in a primary band with the policy that powers it, we do not extend.

Discount Code Bandecommerce-pro-promo-sections-discount-code-bandOne code in a dashed ticket box with copy button and terms in a single honest line.

End Of Season Honesty Bandecommerce-pro-promo-sections-end-of-season-honesty-bandThe seasonal canvas leaving on a date at an unchanged price with the warehouse math printed plainly.

Flash Sale Rowsecommerce-pro-promo-sections-flash-sale-rowsThe odds and ends rack where every discount names its reason and its exact stock.

Free Gift With Purchaseecommerce-pro-promo-sections-free-gift-with-purchaseThe $18 tin free over $150, the real product, not a giveaway sachet.

Free Shipping Bannerecommerce-pro-promo-sections-free-shipping-bannerThe threshold as a quiet permanent strip, same number all year, even December.

Member Pricing Calloutecommerce-pro-promo-sections-member-pricing-calloutThe loyalty program pitched by a three row price table, not points, not tiers.

Members Week Bandecommerce-pro-promo-sections-members-week-bandEarly archive access for members 48 hours before the public, with the public date printed equally large.

Mix And Match Promoecommerce-pro-promo-sections-mix-and-match-promoA mix and match promo with a heading, a six tile picking grid marking two chosen items, and a footer bar tracking the kit total.

Price Drop Protectionecommerce-pro-promo-sections-price-drop-protectionA two column price drop promise pairing three numbered steps with a worked refund receipt showing the markdown difference returned to the card.

Referral Program Splitecommerce-pro-promo-sections-referral-program-splitBoth sides of the referral deal as equal cards, credited when the order ships.

Sale Calendar Bandecommerce-pro-promo-sections-sale-calendar-bandA centered sale calendar with a heading and a bordered list of dated sale rows, each carrying scope copy and a live status badge.

Seasonal Promo Tilesecommerce-pro-promo-sections-seasonal-promo-tilesEvery live offer on one screen, each tile carrying its real end condition.

Spend Save Ladderecommerce-pro-promo-sections-spend-save-ladderThree rungs with the effective percentage worked at each one.

Student Discount Cardecommerce-pro-promo-sections-student-discount-cardTen percent off with the verification time, stacking rules, and honest scope all stated before the button.

Trade In Bonus Bandecommerce-pro-promo-sections-trade-in-bonus-bandA dated 20 percent trade in credit bonus with the demand side reason published inline.

Vip Early Access Bandecommerce-pro-promo-sections-vip-early-access-bandThe earned regulars tier published whole, benefits, rule, and member count.

Weekend Flash Bandecommerce-pro-promo-sections-weekend-flash-bandA real window, a counted scope, and the overstock reason published.

Welcome Offer Signupecommerce-pro-promo-sections-welcome-offer-signupA two column email signup with a headline offer, address form, and a fact list on the right spelling out exactly what the newsletter sends.

Why No Birthday Clubecommerce-pro-promo-sections-why-no-birthday-clubThe birthday discount declined as data minimalism with what Acme holds and will not ask for.

Why No Coupon Fieldecommerce-pro-promo-sections-why-no-coupon-fieldThe missing code box defended in three arguments, with the gift card exception.

Bench Queue Statusecommerce-pro-repair-service-sections-bench-queue-statusThe repair backlog live, queue depth, turnaround, and the bench named.

Mail In Stepsecommerce-pro-repair-service-sections-mail-in-stepsThe postal repair in four cards with packing guidance that prevents real mistakes.

Meet The Benchecommerce-pro-repair-service-sections-meet-the-benchA centered intro above two profile cards, each with an avatar, bio, and three stat rows, closed by a signed card note.

Parts Trade Inecommerce-pro-repair-service-sections-parts-trade-inA two column trade in layout with three numbered steps beside a tiered credit table of four condition rows and a closing note.

Repair Cost Estimatorecommerce-pro-repair-service-sections-repair-cost-estimatorDamage type and warranty status in, the real bench price out, with every guarantee repair confirmed at zero.

Repair Glossaryecommerce-pro-repair-service-sections-repair-glossaryThe four bench terms defined in ruled rows with prices so every estimate reads without decoding.

Repair Guarantee Termsecommerce-pro-repair-service-sections-repair-guarantee-termsA centered heading over two side by side cards listing what the guarantee covers and excludes, closed by a one line claim path.

Repair Pricing Tableecommerce-pro-repair-service-sections-repair-pricing-tableThe out of warranty menu published, seven jobs with prices and bench time.

Repair Request Formecommerce-pro-repair-service-sections-repair-request-formThree fields and two photos start the repair, with the schedule promised in dates.

Repair Status Timelineecommerce-pro-repair-service-sections-repair-status-timelineA two column repair tracker pairing an intro with a card that steps one ticket through five bench stages on a vertical status timeline.

Repair Stories Galleryecommerce-pro-repair-service-sections-repair-stories-galleryBefore and after pairs with bench notes, the guarantee shown working.

Repair Turnaround Statsecommerce-pro-repair-service-sections-repair-turnaround-statsFour bench metrics published like a support inbox with the October queue spike stated upfront.

Repair Vs Replace Guideecommerce-pro-repair-service-sections-repair-vs-replace-guideThe bench's decision rules, including neither and sadly replace.

Spare Parts Gridecommerce-pro-repair-service-sections-spare-parts-gridEvery replaceable part sold individually with fit notes and honest difficulty.

Walk In Hours Cardecommerce-pro-repair-service-sections-walk-in-hours-cardFriday bench hours with the fixable list, the ticket list, and no appointment needed.

Bench Restoration Logecommerce-pro-resale-sections-bench-restoration-logA three column triptych follows one traded in unit from arrival notes through itemized bench work to a regraded listing with price and guarantee.

Buyback Explainerecommerce-pro-resale-sections-buyback-explainerWhy the store buys its own products back, the business case stated out loud.

Circularity Stats Bandecommerce-pro-resale-sections-circularity-stats-bandThe loop counted in five tiles, with zero landfilled labeled as the one that matters.

Consignment Vs Buyback Tableecommerce-pro-resale-sections-consignment-vs-buyback-tableTwo resale routes on four rows, the 12% failure rate included, no verdict picked.

New Versus Used Compareecommerce-pro-resale-sections-new-vs-used-compareTwo side by side cards contrast buying new against a graded resale unit, each with an image, price, four condition rows, and a buy button.

Provenance Report Cardecommerce-pro-resale-sections-provenance-report-cardOne resale unit documented from first sale to regrade with a timestamped record that travels to every owner.

Resale Drop Calendarecommerce-pro-resale-sections-resale-drop-calendarUpcoming graded batches as dated rows including one entry honest enough to call itself TBD.

Resale Faqecommerce-pro-resale-sections-resale-faqBuyer and seller questions answered, guarantees per grade and the regret clause.

Resale Grading Scaleecommerce-pro-resale-sections-resale-grading-scaleFour grades defined once with prices and the guarantees that travel with them.

Resale Value Curveecommerce-pro-resale-sections-resale-value-curveA two column split pairs a heading and three retention notes with a card charting resale value falling over six years to a marked floor.

Secondhand Gridecommerce-pro-resale-sections-secondhand-gridOne of one graded pieces with history lines, used goods sold as biographies.

Sell Back Stepsecommerce-pro-resale-sections-sell-back-stepsEstimate to credit in four steps, about a week, the estimate locked from the first.

Trade In Estimatorecommerce-pro-resale-sections-trade-in-estimatorProduct and honest condition in, the credit out, regrades only ever go up.

What We Takeecommerce-pro-resale-sections-what-we-takeA centered intro sits above two panels, one listing four accepted trade ins with reasons and another listing the four kinds it declines.

Chargeback Honesty Cardecommerce-pro-resolution-sections-chargeback-honesty-cardThe dispute button named as your right with honest speed math on both routes and a published record.

Complaint Process Explainerecommerce-pro-resolution-sections-complaint-process-explainerThree complaint stages with real durations and the exits past the store linked rather than buried.

Damage Report Cardecommerce-pro-resolution-sections-damage-report-cardA three step damaged item flow beside a static report form with order number field, photo drop area, fix choices, and submit.

Dispute Timeline Explainerecommerce-pro-resolution-sections-dispute-timeline-explainerThe chargeback path dated from day zero with honest advice on when a refund request beats it by weeks.

Escalation Contacts Cardecommerce-pro-resolution-sections-escalation-contacts-cardReal addresses in order from the support inbox to the founder to the dispute body that binds the store.

Make It Right Promiseecommerce-pro-resolution-sections-make-it-right-promiseThree automatic fixes for failures the store caused and the line between help and compensation.

Refund Status Cardecommerce-pro-resolution-sections-refund-status-cardAn example refund tracked across four stages from approval to statement, with wait bars per payment method and an escalation line below.

Remedy Options Cardecommerce-pro-resolution-sections-remedy-options-cardFour remedy cards side by side, each with an icon, an optional badge, a description, and a spec row stating speed and any extra.

Resolution Case Logecommerce-pro-resolution-sections-resolution-case-logA single complaint published as a timestamped thread, customer and support messages with system notes between them and the fix cost logged.

Resolution Outcomes Reportecommerce-pro-resolution-sections-resolution-outcomes-reportA quarterly complaint report with four headline stat tiles, a shared legend, and segmented bars showing where each complaint category ended.

Second Look Appealecommerce-pro-resolution-sections-second-look-appealA two column appeal section with a three step path on one side and last quarter's appeal outcomes and a segmented bar beside it.

Batch Status Trackerecommerce-pro-restock-sections-batch-status-trackerA production heading, a three fact strip, and a five stage vertical timeline of done, in progress, and upcoming stages, each with a dated note.

Drop Calendar Listecommerce-pro-restock-sections-drop-calendar-listThe release pipeline with exact dates emphasized and honest months muted.

Most Requested Restocks Listecommerce-pro-restock-sections-most-requested-restocks-listThe five longest waitlists ranked by queue length, each with batch math and an honest date or unknown.

Next Drop Countdownecommerce-pro-restock-sections-next-drop-countdownA split section with a heading, three countdown tiles, waitlist buttons, and a final contents list with unit counts beside placeholder imagery.

Notify Me Cardecommerce-pro-restock-sections-notify-me-cardOut of stock as a dated promise with queue size against batch size.

Notify Me Inline Rowecommerce-pro-restock-sections-notify-me-inline-rowThe sold out inline row with the batch date when known and the honest unknown when not, order noted.

Preorder Explainerecommerce-pro-restock-sections-preorder-explainerBatch preorder mechanics in four steps, charged at dispatch, never before.

Queue Fairness Policyecommerce-pro-restock-sections-queue-fairness-policyA heading, an intro, and a two by two grid of four icon cards, each stating one waitlist fairness rule, with a closing policy line.

Restock History Logecommerce-pro-restock-sections-restock-history-logEvery past restock dated with units and sell through, the receipt behind the ETA.

Restock History Noteecommerce-pro-restock-sections-restock-history-noteA year of restock promises scored against what landed, the miss included.

Size Restock Tableecommerce-pro-restock-sections-size-restock-tableA heading and a per size table with status badges, next batch dates, queue lengths, and a notify or add to cart action per row.

Stock Counts Explainerecommerce-pro-restock-sections-stock-counts-explainerHow the counters work, sworn in public, the hand set field does not exist.

Waitlist Position Cardecommerce-pro-restock-sections-waitlist-position-cardYour queue position with the batch math stated and a leave button with no guilt.

Why Batches Explainerecommerce-pro-restock-sections-why-batches-explainerThe four operational reasons everything restocks in batches, linked from every sold out tile.

Damaged Item Fast Trackecommerce-pro-returns-sections-damaged-item-fast-trackA split layout pairs three photo first steps for damaged arrivals with a static report panel of issue rows, a dropzone, and a submit button.

Dropoff Map Listecommerce-pro-returns-sections-dropoff-map-listThree nearest return drop points listed with distance, hours, and the honest queue note per row.

Exchange Instead Panelecommerce-pro-returns-sections-exchange-instead-panelThe swap offer on the honest speed argument, with the refund button kept full size.

Holiday Return Windowecommerce-pro-returns-sections-holiday-return-windowA three date stat rail marks the holiday window opening, cutoff, and deadline, with gift return notes and a rule that the longer window wins.

Instant Store Credit Optionecommerce-pro-returns-sections-instant-store-credit-optionCard refund in 2 to 4 bank days or instant store credit with the reasoning for no bonus published.

Plain Language Policyecommerce-pro-returns-sections-plain-language-policyThe whole returns policy in eight numbered sentences, the legal version linked, not inflicted.

Refund Timeline Explainerecommerce-pro-returns-sections-refund-timeline-explainerWhere the money is at each stage, who holds it, and which days are the bank.

Return Condition Guideecommerce-pro-returns-sections-return-condition-guideTwo side by side lists sort eight returns into full refund and keep it, with a closing line routing gray area cases to a person.

Return Label Stepsecommerce-pro-returns-sections-return-label-stepsPrint, QR, or pickup, two free and one priced at the courier cost it is.

Return Tracking Statusecommerce-pro-returns-sections-return-tracking-statusThe return tracked with the refund milestone embedded before the warehouse stage.

Returns Faqecommerce-pro-returns-sections-returns-faqSix questions from the returns inbox, including the used item and the missed deadline.

Returns Feedback Loopecommerce-pro-returns-sections-returns-feedback-loopThree product rows each pair the top return note with the fix that shipped and a before and after return rate stat column.

Start Return Flowecommerce-pro-returns-sections-start-return-flowThe order as selectable rows, the refund promised at the courier scan, not the warehouse.

Ask An Owner Qaecommerce-pro-reviews-sections-ask-an-owner-qaThree QA threads answered by verified owners, staff stepping in once and labeled loudly for it.

Attribute Ratings Breakdownecommerce-pro-reviews-sections-attribute-ratings-breakdownA split reviews section with the overall average and sample size beside four sub scores, each with a bar meter and one anchoring quote.

Critical Reviews Pageecommerce-pro-reviews-sections-critical-reviews-pageAll critical reviews under four stars, newest first with store replies and the honest count of 412.

Most Helpful Pairecommerce-pro-reviews-sections-most-helpful-pairThe top voted positive and critical reviews side by side, both right.

Most Helpful Reviews Panelecommerce-pro-reviews-sections-most-helpful-reviews-panelThe top voted positive and critical reviews side by side, chosen by readers.

Photo Review Guidelines Cardecommerce-pro-reviews-sections-photo-review-guidelines-cardThree honest rules for a useful review photo, a do and do not table, and the five dollar credit terms.

Photo Review Wallecommerce-pro-reviews-sections-photo-review-wallCustomer photos with stars, one line, and ownership time from order dates.

Press And Customer Reviewsecommerce-pro-reviews-sections-press-and-customer-reviewsA two column review section pairing press verdicts with publication marks against verified owner quotes with avatars, closed by a sourcing note.

Questions And Answersecommerce-pro-reviews-sections-questions-and-answersPre purchase questions answered by the team and by owners, labeled and timed.

Rating Over Time Chartecommerce-pro-reviews-sections-rating-over-time-chartMonthly rating as a shadcn line with the dip kept and its recall explained.

Rating Summary With Barsecommerce-pro-reviews-sections-rating-summary-with-barsThe average beside the full distribution, with the one star reviews linked first.

Review Cards Gridecommerce-pro-reviews-sections-review-cards-gridSix short reviews that show how long each reviewer has owned the piece.

Review Highlights Summaryecommerce-pro-reviews-sections-review-highlights-summaryRecurring review themes with counts and quotes, the mixed one kept, method disclosed.

Review Incentives Disclosureecommerce-pro-reviews-sections-review-incentives-disclosureWhat reviewers are paid, published next to the stars it governs.

Review List With Photosecommerce-pro-reviews-sections-review-list-with-photosFull reviews with photo strips and the three star repair story kept on page one.

Review Topic Filtersecommerce-pro-reviews-sections-review-topic-filtersTopic chips filter live review quotes by what buyers actually worry about, with mention counts.

Reviews From Returnsecommerce-pro-reviews-sections-reviews-from-returnsA centered heading over three review cards from buyers who returned the product, each showing return timing and their better fit, closed by a policy line.

Reviews Milestone Bandecommerce-pro-reviews-sections-reviews-milestone-bandThe review program audited, including the critical share, all published.

Reviews Over The Yearsecommerce-pro-reviews-sections-reviews-over-the-yearsOne quote per ownership band, year one to year five plus, sorted so time does the arguing.

Reviews With Fit Feedbackecommerce-pro-reviews-sections-reviews-with-fit-feedbackFit verdict as three div bars with 412 buyer sample, beside two quotes anchored to height and load carried.

Spotlight Reviewecommerce-pro-reviews-sections-spotlight-reviewOne earned review at editorial scale with the customer's own photos and provenance.

Store Response Threadecommerce-pro-reviews-sections-store-response-threadCritical reviews with signed public replies and the fixes they caused.

Verified Buyer Stripecommerce-pro-reviews-sections-verified-buyer-stripThe review system's three rules with enforcement counts, the policy as a trust band.

Video Reviews Rowecommerce-pro-reviews-sections-video-reviews-rowA centered heading over a four up row of customer filmed video thumbnails, each with a play mark, runtime, star rating, and one transcript pull.

Write Review Promptecommerce-pro-reviews-sections-write-review-promptThe review ask with honest expectations, ninety seconds, wear photos welcome.

Empty Search Stateecommerce-pro-search-sections-empty-search-stateZero results handled honestly, what we checked and three real ways forward.

Guided Search Finderecommerce-pro-search-sections-guided-search-finderA guided finder replacing the search box with three toggle chip questions, surfacing the best matching product once all three answers are in.

Popular Searches Bandecommerce-pro-search-sections-popular-searches-bandThis month's top queries as chips, ranked by real counts and dated.

Saved Search Alertsecommerce-pro-search-sections-saved-search-alertsA saved searches panel listing each stored query as a row with its save date, what changed since your last visit, and a per search alert toggle.

Search By Photo Cardecommerce-pro-search-sections-search-by-photo-cardSnap a bag you saw, get the match, the photo deleted the same minute.

Search Results Pageecommerce-pro-search-sections-search-results-pageResults for a query with the count, sort, and the close miss row below.

Search Suggestions Panelecommerce-pro-search-sections-search-suggestions-panelThe open search box, recents, popular now, and direct product jumps.

Search Syntax Guideecommerce-pro-search-sections-search-syntax-guideA power search reference with six operator cards, each pairing a query fragment chip with its effect, then one combined example query in a search field.

Search With Filters Barecommerce-pro-search-sections-search-with-filters-barResults with toggleable filter chips and the count updating per selection.

Store Availability Searchecommerce-pro-search-sections-store-availability-searchA local availability search pairing a product query with nearby store rows showing live shelf counts and pickup windows, plus a shipping fallback.

Discount Bandsecommerce-pro-seconds-sections-discount-bandsA header above a three column grid of discount bands, each card pairing a fixed markdown percentage with its flaw words and an example listing.

Drop Alertecommerce-pro-seconds-sections-drop-alertA split layout pairing an email signup for the drop schedule with a ledger of the last four drops showing piece counts and sellout speed.

Flaw Glossaryecommerce-pro-seconds-sections-flaw-glossaryThe four words the seconds rail can use, each defined in plain language with a severity line.

Photographed Flaw Overviewecommerce-pro-seconds-sections-photographed-flaw-overviewOne second with the flaw photographed close, the discount named, and the full guarantee unchanged.

Rail Timelineecommerce-pro-seconds-sections-rail-timelineA centered header above a vertical numbered timeline tracing a second through five steps from failed inspection to sold, with elapsed time on each step.

Seconds Faqecommerce-pro-seconds-sections-seconds-faqFive seconds rail questions answered with glossary words, the unchanged returns and the pricing spine.

Seconds Gridecommerce-pro-seconds-sections-seconds-gridFour one of one pieces each named by its actual flaw and the discount that flaw earned.

Seconds Vs New Tableecommerce-pro-seconds-sections-seconds-vs-new-tableThree rows change when you buy a second and four rows do not, and the unchanged column does the selling.

Sold Archiveecommerce-pro-seconds-sections-sold-archiveA centered header above a three figure stat strip and a ledger of recently sold seconds naming each piece, its flaw, band, and rail days.

Why Seconds Exist Letterecommerce-pro-seconds-sections-why-seconds-exist-letterThe QC lead explains the 4% failure rate, the three options, and why naming the flaw won.

Bulk Order Cartecommerce-pro-shopping-carts-bulk-order-cartTrade quantity cart with volume break shown per line and the next break named when the buyer is close.

Cart Stock Warningsecommerce-pro-shopping-carts-cart-stock-warningsLine items with live stock truth, including the one that sold out waiting.

Cart With Delivery Estimatesecommerce-pro-shopping-carts-cart-with-delivery-estimatesEach cart line carries its own arrival date and the made to order batch date before payment.

Cart With Dutiesecommerce-pro-shopping-carts-cart-with-dutiesA two column international cart with a destination row, line items, a border explainer, and a landed cost summary itemizing duties and tax paid upfront.

Cart With Eco Optionsecommerce-pro-shopping-carts-cart-with-eco-optionsPackaging and speed choices with real trade offs and the honest $2.

Cart With Gift Splitecommerce-pro-shopping-carts-cart-with-gift-splitLine items grouped by destination, shipping per address, one checkout with gift tracking to you only.

Cart With Installments Previewecommerce-pro-shopping-carts-cart-with-installments-previewThe total with the four payment split shown inline before the payment page asks you to choose.

Cart With Order Notesecommerce-pro-shopping-carts-cart-with-order-notesA note for the humans packing this, with honored examples that prove readership.

Cart With Price Dropsecommerce-pro-shopping-carts-cart-with-price-dropsA single column cart where each line shows watched pricing, drops applied with a struck old price and one held item, above a savings summary and checkout.

Cart With Promo Codeecommerce-pro-shopping-carts-cart-with-promo-codeA visible code field that says where codes come from, applied codes itemized.

Cart With Recommendationsecommerce-pro-shopping-carts-cart-with-recommendationsA clean cart above a cross sell rail where every suggestion states its reason.

Cart With Save For Laterecommerce-pro-shopping-carts-cart-with-save-for-laterThe cart with a parked strip that tracks prices and never triggers a campaign.

Cart With Trade Inecommerce-pro-shopping-carts-cart-with-trade-inA single column cart pairing a new item with a locked trade in credit, its condition and inspection steps, and a summary showing the reduced amount due today.

Compact Cart Summaryecommerce-pro-shopping-carts-compact-cart-summaryThe cart as one strip, count, named preview, total, and checkout.

Empty Cart Stateecommerce-pro-shopping-carts-empty-cart-stateThe empty cart as navigation, no guilt, with three labeled exits.

Free Shipping Progress Cartecommerce-pro-shopping-carts-free-shipping-progress-cartA threshold meter with one honest gap closing suggestion under the items.

Full Cart Pageecommerce-pro-shopping-carts-full-cart-pageThe two column cart with steppers and a summary that promises no checkout surprises.

Gift Options Cartecommerce-pro-shopping-carts-gift-options-cartA working gift toggle with message field, free wrap, and no prices on gift receipts.

Mini Cart Drawerecommerce-pro-shopping-carts-mini-cart-drawerThe open drawer with two items, a shipping meter, and honest top up arithmetic.

Mini Cart Panelecommerce-pro-shopping-carts-mini-cart-panelThe slide over cart as a standalone panel with both exits given equal standing.

Saved For Later Cartecommerce-pro-shopping-carts-saved-for-later-cartThe parking shelf under the cart, watched while parked, restocks move back.

Shared Cartecommerce-pro-shopping-carts-shared-cartA two column shared cart with a contributors avatar strip, line items tagged by who added them, and a per person split summary with one checkout.

Subscription Items Cartecommerce-pro-shopping-carts-subscription-items-cartRecurring and one time lines separated, with today split from every 4 weeks.

Belt Sizing Guideecommerce-pro-size-and-fit-belt-sizing-guidePin to hole on the belt that fits, with the do not order your jeans size rule.

Between Sizes Deciderecommerce-pro-size-and-fit-between-sizes-deciderOne sizing rule per product type, each backed by ten years of exchange data from the ledger.

Brand To Brand Fit Tableecommerce-pro-size-and-fit-brand-to-brand-fit-tableFour brand archetypes translated to an Acme order, with the outdoor row that sends buyers to centimeters.

Cut Comparisonecommerce-pro-size-and-fit-cut-comparisonThe same chest size in three cuts as garment silhouettes with a dashed chest line, each with ease numbers and who it suits.

Denim Size Matrixecommerce-pro-size-and-fit-denim-size-matrixA waist by inseam availability grid beside a height to inseam picker, so buyers choose both numbers instead of guessing the second.

Fit Notes Panelecommerce-pro-size-and-fit-fit-notes-panelFour notes from the pattern table, the cut, the between sizes call, and who graded it.

Glove Sizing Cardecommerce-pro-size-and-fit-glove-sizing-cardPalm cm to size table with the between sizes rule and the leather stretch already accounted for.

International Size Conversionecommerce-pro-size-and-fit-international-size-conversionHouse sizes against four systems, with centimeters as the tiebreaker.

Kids Growth Sizingecommerce-pro-size-and-fit-kids-growth-sizingAge bands with buy ahead advice built in, height decides, age approximates.

Measure Yourself Guideecommerce-pro-size-and-fit-measure-yourself-guideA drawn figure with three measurement lines, each with a no tape fallback.

Measurement Guide Diagramecommerce-pro-size-and-fit-measurement-guide-diagramA drawn garment SVG with lettered measurement lines matching the chart.

Model Size Referenceecommerce-pro-size-and-fit-model-size-referenceThree fit models across the height range in framed cards, each with real measurements, the size they wear, and an honest fit note.

Reviewer Fit Feedbackecommerce-pro-size-and-fit-reviewer-fit-feedbackA true to size distribution built from verified reviews as div bars, beside three reviewer quotes stating height, size bought, and verdict.

Shoe Size Measureecommerce-pro-size-and-fit-shoe-size-measurePaper and pen measurement in three steps, then the centimeter table.

Size Chart All Productsecommerce-pro-size-and-fit-size-chart-all-productsEvery sized product on one bookmarkable table, each row linking its full guide and measuring steps.

Size Chart Tableecommerce-pro-size-and-fit-size-chart-tableGarment measurements taken flat, with tolerances and the between sizes verdict.

Size Recommender Cardecommerce-pro-size-and-fit-size-recommender-cardHeight and usual size in, a recommendation with its reasoning printed out.

Strap Length Guideecommerce-pro-size-and-fit-strap-length-guideThe 40 cm strap range explained via torso not height, with a string measuring method and wear table.

As Worn By Rowecommerce-pro-social-proof-sections-as-worn-by-rowThree customers whose work tests the product, with tenure and their own words.

By The Numbers Bandecommerce-pro-social-proof-sections-by-the-numbers-bandFive proof numbers with sources, picked to show people stay, not just arrive.

Community Spotlight Interviewecommerce-pro-social-proof-sections-community-spotlight-interviewOne customer at length, three questions, the unfixed pocket kept in.

Creator Collabs Listecommerce-pro-social-proof-sections-creator-collabs-listThe collab archive with splits disclosed and honest sell through numbers.

Customer Photos Ctaecommerce-pro-social-proof-sections-customer-photos-ctaThe owner photo ask with usage terms up front, older and dirtier preferred.

Independent Tests Panelecommerce-pro-social-proof-sections-independent-tests-panelA ruled panel of four third party test results, each row naming the issuer, method, verbatim result and date with a report link, plus a fee disclosure.

New Vs Worn Compareecommerce-pro-social-proof-sections-new-vs-worn-compareA two column comparison of the same product at day one and year five, each with matching condition rows and a borrowed back disclosure below.

Owner Posts Wallecommerce-pro-social-proof-sections-owner-posts-wallA responsive wall of six unsolicited owner text posts, each card carrying an avatar, handle, platform and date, then the quoted words.

Press Mentions Rowecommerce-pro-social-proof-sections-press-mentions-rowThree dated press quotes, the mixed review kept in on purpose.

Press Quotes Rowecommerce-pro-social-proof-sections-press-quotes-rowThree exact press sentences with text wordmarks and dates instead of logo soup.

Repair Counter Live Bandecommerce-pro-social-proof-sections-repair-counter-live-bandThe year to date repair count as one large integer, broken into three sub counts updated nightly.

Stockist Quotes Rowecommerce-pro-social-proof-sections-stockist-quotes-rowThree wholesale stockists quoted on why they reorder, with the margin disclosure printed below.

Thanks Milestones Bandecommerce-pro-social-proof-sections-thanks-milestones-bandThe stats band as gratitude, these are your numbers, not ours.

Ugc Photo Gridecommerce-pro-social-proof-sections-ugc-photo-gridSix owner photos with handles and tenure captions, consent stated in one line.

Video Reviews Rowecommerce-pro-social-proof-sections-video-reviews-rowA three column row of independent owner review videos, each with thumbnail, runtime, channel, and a pulled quote, plus a not commissioned disclosure.

Years Owned Leaderboardecommerce-pro-social-proof-sections-years-owned-leaderboardThe longest serving bags from the registration data, numbered rows with a repair prize for first place.

Capacity Tableecommerce-pro-spec-sections-capacity-tableCapacity claims tested by packing real things into a real bag with tight and no rows included.

Compatibility Tableecommerce-pro-spec-sections-compatibility-tableAccessories matrix across four bags with every cell tested by clipping and a minus meaning no not yet.

Dimensions Diagramecommerce-pro-spec-sections-dimensions-diagramInline SVG technical line drawing paired with a table for screen readers and copy paste, four callouts.

Full Spec Sheetecommerce-pro-spec-sections-full-spec-sheetThe complete spec table with a tolerance column, because handmade varies and pretending generates email.

Hardware Spec Cardecommerce-pro-spec-sections-hardware-spec-cardThe buckle, zips, and rivets each specified and each carrying its failure rate from the bench log.

Materials Ledgerecommerce-pro-spec-sections-materials-ledgerA ruled ledger listing each material with its use, source mill or tannery, how long the relationship has run, and switch criteria.

Spec Revisionsecommerce-pro-spec-sections-spec-revisionsA revision log comparing the current version to the last, each changed spec shown as a from and to pair with its reason.

Tolerances Note Cardecommerce-pro-spec-sections-tolerances-note-cardThree ruled sections on why handmade varies, what never does, and a return promise with no friction.

Weather Test Resultsecommerce-pro-spec-sections-weather-test-resultsA split section pairing the test method notes on the left with rain scenarios on the right, each rated on a five dot resistance scale.

Weight Breakdownecommerce-pro-spec-sections-weight-breakdownA stacked list of product components, each with its gram weight, a proportional bar, and a note, closing on a summed total row.

Whats In The Boxecommerce-pro-spec-sections-whats-in-the-boxFour items in and four deliberately out, with the absence list carrying the personality of the brand.

Footer Accordion Mobileecommerce-pro-store-footers-footer-accordion-mobileFooter whose four link groups collapse into an accordion on mobile and spread into four columns on desktop, above the legal bar.

Footer Minimal Legalecommerce-pro-store-footers-footer-minimal-legalBrand name, four policy links, and a legal bar with company number, sized for checkout pages.

Footer With App Badgesecommerce-pro-store-footers-footer-with-app-badgesFooter whose brand column sells the mobile app with two store badges, a scannable code, and the app rating beside three link columns.

Footer With Category Sitemapecommerce-pro-store-footers-footer-with-category-sitemapEvery product and collection as a dense directory, completeness stated outright.

Footer With Company Numbersecommerce-pro-store-footers-footer-with-company-numbersThe brand column carries company number, VAT, and the real street address.

Footer With Language Regionecommerce-pro-store-footers-footer-with-language-regionThree storefronts as plain text rows with duty notes per region and the pricing page named openly.

Footer With Locale Selectorecommerce-pro-store-footers-footer-with-locale-selectorRegion, language, and currency as visible selectors with the duties promise localized.

Footer With Newsletterecommerce-pro-store-footers-footer-with-newsletterThe capture band leading the footer, one email a month with the open rate as proof.

Footer With Reviews Scoreecommerce-pro-store-footers-footer-with-reviews-scoreThe 4.8 with its count in the footer, linking the critical reviews first.

Footer With Service Linksecommerce-pro-store-footers-footer-with-service-linksService columns instead of category columns: Repairs, Resale, Membership, and Help each named.

Footer With Social Feedecommerce-pro-store-footers-footer-with-social-feedFooter led by a shoppable social feed of six square post tiles under the handle and follower count, above a compact link row.

Footer With Store Locationsecommerce-pro-store-footers-footer-with-store-locationsFooter pairing the link columns with three physical store cards showing address, weekly hours, phone number, and a directions link each.

Footer With Trust Rowecommerce-pro-store-footers-footer-with-trust-rowThe four policy facts as a bordered strip above standard footer columns.

Holiday Hours Footerecommerce-pro-store-footers-holiday-hours-footerThe whole December schedule in one ruled list, cutoffs, support, bench.

Mega Store Footerecommerce-pro-store-footers-mega-store-footerThe full sitemap footer with payment chips and the VAT number European buyers scan for.

Minimal Store Footerecommerce-pro-store-footers-minimal-store-footerA centered one row footer with the five questions a single product store gets.

Archive Sale Heroecommerce-pro-store-heroes-archive-sale-heroThe twice yearly archive sale with the real piece count, listing time, and the full guarantee.

Bestseller Spotlight Heroecommerce-pro-store-heroes-bestseller-spotlight-heroThe one bag that outsells the rest, argued with three audited numbers and an honest lede crediting buyers.

Brand Manifesto Heroecommerce-pro-store-heroes-brand-manifesto-heroThe position at display size with three receipts, buy it once, we mean the once.

Centered With Category Linksecommerce-pro-store-heroes-centered-with-category-linksThe brand promise above four category tiles with style counts, browsing starts here.

Comparison Heroecommerce-pro-store-heroes-comparison-heroA store hero that argues price with a scrolling cost of ownership table comparing the flagship against a cheap rival, ending on cost per year.

Editorial Split Heroecommerce-pro-store-heroes-editorial-split-heroThe store led by seasonal writing beside a campaign image with its provenance caption.

Founders Welcome Heroecommerce-pro-store-heroes-founders-welcome-heroA kitchen table origin and a signed refusal list from the founder still packing boxes on Fridays.

Gift Guide Heroecommerce-pro-store-heroes-gift-guide-heroThe seasonal guide opened by recipient with price floors and the gift card lane.

Gift Season Heroecommerce-pro-store-heroes-gift-season-heroDecember hero with real courier cutoff dates, a gift returns promise, and a Placeholder split image panel.

Hero With Bestsellers Rowecommerce-pro-store-heroes-hero-with-bestsellers-rowThe pitch beside the four most bought products ranked with units sold.

Hero With Reviews Stripecommerce-pro-store-heroes-hero-with-reviews-stripThe pitch above three one line verified reviews, proof in the fold without a product shot.

Made Here Heroecommerce-pro-store-heroes-made-here-heroEleven people, one room, 60 bags a week and the supplier count named on the chain page.

Mosaic Collage Heroecommerce-pro-store-heroes-mosaic-collage-heroFive labeled category tiles beside the small range manifesto.

New Arrivals Heroecommerce-pro-store-heroes-new-arrivals-heroA drop announcement above three new pieces with names and prices in the fold.

Preorder Heroecommerce-pro-store-heroes-preorder-heroA split store hero for a preorder batch pairing price, deposit terms, and units left with a production timeline panel tracking the batch.

Press Quote Heroecommerce-pro-store-heroes-press-quote-heroA publication's verdict as the headline, dated, linked, and not paid for.

Product Finder Heroecommerce-pro-store-heroes-product-finder-heroA split store hero pairing a three step finder promise and CTAs with a live first question panel of radio options and a progress bar.

Restock Heroecommerce-pro-store-heroes-restock-heroThe waited for item back, with its queue history and a live unit counter.

Seasonal Prep Heroecommerce-pro-store-heroes-seasonal-prep-heroThe October rewax as a ritual, three honest numbers and the bench price for anyone who prefers not.

Seasonal Sale Heroecommerce-pro-store-heroes-seasonal-sale-heroThe discount at display scale with the three sale rules listed in full, no countdown gimmicks.

Split With Productecommerce-pro-store-heroes-split-with-productA store hero with the flagship product beside price, rating, and the shipping promise.

Starter Kit Heroecommerce-pro-store-heroes-starter-kit-heroA split store hero selling a three piece bundle: the reasons the kit exists beside an itemized order panel with prices and the bundle saving.

Store Numbers Heroecommerce-pro-store-heroes-store-numbers-heroThe tagline replaced by six audited figures, none rounded up.

Text Only Drop Heroecommerce-pro-store-heroes-text-only-drop-heroA drop announced with facts instead of photos, quantities and restock policy included.

Trade Heroecommerce-pro-store-heroes-trade-heroB2B landing hero with fleet numbers, Net 30 terms, the total repair spend, and the account rep named.

Video Lookbook Heroecommerce-pro-store-heroes-video-lookbook-heroThe seasonal film as a wide poster with play badge, runtime, and every piece linked.

Flagship Store Pageecommerce-pro-store-locator-sections-flagship-store-pageThe one store, its hours, the bench in view, and honest parking advice.

Flagship Store Splitecommerce-pro-store-locator-sections-flagship-store-splitOne store with its services itemized, monogramming times and the seconds shelf.

In Store Pickup Explainerecommerce-pro-store-locator-sections-in-store-pickup-explainerClick and collect in three steps, live stock, two hour ready, counter returns.

Popup Tour Scheduleecommerce-pro-store-locator-sections-popup-tour-scheduleA pop up tour schedule listing the traveling shop as dated city stops with venue, what travels along, and an open or waitlist status.

Stockist Detail Cardecommerce-pro-store-locator-sections-stockist-detail-cardOne stockist in full: what is stocked, what is not, hours, services, and the price match promise stated.

Stockists Listecommerce-pro-store-locator-sections-stockists-listFour independent shops with what each shelf actually carries.

Store Events Listecommerce-pro-store-locator-sections-store-events-listTours, clinics, and pack nights as dated rows with honest small capacities.

Store List Cardsecommerce-pro-store-locator-sections-store-list-cardsLocations with live hours and a what this store uniquely offers line each.

Store Map Finderecommerce-pro-store-locator-sections-store-map-finderA store finder split with a search field and nearest results on the left beside a blueprint style map with numbered pins on the right.

Store Opening Announcementecommerce-pro-store-locator-sections-store-opening-announcementA new store announcement naming the location and opening date, then the opening week itemized day by day above an invite call to action.

Store Services Matrixecommerce-pro-store-locator-sections-store-services-matrixA services matrix with every location as a column and every in store service as a row, each cell a check, a dash, or a short note.

Visit Planner Cardecommerce-pro-store-locator-sections-visit-planner-cardBook half an hour at the counter, fittings, repairs, or deciding between two.

Account Menu Panelecommerce-pro-store-navbars-account-menu-panelNavbar with the signed in account panel open: greeting with store credit, four account destinations each carrying a live fact, and sign out.

Announcement Navbar Comboecommerce-pro-store-navbars-announcement-navbar-comboBanner and nav as one composed header unit with a dismissible price change preannounce above the bar.

Centered Logo Navbarecommerce-pro-store-navbars-centered-logo-navbarEditorial fashion header with a centered wordmark, utilities split symmetrically to either side, and a centered category row beneath.

Checkout Header Lockecommerce-pro-store-navbars-checkout-header-lockThe payment flow header, wordmark, lock line, and one exit back to cart.

Country Selector Navbarecommerce-pro-store-navbars-country-selector-navbarNavbar with the region panel open: four duty zones, consequence per row, and the cart survives the switch.

Minimal Logo Cartecommerce-pro-store-navbars-minimal-logo-cartThe navbar stripped to wordmark, one trust link, and the cart for single product stores.

Mobile Menu Open Panelecommerce-pro-store-navbars-mobile-menu-open-panelStatic open state mobile nav with expanded sub-links, utility rows, and the support hours footer.

Nav With Announcementecommerce-pro-store-navbars-nav-with-announcementAn announcement strip and slim nav designed as one unit, dated message included.

Nav With Cart Searchecommerce-pro-store-navbars-nav-with-cart-searchThe standard store header with inline search and the icon trio with cart count.

Nav With Category Barecommerce-pro-store-navbars-nav-with-category-barA brand row above a scrolling category bar with the current section underlined.

Nav With Mega Menu Panelecommerce-pro-store-navbars-nav-with-mega-menu-panelThe navbar with its mega panel open, link columns plus a help deciding column.

Nav With Mini Cart Panelecommerce-pro-store-navbars-nav-with-mini-cart-panelNavbar with its mini cart open below: two line items with thumbs, a free shipping progress meter, subtotal, and one checkout route.

Nav With Order Status Stripecommerce-pro-store-navbars-nav-with-order-status-stripStandard navbar with a dismissible strip showing the active order, ship date, and tracking link.

Nav With Reorder Barecommerce-pro-store-navbars-nav-with-reorder-barReplenishment navbar with a buy again strip beneath: chips for four staples from the last order, each with its price and a one tap add.

Nav With Utility Barecommerce-pro-store-navbars-nav-with-utility-barA support fact, order tracking, and locale picker in a slim strip above the nav.

Nav With Wishlist Countecommerce-pro-store-navbars-nav-with-wishlist-countWishlist heart as a first class nav icon with a count badge and a price drop dot explained below.

Search Overlay Panelecommerce-pro-store-navbars-search-overlay-panelThe search open mid query, products and guides split into two columns.

Service First Navbarecommerce-pro-store-navbars-service-first-navbarPrimary nav with Repairs, Resale, and Membership first, plus a live bench queue strip below.

Trade Portal Navbarecommerce-pro-store-navbars-trade-portal-navbarThe logged in B2B header with tier, rep, terms, and the Friday cutoff.

Cadence Picker Cardecommerce-pro-subscription-sections-cadence-picker-cardDelivery rhythm chosen by honest usage guidance, the recommendation argued.

Care Club Annual Summaryecommerce-pro-subscription-sections-care-club-annual-summaryThe year one care club receipt in four numbers with the skip praised and the cadence downgrade offered.

First Delivery Timelineecommerce-pro-subscription-sections-first-delivery-timelineA four step numbered timeline of a subscription's first ninety days, from signup through the reminder email to the second charge and a start button.

Gift A Subscription Cardecommerce-pro-subscription-sections-gift-a-subscription-cardA gifted year of wax with two delivery options and the no auto renew rule as the centerpiece.

Kit Size Plansecommerce-pro-subscription-sections-kit-size-plansThree subscription box sizes in ring framed cards, each with placeholder imagery, price, contents list, and fit note, with the smallest recommended.

Manage Subscription Panelecommerce-pro-subscription-sections-manage-subscription-panelAll four controls at equal weight, cancel included, with the skip praised in history.

Member Perks Ledgerecommerce-pro-subscription-sections-member-perks-ledgerA two column membership section pairing a value summary with a divided ledger of perks, each priced by yearly worth, plus one excluded line.

Next Box Editorecommerce-pro-subscription-sections-next-box-editorAn editable next subscription box as a line item list, each swappable or removable, with a one time add on, running total, and edit deadline.

Pause Or Skip Controlsecommerce-pro-subscription-sections-pause-or-skip-controlsThree off switches compared by situation, no survey behind any of them.

Subscribe Save Overviewecommerce-pro-subscription-sections-subscribe-save-overviewThe consumable subscription as logistics, exits listed above the join button.

Subscription Faqecommerce-pro-subscription-sections-subscription-faqSix subscription inbox answers written as binding policy, from price locks to why bags are excluded entirely.

Subscription Vs Onetime Mathecommerce-pro-subscription-sections-subscription-vs-onetime-mathA year priced both ways across three profiles, one verdict against the store.

Certification Auditecommerce-pro-sustainability-sections-certification-auditTwo column certification audit listing held certificates with scope and audit dates beside the badges skipped on purpose, each with a stated reason.

Durability Pledge Cardecommerce-pro-sustainability-sections-durability-pledge-cardFour durability commitments you can test, not values language, each naming the thing that proves it.

Honest Unknowns Cardecommerce-pro-sustainability-sections-honest-unknowns-cardThe things Acme has not measured yet, three gaps stated plainly with the plan or the honest none.

Longevity As Sustainabilityecommerce-pro-sustainability-sections-longevity-as-sustainabilityThe sustainability thesis: time in service beats material talk, argued with three service numbers.

Materials Footprint Tableecommerce-pro-sustainability-sections-materials-footprint-tableThree materials across two honest columns: what Acme verified on visits and what suppliers claimed.

Packaging Teardownecommerce-pro-sustainability-sections-packaging-teardownTwo column packaging teardown pairing an intro and a weighed total card with a divided list naming each component, its material, and where it goes.

Repair Vs Replace Footprintecommerce-pro-sustainability-sections-repair-vs-replace-footprintA zipper repair against a new bag in plain ratios, not invented kilograms, with the method stated.

Shipping Footprint Explainerecommerce-pro-sustainability-sections-shipping-footprint-explainerGround over air 6 to 1, one box of three, and the no offsets position stated as a deliberate choice.

Sustainability Ledgerecommerce-pro-sustainability-sections-sustainability-ledgerCentered heading and intro over a dated, divided ledger of entries, each with a date, tagged badge, title, and short body, newest first.

Takeback Outcomesecommerce-pro-sustainability-sections-takeback-outcomesA proportional outcome bar with legend above three cards breaking down resold, stripped, and landfill shares, closed by a dated method note.

Fleet Case Studyecommerce-pro-trade-sections-fleet-case-studyForty bags, two years, and the strap flaw that changed the whole fleet spec included in the repair count.

Fleet Cost Estimatorecommerce-pro-trade-sections-fleet-cost-estimatorAn interactive estimator with two sliders for fleet size and service years that reprice upfront spend, projected repairs, and cost per bag live.

Pro Stories Rowecommerce-pro-trade-sections-pro-stories-rowThree fleets with wear numbers, deliveries per repair as the proof.

Sample Kit Cardecommerce-pro-trade-sections-sample-kit-cardThe fleet evaluation kit, credited at five units, built for the deciding meeting.

Trade Application Formecommerce-pro-trade-sections-trade-application-formThe pro program intake with who qualifies and a two day answer, never silence.

Trade Faqecommerce-pro-trade-sections-trade-faqFive program questions answered straight, priority repair quantified.

Trade Onboarding Stepsecommerce-pro-trade-sections-trade-onboarding-stepsApplication to first order in four real durations, 6 day median at the foot.

Trade Perks Gridecommerce-pro-trade-sections-trade-perks-gridFour perks argued from the professional's economics, downtime is our problem.

Trade Portal Previewecommerce-pro-trade-sections-trade-portal-previewA two column portal preview pairing three account features with a static fleet dashboard showing repair stages, fleet counts, and a reorder row.

Trade Termsecommerce-pro-trade-sections-trade-termsA two column trade terms section pairing five payment and ordering terms with a static invoice mockup showing the discount and net 30 in practice.

Trade Versus Retailecommerce-pro-trade-sections-trade-vs-retailA two column comparison table setting retail against a trade account across seven rows, with a lede and a closing note on the identical guarantee.

Volume Pricing Tableecommerce-pro-trade-sections-volume-pricing-tableTeam order bands published with the services included at each.

Account Deletion Cardecommerce-pro-trust-sections-account-deletion-cardOne button, what dies instantly, what the law keeps, and the guarantee that outlives the account.

Counterfeit Spotting Guideecommerce-pro-trust-sections-counterfeit-spotting-guideFour physical tells and a same day serial check open to secondhand buyers who have no receipt.

Data Promise Cardecommerce-pro-trust-sections-data-promise-cardFive numbered data promises each with the mechanism that lets a buyer check it, and a review date.

Guarantee Vs Warranty Explainerecommerce-pro-trust-sections-guarantee-vs-warranty-explainerStatutory rights, the Acme guarantee, and the repair program in one table showing they stack not replace.

Price History Pledgeecommerce-pro-trust-sections-price-history-pledgeSplit trust section listing three pricing pledges beside an illustrative 90 day price history chart showing a single real markdown for one product.

Refund Speed Trackerecommerce-pro-trust-sections-refund-speed-trackerCentered trust section listing refund speed per payment method, pairing each promised window with the measured median and a usage bar.

Returned Item Lifecycleecommerce-pro-trust-sections-returned-item-lifecycleCentered trust section with a segmented distribution bar and a destination row for each return path, from restocked as new to destroyed.

Review Integrity Reportecommerce-pro-trust-sections-review-integrity-reportSplit trust section pairing three review moderation rules on the left with a stat panel of quarterly numbers and a removal reason breakdown.

Security Contact Cardecommerce-pro-trust-sections-security-contact-cardScope, honest reward, and three named researchers with what they found for a store disclosure page.

Subprocessors Listecommerce-pro-trust-sections-subprocessors-listFive outside data partners named by role with what they receive, why, and the deletion path on a page.

Why We Ask Explainerecommerce-pro-trust-sections-why-we-ask-explainerEvery checkout field justified with its use and boundary, and the one field that is not there.

Accessories Railecommerce-pro-upsell-sections-accessories-railThe small goods as a snap strip with one earned context line per card.

Add On Servicesecommerce-pro-upsell-sections-add-on-servicesMonogramming, treatment, and care as checkable services with a live total.

Better Spend Suggesterecommerce-pro-upsell-sections-better-spend-suggesterBudget chips answered with the honest allocation at each number including the one that stops at 433.

Care Kit Attach Rowecommerce-pro-upsell-sections-care-kit-attach-rowThe care kit at cart with the first rain argument and the attach rate published.

Care Sub Upsell Rowecommerce-pro-upsell-sections-care-sub-upsell-rowThe wax already in the cart offered as a schedule with an equal weight decline priced alongside.

Complete The Lookecommerce-pro-upsell-sections-complete-the-lookOne outfit photo itemized with roles and the wearer's height and size in the footer.

Complete The Set Progressecommerce-pro-upsell-sections-complete-the-set-progressOwned and missing pieces of the set, same hides as the only argument.

Cross Sell Bannerecommerce-pro-upsell-sections-cross-sell-bannerOne product recommended to owners of another, with the relationship stated.

Frequently Bought Togetherecommerce-pro-upsell-sections-frequently-bought-togetherCheckable companions with a live total and real attachment rates printed per item.

Gift Wrap Upsell Rowecommerce-pro-upsell-sections-gift-wrap-upsell-rowThe $6 wrap shown for real, with the hand written note revealed on selection.

Membership Upsell Mathecommerce-pro-upsell-sections-membership-upsell-mathA perks list beside a checkout receipt that admits joining costs more today, shows when it pays off, with join and stay a guest buttons.

Post Purchase Upsellecommerce-pro-upsell-sections-post-purchase-upsellOne add riding the same box, declinable in a tap, never chaining to another.

Protection Plan Pickerecommerce-pro-upsell-sections-protection-plan-pickerA product row above single choice coverage tiers, the free warranty listed as an equal option, with a live total and a continue button.

Recently Viewed Rowecommerce-pro-upsell-sections-recently-viewed-rowThe browsing trail with per item dismissal and a privacy footer, memory with manners.

Replenishment Reminder Cardecommerce-pro-upsell-sections-replenishment-reminder-cardThe reorder timed by your own usage math, one dated email, not a subscription.

Setup Service Upsellecommerce-pro-upsell-sections-setup-service-upsellThe first wax at the bench for $12, with the honest counter offer and the adoption rate published.

Shipping Threshold Nudgeecommerce-pro-upsell-sections-shipping-threshold-nudgeA live progress bar toward the free shipping threshold, three small items sized to close the gap, and the flat rate as a fair alternative.

Spare Parts Attach Rowecommerce-pro-upsell-sections-spare-parts-attach-rowTwo spares at the cart with an honest counter on who actually needs them and a skip.

Tiered Bundle Builderecommerce-pro-upsell-sections-tiered-bundle-builderPick any pieces, the discount steps at two and three, the math updates live.

Trade Up Comparisonecommerce-pro-upsell-sections-trade-up-comparisonTwo product cards side by side above a spec table with the price delta itemized, an honest downside row, and a button per choice.

You May Also Likeecommerce-pro-upsell-sections-you-may-also-likeFour recommendations that each print why they were chosen above the card.

Empty Wishlist Stateecommerce-pro-wishlist-sections-empty-wishlist-stateA centered empty wishlist with a heart badge, headline, a three row explainer of what saving does, and a recently viewed product strip.

Household Shared Listecommerce-pro-wishlist-sections-household-shared-listA shared household wishlist with an avatar stack above a two column card grid where each item carries its adder avatar, reason, and duplicate flag.

Price Drop Alerts Listecommerce-pro-wishlist-sections-price-drop-alerts-listWatched items, saved versus current price, one real drop and one frozen for 14 months.

Registry Mode Panelecommerce-pro-wishlist-sections-registry-mode-panelThe wishlist as a registry with claimed states, group gifting, and anonymity rules.

Restock Watch Listecommerce-pro-wishlist-sections-restock-watch-listA restock queue with one back in stock item held on a deadline above a list of waiting items showing queue position and supply notes.

Share Wishlist Cardecommerce-pro-wishlist-sections-share-wishlist-cardA share link as a code chip with three privacy rules stated before the optional occasion date is asked for.

Shared List Guest Viewecommerce-pro-wishlist-sections-shared-list-guest-viewTwo column guest view of a shared wishlist with owner intro, occasion facts, claiming rules, and a thumbnail item list with claim buttons.

Wishlist Alert Settingsecommerce-pro-wishlist-sections-wishlist-alert-settingsA two column alert settings panel defining what each notification means on the left and a bordered stack of labeled switch rows on the right.

Wishlist Boards Gridecommerce-pro-wishlist-sections-wishlist-boards-gridAccount overview of three named wishlist boards as thumbnail strip cards with item counts and privacy captions, plus a dashed new list tile.

Wishlist Grid Pageecommerce-pro-wishlist-sections-wishlist-grid-pageSaved items as a product grid with live status captions and a single button that adds only the in stock ones.

Wishlist With Prioritiesecommerce-pro-wishlist-sections-wishlist-with-prioritiesFive items grouped under three honest tiers with owner notes, and the admission the store ignores them.

3D Feature Carouselecommerce-product-features-3d-feature-carouselA rotating carousel that shows product features on 3D cards with depth and motion. Great for highlighting a few standout capabilities on a landing page.

Alternating Featuresecommerce-product-features-alternating-featuresStacked 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.

Animated Features Gridecommerce-product-features-animated-features-gridA grid of feature cards with icons and motion that triggers as cards enter view. Adds life to a benefits section without burying the message.

Before After Comparisonecommerce-product-features-before-after-comparisonA slider that wipes between two product images so buyers see the difference at a glance. Ideal for skincare, editing tools, or cleaning results.

Carousel Feature Showcaseecommerce-product-features-carousel-feature-showcaseA swipeable carousel that steps through product features with image and copy per slide. Fits compact pages where space for many cards is tight.

Expandable Features Gridecommerce-product-features-expandable-features-gridA grid of feature cards that open to reveal more detail on click. Keeps the overview tidy while letting curious shoppers dig into the specifics.

Feature Accordionecommerce-product-features-feature-accordionStacked 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.

Feature Comparison Tableecommerce-product-features-feature-comparison-tableA table that lines up features across plans or models with clear check marks. Helps shoppers weigh every option and pick the right product fast.

Feature Tabs Navigationecommerce-product-features-feature-tabs-navigationTabbed sections that swap feature content as buyers click each label. Organizes a deep feature set into bite sized views on one tidy single panel.

Feature Timelineecommerce-product-features-feature-timelineA vertical timeline that walks through product features in sequence. Useful for showing a setup flow or how capabilities build on each other.

Features Testimonial Comboecommerce-product-features-features-testimonial-comboA layout that pairs product features with a customer quote beside them. Backs each benefit claim with real proof to win hesitant buyers over.

Horizontal Scrolling Featuresecommerce-product-features-horizontal-scrolling-featuresA row of feature panels that scroll sideways as the page moves. Shows many product capabilities in a compact, playful strip that invites swiping.

Image Hotspot Featuresecommerce-product-features-image-hotspot-featuresA product image dotted with clickable hotspots that reveal each feature in place. Perfect for showing exactly where a capability lives on the item.

Interactive Feature Tabsecommerce-product-features-interactive-feature-tabsTabs paired with a live preview that updates as buyers select a feature. Lets shoppers explore what each capability looks like before they buy.

Simple Feature Gridecommerce-product-features-simple-feature-gridA 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.

Split Image Featuresecommerce-product-features-split-image-featuresA 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.

Stats Feature Showcaseecommerce-product-features-stats-feature-showcaseA section that pairs product features with hard numbers and metrics. Use it when figures like speed or savings make the strongest case to buy.

Timeline Feature Showcaseecommerce-product-features-timeline-feature-showcaseA timeline that reveals product features step by step as buyers scroll. Good for guiding readers through a journey from first use to results.

Video Feature Showcaseecommerce-product-features-video-feature-showcaseA section that pairs an embedded product video with supporting feature copy. Shows the item in action when motion sells better than a still.

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

Comparison Listecommerce-product-list-comparison-listA side by side list lining up products with specs, prices, and features in columns. Helps shoppers weigh options before they commit to a purchase.

Featured Listecommerce-product-list-featured-listA list spotlighting select products with large imagery, descriptions, and prices. Highlights bestsellers or promotions on a storefront landing page.

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

Gallery Listecommerce-product-list-gallery-listAn image first list showing products as large photo cards with name and price. Suits visual categories like fashion, home decor, and art prints.

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

Masonry Listecommerce-product-list-masonry-listA masonry grid fitting product cards of varying heights into tight columns. Works well for mixed imagery in lookbooks and curated collections.

Table Listecommerce-product-list-table-listA table listing products in rows with columns for image, name, stock, and price. Ideal for dashboards, admin catalogs, and bulk inventory views.

Timeline Listecommerce-product-list-timeline-listA vertical timeline arranging products or drops by date with images and prices. Good for release schedules, new arrivals, and limited editions.

Classic Overviewecommerce-product-overview-classic-overviewA 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.

Compact Overviewecommerce-product-overview-compact-overviewA tight product layout that fits the image, price, options, and buy button above the fold. Built for small screens and quick mobile purchases.

Gallery Overviewecommerce-product-overview-gallery-overviewA 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.

Immersive Overviewecommerce-product-overview-immersive-overviewA 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.

Minimal Overviewecommerce-product-overview-minimal-overviewA 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.

Modern Overviewecommerce-product-overview-modern-overviewA contemporary product page mixing a bold image grid, accent typography, and clear pricing. Suits fashion and lifestyle brands that want a fresh look.

Centered Icon Promoecommerce-promo-sections-centered-icon-promoA centered promo with an icon, headline, and supporting copy. Highlights a single offer or shipping perk in the middle of a store landing page.

Centered Image Gridecommerce-promo-sections-centered-image-gridA centered promo paired with a tidy grid of product images. Showcases a curated collection or a seasonal lineup right on your shop homepage.

Centered Simple Promoecommerce-promo-sections-centered-simple-promoA 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.

Countdown Timer Promoecommerce-promo-sections-countdown-timer-promoA promo block with a live countdown timer, headline, and call to action. Builds urgency around flash sales and limited time offers that expire soon.

Fading Background Testimonialecommerce-promo-sections-fading-background-testimonialA testimonial promo with a soft fading background and a customer quote. Builds trust on a product page while reinforcing the offer you are running.

Full Width Large Contentecommerce-promo-sections-full-width-large-contentA full width promo with oversized type and a clear button. Commands attention across the whole page for a headline campaign or a seasonal launch.

Image Asideecommerce-promo-sections-image-asideA 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.

Large Image Splitecommerce-promo-sections-large-image-splitA 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.

Multi Column Cardsecommerce-promo-sections-multi-column-cardsA promo arranged as several cards in columns, each holding its own offer. Presents multiple deals or categories side by side on one store page.

Simple Bannerecommerce-promo-sections-simple-bannerA 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.

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

Compact Cartecommerce-shopping-cart-compact-cartA 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.

Floating Cartecommerce-shopping-cart-floating-cartA 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.

Mini Cartecommerce-shopping-cart-mini-cartA 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.

Modern Cartecommerce-shopping-cart-modern-cartA clean cart layout with product images, quantity steppers, and an order summary. Suits a full cart page where shoppers review items before checkout.

Sidebar Cartecommerce-shopping-cart-sidebar-cartA 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.

Sticky Cartecommerce-shopping-cart-sticky-cartA 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.

Achievementsmarketing-about-sections-achievementsA 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.

Animated Statsmarketing-about-sections-animated-statsHeadline 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.

Brand Valuesmarketing-about-sections-brand-valuesA 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.

Company Culturemarketing-about-sections-company-culturePhotos 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.

Company Valuesmarketing-about-sections-company-valuesA 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.

Diversity & Inclusionmarketing-about-sections-diversity-inclusionA section pairing a statement on belonging with supporting stats and imagery. Use it to show how your company invests in people and fairness.

Foundersmarketing-about-sections-foundersPortrait 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.

Mission Statementmarketing-about-sections-mission-statementA 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.

Press & Recognitionsmarketing-about-sections-press-recognitionsA 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.

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

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

Stats Gridmarketing-about-sections-stats-gridA 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.

Tabsmarketing-about-sections-tabsTabbed 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.

Team Gridmarketing-about-sections-team-gridA responsive grid of headshots with names, titles, and social links. Use it on an about page to introduce the real people behind your product.

Timelinemarketing-about-sections-timelineA 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.

Two Columnmarketing-about-sections-two-columnA 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.

Valuesmarketing-about-sections-valuesA 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.

With Imagemarketing-about-sections-with-imageAn 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.

Floatingmarketing-announcement-banners-floatingA banner that floats above page content with rounded corners and a dismiss button. Announce a promotion or update without pushing the layout down.

Simple Centeredmarketing-announcement-banners-simple-centeredA 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.

With Actionmarketing-announcement-banners-with-actionA 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.

With Countdownmarketing-announcement-banners-with-countdownA 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.

With Imagemarketing-announcement-banners-with-imageA 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.

With Social Proofmarketing-announcement-banners-with-social-proofA 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.

Author Spotlightmarketing-blog-sections-author-spotlightA 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.

Carouselmarketing-blog-sections-carouselA 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.

Case Study Showcasemarketing-blog-sections-case-study-showcaseA 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.

Category Filtermarketing-blog-sections-category-filterA 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.

Compact Listmarketing-blog-sections-compact-listA 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.

Expert Roundupmarketing-blog-sections-expert-roundupA grid collecting quotes and headshots from several contributors. Use it to package an opinion roundup or panel feature into one shareable post.

Featured Listmarketing-blog-sections-featured-listA 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.

Featured With Sidebarmarketing-blog-sections-featured-with-sidebarA 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.

Hero Focusmarketing-blog-sections-hero-focusA 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.

Interview Formatmarketing-blog-sections-interview-formatA question and answer layout with a guest portrait and intro. Use it to publish interviews in a clear, readable format on an editorial blog.

Magazine Layoutmarketing-blog-sections-magazine-layoutAn 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.

Minimal Blogmarketing-blog-sections-minimal-blogA 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.

Newsletter Blogmarketing-blog-sections-newsletter-blogAn article feed combined with an email signup form and short prompt. Use it to grow a subscriber list while showcasing your most recent posts.

Podcast Listmarketing-blog-sections-podcast-listA list of episode cards with cover art, titles, and play controls. Use it to publish a podcast feed where listeners browse and start episodes.

Simple Gridmarketing-blog-sections-simple-gridAn 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.

Timeline Blogmarketing-blog-sections-timeline-blogA vertical timeline that orders posts by date with markers and dots. Use it for a changelog, release notes, or a chronological story archive.

Video Blogmarketing-blog-sections-video-blogA 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.

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

Career Pathmarketing-careers-career-pathA career path layout showing role progression, levels, and growth milestones. Helps applicants picture how they advance after joining your team.

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

Department Positionsmarketing-careers-department-positionsA 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.

Department Showcasemarketing-careers-department-showcaseA department showcase with cards describing each team, its focus, and people. Helps candidates understand where they fit before browsing open roles.

Employee Benefitsmarketing-careers-employee-benefitsAn employee benefits grid covering insurance, learning budgets, and flexible hours. Shows candidates the full package while they consider applying.

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

Interview Processmarketing-careers-interview-processA step by step interview process timeline running from first application to final offer. Sets expectations so candidates know what each hiring stage involves.

Job Boardmarketing-careers-job-boardA 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.

Job Detailsmarketing-careers-job-detailsA single job details page with description, responsibilities, and an apply button. Gives candidates everything they need to decide and submit.

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

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

Basic Changelogmarketing-changelogs-basic-changelogA straightforward changelog list with version numbers, dates, and bullet points. Use it to post release notes when you want clarity over visual flourish.

Categorized Changelogmarketing-changelogs-categorized-changelogRelease 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.

Compact Changelogmarketing-changelogs-compact-changelogA dense changelog that packs many versions into a tight column. Ideal when you ship often and want the full history visible without heavy scrolling.

Expandable Changelogmarketing-changelogs-expandable-changelogCollapsed version entries that open on click to reveal full details. Keeps a long release history short while letting readers drill into any update.

Grid Changelogmarketing-changelogs-grid-changelogRelease 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.

Grouped Changelogmarketing-changelogs-grouped-changelogUpdates clustered by month or release so related entries sit together. Good for products with frequent shipping where context across versions matters.

Interactive Changelogmarketing-changelogs-interactive-changelogA changelog with filters and clickable entries that reveal more detail. Lets visitors explore updates by type and focus on the releases that matter.

Minimalist Changelogmarketing-changelogs-minimalist-changelogA 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.

Tabbed Changelogmarketing-changelogs-tabbed-changelogRelease notes organized into tabs by version or category. Lets readers switch between updates without scrolling, keeping each release neatly contained.

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

Timeline Changelogmarketing-changelogs-timeline-changelogA 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.

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

Split With Detailsmarketing-contact-sections-split-with-detailsA 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.

With Mapmarketing-contact-sections-with-mapA 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.

Awards CTAmarketing-cta-sections-awards-ctaA 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.

Banner With Backgroundmarketing-cta-sections-banner-with-backgroundA full width banner with a background image, headline, and button. Anchors a campaign message across the top or bottom of any marketing page.

Case Study CTAmarketing-cta-sections-case-study-ctaA 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.

Countdown Timermarketing-cta-sections-countdown-timerA call to action with a live countdown clock beside a headline and button. Drives urgency for a sale, launch, or webinar registration deadline.

CTA With Testimonialmarketing-cta-sections-cta-with-testimonialA 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.

FAQ CTAmarketing-cta-sections-faq-ctaA 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.

Feature Gridmarketing-cta-sections-feature-gridA 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.

Gradient CTAmarketing-cta-sections-gradient-ctaA 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.

Image With Textmarketing-cta-sections-image-with-textA 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.

Integrations CTAmarketing-cta-sections-integrations-ctaA call to action surrounded by logos of supported tools and platforms. Reassures teams about compatibility before they sign up and connect apps.

Newsletter Formmarketing-cta-sections-newsletter-formA signup section with an email input and subscribe button under a short pitch. Collects leads for a newsletter, waitlist, or product updates.

Quick Contact CTAmarketing-cta-sections-quick-contact-ctaA 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.

Simple Centeredmarketing-cta-sections-simple-centeredA 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.

Split With Imagemarketing-cta-sections-split-with-imageA 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.

Stats CTAmarketing-cta-sections-stats-ctaA call to action that leads with key metrics like users or uptime, then a button. Uses hard numbers to convince visitors before they commit.

Tab CTAmarketing-cta-sections-tab-ctaA call to action with tabbed content that swaps messages by audience or use case. Lets visitors pick a path before clicking the matching button.

Video CTAmarketing-cta-sections-video-ctaA 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.

Zigzag CTAmarketing-cta-sections-zigzag-ctaA call to action with alternating text and image rows that lead into a button. Walks readers through benefits before the final closing prompt.

Accordion With Backgroundmarketing-faq-sections-accordion-with-backgroundAn 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.

Card Gridmarketing-faq-sections-card-gridA 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.

Center Alignedmarketing-faq-sections-center-alignedA 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.

Code Snippetsmarketing-faq-sections-code-snippetsAn FAQ layout with formatted code blocks inside answers. Built for developer docs where responses need syntax examples, commands, or configuration shown.

Contact Formmarketing-faq-sections-contact-formAn 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.

Image Illustratedmarketing-faq-sections-image-illustratedAn 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.

Right Alignedmarketing-faq-sections-right-alignedA 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.

Search Filtermarketing-faq-sections-search-filterAn 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.

Sidebar Navigationmarketing-faq-sections-sidebar-navigationAn FAQ layout with a sidebar of categories beside the answers. Lets visitors switch topics quickly and keeps large help sections organized and navigable.

Simple 2 Cols Gridmarketing-faq-sections-simple-2-cols-gridA 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.

Simple With Divider And Iconmarketing-faq-sections-simple-with-divider-and-iconA 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.

Tabbed Categoriesmarketing-faq-sections-tabbed-categoriesAn FAQ section with tabs that group questions by category. Visitors pick a topic and see only relevant answers, keeping a broad help area uncluttered.

Timeline FAQmarketing-faq-sections-timeline-faqAn FAQ laid out as a vertical timeline, walking visitors through questions in order. Suited to onboarding or step by step guides where sequence matters.

3D Cardsmarketing-feature-sections-3d-cardsFeature 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.

Card Gridmarketing-feature-sections-card-gridA 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.

Feature Accordionmarketing-feature-sections-feature-accordionStacked 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.

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

Feature Comparisonmarketing-feature-sections-feature-comparisonSets 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 Statsmarketing-feature-sections-feature-statsFeature copy paired with bold metrics like uptime, users, or speed. Backs your claims with numbers and builds trust on a homepage or product overview.

Feature Timelinemarketing-feature-sections-feature-timelineA 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.

Feature Videosmarketing-feature-sections-feature-videosA 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.

Feature Wizardmarketing-feature-sections-feature-wizardA 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.

Grid Hovermarketing-feature-sections-grid-hoverA 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.

Simplemarketing-feature-sections-simpleA 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.

Stepsmarketing-feature-sections-stepsNumbered 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.

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

With Carouselmarketing-feature-sections-with-carouselFeature 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.

With Comparisonmarketing-feature-sections-with-comparisonA 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.

With Imagesmarketing-feature-sections-with-imagesAlternating rows of feature copy beside supporting images. A reliable pattern for explaining several capabilities while keeping the page lively and balanced.

With Statsmarketing-feature-sections-with-statsFeature descriptions interleaved with headline numbers and labels. Pairs the what with the proof so visitors trust the results on a product or pricing page.

With Tabsmarketing-feature-sections-with-tabsTabbed feature panels that swap content and visuals as visitors switch tabs. Organizes many capabilities into one compact, tidy section that stays readable.

Logo Cloudmarketing-footers-logo-cloudA 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.

Minimalmarketing-footers-minimalA 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.

Multi Columnmarketing-footers-multi-columnA footer split into grouped link columns for products, company, and resources. Organizes deep site navigation on a large marketing or app homepage.

Simplemarketing-footers-simpleA 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.

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

Carousel Gallerymarketing-gallery-carousel-galleryA 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.

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

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

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

Immersive Gallerymarketing-gallery-immersive-galleryAn 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.

Polaroid Gallerymarketing-gallery-polaroid-galleryA 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.

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

Booking Formmarketing-hero-forms-booking-formA 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.

Center Aligned Search With Tagsmarketing-hero-forms-center-aligned-search-with-tagsA 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.

Center Aligned With A Formmarketing-hero-forms-center-aligned-with-a-formA centered hero pairing a headline and subtext with a short inline form. Collects an email or signup in one view to start onboarding immediately.

Contact Form With Backgroundmarketing-hero-forms-contact-form-with-backgroundA 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.

Contest Entry Formmarketing-hero-forms-contest-entry-formA hero with a contest entry form for name, email, and answer fields. Drives signups and excitement around a giveaway or promotional campaign.

Early Access Formmarketing-hero-forms-early-access-formA 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.

Event Registration Countdownmarketing-hero-forms-event-registration-countdownA hero combining a registration form with a live countdown timer. Pushes visitors to claim a spot before an event or sale window closes.

Feedback Survey Formmarketing-hero-forms-feedback-survey-formA hero with a feedback survey form using ratings and short answers. Gathers visitor opinions on a product or service in a single focused view.

Floating Card With Gradientmarketing-hero-forms-floating-card-with-gradientA hero with a floating form card resting over a soft gradient backdrop. Highlights a signup field and pulls the eye to one clear action.

Free Ebook Formmarketing-hero-forms-free-ebook-formA 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.

Free Trial Signup Formmarketing-hero-forms-free-trial-signup-formA hero with a free trial signup form for email and password fields. Starts new accounts the moment a visitor decides to try the product.

Image And Formmarketing-hero-forms-image-and-formA 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.

Job Application Formmarketing-hero-forms-job-application-formA hero with a job application form for contact details and a resume upload. Lets candidates apply right from the top of a careers page.

Newsletter Subscriptionmarketing-hero-forms-newsletter-subscriptionA hero with a newsletter subscription field and a short value pitch. Turns first time visitors into subscribers with one quick email entry.

Newsletter With Social Proofmarketing-hero-forms-newsletter-with-social-proofA hero pairing a newsletter form with subscriber counts and logos. Uses social proof to convince visitors the list is worth joining today.

Product Customizer Formmarketing-hero-forms-product-customizer-formA hero with a product customizer form for options like size and color. Lets shoppers configure their choice and preview it before checkout.

Quiz Assessment Formmarketing-hero-forms-quiz-assessment-formA hero with a quiz or assessment form that walks through scored questions. Engages visitors and routes them toward a tailored recommendation.

Schedule Demo Formmarketing-hero-forms-schedule-demo-formA hero with a schedule demo form for name, company, and a time slot. Books sales calls with prospects right where they first arrive.

Sign Up Formmarketing-hero-forms-sign-up-formA 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.

Split Screen Multi Stepmarketing-hero-forms-split-screen-multi-stepA split screen hero with a multi step form and a progress indicator. Guides visitors through a longer signup without overwhelming them at once.

Subscription Form With Togglemarketing-hero-forms-subscription-form-with-toggleA 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.

Two Factor Verificationmarketing-hero-forms-two-factor-verificationA hero with a two factor verification form for a one time security code. Confirms identity during signin to keep new accounts safe and secure.

User Feedback Formmarketing-hero-forms-user-feedback-formA hero with a user feedback form for comments, ratings, and contact info. Collects honest input from visitors to guide the next product update.

Webinar Registration Formmarketing-hero-forms-webinar-registration-formA hero with a webinar registration form for name, email, and session time. Fills seats for a live session straight from the landing page top.

3D Isometric Heromarketing-hero-sections-3d-isometric-heroA 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.

Animated Features Heromarketing-hero-sections-animated-features-heroA 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.

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

Animated Text Heromarketing-hero-sections-animated-text-heroA 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.

Centred With Imagemarketing-hero-sections-centred-with-imageA centered hero with a headline, subtext, and CTA above a wide product image. A balanced, classic opener for marketing and SaaS landing pages.

Chat Preview Heromarketing-hero-sections-chat-preview-heroA hero pairing a headline and CTA with a live chat conversation preview. Ideal for messaging, support, or AI assistant products you want to demo.

Countdown Heromarketing-hero-sections-countdown-heroA hero with a ticking countdown timer beside a headline and CTA. Builds urgency for launches, sales, webinars, and limited time offer landing pages.

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

Gradient Mesh Heromarketing-hero-sections-gradient-mesh-heroA hero with a soft mesh gradient behind a centered headline and CTA. Gives a calm, premium backdrop to SaaS, design, and startup landing pages.

Image Carousel Heromarketing-hero-sections-image-carousel-heroA 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.

Image With Reviewsmarketing-hero-sections-image-with-reviewsA 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.

Interactive Metricsmarketing-hero-sections-interactive-metricsA 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.

Mobile App Heromarketing-hero-sections-mobile-app-heroA 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.

Multi-Step CTA Heromarketing-hero-sections-multi-step-cta-heroA 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.

Particles Background Heromarketing-hero-sections-particles-background-heroA hero with animated particles drifting behind a centered headline and CTA. A dynamic, tech forward opener for software and startup landing pages.

Product Carousel Heromarketing-hero-sections-product-carousel-heroA 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.

Progress Tracker Heromarketing-hero-sections-progress-tracker-heroA 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.

Search Barmarketing-hero-sections-search-barA hero centered on a prominent search bar below a headline and subtext. Ideal for directories, docs, marketplaces, and content heavy landing pages.

Simple Centredmarketing-hero-sections-simple-centredA 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.

Social Proof Heromarketing-hero-sections-social-proof-heroA 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.

Split Content Heromarketing-hero-sections-split-content-heroA 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.

Split Image Heromarketing-hero-sections-split-image-heroA 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.

Split With Videomarketing-hero-sections-split-with-videoA 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.

Testimonial Carouselmarketing-hero-sections-testimonial-carouselA 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.

Trust Indicatorsmarketing-hero-sections-trust-indicatorsA hero leading with security badges, certifications, and partner logos. Reassures cautious buyers at the top of a landing or enterprise sales page.

Video Background Heromarketing-hero-sections-video-background-heroA 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.

With 3D Mockupmarketing-hero-sections-with-3d-mockupA hero featuring a rotating 3D device mockup beside a headline and CTA. Presents your app or product with depth on a modern landing page.

With API Previewmarketing-hero-sections-with-api-previewA hero pairing a headline and CTA with a live API request and response preview. Built for developer tools and platforms aimed at technical buyers.

With App Showcasemarketing-hero-sections-with-app-showcaseA 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.

With Bento Gridmarketing-hero-sections-with-bento-gridA 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.

With Code Previewmarketing-hero-sections-with-code-previewA 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.

With Content Tabsmarketing-hero-sections-with-content-tabsA 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.

With Dashboardmarketing-hero-sections-with-dashboardA 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.

With Email Inputmarketing-hero-sections-with-email-inputA hero centered on an inline email capture form below a headline and subtext. Ideal for waitlists, newsletters, and early access landing pages.

With Feature Cardsmarketing-hero-sections-with-feature-cardsA 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.

With Feature Timelinemarketing-hero-sections-with-feature-timelineA 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.

With Integration Showcasemarketing-hero-sections-with-integration-showcaseA hero showing a grid of integration logos beside a headline and CTA. Highlights the tools your product connects to on a platform landing page.

With Product Screenshotsmarketing-hero-sections-with-product-screenshotsA 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.

With Team Gridmarketing-hero-sections-with-team-gridA 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.

With Terminalmarketing-hero-sections-with-terminalA 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.

2 Cols Gridmarketing-icon-sections-2-cols-gridA 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.

Animated Icon Gridmarketing-icon-sections-animated-icon-gridA 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.

Centred Description With Icon Blocksmarketing-icon-sections-centred-description-with-icon-blocksA centred intro paragraph above a row of icon blocks. Frames a section theme, then lists supporting features in tidy, evenly spaced columns.

Circle Icons Centre Alignedmarketing-icon-sections-circle-icons-centre-alignedCentre 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.

Compact Metric Listmarketing-icon-sections-compact-metric-listA tight vertical list pairing icons with numbers and labels. Shows key metrics in a small footprint, ideal for sidebars or dense feature pages.

Description On Left Icon Blocks On Rightmarketing-icon-sections-description-on-left-icon-blocks-on-rightA 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.

Expandable Icon Cardsmarketing-icon-sections-expandable-icon-cardsIcon cards that expand on click to reveal more detail. Keeps the section compact while letting curious visitors dig into any feature they choose.

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

Horizontal Scrolling Iconsmarketing-icon-sections-horizontal-scrolling-iconsA horizontal strip of icon cards users swipe or scroll through. Fits many features in limited height and reads naturally on mobile screens.

Icon Feature Carouselmarketing-icon-sections-icon-feature-carouselA carousel rotating through icon features one slide at a time. Highlights a long list of capabilities without crowding the page or overwhelming readers.

Icon Stats Gridmarketing-icon-sections-icon-stats-gridA 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.

Icon Tabs Categoriesmarketing-icon-sections-icon-tabs-categoriesCategory tabs marked with icons that filter the features shown below. Helps visitors jump straight to the feature set that matches their needs.

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

Icons With Tooltipsmarketing-icon-sections-icons-with-tooltipsA row of icons that reveal a short tooltip on hover. Packs many features into a small space while keeping extra detail one cursor away.

Interactive Icon Showcasemarketing-icon-sections-interactive-icon-showcaseAn interactive panel where hovering an icon updates the description beside it. Invites visitors to explore features at their own pace and stay engaged.

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

Minimal Stats Tilesmarketing-icon-sections-minimal-stats-tilesClean 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.

Radial Icon Layoutmarketing-icon-sections-radial-icon-layoutIcons arranged in a circular, radial pattern around a central label. A distinctive way to show how features connect to one core product idea.

Solid Icon With Hover Effectmarketing-icon-sections-solid-icon-with-hover-effectSolid filled icons that shift colour or lift on hover. Adds tactile feedback to a feature grid so the section feels responsive as visitors browse.

Stacked Cardsmarketing-icon-sections-stacked-cardsVertically 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.

API Previewmarketing-integrations-api-previewA 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.

Carouselmarketing-integrations-carouselA 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.

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

Featured Showcasemarketing-integrations-featured-showcaseA large card spotlighting one key integration with its logo, summary, and a link. Use it to highlight a flagship partner above the full list.

Simple Gridmarketing-integrations-simple-gridA 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.

Cards On Imagesmarketing-masonry-sections-cards-on-imagesA 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.

Calculatormarketing-pricing-sections-calculatorA 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.

Cardsmarketing-pricing-sections-cardsA 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.

Custom Buildermarketing-pricing-sections-custom-builderA plan builder where buyers pick features and quantities to assemble a quote. Use it for modular products where every customer needs a different mix.

Enterprisemarketing-pricing-sections-enterpriseA 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.

Feature Gridmarketing-pricing-sections-feature-gridA 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.

Horizontalmarketing-pricing-sections-horizontalA 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.

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

Minimalistmarketing-pricing-sections-minimalistA 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.

Modernmarketing-pricing-sections-modernA 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.

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

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

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

Testimonialmarketing-pricing-sections-testimonialA 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.

Togglemarketing-pricing-sections-toggleA 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.

About Split With Quotemarketing-pro-about-sections-about-split-with-quoteAn origin story in two paragraphs beside a founder pull quote on a muted panel.

About With Statsmarketing-pro-about-sections-about-with-statsTwo paragraphs of company story beside a ruled grid of four numbers with sentence labels.

Backers and Angelsmarketing-pro-about-sections-backers-and-angelsA muted band of two fund wordmarks above a ruled two column list of six angel operators, closed by a no board seats line.

By the Numbersmarketing-pro-about-sections-by-the-numbersA split about section pairing narrative copy with a 2x2 grid of oversized stats in hairline ring cards and a muted strip of three milestone years.

Company Fact Sheetmarketing-pro-about-sections-company-fact-sheetNarrative copy beside a ruled definition list ledger stating founded date, team, customers, funding, and ownership as plain label and value rows.

Founder Lettermarketing-pro-about-sections-founder-letterA first person letter in a narrow reading column with a salutation, three short paragraphs, and a serif signature above the founder portrait.

Founders Q and Amarketing-pro-about-sections-founders-qaA two column about section pairing founder portraits and an intro with a ruled list of five real customer questions answered in short attributed paragraphs.

Funding History Listmarketing-pro-about-sections-funding-history-listThe complete capital ledger including the round not raised and the one declined.

How We Make Moneymarketing-pro-about-sections-how-we-make-moneyA business model section splitting a labeled revenue mix with hairline percentage bars beside a ruled list of three funding facts.

Leadership Gridmarketing-pro-about-sections-leadership-gridSix leaders in a borderless portrait grid, each with a role and the one thing they answer for, plus a flat titles note.

Manifesto Dark Bandmarketing-pro-about-sections-manifesto-dark-bandThree belief statements set large on a primary band with a dated signature line.

Mission and Valuesmarketing-pro-about-sections-mission-and-valuesAn about section opening with a mission statement, then four value cards with soft square icons and a quiet attribution line linking to careers.

Mission Statement Centeredmarketing-pro-about-sections-mission-statement-centeredOne oversized centered mission statement with a single supporting paragraph.

Offices Listmarketing-pro-about-sections-offices-listOffice cards with pin icons, addresses, and a note on what each city does for customers.

Operating Principles Gridmarketing-pro-about-sections-operating-principles-gridSix working rules as cards, each ending with what the principle actually cost.

Press Mentionsmarketing-pro-about-sections-press-mentionsEarned headlines as linked rows with styled text wordmarks for each publication.

Principles Numberedmarketing-pro-about-sections-principles-numberedFour numbered operating principles in wide ruled rows with full paragraph arguments.

Story Timelinemarketing-pro-about-sections-story-timelineThe company history as five year marked chapters on a vertical hairline timeline.

Values Gridmarketing-pro-about-sections-values-gridSix bordered value cards, each with an icon disc and the working rule the value produces.

What We Don't Domarketing-pro-about-sections-what-we-dont-doA two column about section pairing a heading and argument with a ruled list of six firm refusals, each stating the reason it holds.

Working Weekmarketing-pro-about-sections-working-weekAn about section laying out five day columns on hairline top rules, each naming its ritual and what it protects, closed by a weekly meeting tally.

Affiliate Hero Splitmarketing-pro-affiliate-sections-affiliate-hero-splitA partner program hero with the terms in one paragraph beside an earnings panel mockup.

Application CTA Cardmarketing-pro-affiliate-sections-application-cta-cardA closing CTA card pairing the apply buttons with a panel listing every application field, why it is asked, and the approval rate.

Audience Fit Gridmarketing-pro-affiliate-sections-audience-fit-gridA four card grid of partner profiles, each with an icon, fit reason, earnings range, and ramp time, above a note on who to skip.

Commission Tiers Tablemarketing-pro-affiliate-sections-commission-tiers-tableFour partner tiers with the requirements column programs usually omit.

How Referrals Work Stepsmarketing-pro-affiliate-sections-how-referrals-work-stepsThe four attribution mechanics written out, including the two partner collision case.

Partner Case Studymarketing-pro-affiliate-sections-partner-case-studyA two column case study pairing a partner story, quote, and dated milestones with an earnings panel of monthly bars and summary rows.

Partner Quotes Gridmarketing-pro-affiliate-sections-partner-quotes-gridThree partner quote cards from different channels, each led by a verified payout figure and closed with avatar attribution.

Payout Methods Gridmarketing-pro-affiliate-sections-payout-methods-gridA four card grid of payout methods, each with an icon, blurb, and rows for minimum, fee, arrival time, and coverage, above a schedule note.

Payout Stats Bandmarketing-pro-affiliate-sections-payout-stats-bandProgram payout totals with the honest median and a public on time streak.

Program FAQ Accordionmarketing-pro-affiliate-sections-program-faq-accordionSix pre application questions in an accordion beside the heading, with a direct email card promising a one day human reply.

Program Rules Splitmarketing-pro-affiliate-sections-program-rules-splitTwo side by side rule cards listing allowed and prohibited promotion tactics with reasons, closed by a plain enforcement note.

Promo Asset Kit Gridmarketing-pro-affiliate-sections-promo-asset-kit-gridA six card grid of ready made promo asset packs, each with a small preview mockup, description, and format meta line.

Terms Changelog Listmarketing-pro-affiliate-sections-terms-changelog-listA two column terms changelog pairing the heading and advance notice promise with a dated list of rate and rule changes, each carrying a tag.

Terms Comparison Tablemarketing-pro-affiliate-sections-terms-comparison-tableA three column table setting six program terms against typical affiliate defaults, with a sourcing note under the table.

Top Partners Leaderboardmarketing-pro-affiliate-sections-top-partners-leaderboardThe quarterly partner board with earnings by channel type, named only with consent.

Ai Boundaries Panelsmarketing-pro-ai-sections-ai-boundaries-panelsTwo ring framed panels under a centered heading listing what the assistant does and never does, closed by a contractual footnote.

Ai Chat Heromarketing-pro-ai-sections-ai-chat-heroAn AI hero with a chat mockup where the assistant answers with segment sizes and choices made.

Ai Drafts Demo Splitmarketing-pro-ai-sections-ai-drafts-demo-splitA drafting demo that shows the human edits, two corrected lines feeding the workspace voice.

Ai Outcomes Statsmarketing-pro-ai-sections-ai-outcomes-statsA measured outcomes band with a centered heading, four ruled stat columns with values, labels, and detail lines, and a methodology footnote.

Ai Principles Listmarketing-pro-ai-sections-ai-principles-listFive AI commitments written plainly, each backed by a mechanism a buyer can verify.

Ai Release Timelinemarketing-pro-ai-sections-ai-release-timelineA dated model release log with versions, change summaries, category chips, and one rolled back entry under a header with a changelog link.

Ai Skeptics Faqmarketing-pro-ai-sections-ai-skeptics-faqA split section for skeptical AI questions, heading copy left and an accordion of five blunt answers right, first item opened.

Citation Trace Splitmarketing-pro-ai-sections-citation-trace-splitTwo column split pairing heading copy and three proof points with a cited answer card whose numbered markers resolve to listed source rows.

Copilot Compare Tablemarketing-pro-ai-sections-copilot-compare-tableCentered heading over a comparison table whose ruled rows pit a generic chatbot against the built-in assistant, closed by a sourcing footnote.

Data Governance Tablemarketing-pro-ai-sections-data-governance-tableCentered heading over a ruled table of six policy rows, each pairing a data commitment with a plain explanation, closed by a DPA link.

Eval Scores Chartmarketing-pro-ai-sections-eval-scores-chartEval pass rates per release as a shadcn line chart, including the regression we published.

Human Review Explainermarketing-pro-ai-sections-human-review-explainerThe three gates every AI draft passes, model, checks, human, with no autopilot setting.

Prompt Library Gridmarketing-pro-ai-sections-prompt-library-gridSix proven prompts as cards with categories, usage counts, and mono opening lines.

Usage Meter Cardmarketing-pro-ai-sections-usage-meter-cardAn AI usage panel with per feature bars and a capacity meter that is always full, no metering.

Voice Training Timelinemarketing-pro-ai-sections-voice-training-timelineHeading and intro above four milestone columns for days 1, 7, 30, and 90, each with a title, note, and a rising voice match meter.

Analyst Mentions Listmarketing-pro-awards-sections-analyst-mentions-listExact sentences from independent research with the firm, report, and date attached.

Analyst Quadrantmarketing-pro-awards-sections-analyst-quadrantSplit analyst recognition section pairing a drawn quadrant matrix of unnamed vendor dots with ruled report facts and a highlighted placement.

Award Spotlightmarketing-pro-awards-sections-award-spotlightSplit spotlight on one flagship award pairing a drawn laurel medallion panel with the verbatim jury citation and ruled judging facts.

Awards Timelinemarketing-pro-awards-sections-awards-timelineRecognition by year as ruled rows, from the first small badge to category leader.

Badge Comparison Tablemarketing-pro-awards-sections-badge-comparison-tableMatrix of review platform badges comparing us with two shortlisted rivals as filled and hollow dots, one badge conceded, totals per column.

Badge Criteriamarketing-pro-awards-sections-badge-criteriaPublished review badge thresholds as ruled requirement rows, the bar beside where you stand, met criteria as filled dots, one badge unearned.

Badge Wallmarketing-pro-awards-sections-badge-wallAward badges drawn as SVG laurel medallions with names and seasons, no raster assets.

Category Leader Gridmarketing-pro-awards-sections-category-leader-gridCurrent rank across eight product categories as cards with a large position numeral, quarters held, and a movement marker against last cycle.

Category Ratings Comparemarketing-pro-awards-sections-category-ratings-compareRuled list of review platform rating axes with paired meter bars comparing your score to the category average, losses included.

Entry Ledgermarketing-pro-awards-sections-entry-ledgerComplete ledger of award entries as ruled rows with year, award, outcome badge, and a lesson note, losses listed beside the wins.

Jury Panelmarketing-pro-awards-sections-jury-panelA grid of profile cards for the independent award judges, each with a portrait, an affiliation, the criterion scored, and one scoring note.

Rating Breakdown Chartmarketing-pro-awards-sections-rating-breakdown-chartThe full star distribution as a horizontal shadcn bar chart, one star reviews included.

Rating Trend Chartmarketing-pro-awards-sections-rating-trend-chartAn eight quarter line chart of the average review score against the category average, with a three stat summary row beneath.

Recognition Statsmarketing-pro-awards-sections-recognition-statsFour ruled stat columns counting badges held, Leader quarters, verified reviews, and first place categories, with a quarterly recount footnote.

Review Scores Bandmarketing-pro-awards-sections-review-scores-bandRatings from four review platforms as drawn medallions with stars and verified counts.

Reviewer Quotes Gridmarketing-pro-awards-sections-reviewer-quotes-gridSix lines lifted from verified reviews with star rows, one four star kept on purpose.

Announcement Barmarketing-pro-banners-announcement-barA slim muted strip with a highlighted lead word, one sentence of news, and an arrow link.

App Download Bannermarketing-pro-banners-app-download-bannerA smart app style strip with a rounded app icon, the name over a star rating and review count, a get the app button, and dismiss.

Bottom Docked Bannermarketing-pro-banners-bottom-docked-bannerA bottom pinned consent card with plain language copy and equal weight accept choices.

Countdown Bannermarketing-pro-banners-countdown-bannerA bordered event band with the launch date, a day, hour, and minute countdown readout, and a register button.

Dismissible Announcement Barmarketing-pro-banners-dismissible-announcement-barA slim dismissible top of page bar on a primary background with an uppercase New tag, a one sentence message, an arrow link, and an X button.

Email Capture Bannermarketing-pro-banners-email-capture-bannerA full width muted band with a newsletter invitation beside a labeled email form, a subscribe button, and a one line privacy note.

Feedback Bannermarketing-pro-banners-feedback-bannerA rounded muted row pairing a one question rating prompt and helper line with a five point scale bracketed by low and high labels.

Integration Bannermarketing-pro-banners-integration-bannerA bordered card strip pairing two product marks joined by a plus with a bold announcement lead and an arrow link to the integration.

Live Signups Bannermarketing-pro-banners-live-signups-bannerA pill banner with the most recent join, its city, and the day count, wired or nothing.

Promo Band With Ctamarketing-pro-banners-promo-band-with-ctaA primary colored offer strip with a bolded discount, plain deadline, and compact button.

Referral Bannermarketing-pro-banners-referral-bannerA muted row with a gift icon square, a give and get lead with reward terms, a mono referral link field, and a copy button.

Region Bannermarketing-pro-banners-region-bannerA bordered card row pairing a globe icon and detected location lead with a primary switch button beside a quiet stay option.

Sale Banner Darkmarketing-pro-banners-sale-banner-darkA seasonal sale band with the discount at display size, honest terms, and a secondary button.

Scheduled Maintenance Bannermarketing-pro-banners-scheduled-maintenance-bannerA calm maintenance strip with exact UTC times and the impact answered in one sentence.

Update Banner With Badgemarketing-pro-banners-update-banner-with-badgeA changelog style card strip with a version badge, feature line, release link, and dismiss.

Upgrade Bannermarketing-pro-banners-upgrade-bannerAn inline muted banner row with a Sparkles icon square, a semibold plan lead with muted benefits, a rounded Upgrade button, and a See plans link.

Webinar Bannermarketing-pro-banners-webinar-bannerA bordered card band pairing an overlapping speaker avatar stack and session title with a seats remaining note and a register button.

Before After Barsmarketing-pro-benchmarks-sections-before-after-barsMonth zero against month three as paired bars, churned teams counted, not survivors.

Benchmark Cta Bandmarketing-pro-benchmarks-sections-benchmark-cta-bandA report download band trading the itemized PDF for an email.

Benchmark Table Compactmarketing-pro-benchmarks-sections-benchmark-table-compactBenchmark metrics by company size with the reader band highlighted.

Benchmark Trend Linemarketing-pro-benchmarks-sections-benchmark-trend-lineFive years of the median and top decile as a shadcn line chart, the case against comparing to stale numbers.

Distribution Curvemarketing-pro-benchmarks-sections-distribution-curveThe full account distribution as a shadcn area curve with a marked median.

Funnel Drop Offmarketing-pro-benchmarks-sections-funnel-drop-offMedian conversion per funnel step as bars with top decile ticks, counting rules per row, and the weakest step named.

Industry Benchmark Barsmarketing-pro-benchmarks-sections-industry-benchmark-barsMedian and top decile open rates by industry as grouped shadcn bars with counting rules.

Key Findings Listmarketing-pro-benchmarks-sections-key-findings-listExecutive summary listing numbered findings as divided rows, each pairing a headline stat and label with a title and a two sentence read.

Methodology Notemarketing-pro-benchmarks-sections-methodology-noteThe methods section on the page, sample, definitions, exclusions, and named bias.

Percentile Calloutsmarketing-pro-benchmarks-sections-percentile-calloutsMedian, quartile, and decile threshold cards with mini position scales and verdict notes.

Quadrant Scattermarketing-pro-benchmarks-sections-quadrant-scatterSplit section pairing an inline SVG scatter of accounts, split into four quadrants by median crosshairs, with a labeled list naming each quadrant.

Quartile Range Bandsmarketing-pro-benchmarks-sections-quartile-range-bandsBenchmark section showing each segment as a horizontal p25 to p75 range on a shared axis, with a median dot and top decile tick.

Rank Yourself Slidermarketing-pro-benchmarks-sections-rank-yourself-sliderAn interactive slider placing the reader's open rate in a percentile band, with cut points listed and a verdict card.

Send Time Heatmapmarketing-pro-benchmarks-sections-send-time-heatmapMedian open rate by send day and hour as a token opacity heatmap grid, with peak, trough, and a legend.

Survey Results Barsmarketing-pro-benchmarks-sections-survey-results-barsRanked survey answers as horizontal shadcn bars with sample size in the footnote.

Year Over Year Shift Tablemarketing-pro-benchmarks-sections-yoy-shift-tableReference table listing each headline metric with last year, this year, a signed change chip, and a one line note on what moved it.

Author Spotlight Rowmarketing-pro-blog-sections-author-spotlight-rowA writer with a beat and credential bio beside their three most read pieces.

Blog Cards Gridmarketing-pro-blog-sections-blog-cards-gridThree post cards with placeholder covers, category badges, excerpts, and read times.

Category Filter Gridmarketing-pro-blog-sections-category-filter-gridA centered heading and lede sit above a row of category filter pills, then a three column grid of six hairline topped text posts with meta.

Curated Reading Pathmarketing-pro-blog-sections-curated-reading-pathA start here section walking new readers through five foundational posts on a numbered rail with read times and why it matters lines.

Editorial Feature Rowmarketing-pro-blog-sections-editorial-feature-rowA magazine front page row pairing one large feature card with two stacked compact posts.

Editorial Listmarketing-pro-blog-sections-editorial-listA centered blog header above five hairline separated editorial rows with dates, titles, excerpts, and category badges, closed by an archive button.

Featured Post Splitmarketing-pro-blog-sections-featured-post-splitOne flagship post with a wide cover, standfirst, author line, and read link.

Featured Post With Listmarketing-pro-blog-sections-featured-post-with-listA blog split with a view all header link, one large featured post with an author byline, and a hairline divided stack of three compact posts.

Monthly Archive Groupsmarketing-pro-blog-sections-monthly-archive-groupsA left aligned heading and lede lead into three month sections, each pairing a month label and count with a hairline divided list of dated posts.

Newsletter Archive Splitmarketing-pro-blog-sections-newsletter-archive-splitA sticky subscribe panel with a labeled email form beside a hairline divided ledger of five past issues with numbers, dates, and teasers.

Posts List Minimalmarketing-pro-blog-sections-posts-list-minimalA text only post ledger of dated, ruled rows with categories and hover arrows.

Posts With Sidebarmarketing-pro-blog-sections-posts-with-sidebarAn editorial post list beside a sticky sidebar of category counts and most read titles.

Pull Quote Cardsmarketing-pro-blog-sections-pull-quote-cardsA centered heading and lede over three bordered cards, each opening with a quote glyph and pull quote above a footer with source and byline.

Series Collection Cardsmarketing-pro-blog-sections-series-collection-cardsThree multi part series as cards with part counts, read times, and honest statuses.

Topic Hub Tilesmarketing-pro-blog-sections-topic-hub-tilesA browse by topic directory of six hairline topped tiles, each with an icon chip, mono post count, topic name, and one line description.

Write For Us Splitmarketing-pro-blog-sections-write-for-us-splitA two column contributor pitch: the left stacks a heading, lede, and commissioned topics, the right a panel with numbered steps, perks, and a button.

Writers Gridmarketing-pro-blog-sections-writers-gridA meet the writers grid of four author columns with illustrated avatars, beats, one line bios, post counts, and read links.

Affiliate Earnings Calculatormarketing-pro-calculators-affiliate-earnings-calculatorAudience and conversion sliders projecting commission, assumptions printed below.

Annual Billing Togglemarketing-pro-calculators-annual-billing-toggleA monthly or annual toggle with a seat slider, both yearly totals side by side and the annual saving printed.

Build Vs Buy Calculatormarketing-pro-calculators-build-vs-buy-calculatorEngineer and month sliders price an in house build against a flat subscription, compared as proportional bars with a verdict.

Churn Impact Calculatormarketing-pro-calculators-churn-impact-calculatorRevenue and churn sliders feed a three stat strip of monthly loss, yearly loss, and what one point less churn keeps.

CPL Benchmark Calculatormarketing-pro-calculators-cpl-benchmark-calculatorTwo column cost per lead calculator with spend and lead sliders beside a big CPL figure, a banded benchmark scale with marker, and a verdict.

Downtime Cost Calculatormarketing-pro-calculators-downtime-cost-calculatorCentered downtime calculator with one revenue slider that reprices a selectable SLA tier table and prints a yearly savings verdict line.

Email Volume Calculatormarketing-pro-calculators-email-volume-calculatorA volume slider against public rate bands with the computed monthly price.

Funnel Projection Calculatormarketing-pro-calculators-funnel-projection-calculatorOne traffic slider runs a four stage funnel at printed median rates, ending in projected new monthly revenue.

Ltv Calculatormarketing-pro-calculators-ltv-calculatorThree sliders driving lifetime value with the formula printed under the result.

Payback Summary Staticmarketing-pro-calculators-payback-summary-staticA worked payback example line by line, the calculator with the answer filled in.

Roi Calculatormarketing-pro-calculators-roi-calculatorTwo sliders for team and hours driving live yearly savings with printed assumptions.

Savings Slidermarketing-pro-calculators-savings-sliderOne slider for tool count driving monthly and yearly consolidation savings.

Team Size Estimatormarketing-pro-calculators-team-size-estimatorA stepper that picks the right plan from headcount with visible tier boundaries.

Test Duration Calculatormarketing-pro-calculators-test-duration-calculatorCentered A/B test duration calculator with three sliders feeding a big day count, a six week calendar grid, and a plain verdict line.

Usage Cost Estimatormarketing-pro-calculators-usage-cost-estimatorTwo column pricing estimator with seat and project steppers and add on switches beside a live itemized receipt that totals your monthly cost.

Benefits Gridmarketing-pro-careers-sections-benefits-gridSix benefit cards where every sentence commits to a number, policy, or default.

Benefits Icon Gridmarketing-pro-careers-sections-benefits-icon-gridA careers benefits section with a centered header, six icon led perks in a three by two grid, and a rounded button pointing to open roles.

Career Laddermarketing-pro-careers-sections-career-ladderA centered header above two bordered track panels for IC and management ladders, ruled level rows, a crossover note, and a promotion cycle strip.

Careers Cta Bannermarketing-pro-careers-sections-careers-cta-bannerA compact banner with overlapping avatars, an invitation line, and an open roles count.

Careers FAQmarketing-pro-careers-sections-careers-faqCandidate questions in an accordion beside heading copy and a contact card promising a reply within two working days.

Compensation Principlesmarketing-pro-careers-sections-compensation-principlesPay transparency principles beside a salary band table with levels and ranges.

Culture Values Splitmarketing-pro-careers-sections-culture-values-splitCulture framed as working agreements beside four numbered rules with enforcement notes.

Day in the Lifemarketing-pro-careers-sections-day-in-the-lifeA two column layout with heading copy and an employee card of avatar, role, and facts beside a vertical timeline of one real workday.

Early Careersmarketing-pro-careers-sections-early-careersA centered header above two bordered program cards for internship and graduate paths, each with a summary, ruled detail rows, and an apply button.

Employee Quotesmarketing-pro-careers-sections-employee-quotesThree employee quote cards with avatars and tenure lines confirming culture claims.

Hiring Journeymarketing-pro-careers-sections-hiring-journeyA hiring process section with four numbered steps joined by hairlines, per step durations, and a muted accommodations strip with a contact link.

Hiring Process Stepsmarketing-pro-careers-sections-hiring-process-stepsFour connected hiring stages with promised durations and no ghosting commitments.

Interview Prep Listmarketing-pro-careers-sections-interview-prep-listWhat each interview stage assesses and how to prepare, the rubric published.

Onboarding Planmarketing-pro-careers-sections-onboarding-planThree timeframe cards mapping the first ninety days with checklists, ruled outcome lines, and an onboarding buddy note.

Open Rolesmarketing-pro-careers-sections-open-rolesA header row with a view all button, role rows grouped by team with location and type badges, and a speculative application note.

Open Roles Listmarketing-pro-careers-sections-open-roles-listRuled rows of open roles with team badges, honest locations, and a reply time promise.

People Statsmarketing-pro-careers-sections-people-statsFour ruled retention and tenure stats with one line explanations under a centered header, closed by a source note.

Referral Program Cardmarketing-pro-careers-sections-referral-program-cardA public referral bounty split with the candidate, open beyond employees.

Roles By Departmentmarketing-pro-careers-sections-roles-by-departmentOpenings grouped under department headers with live counts and ruled role rows.

Salary Bands Tablemarketing-pro-careers-sections-salary-bands-tablePublished compensation by level with the midpoint offer rule and equity columns.

Talent Networkmarketing-pro-careers-sections-talent-networkHeading copy with three icon led contact promises beside a bordered signup card with an email field, a team interest checklist, and a join button.

Where We Workmarketing-pro-careers-sections-where-we-workThree office hub cards with working day, teams, and open role rows above a remote strip listing every hiring country.

Anonymous Results Compactmarketing-pro-case-studies-anonymous-results-compactAnonymized result rows for reference shy industries, with NDA references offered.

Before After Panelsmarketing-pro-case-studies-before-after-panelsA customer story told as two side by side panels contrasting the week before and after, closing with a row of three headline numbers.

Challenge Solution Resultsmarketing-pro-case-studies-challenge-solution-resultsOne customer story told across three divided columns covering the challenge, the solution steps, and a stacked results metric list.

Dark Panel Featuremarketing-pro-case-studies-dark-panel-featureFeatured story in a solid primary panel with inverted wordmark, summary, and three metrics.

Featured Storymarketing-pro-case-studies-featured-storyCentered heading over a story card pairing narrative and quote with a rail of three metrics.

Featured With Listmarketing-pro-case-studies-featured-with-listOne customer story told in full inside a featured card, beside a compact divided list of four more stories, each a wordmark and its number.

Growth Chart Storymarketing-pro-case-studies-growth-chart-storyA case study card led by a twelve month line chart with milestone markers and a story row below.

Industry Tabsmarketing-pro-case-studies-industry-tabsIndustry tabs where each panel shows one story card with metrics and a customer quote.

Interview Storymarketing-pro-case-studies-interview-storyA case study told as an interview, with the customer intro and headline numbers beside four question and answer exchanges.

Logo Rows With Resultsmarketing-pro-case-studies-logo-rows-with-resultsStacked divided rows pairing a wordmark and outcome with a bold metric and story link.

Metrics Spotlightmarketing-pro-case-studies-metrics-spotlightCompany narrative beside a divided stat rail with a wide customer quote underneath.

Mini Results Gridmarketing-pro-case-studies-mini-results-gridFour compact customer cards with wordmarks, one headline number, and story links.

Quote Led Storymarketing-pro-case-studies-quote-led-storyOversized opening quote above a three stat row and two short narrative paragraphs.

Quote With Radial Statsmarketing-pro-case-studies-quote-with-radial-statsA large customer quote beside a panel of three donut rings showing percentage outcomes.

Results Tablemarketing-pro-case-studies-results-tableClean table of customers, industries, results, and time to value with CTA buttons below.

Results With Area Chartmarketing-pro-case-studies-results-with-area-chartA case study with the customer indexed series as a hoverable shadcn area chart.

Roi Summary Cardsmarketing-pro-case-studies-roi-summary-cardsThree customers reduced to invested, returned, and payback period, finance memo style.

Savings Breakdownmarketing-pro-case-studies-savings-breakdownA finance first story and quote beside an itemized annual savings statement card whose line items add up to one bold yearly total.

Split With Quotemarketing-pro-case-studies-split-with-quoteTwo paragraph story beside a right rail holding a quote card and two key stats.

Stakeholder Voicesmarketing-pro-case-studies-stakeholder-voicesOne rollout narrated through three quote cards with avatars for marketing, operations, and finance, over a shared row of results each team measured.

Stat Callout Storymarketing-pro-case-studies-stat-callout-storyA narrative case study interrupted twice by ruled display size stat callouts.

Story Accordionmarketing-pro-case-studies-story-accordionFour customer stories in a bordered accordion where each trigger pairs a wordmark with a metric chip and opens to a summary and stats.

Story Carouselmarketing-pro-case-studies-story-carouselHorizontally scrollable snap row of story cards with wordmarks, metrics, and summaries.

Story Gridmarketing-pro-case-studies-story-gridThree story cards each showing a wordmark, a bold result, a summary, and a read link.

Story With Before After Chartmarketing-pro-case-studies-story-with-before-after-chartA customer narrative and quote beside grouped bars comparing three metrics before and after Acme.

Story With Fact Sheetmarketing-pro-case-studies-story-with-fact-sheetA narrative case study and checklist of changes beside an at a glance fact sheet card that closes with two results.

Timeline With Metricsmarketing-pro-case-studies-timeline-with-metricsA rollout told as a vertical timeline with a metric chip per milestone and a closing results band.

Video Case Rowmarketing-pro-case-studies-video-case-rowThree customer films with posters, durations, and the one number each story turns on.

Changelog Cards Monthlymarketing-pro-changelog-sections-changelog-cards-monthlyMonthly scorecards with change type counts, the headline ship, and line item links.

Changelog Filter Tabsmarketing-pro-changelog-sections-changelog-filter-tabsA dated changelog behind working filter tabs that narrow one list of entries to new features, improvements, or fixes.

Changelog List Datedmarketing-pro-changelog-sections-changelog-list-datedRelease entries down a hairline rail with dates, version chips, and outcome sentences.

Changelog Sticky Monthsmarketing-pro-changelog-sections-changelog-sticky-monthsA two column changelog archive: a sticky month index with entry counts beside releases grouped under month headings, each pairing a version chip with a title.

Changelog Subscribe Splitmarketing-pro-changelog-sections-changelog-subscribe-splitA changelog subscription split with copy, a three point benefit list, and a labeled email form beside a mockup of the release digest email itself.

Changelog With Tagsmarketing-pro-changelog-sections-changelog-with-tagsDated releases where every line carries a New, Improved, or Fixed chip.

Deprecations Notice Listmarketing-pro-changelog-sections-deprecations-notice-listRetirements with dates, reasons, and migration paths, plus the rumor stopping non removal.

Patch Notes Tablemarketing-pro-changelog-sections-patch-notes-tableA dense patch table listing version, date, a type chip, and a one line summary per row, closed by a note on the versioning policy.

Release Cadence Chartmarketing-pro-changelog-sections-release-cadence-chartShipped changes per month as stacked shadcn bars split into features and fixes.

Release Cardsmarketing-pro-changelog-sections-release-cardsA changelog with a centered header, a subscribe link, and stacked release cards carrying version badges, dates, and grouped change bullets.

Release Highlights Splitmarketing-pro-changelog-sections-release-highlights-splitThe headline feature of a release with copy and CTAs beside a mini app mockup.

Release Notes Accordionmarketing-pro-changelog-sections-release-notes-accordionReleases in a single open accordion where each trigger pairs a version chip, date, and title with grouped change bullets.

Release Notes Columnsmarketing-pro-changelog-sections-release-notes-columnsA single release in three columns: a version header and lede above New, Improved, and Fixed cards that list changes with per column counts.

Requested And Shippedmarketing-pro-changelog-sections-requested-and-shippedShipped changes as cards crediting the customers who asked, each footer stacking requester avatars beside the request count.

Shipping Velocity Statsmarketing-pro-changelog-sections-shipping-velocity-statsThree shipping cadence stats beside a sparkline of releases per month.

Version Compare Tablemarketing-pro-changelog-sections-version-compare-tableA three column table putting the previous major version beside the current one, capability by capability, with a migration guide link.

Version Timeline Horizontalmarketing-pro-changelog-sections-version-timeline-horizontalVersion dots along a horizontal line with dates and titles, the latest haloed.

Whats New Bannermarketing-pro-changelog-sections-whats-new-bannerA clickable row with the latest release, a version chip, and a changelog link.

Community Calls Splitmarketing-pro-community-sections-community-calls-splitA monthly call pitch with hosts beside the next three dated topics and a series button.

Community Channels Cardsmarketing-pro-community-sections-community-channels-cardsThree doors into the community, forum, calls, and digest, with activity facts.

Community Guidelines Splitmarketing-pro-community-sections-community-guidelines-splitModeration stats and a full charter link beside four numbered house rules in a divided card.

Community Quote Bandmarketing-pro-community-sections-community-quote-bandA member arc quote with tenure attribution beside an ungated join button.

Community Stats Bannermarketing-pro-community-sections-community-stats-bannerOverlapping member avatars and an invitation beside reply speed stats and a join button.

Contributor Gridmarketing-pro-community-sections-contributor-gridTop contributor cards with answer counts above an avatar wall and a breadth stat.

Discussion Preview Listmarketing-pro-community-sections-discussion-preview-listLive forum thread rows with avatars, tags, reply counts, and an active now chip.

First Week Stepsmarketing-pro-community-sections-first-week-stepsA seven day onboarding path in four numbered steps with day labels, closed by a join button and note.

Join FAQ Accordionmarketing-pro-community-sections-join-faq-accordionA two column layout pairing reassurance copy and a join button with an accordion of five pre join questions, the first answer opened by default.

Leaderboard Tablemarketing-pro-community-sections-leaderboard-tableThe quarterly contributor board with points, streaks, and published stakes.

Meetups City Gridmarketing-pro-community-sections-meetups-city-gridCity chapters with next dates, named organizers, and a dashed your city card.

Member Resources Gridmarketing-pro-community-sections-member-resources-gridMember built template cards with type chips, author avatars, and download counts under a browse all link.

Member Roles Laddermarketing-pro-community-sections-member-roles-ladderA centered heading over a table style card of four earned member roles, each with member counts, how it is earned, and what it unlocks.

Member Spotlightmarketing-pro-community-sections-member-spotlightA split card pairing a profile rail of portrait, role, and membership facts with a three question interview and a past spotlights link.

Milestones Timelinemarketing-pro-community-sections-milestones-timelineFour dated community milestones on a marker line, each with a year, a title, and one concrete fact.

Solved Thread Showcasemarketing-pro-community-sections-solved-thread-showcaseA two column layout pairing answer speed stats and an ask button with a static solved thread, its accepted answer highlighted over a reply.

Alternative Cardsmarketing-pro-comparison-sections-alternative-cardsThree cards positioning the product as the alternative to spreadsheets, email, and suites.

Before and Aftermarketing-pro-comparison-sections-before-afterBefore and after cards listing the same workflow as crossed off pains and checked wins.

Claim Checkmarketing-pro-comparison-sections-claim-checkA left aligned header over a stacked list of competitor claims, each quoted with a verdict badge and source, then answered in plain text.

Comparison Hubmarketing-pro-comparison-sections-comparison-hubA centered header over a grid of versus cards, each pairing your product and a competitor with a category, a verdict, and a read link.

Comparison with Quotemarketing-pro-comparison-sections-comparison-with-quoteCompact five row comparison table beside a quote card from a customer who switched.

Competitor Tablemarketing-pro-comparison-sections-competitor-tableFeature table comparing the product against two competitors with check, partial, and no marks.

Cost Breakdown Barsmarketing-pro-comparison-sections-cost-breakdown-barsTwo stacked bars totaling an old tool stack against one shorter Acme bar with an itemized legend.

Cost Comparison Chartmarketing-pro-comparison-sections-cost-comparison-chartAll in yearly cost against two competitors as grouped shadcn bars with the method owned.

Dimension Rowsmarketing-pro-comparison-sections-dimension-rowsStacked full width rows comparing Them and Us copy across four buying dimensions.

Feature Checklist Tablemarketing-pro-comparison-sections-feature-checklist-tableTwo column checklist table comparing features and pricing against a single competitor.

Feature Depth Matrixmarketing-pro-comparison-sections-feature-depth-matrixCapabilities rated with dot scales instead of checkmarks, one row conceded on purpose.

Fewer Stepsmarketing-pro-comparison-sections-fewer-stepsTwo numbered columns comparing the same task, nine steps beside three, each led by a step count and time, with a card explaining the gap.

Grouped Bar Comparisonmarketing-pro-comparison-sections-grouped-bar-comparisonFour dimensions compared as paired horizontal bars for Acme and a typical alternative.

Head To Head Tabsmarketing-pro-comparison-sections-head-to-head-tabsCentered pill tabs switch between competitors, each pane pairing a verdict and three checked differences with a two by two grid of outcome stat tiles.

Migration Coveragemarketing-pro-comparison-sections-migration-coverageA left rail argues the switch is easy with migration stats and two buttons, beside a card listing what carries over from the old tool.

Old Way New Waymarketing-pro-comparison-sections-old-way-new-wayEditorial split contrasting a muted old way list with a confident checked new way list.

Performance Curvesmarketing-pro-comparison-sections-performance-curvesTwo SVG curves diverging over six quarters, teams on Acme rising while the status quo stays flat.

Plan Matchmarketing-pro-comparison-sections-plan-matchThree stacked mapping rows pair each competitor plan with its matching plan on your side, an arrow chip between them and a yearly savings badge.

Pros And Cons Splitmarketing-pro-comparison-sections-pros-and-cons-splitAn honest fit assessment with a good fit card beside real disqualifiers and a referral.

Quadrant Position Chartmarketing-pro-comparison-sections-quadrant-position-chartA self drawn market quadrant as a shadcn scatter with the methodology owned in the footnote.

Release Velocitymarketing-pro-comparison-sections-release-velocityTwo changelog columns side by side, each led by a release count over a dated feed, a busy product feed beside a sparse rival.

Review Scoresmarketing-pro-comparison-sections-review-scoresA rounded table scores three products across independent review platforms, each cell pairing a rating with a five star meter above an averages row.

Score Ring Cardsmarketing-pro-comparison-sections-score-ring-cardsFour scored dimensions as ring gauges with industry averages and a source caption.

Side by Side Mockupsmarketing-pro-comparison-sections-side-by-side-mockupsTwo window mockups contrasting a cluttered generic tool with the calm product, captioned.

Switch Bannermarketing-pro-comparison-sections-switch-bannerMigration banner card with a heading, one call to action, and three checked steps below.

Switch Reasonsmarketing-pro-comparison-sections-switch-reasonsA why teams switch section with three icon reason cards ending in highlighted stats, plus a guarantee strip with a migration guide button.

Switching Stories Listmarketing-pro-comparison-sections-switching-stories-listFour evaluation accounts, each tagged with the factor that settled the decision.

Tco Tablemarketing-pro-comparison-sections-tco-tableA total cost table with stack and Acme columns, a totals row, and named assumptions.

Us vs Them Splitmarketing-pro-comparison-sections-us-vs-them-splitDivided two column list pairing checked product strengths with crossed out competitor gaps.

Vs Competitormarketing-pro-comparison-sections-vs-competitorA product versus legacy tools comparison with two matched criteria cards, a subtly emphasized product side, and a closing CTA with a migration link.

Callback Request Formmarketing-pro-contact-sections-callback-request-formTwo column split pairing a pitch with three numbered steps and a phone line beside a form card collecting name, phone, topic, and preferred time.

Centered Email Ctamarketing-pro-contact-sections-centered-email-ctaA formless contact section with the email address itself at display size as a mailto link.

Channel Cardsmarketing-pro-contact-sections-channel-cardsThree contact channel cards with icons, response promises, and action links for routing by intent.

Contact Split Formmarketing-pro-contact-sections-contact-split-formA reassuring pitch with reply time facts beside a bordered name, email, and message form.

Contact With Hoursmarketing-pro-contact-sections-contact-with-hoursChannel rows with live open chips beside a staffed hours card and a handoff note.

Direct Team Contactsmarketing-pro-contact-sections-direct-team-contactsHeading and lede above a four column grid of named people cards, each with an avatar, role, scope, direct email, and reply promise.

FAQ With Contact Cardmarketing-pro-contact-sections-faq-with-contact-cardCentered heading and lede above a two column split pairing an accordion of common questions with a contact card and direct inbox list.

Form With Channelsmarketing-pro-contact-sections-form-with-channelsA split contact section pairing intro copy, three contact channel rows, and office hours with a card based message form and privacy note.

Form With Map Mockupmarketing-pro-contact-sections-form-with-map-mockupA contact form beside an abstract dot grid map with labeled office pins and a coverage caption.

Offices Gridmarketing-pro-contact-sections-offices-gridRegional office cards with addresses, local inboxes, and working hours per timezone.

Offices Listmarketing-pro-contact-sections-offices-listA centered header over three office cards with region labels, addresses, timezones, and email links, closed by a remote friendly note.

Project Inquiry Formmarketing-pro-contact-sections-project-inquiry-formCentered heading and lede above a brief form card with name, email, company, and budget fields, a service checkbox grid, and a project textarea.

Regional Offices Gridmarketing-pro-contact-sections-regional-offices-gridThree offices with addresses, honest local hours, and the one channel each answers.

Sales Vs Support Splitmarketing-pro-contact-sections-sales-vs-support-splitOne panel split into sales and support doors, each with expectation bullets and its own CTA.

Support Channelsmarketing-pro-contact-sections-support-channelsA centered contact header above three channel cards for sales, support, and community, each with an arrow link and a median response time.

Support Stats Contactmarketing-pro-contact-sections-support-stats-contactLive support queue stats beside the start a conversation card.

Article With TLDRmarketing-pro-content-sections-article-with-tldrA long read opener with an author byline, reading meta, a bordered short version panel summarizing the argument, then the opening paragraphs.

Checklist Manifestomarketing-pro-content-sections-checklist-manifestoSix checked commitments pairing enforceable rules with the practices behind them.

Content With Toc Sidebarmarketing-pro-content-sections-content-with-toc-sidebarLong form prose beside a sticky mini table of contents with an active item.

Definition List Sectionmarketing-pro-content-sections-definition-list-sectionA working glossary of term and definition rows where the second sentence differentiates.

Glossary Preview Listmarketing-pro-content-sections-glossary-preview-listSix glossary terms defined in two sentences each, the second one with a stance.

Headline With Leadlinemarketing-pro-content-sections-headline-with-leadlineAn oversized research finding with a sourced leadline and one evidence link.

Letter From Foundermarketing-pro-content-sections-letter-from-founderA short founder letter that names the catch, signed with an avatar and a real email.

Myth Fact Rowsmarketing-pro-content-sections-myth-fact-rowsA myth versus evidence section of hairline divided rows pairing a popular belief on the left with what the measured data shows on the right.

Numbered Takeawaysmarketing-pro-content-sections-numbered-takeawaysThree ghost numbered research takeaways, each a claim with its data and reframe.

Prose Two Columnmarketing-pro-content-sections-prose-two-columnAn essay set in magazine columns under a heading, closed by an attribution line.

Prose With Margin Notesmarketing-pro-content-sections-prose-with-margin-notesAn annotated essay where each paragraph carries a superscript marker paired with a numbered caveat in a narrow margin column beside it.

Pull Quote Breakmarketing-pro-content-sections-pull-quote-breakOne aphorism set large between hairline rules with a source line, page punctuation.

Reading List Cardsmarketing-pro-content-sections-reading-list-cardsCurated external resources including one that argues against you, with real whys.

Series Chapter Indexmarketing-pro-content-sections-series-chapter-indexA series index pairing an intro column and byline with a divided list of numbered chapters, each showing a description, reading time, and marker.

Banner With Avatarsmarketing-pro-ctas-banner-with-avatarsCard banner with headline, overlapping avatar row, and a single primary button.

Before After Splitmarketing-pro-ctas-before-after-splitCentered headline and lede above a divided two column panel comparing the current week with the same week on the product, four lines per side.

Bordered Insetmarketing-pro-ctas-bordered-insetCentered headline and buttons inside a large rounded border inset.

Cta With Setup Checklistmarketing-pro-ctas-cta-with-setup-checklistThe closing ask beside the first session itemized, five steps with median times that sum.

Cta With Trend Chartmarketing-pro-ctas-cta-with-trend-chartA closing ask beside a minimal shadcn trendline framed as the reader future line.

Dark Band With Sparklinemarketing-pro-ctas-dark-band-with-sparklineA primary colored CTA band with a single button and a faint sparkline along its base.

Dual CTA Bannermarketing-pro-ctas-dual-cta-bannerA full width inverted CTA panel with a centered headline, supporting line, contrasting pill button, quiet arrow link, and a three item trust row.

Full Bleed Bandmarketing-pro-ctas-full-bleed-bandFull width primary band with headline, supporting line, and one inverted button.

Minimal Inlinemarketing-pro-ctas-minimal-inlineSlim ruled strip pairing a short headline with a single arrow text link.

Plain Text Ctamarketing-pro-ctas-plain-text-ctaThe editorial close, three sentences and two text links, no buttons.

Side By Side Cardsmarketing-pro-ctas-side-by-side-cardsTwo matched cards offering free trial and sales paths with checklists and buttons.

Split With Growth Chartmarketing-pro-ctas-split-with-growth-chartA bordered CTA panel with headline and buttons beside a rising area chart and a labeled result.

Split With Mockupmarketing-pro-ctas-split-with-mockupCard split pairing CTA copy and buttons with a metrics dashboard mockup.

Split With Quotemarketing-pro-ctas-split-with-quoteCTA copy and buttons beside a customer quote card with a matching avatar.

Trial Vs Demo Splitmarketing-pro-ctas-trial-vs-demo-splitSelf serve trial and guided demo as equal doors with terms lines and separate buttons.

With App Badgesmarketing-pro-ctas-with-app-badgesCentered mobile pitch with App Store and Google Play download buttons.

With Booking Slotsmarketing-pro-ctas-with-booking-slotsTwo column split pairing a headline, agenda list, and button with a scheduling card of a host, day chips, a time grid, and timezone note.

With Countdownmarketing-pro-ctas-with-countdownCentered card with a headline, supporting line, three countdown tiles for days, hours, and minutes, then a primary button over a terms line.

With Email Capturemarketing-pro-ctas-with-email-captureCentered closing call to action pairing a headline and supporting line with a labeled email form, one input, a primary button, and a terms line.

With Faq Linksmarketing-pro-ctas-with-faq-linksA final ask beside the three questions that stall signups, each linked to its answer.

With Guaranteemarketing-pro-ctas-with-guaranteeCentered card CTA with buttons and a money back guarantee reassurance line.

With Install Commandmarketing-pro-ctas-with-install-commandA developer CTA with a terminal box, copy affordance, and a first event success line.

With Integration Gridmarketing-pro-ctas-with-integration-gridCTA copy beside a three by three grid of integration tiles with a filled Acme tile at the center.

With Setup Progressmarketing-pro-ctas-with-setup-progressA CTA pairing copy and button with an onboarding card showing a progress ring and checklist.

With Statsmarketing-pro-ctas-with-statsCentered CTA copy and buttons above a divided grid of three proof stats.

Api Changelog Compactmarketing-pro-developers-sections-api-changelog-compactFive dated API changes with type tags and the 180 day breaking change policy up front.

Api Hero With Terminalmarketing-pro-developers-sections-api-hero-with-terminalA developer hero with the pitch beside a terminal running the first API call and its response.

Cli Install Bandmarketing-pro-developers-sections-cli-install-bandA slim band selling the CLI, one brew command with a copy button and three proof points.

Dev Community Cardsmarketing-pro-developers-sections-dev-community-cardsCentered developer community section with three channel cards, each carrying a stat, a description, and a join link, closed by an email line.

Docs Links Gridmarketing-pro-developers-sections-docs-links-gridSix documentation entry points as icon cards, each labeled with its honest reading time.

Error Codes Splitmarketing-pro-developers-sections-error-codes-splitSplit section listing six error families with codes, stable types, and fixes beside a mockup response body and a short list of guarantees.

Quickstart Steps Codemarketing-pro-developers-sections-quickstart-steps-codeInstall, authenticate, send. The whole quickstart as three cards with real code panels.

Rate Limits Tablemarketing-pro-developers-sections-rate-limits-tablePublished rate limits by plan beside the response headers that expose limit state.

Sdk Language Gridmarketing-pro-developers-sections-sdk-language-gridNine SDK cards with install commands and honest Official or Community badges.

Status Uptime Panelmarketing-pro-developers-sections-status-uptime-panelTwo column reliability section pairing audited uptime stats and a status page link with a panel of 45 day uptime bar strips and a legend.

Test Mode Fixturesmarketing-pro-developers-sections-test-mode-fixturesTwo column sandbox section with test mode proof points and keys beside a panel of magic recipient addresses that reproduce each failure mode.

Webhook Events Tablemarketing-pro-developers-sections-webhook-events-tableThe complete webhook reference as a ruled table, seven events with payload sizes.

CISO Quote Statsmarketing-pro-enterprise-sections-ciso-quote-statsA two column proof section pairing a customer CISO quote with a portrait against four audited deployment numbers, above a verification line.

Compliance Certifications Gridmarketing-pro-enterprise-sections-compliance-certifications-gridA centered heading over a three column grid of framework cards, each with a status badge, plain language scope, and a footer audit date.

Dedicated Infra Statsmarketing-pro-enterprise-sections-dedicated-infra-statsFour audited infrastructure numbers over a region table that separates failover from residency.

Deployment Options Cardsmarketing-pro-enterprise-sections-deployment-options-cardsCloud, dedicated, and self hosted as three cards, each stating its tradeoff in the footer.

Enterprise Hero Logosmarketing-pro-enterprise-sections-enterprise-hero-logosAn enterprise hero with the three procurement numbers and a wordmark row of large customers.

Pilot Terms Panelmarketing-pro-enterprise-sections-pilot-terms-panelA two column section pairing a paid pilot pitch and call to action buttons with a panel listing six standard pilot terms as definition rows.

Procurement Checklistmarketing-pro-enterprise-sections-procurement-checklistSeven procurement artifacts with availability and turnaround, the vendor packet in rows.

Rollout Responsibilitiesmarketing-pro-enterprise-sections-rollout-responsibilitiesA two column section pairing a heading and commitment stats with four onboarding phases, each splitting tasks between vendor and customer teams.

Security Review Fastlanemarketing-pro-enterprise-sections-security-review-fastlaneThe security review as a dated four step timeline with a free pilot extension if it runs long.

Sso Scim Gridmarketing-pro-enterprise-sections-sso-scim-gridSix identity questionnaire rows answered with mechanisms, SSO, SCIM, audit, and residency.

Support Tiers Tablemarketing-pro-enterprise-sections-support-tiers-tableThree support tiers with contractual response times and automatic credits when missed.

Agenda Day Columnsmarketing-pro-events-sections-agenda-day-columnsA two day single track agenda with timed session rows and track chips.

Agenda Tracks Columnsmarketing-pro-events-sections-agenda-tracks-columnsA two track conference day side by side with timed sessions and role credited speakers.

Conference Cta Bandmarketing-pro-events-sections-conference-cta-bandA primary registration band with the event name, date line, quick facts, and ticket button.

Event Stats Bannermarketing-pro-events-sections-event-stats-bannerA banner of four numbers from last year, attendance, reach, rating, and return intent.

Featured Webinar Splitmarketing-pro-events-sections-featured-webinar-splitA session pitch with speakers beside a registration card with date facts and an email field.

Key Dates Timelinemarketing-pro-events-sections-key-dates-timelineFour event milestones sit on a connected dot timeline with done, current, and upcoming states, each carrying a date, title, and one detail line.

Past Talks Listmarketing-pro-events-sections-past-talks-listThe team speaking record as ruled rows with venues, recordings, and a booking line.

Speakers Gridmarketing-pro-events-sections-speakers-gridEight speaker cards with portraits, roles, and session titles doubling as a mini agenda.

Sponsor Tiersmarketing-pro-events-sections-sponsor-tiersRuled tier rows list sponsor wordmarks with small SVG marks sized down from platinum to community, above a bordered prospectus request strip.

Ticket Tiersmarketing-pro-events-sections-ticket-tiersThree bordered ticket cards show prices, inclusion lists, and availability notes with one pass highlighted, closed by a refunds and transfer line.

Upcoming Events Listmarketing-pro-events-sections-upcoming-events-listRuled event rows with date tiles, format badges, and locations under a recordings link.

Venue Travel Splitmarketing-pro-events-sections-venue-travel-splitA stylized SVG neighborhood map and venue address sit beside ruled rows for airport, transit, and parking plus partner hotels with nightly rates.

Workshop Cardsmarketing-pro-events-sections-workshop-cardsThree hands on workshop cards with date chips, outcome lines, and honest seat counts.

Accordion With Linksmarketing-pro-faqs-accordion-with-linksAccordion beside a bordered card of documentation, community, and support links.

Audience Tabsmarketing-pro-faqs-audience-tabsCentered heading and lede above a three tab switcher for marketers, finance, and IT, each pane a hairline divided list of questions and answers.

Category Columnsmarketing-pro-faqs-category-columnsThree topic columns for billing, product, and security with short plain text answers.

Category Icon Gridmarketing-pro-faqs-category-icon-gridSix FAQ category cards with icons, answer counts, and the top two questions pulled out.

Centered Accordionmarketing-pro-faqs-centered-accordionA classic centered FAQ with a single column accordion of six questions, the first open by default, and a closing support handoff line.

Chat Style QAmarketing-pro-faqs-chat-style-qaCentered heading and lede above a bordered chat panel where visitor questions sit in filled bubbles and a named teammate answers in muted bubbles.

Compact Two Column Qamarketing-pro-faqs-compact-two-column-qaA text only FAQ grid with every short answer already open in two columns.

Faq Accordion Two Colmarketing-pro-faqs-faq-accordion-two-colTwo independent accordions side by side, twelve questions in the height of six.

FAQ Cards Gridmarketing-pro-faqs-faq-cards-gridSix bordered cards in a responsive grid, each pairing one question with a short answer.

Faq With Contact Cardmarketing-pro-faqs-faq-with-contact-cardAn FAQ accordion beside a support card with an avatar, reply time promise, and button.

Journey Stagesmarketing-pro-faqs-journey-stagesCentered heading and lede above a vertical rail of numbered stage nodes, each carrying a caption and a short stack of questions and answers.

Numbered Listmarketing-pro-faqs-numbered-listEditorial Q&A list with large muted numerals beside each question and hairline dividers.

Objection Answer Pairsmarketing-pro-faqs-objection-answer-pairsFour skeptical sentences quoted at heading weight, answered with concessions and receipts.

Sidebar Topicsmarketing-pro-faqs-sidebar-topicsStatic topic list with counts beside a flat divided list of billing questions.

Single Column Prosemarketing-pro-faqs-single-column-proseNarrow centered column of stacked Q&As in calm prose separated by hairlines.

Split Headline Accordionmarketing-pro-faqs-split-headline-accordionSticky heading and lede in the left third with the accordion filling the right two thirds.

Top Questions Plus Allmarketing-pro-faqs-top-questions-plus-allThree featured question cards above an accordion holding the remaining answers.

Topic Columnsmarketing-pro-faqs-topic-columnsA static FAQ grouping bold questions and short muted answers in a two column grid under three uppercase topic labels, closed by a contact panel.

Verdict Listmarketing-pro-faqs-verdict-listLeft aligned heading above a hairline divided list where each row pairs a Yes, No, or Depends badge with a bold question and short answer.

Wide Accordion Boldmarketing-pro-faqs-wide-accordion-boldFull width accordion with oversized question typography for confident scanning.

With CTA Bannermarketing-pro-faqs-with-cta-bannerCentered accordion above a slim bordered contact band with an outline support button.

With Search Barmarketing-pro-faqs-with-search-barAn FAQ head with a search pill, topic chips, and a most asked accordion beneath.

Accordion With Previewmarketing-pro-feature-sections-accordion-with-previewSingle open accordion of features paired with an analytics preview window.

Alternating Rowsmarketing-pro-feature-sections-alternating-rowsA centered header above three feature rows that alternate sides, pairing icon led copy and check lists with framed app panel mockups.

Alternating With Chartsmarketing-pro-feature-sections-alternating-with-chartsThree alternating feature rows pairing copy and checklists with bar, line, and donut chart panels.

Before After Panelsmarketing-pro-feature-sections-before-after-panelsA centered header above two matched panels, a muted before column and a highlighted after column listing the same tasks with new time costs.

Bento Gridmarketing-pro-feature-sections-bento-gridCentered intro above a bento of one large dashboard card and five smaller icon tiles.

Bento Grid Featuresmarketing-pro-feature-sections-bento-grid-featuresFive features in mixed cell sizes, a sparkline lead and an inbox stack among quiet text cells.

Capability Matrixmarketing-pro-feature-sections-capability-matrixA left aligned header above a framed table crossing six capabilities against three teams, marking coverage with checks and gaps with muted minus icons.

Cards With Mockupsmarketing-pro-feature-sections-cards-with-mockupsThree feature cards, each topped with a small chart, list, or form mockup.

Centered Rowsmarketing-pro-feature-sections-centered-rowsNarrow centered column of four icon feature rows separated by dividers.

Checklist Splitmarketing-pro-feature-sections-checklist-splitA split feature section with a header and grouped checklist beside a tall app window mockup with stats, task rows, and status chips.

Compact Two Columnmarketing-pro-feature-sections-compact-two-columnCentered heading over a tight two column list of eight checkmarked essentials.

Feature List Two Columnmarketing-pro-feature-sections-feature-list-two-columnA text only inventory of eight features, each a bold name with one working sentence.

Feature Tabs With Previewmarketing-pro-feature-sections-feature-tabs-with-previewTabs switching between three features, each pane pairing a blurb with a framed app mockup.

Feature Timelinemarketing-pro-feature-sections-feature-timelineA left aligned header above a vertical timeline of four numbered nodes, each carrying a capability title, a paragraph, and outcome chips.

Features With Area Chartmarketing-pro-feature-sections-features-with-area-chartReporting copy beside the actual shadcn chart component the dashboard renders.

Features With Customer Quotesmarketing-pro-feature-sections-features-with-customer-quotesFour capabilities, each paired with one customer line about that specific feature.

Grid With Sparklinesmarketing-pro-feature-sections-grid-with-sparklinesSix feature cards, each headed by a distinct mini graphic such as a sparkline, ring, or gauge.

Icon Benefit Gridmarketing-pro-feature-sections-icon-benefit-gridA centered header over a hairline divided three by two grid of six benefits, each with an icon tile, one line title, and two line copy.

Icon Grid Sixmarketing-pro-feature-sections-icon-grid-sixCentered heading over a three column grid of six icon led feature blurbs.

Icon List Three Columnmarketing-pro-feature-sections-icon-list-three-columnSix features as inline icons, bold names, and single sentences, no cards.

Mockup With Calloutsmarketing-pro-feature-sections-mockup-with-calloutsA centered header above one annotated product window with numbered callout badges, then a four column legend mapping each number to a feature.

Numbered Feature Rowsmarketing-pro-feature-sections-numbered-feature-rowsThree features argued editorially in ruled rows with ghost numerals and proof lines.

Solid Panel Gridmarketing-pro-feature-sections-solid-panel-gridSolid primary panel holding a heading and a six tile icon feature grid.

Split With App Windowmarketing-pro-feature-sections-split-with-app-windowHeading and checklist beside a campaign window mockup with live progress bars.

Split With Flow Diagrammarketing-pro-feature-sections-split-with-flow-diagramFeature copy and a checklist beside an SVG automation flow with a trigger, condition, and branches.

Split With Stat Cardsmarketing-pro-feature-sections-split-with-stat-cardsFeature copy beside a two by two grid of mini stat cards with attribution notes.

Stacked Panelsmarketing-pro-feature-sections-stacked-panelsTwo stacked split panels pairing copy and checklists with app window mockups.

Tabbed Showcasemarketing-pro-feature-sections-tabbed-showcaseA tabbed feature showcase with pill triggers for plan, track, and ship views, each pairing copy and a checklist with an app panel mockup.

With Stat Bandmarketing-pro-feature-sections-with-stat-bandIcon feature grid capped by a divided band of three headline stats.

Brand Blurb Columnsmarketing-pro-footers-brand-blurb-columnsBrand blurb and social icons beside three columns of product links.

Centered Logo Linksmarketing-pro-footers-centered-logo-linksCentered logo over a single row of links, social icons, and a copyright line.

Columns With Newslettermarketing-pro-footers-columns-with-newsletterFour link columns beside a newsletter pitch with an inline email subscribe row.

Dark Solidmarketing-pro-footers-dark-solidSolid primary footer with brand blurb, socials, and four link columns.

Developer Links Footermarketing-pro-footers-developer-links-footerA developer footer with an install command chip, docs columns, and an API status row.

Five Column With Taglinemarketing-pro-footers-five-column-with-taglineBrand name and tagline beside four link columns above a legal bar.

Footer With Status Linemarketing-pro-footers-footer-with-status-lineA four column footer whose bottom bar carries live status, region, and locale.

Giant Wordmarkmarketing-pro-footers-giant-wordmarkA statement footer pairing a slim nav and social row, an oversized brand wordmark across the middle, and a copyright and legal bottom bar.

Global Officesmarketing-pro-footers-global-officesA footer with a brand blurb and three link columns, a dedicated offices band listing four worldwide locations with hours, and a contact bar.

Legal Heavymarketing-pro-footers-legal-heavyLink columns over a dense legal block with disclaimers and compliance badges.

Mega Footermarketing-pro-footers-mega-footerA comprehensive footer with a brand mark and tagline beside four link columns, plus a bottom bar pairing the copyright with social icon links.

Minimal Inline Linksmarketing-pro-footers-minimal-inline-linksOne slim row with copyright, inline nav links, and small social icons.

Newsletter Centeredmarketing-pro-footers-newsletter-centeredCentered newsletter signup above a row of nav links and a copyright line.

Sitemap Mega Footermarketing-pro-footers-sitemap-mega-footerSix dense link columns covering every page, pure wayfinding with a slim legal row.

Slim Centeredmarketing-pro-footers-slim-centeredA minimal centered footer stacking a brand mark, one row of five links, social icon buttons, and a muted copyright line under a hairline border.

Social And Certificationsmarketing-pro-footers-social-and-certificationsA trust forward footer closing with social icons and compliance chips for SOC 2, GDPR, and ISO.

Stacked Link Rowsmarketing-pro-footers-stacked-link-rowsA footer that stacks each link group into its own hairline separated row, with a brand and social row above and a copyright bar below.

With App Badgesmarketing-pro-footers-with-app-badgesThree link columns plus iOS and Android download buttons above a brand bar.

With Blog Postsmarketing-pro-footers-with-blog-postsA footer pairing a brand blurb and three link columns with a latest posts list of three dated links and a view all link.

With Contact Infomarketing-pro-footers-with-contact-infoLink columns alongside address, email, and phone contact details.

With Cta Rowmarketing-pro-footers-with-cta-rowA footer opening with a final CTA row above standard link columns and a status link.

With Status And Localemarketing-pro-footers-with-status-and-localeFour link columns with a bottom bar showing system status and a language picker.

Category Cards Gridmarketing-pro-help-center-sections-category-cards-gridSix help categories as cards with article counts and the top three links inlined.

Community Answer Calloutmarketing-pro-help-center-sections-community-answer-calloutA forum thread mockup with an accepted answer, selling community as a support channel.

Escalation Paths Bandmarketing-pro-help-center-sections-escalation-paths-bandChat, email, and phone as cards with measured response times and when to pick each.

Help Search Heromarketing-pro-help-center-sections-help-search-heroA help center hero with one big search field and the five queries people actually type.

Known Issues Listmarketing-pro-help-center-sections-known-issues-listA tracker of open bugs as ruled rows, each with a status badge, affected area, open date, and a workaround link when one exists.

Live Sessions Schedulemarketing-pro-help-center-sections-live-sessions-scheduleThe next four live sessions as ruled rows, each with a date tile, the topic, host and time, and a seat reservation button.

Popular Articles Listmarketing-pro-help-center-sections-popular-articles-listThe ten most read help articles as ranked rows with categories and read times.

Setup Steps Timelinemarketing-pro-help-center-sections-setup-steps-timelineA numbered vertical timeline of five setup steps, each with a time estimate, a one line description, and a link to the full guide.

Support Plans Tablemarketing-pro-help-center-sections-support-plans-tableThree support tiers as columns in a ruled table, compared across channels, first reply time, coverage hours, escalation, and onboarding.

Symptom Triage Tablemarketing-pro-help-center-sections-symptom-triage-tableA ruled three column table mapping common symptoms to the first thing to check and the fix article, with a chat fallback line beneath.

System Status Bandmarketing-pro-help-center-sections-system-status-bandAn overall status line above one row per service, each with a 45 day uptime bar strip, an uptime percentage, and a status page link.

Video Guides Rowmarketing-pro-help-center-sections-video-guides-rowThree walkthrough videos with posters, honest durations, and one line on what each covers.

Centered Minimalmarketing-pro-hero-sections-centered-minimalA typography only hero with a centered headline, lede, single CTA, and a muted trust line.

Centered With Browser Mockupmarketing-pro-hero-sections-centered-with-browser-mockupA centered hero with headline and CTAs above a browser mockup with sidebar, chart, and table rows.

Centered With Feature Pillsmarketing-pro-hero-sections-centered-with-feature-pillsA centered headline, lede, and dual CTAs above a wrapped row of bordered icon feature pills.

Centered With Integration Diagrammarketing-pro-hero-sections-centered-with-integration-diagramA centered hero above a hub and spoke diagram of six integration chips around an Acme node.

Centered With Logo Stripmarketing-pro-hero-sections-centered-with-logo-stripA centered hero anchored by a ruled strip of customer wordmarks under a trust count.

Centered With Searchmarketing-pro-hero-sections-centered-with-searchA docs hero with centered copy above a command bar search mockup with suggestion rows.

Centered With Video Mockupmarketing-pro-hero-sections-centered-with-video-mockupCentered hero with headline, lede, and dual CTAs above a video player mockup with poster, play button, control bar, and a row of chapter markers.

Headline Only Heromarketing-pro-hero-sections-headline-only-heroOne oversized statement, one line with a number, two buttons. Typography carries the fold.

Hero With Ticker Bandmarketing-pro-hero-sections-hero-with-ticker-bandA centered hero above five live platform activity tiles with pulsing dots.

Left Aligned With Checklistmarketing-pro-hero-sections-left-aligned-with-checklistA left aligned headline, lede, three check items, and dual CTAs that own the left edge.

Metrics Heromarketing-pro-hero-sections-metrics-heroA centered proof led hero with headline, lede, dual CTAs, a hairline separated row of three oversized stats, and a customer wordmark strip.

Signup Heromarketing-pro-hero-sections-signup-heroA split hero pairing a headline, lede, and check marked benefits with an inline signup card of labeled fields, Google sign in, and a terms line.

Split App Panelmarketing-pro-hero-sections-split-app-panelA split hero pairing headline, lede, dual CTAs, and an avatar star rating with a markup app window of icon rail, chart strip, and invoice rows.

Split With Analytics Dashboardmarketing-pro-hero-sections-split-with-analytics-dashboardA two column hero pairing headline and CTAs with an analytics dashboard mockup and area chart.

Split With Chat Mockupmarketing-pro-hero-sections-split-with-chat-mockupA support led hero beside a chat mockup with a named agent and a resolved in minutes line.

Split With Codemarketing-pro-hero-sections-split-with-codeA split hero with headline, lede, and CTAs beside a token colored code editor window mockup.

Split With Comparisonmarketing-pro-hero-sections-split-with-comparisonSplit hero with headline, lede, and dual CTAs beside a two column panel contrasting the old way as crossed items against checked new ones.

Split With Funnel Graphicmarketing-pro-hero-sections-split-with-funnel-graphicA split hero pairing headline and CTAs with a vertical funnel of narrowing stage bars.

Split With Live Chartmarketing-pro-hero-sections-split-with-live-chartA hero whose chart is a working shadcn component, wired for real data instead of a mockup.

Split With Metricsmarketing-pro-hero-sections-split-with-metricsA split hero with copy and dual CTAs beside a divided panel of four large KPI tiles.

Split With Mobile Appmarketing-pro-hero-sections-split-with-mobile-appA split hero with copy and dual CTAs beside a phone mockup of the product mobile app.

Split With Pricing Cardmarketing-pro-hero-sections-split-with-pricing-cardSplit hero with headline, lede, dual CTAs, and a guarantee row beside a single plan card showing the seat price, checked features, and trial CTA.

Split With Signup Formmarketing-pro-hero-sections-split-with-signup-formA hero with the signup card in the fold, friction removers checked beside email and password fields.

Split With Stats Sidebarmarketing-pro-hero-sections-split-with-stats-sidebarA calm hero with four proof numbers running down a single ruled rail.

Split With Stepsmarketing-pro-hero-sections-split-with-stepsSplit hero with headline, lede, dual CTAs, and a two stat row beside a card walking the four onboarding steps on a numbered vertical rail.

Split With Testimonialmarketing-pro-hero-sections-split-with-testimonialA split hero with headline, lede, and dual CTAs beside a single customer quote card.

Terminal Heromarketing-pro-hero-sections-terminal-heroA centered developer tool hero with an install command row, dual CTAs, and a terminal window mockup of prompt, output, and success lines.

With Avatar Ratingmarketing-pro-hero-sections-with-avatar-ratingA centered hero with dual CTAs above overlapping avatars, five stars, and a team count line.

With Customer Countermarketing-pro-hero-sections-with-customer-counterA centered hero with the unrounded customer count at display size and an avatar row.

With Kanban Previewmarketing-pro-hero-sections-with-kanban-previewA centered hero with copy and CTAs above a wide kanban board mockup of campaign tasks.

Carbon Stats Bandmarketing-pro-impact-sections-carbon-stats-bandThree years of audited emissions with shrinking bars and the mechanism named.

Commitments Timelinemarketing-pro-impact-sections-commitments-timelineA vertical rail timeline of public impact promises with year markers, kept or in progress status badges, and honest detail lines.

Counting Rules Gridmarketing-pro-impact-sections-counting-rules-gridA methodology section presenting four numbered impact accounting rules in a two by two card grid with the external auditor named in the footer.

Grantee Spotlightmarketing-pro-impact-sections-grantee-spotlightA grantee spotlight split with a director quote on the left and a paperwork facts panel plus a headline outcome number on the right.

Grants Program Cardmarketing-pro-impact-sections-grants-program-cardA grants program with cycle stats, clear criteria, and no logo placement required.

Impact Report Numbersmarketing-pro-impact-sections-impact-report-numbersThe annual impact report as an eight line ledger, including the weakest number.

Open Source Listmarketing-pro-impact-sections-open-source-listMaintain, contribute, fund, publish. Four open source relations with real numbers.

Pledge Percent Cardmarketing-pro-impact-sections-pledge-percent-cardThe 1% pledge with last year's total and the allocation rows that prove it.

Product Donations Gridmarketing-pro-impact-sections-product-donations-gridA centered header over three stat cards for standing product giveaway programs, each with a big count, terms, and eligibility link.

Regional Giving Barmarketing-pro-impact-sections-regional-giving-barA regional grant allocation section with one segmented bar across the top and a ruled legend listing regions, grantee counts, amounts, and share.

Volunteer Days Panelmarketing-pro-impact-sections-volunteer-days-panelA split volunteer program section with participation stats on the left and a partner outing roster listing activities, people, and hours on the right.

API and Webhooks Panelmarketing-pro-integration-sections-api-webhooks-panelA developer split with a headline, capability ticks, and a docs button beside an inverted code panel with file tabs and token styled lines.

Connection Methods Tablemarketing-pro-integration-sections-connection-methods-tableA centered header above a comparison table weighing native apps, no code recipes, and the developer API, with the most popular column highlighted.

Directory Gridmarketing-pro-integration-sections-directory-gridAn integration directory with a centered header, static category chips, a three by two grid of tool cards with Connect links, and a request line.

Integration Request Boardmarketing-pro-integration-sections-integration-request-boardConnector requests with vote counts and honest statuses, the declined one kept visible.

Integration Security Panelmarketing-pro-integration-sections-integration-security-panelA trust focused split with a headline, four security assurances, and a docs link beside an access manager showing granted scopes and a revoke control.

Integration Setup Stepsmarketing-pro-integration-sections-integration-setup-stepsAn onboarding split with a headline, a numbered three step timeline, and a blueprint that walks from choosing a tool to the first live sync.

Integration Spotlightmarketing-pro-integration-sections-integration-spotlightAn integration deep dive with paired marks, a headline, three feature rows, and connect buttons beside a field mapping panel of what syncs each way.

Integrations Categories Columnsmarketing-pro-integration-sections-integrations-categories-columnsA text only directory index of four category columns with counts and linked tool names.

Integrations Cta Bandmarketing-pro-integration-sections-integrations-cta-bandA centered panel with icon chips, a stack fit headline, and browse and request buttons.

Integrations Grid Tilesmarketing-pro-integration-sections-integrations-grid-tilesNine category tiles with icons and data flow blurbs above a browse all button.

Integrations Hub Diagrammarketing-pro-integration-sections-integrations-hub-diagramA hub diagram of sources flowing into Acme and attribution flowing back out, with a legend.

Integrations With Codemarketing-pro-integration-sections-integrations-with-codeAPI copy and a checklist beside a terminal panel showing a colored webhook payload.

Sync Volume Chartmarketing-pro-integration-sections-sync-volume-chartRecords synced per day as shadcn bars beside sync lag and success rate facts.

Data Residency Splitmarketing-pro-localization-sections-data-residency-splitSplit section stacking residency stats beside a seven region list with mono codes, role notes, and live or in build status chips.

Glossary Terms Tablemarketing-pro-localization-sections-glossary-terms-tableA heading and lede, then a bordered table of product terms with approved translations in three languages, usage notes, and review status chips.

Languages Grid Bandmarketing-pro-localization-sections-languages-grid-bandInterface languages as chips with two honest tiers, full coverage or UI only.

Local Payments Rowmarketing-pro-localization-sections-local-payments-rowCurrencies, local payment methods, tax, and AP ready invoices as four cards.

Locale Formatting Splitmarketing-pro-localization-sections-locale-formatting-splitA two column split pairing a stacked list of formatting behaviors with a bordered panel rendering one date, number, and price across five locales.

Market Rollout Timelinemarketing-pro-localization-sections-market-rollout-timelineA heading and lede, then four phase columns on a dotted top rule, each with a quarter label, status chip, markets opening, and shipping work.

Regional Compliance Listmarketing-pro-localization-sections-regional-compliance-listPrivacy and messaging laws by region, described as product behavior instead of legal prose.

Rtl Support Calloutmarketing-pro-localization-sections-rtl-support-calloutRight to left and script support described at the level where credibility lives.

Support Hubs Columnsmarketing-pro-localization-sections-support-hubs-columnsThree regional support hub columns with staffing hour strips, native language lists, and median first reply stats above a handoff note.

Translation Coverage Barsmarketing-pro-localization-sections-translation-coverage-barsA heading and lede, a two segment legend, then a two column list of languages with reviewed percentages, progress bars, and string counts.

Translation Workflow Mockupmarketing-pro-localization-sections-translation-workflow-mockupA drawn translation screen with locale rows, review chips, and a send blocked footer.

Customer Wall Densemarketing-pro-logo-clouds-customer-wall-denseTwenty wordmarks in a tight ruled grid, volume as the entire message.

Logos Band Darkmarketing-pro-logo-clouds-logos-band-darkA primary colored band with a trust claim above wordmarks in foreground tones.

Logos By Industrymarketing-pro-logo-clouds-logos-by-industryCustomer wordmarks sorted into four industry columns with team counts per shelf.

Logos Case Resultsmarketing-pro-logo-clouds-logos-case-resultsA centered heading over six bordered tiles, each pairing a customer wordmark with a headline case study metric, a result line, and a link.

Logos Featured Customermarketing-pro-logo-clouds-logos-featured-customerA featured customer panel with a wordmark, quote, and ruled fact rows sits beside a two column grid of supporting wordmarks and a count line.

Logos Grid With Headingmarketing-pro-logo-clouds-logos-grid-with-headingA heading and lede beside a two by four grid of bordered wordmark tiles.

Logos Row Simplemarketing-pro-logo-clouds-logos-row-simpleA single wrapped row of muted text wordmarks under one line of trust copy.

Logos Timelinemarketing-pro-logo-clouds-logos-timelineA left aligned heading over ruled yearly rows, each pairing the notable wordmarks that signed on with a running customer total at the right.

Logos Two Row Offsetmarketing-pro-logo-clouds-logos-two-row-offsetTen wordmark pills in two staggered rows for a dense, brickwork style logo cloud.

Logos With Proof Statsmarketing-pro-logo-clouds-logos-with-proof-statsA wordmark wall above the three numbers that make logos evidence, retention included.

Logos With Quotemarketing-pro-logo-clouds-logos-with-quoteA wordmark row above one short centered customer quote with avatar attribution.

Logos With Statmarketing-pro-logo-clouds-logos-with-statA large customer count and claim beside a ruled two column grid of wordmarks.

Press Stripmarketing-pro-logo-clouds-press-stripA press strip with a standalone uppercase label and three pull quotes above outlet wordmarks, split by hairlines that adapt to stacking.

Ratings Stripmarketing-pro-logo-clouds-ratings-stripAn uppercase intro over three review platform columns with star rows, scores, wordmarks, and review counts, above a wrapped row of customer wordmarks.

Stat Anchoredmarketing-pro-logo-clouds-stat-anchoredA static logo cloud anchored by an oversized customer count in primary type, a muted supporting line, and two staggered rows of wordmarks.

Feature Name Mappingmarketing-pro-migration-sections-feature-name-mappingA centered heading over a two column grid of cards mapping each old tool name to its new equivalent, each with a short note.

Import Coverage Tablemarketing-pro-migration-sections-import-coverage-tableWhat migrates from each source tool by data type, with honest partial cells worth reading.

Import Dry Run Previewmarketing-pro-migration-sections-import-dry-run-previewSplit section pairing dry run copy and three assurances with a static importer report of counts, review statuses, and estimated run time.

Migration Paths Cardsmarketing-pro-migration-sections-migration-paths-cardsA centered heading over three migration path cards with a best fit line, an included checklist, and a time estimate, one marked featured.

Migration Steps Timelinemarketing-pro-migration-sections-migration-steps-timelineThe switch as five clock stamped steps tagged automatic, your review, or your call.

Migration Stories Rowmarketing-pro-migration-sections-migration-stories-rowThree switcher accounts structured as feared, what happened, and how long it really took.

Switch FAQ Accordionmarketing-pro-migration-sections-switch-faq-accordionA two column switching FAQ with reassurance copy and a contact link beside a five item accordion that opens the first answer by default.

Switch Hero Checklistmarketing-pro-migration-sections-switch-hero-checklistA migration hero with the importer checklist and the one thing it cannot carry, stated.

Switcher Offer Cardmarketing-pro-migration-sections-switcher-offer-cardThe buyout deal as three numbered terms on the page, contract credit to exit clause.

Time To Switch Bandmarketing-pro-migration-sections-time-to-switch-bandA centered heading over a four column bordered band of account size tiers, each showing a large migration time and a line on coverage.

Who Does What Splitmarketing-pro-migration-sections-who-does-what-splitTwo panel responsibilities section listing your timed migration tasks beside importer and engineer duties, totaled in a closing footnote.

Zero Downtime Explainermarketing-pro-migration-sections-zero-downtime-explainerHow both tools run in parallel during the switch, three paragraphs with a definitions rail.

App Downloadmarketing-pro-mobile-app-sections-app-downloadA split app download CTA pairing a heading, drawn store buttons, and a star rating with a phone mockup showing a chart strip and activity rows.

App Features With Screensmarketing-pro-mobile-app-sections-app-features-with-screensThree mobile moments, each with a small phone frame and the why a phone copy.

App Hero With Phonemarketing-pro-mobile-app-sections-app-hero-with-phoneAn app hero with store buttons and a rating line beside a drawn phone frame.

App Onboarding Stepsmarketing-pro-mobile-app-sections-app-onboarding-stepsA three step onboarding section with a heading above numbered steps joined by a dashed connector, each pairing an explanation with a drawn UI chip.

App Privacy Labelmarketing-pro-mobile-app-sections-app-privacy-labelA two column privacy section pairing plain language data promises with a drawn store style privacy label card listing data categories.

App Rating Calloutmarketing-pro-mobile-app-sections-app-rating-calloutThe big store rating beside three real voiced review cards with version metadata.

App Screens Rowmarketing-pro-mobile-app-sections-app-screens-rowThree captioned phone frames in a row with the middle screen elevated.

App Store Badges Bandmarketing-pro-mobile-app-sections-app-store-badges-bandA download band with drawn store chips and an existing account reassurance.

App Update Notesmarketing-pro-mobile-app-sections-app-update-notesStore style release notes with version, size, and a voice people actually read.

App Watch Companionmarketing-pro-mobile-app-sections-app-watch-companionA two column watch companion section pairing three wrist feature rows with a drawn smartwatch mockup showing an approval notification and its inline actions.

App Widget Showcasemarketing-pro-mobile-app-sections-app-widget-showcaseA widget showcase with a heading above three captioned tiles, a wide chart, a daily glance, and a quick actions grid, over behavior notes.

Push Notification Mockupmarketing-pro-mobile-app-sections-push-notification-mockupA drawn lock screen with the three pushes the app sends beside the restraint policy.

Qr Download Splitmarketing-pro-mobile-app-sections-qr-download-splitA desktop to phone bridge with a drawn QR card that stays dark on light by design.

Announcement Bar Navmarketing-pro-navbars-announcement-bar-navA sticky header with a primary announcement bar and arrow link above a frosted navbar with centered links and dual CTAs.

Bordered Grid Navmarketing-pro-navbars-bordered-grid-navA full bleed grid header where the logo, uppercase links, and actions sit in bordered cells split by dividers, ending in a solid CTA cell.

Centered Links Navmarketing-pro-navbars-centered-links-navA symmetric header with links optically centered between the logo and a single CTA.

Compact Centered Navmarketing-pro-navbars-compact-centered-navA slim borderless navbar with a wordmark, three links, and a text only primary CTA.

Dark Navmarketing-pro-navbars-dark-navA solid primary colored header with inverted logo chip and a secondary CTA button.

Double Deck Navmarketing-pro-navbars-double-deck-navA two row header with a slim utility deck above the main logo, links, and CTA row.

Mega Menu Navmarketing-pro-navbars-mega-menu-navA sticky navbar with its product mega menu expanded inline: two icon link columns and a featured update card, collapsing to a mobile sheet.

Minimal Nav With Searchmarketing-pro-navbars-minimal-nav-with-searchA minimal header built around a command bar search pill with a keyboard shortcut hint.

Nav With Announcementmarketing-pro-navbars-nav-with-announcementA sticky header with a slim primary announcement line riding above a standard navbar.

Navbar With Promo Bannermarketing-pro-navbars-navbar-with-promo-bannerAn announcement strip and navigation designed as one header unit with a real deadline.

Phone CTA Navmarketing-pro-navbars-phone-cta-navA contact forward sticky header for service businesses with logo and links, a labeled phone number, and a quote CTA that collapse on mobile.

Pill Navmarketing-pro-navbars-pill-navA contained rounded pill header inset from the page edges with links and a rounded CTA.

Slim Glass Navmarketing-pro-navbars-slim-glass-navA slim glass navbar with a wordmark, four muted links, and one pill shaped CTA. Links collapse into a mobile sheet menu.

Split Logo Navmarketing-pro-navbars-split-logo-navA boutique header with the logo centered between two split link sets and a compact CTA.

Stacked Centered Navmarketing-pro-navbars-stacked-centered-navAn editorial masthead with utility links and search, a large centered wordmark, sign in and subscribe actions, and a centered section link row below.

Standard Sticky Navmarketing-pro-navbars-standard-sticky-navA dependable sticky header with logo, inline links, dual CTAs, and a mobile sheet menu.

Subnav Section Barmarketing-pro-navbars-subnav-section-barA slim sticky section bar with the page name and anchor links for long pages.

Issue Preview Splitmarketing-pro-newsletter-sections-issue-preview-splitThe signup form beside the actual current issue drawn as an email mockup.

Newsletter Archive Listmarketing-pro-newsletter-sections-newsletter-archive-listFour numbered back issues as linked rows with the subscribe form for the next one.

Newsletter Author Notemarketing-pro-newsletter-sections-newsletter-author-noteA two column layout pairing a letter style note card with the writer avatar signature beside the heading, labeled subscribe form, and small print.

Newsletter Card Centeredmarketing-pro-newsletter-sections-newsletter-card-centeredOne centered panel with the pitch, form, and a reader avatar row with a count.

Newsletter Dark Bandmarketing-pro-newsletter-sections-newsletter-dark-bandA primary colored band with a tinted email field, secondary button, and small print line.

Newsletter Inline Bandmarketing-pro-newsletter-sections-newsletter-inline-bandA slim bordered band pairing a cadence promise with an inline email field and button.

Newsletter Panelmarketing-pro-newsletter-sections-newsletter-panelA full width muted newsletter panel pairing a headline, benefit line, and no spam note with a labeled email field and pill subscribe button.

Newsletter Reader Quotesmarketing-pro-newsletter-sections-newsletter-reader-quotesA two column layout with subscribe copy and a labeled form on one side and two subscriber quote cards with avatars, names, and roles.

Newsletter Split With Perksmarketing-pro-newsletter-sections-newsletter-split-with-perksSubscribe copy and form beside a checked list of what every issue contains.

Newsletter Stats Stripmarketing-pro-newsletter-sections-newsletter-stats-stripA centered heading and labeled subscribe form above a four stat strip showing subscribers, open rate, issues shipped, and publishing streak.

Newsletter Topic Pickermarketing-pro-newsletter-sections-newsletter-topic-pickerA centered heading and intro over a grid of selectable topic tiles with checkboxes, followed by a labeled email field and subscribe button.

Newsletter With Sample Issuemarketing-pro-newsletter-sections-newsletter-with-sample-issueSubscribe copy beside an email client mockup rendering last month as the sample issue.

Churn Retention Chartsmarketing-pro-open-metrics-churn-retention-chartsMonthly churn bars beside a net revenue retention line, the uncomfortable pair published.

Conversion Funnel Metricsmarketing-pro-open-metrics-conversion-funnel-metricsA split layout pairing headline conversion facts with a funnel panel of proportional bars and the step by step rate between visitors, signups, and customers.

Cost Transparency Chartmarketing-pro-open-metrics-cost-transparency-chartMonthly costs by category as horizontal shadcn bars with a profitable since header.

Costs Breakdown Chartmarketing-pro-open-metrics-costs-breakdown-chartCost structure by quarter as stacked shadcn bars, mostly people, deliberately.

Goals Progress Boardmarketing-pro-open-metrics-goals-progress-boardFour goal cards pairing public targets with actuals, each carrying the current value, a progress bar, an honest status badge, and a detail line.

Growth Milestones Timelinemarketing-pro-open-metrics-growth-milestones-timelineA vertical timeline of dated milestones behind the published numbers, each row stamped with its title, a short note, and the MRR at the time.

Metrics Intro Bannermarketing-pro-open-metrics-metrics-intro-bannerThe why of an open metrics page with publish dates, cadence, and named exclusions.

Metrics Stat Gridmarketing-pro-open-metrics-metrics-stat-gridA headline snapshot with six KPI tiles, each showing the current value, a month over month delta line, and a small illustrative sparkline.

Mrr Growth Chartmarketing-pro-open-metrics-mrr-growth-chartTwelve months of MRR as a shadcn area chart with a stat header and counting rules footnote.

Open Metrics Tablemarketing-pro-open-metrics-open-metrics-tableSix months of exact headline metrics in a copyable table with a CSV link.

Revenue Breakdown Barsmarketing-pro-open-metrics-revenue-breakdown-barsMRR by plan tier as stacked shadcn bars across six months.

Traffic Sources Donutmarketing-pro-open-metrics-traffic-sources-donutVisitor acquisition split as a shadcn donut beside strategy notes per source.

User Growth Linemarketing-pro-open-metrics-user-growth-lineActive workspaces against paying customers as two shadcn lines with a legend.

Agency Program Bannermarketing-pro-partner-sections-agency-program-bannerA primary band compressing program terms to three chips with a decision timeline.

Become Partner Splitmarketing-pro-partner-sections-become-partner-splitAn agency recruitment pitch with a no competition promise beside a first quarter checklist.

Certification Path Stepsmarketing-pro-partner-sections-certification-path-stepsThree certification stages with honest hours and what each one unlocks.

Deal Registration Comparemarketing-pro-partner-sections-deal-registration-compareA heading and lede above a comparison table of registered versus unregistered deals, then a three column policy fact row and action buttons.

Marketplace Categories Gridmarketing-pro-partner-sections-marketplace-categories-gridSix marketplace aisles with listing counts and a yearly re review policy up top.

Partner Directory Previewmarketing-pro-partner-sections-partner-directory-previewA centered heading above a filter chip row and three partner cards with portrait, tier badges, specialties, ratings, and a browse all button.

Partner Earnings Calculatormarketing-pro-partner-sections-partner-earnings-calculatorA centered heading with two sliders for client count and plan value feeding a three stat payout strip, a policy note, and an apply button.

Partner Logos Bandmarketing-pro-partner-sections-partner-logos-bandA certified agency count above partner wordmarks and a find a partner link.

Partner Stats Rowmarketing-pro-partner-sections-partner-stats-rowProgram economics as four tiles, margin, median revenue, leads, and the zero.

Partner Story Timelinemarketing-pro-partner-sections-partner-story-timelineA two column layout pairing an agency narrative, quote, and byline with a vertical milestone timeline of dated stages, details, and metrics.

Partner Tiers Cardsmarketing-pro-partner-sections-partner-tiers-cardsThree program tiers with public requirements, stated margins, and benefit checklists.

Boilerplate And Factsmarketing-pro-press-sections-boilerplate-and-factsThe approved company paragraph with word count and date beside a fast facts table.

Brand Colors Gridmarketing-pro-press-sections-brand-colors-gridPalette swatch cards with names, hex values, and usage notes per color.

Company Milestonesmarketing-pro-press-sections-company-milestonesA centered heading above a single vertical timeline rail of dated milestones, each with a title, a short detail, and an optional figure chip.

Coverage Quote Wallmarketing-pro-press-sections-coverage-quote-wallA centered heading above a three column grid of coverage cards, each with a publication wordmark, a pulled sentence, and a writer byline.

Founder Bios Rowmarketing-pro-press-sections-founder-bios-rowThree quotable people with bios written to be lifted verbatim and speaks on lines.

Interview Appearancesmarketing-pro-press-sections-interview-appearancesA heading with a booking note above a divided row list of founder appearances, each showing format icon, show, guest, runtime, and a listen link.

Logo Usage Rulesmarketing-pro-press-sections-logo-usage-rulesThe mark rendered correctly beside the four common abuses, crossed out.

Media Assets Gridmarketing-pro-press-sections-media-assets-gridBrowsable asset tiles with format chips and download affordances.

Media Contact Cardmarketing-pro-press-sections-media-contact-cardA named press contact with deadline aware reply terms and what she can arrange.

Press Kit Downloadsmarketing-pro-press-sections-press-kit-downloadsFour ungated asset bundle cards with file details and an everything ZIP link.

Press Release Archivemarketing-pro-press-sections-press-release-archiveA sticky intro column with email and RSS subscribe links beside announcements grouped by year, each row showing date, category, headline, and summary.

Annual Toggle Two Tiermarketing-pro-pricing-sections-annual-toggle-two-tierTwo plan cards under a monthly and annual switch that updates prices with a savings badge.

Base Plus Add Onsmarketing-pro-pricing-sections-base-plus-addonsA split pricing section pairing a base plan card and feature checklist with a stack of priced extras and a hairline estimated total row.

Compact Tier Cardsmarketing-pro-pricing-sections-compact-tier-cardsThree slim tiers with a price and one deciding sentence each, no feature lists.

Compare Plansmarketing-pro-pricing-sections-compare-plansA full feature matrix for three plans with pricing and CTAs in the column heads, grouped feature rows, and a tinted band on the popular plan.

Credit Packsmarketing-pro-pricing-sections-credit-packsFour prepaid credit pack cards with one time prices and per credit rates, above three notes on expiry, team sharing, and automatic top ups.

Currency Region Tablemarketing-pro-pricing-sections-currency-region-tableThe same plan in four currencies with purchasing power discounts published openly.

Dark Featured Tiermarketing-pro-pricing-sections-dark-featured-tierThree pricing tiers where the featured middle plan sits on a solid primary panel.

Enterprise Split Ctamarketing-pro-pricing-sections-enterprise-split-ctaAn enterprise pitch with capability checks beside a named contact card and call terms.

Feature Matrix Compactmarketing-pro-pricing-sections-feature-matrix-compactPlan headers with CTAs above a compact feature matrix that shades the middle column.

Free vs Promarketing-pro-pricing-sections-free-vs-proFree and Pro columns with their own feature lists and CTAs, with Pro framed by a primary ring.

Lifetime Dealmarketing-pro-pricing-sections-lifetime-dealA wide panel with a one time price, three value bullets, a guarantee note, and a strong CTA.

Open Source vs Cloudmarketing-pro-pricing-sections-open-source-vs-cloudA free self hosted panel with an install command beside a paid managed cloud plan.

Per Seat Calculatormarketing-pro-pricing-sections-per-seat-calculatorA seat slider that totals a flat per seat rate beside the included feature list.

Plans By Audiencemarketing-pro-pricing-sections-plans-by-audienceA centered tab switcher for freelancers, teams, and agencies, each revealing two plan cards with prices, feature lists, and a highlighted pick.

Plans With Metersmarketing-pro-pricing-sections-plans-with-metersThree plan cards whose quotas are proportional meter bars, so tiers compare at a glance.

Pricing Faq Inlinemarketing-pro-pricing-sections-pricing-faq-inlineSix billing questions answered open beside the prices, mechanisms and timelines included.

Pricing With Cost Chartmarketing-pro-pricing-sections-pricing-with-cost-chartA flat plan beside a shadcn bar chart of total cost against a per seat stack by team size.

Pricing With Guaranteemarketing-pro-pricing-sections-pricing-with-guaranteeA flat plan beside a guarantee card with spelled out terms and a published claim rate.

Pricing With Testimonialmarketing-pro-pricing-sections-pricing-with-testimonialTwo plan cards beside a customer quote card that endorses the upgrade.

Sample Invoicemarketing-pro-pricing-sections-sample-invoiceA left column of a heading and four checked billing promises beside a static sample invoice with line items, a seat credit, tax, and total.

Simple Rate Tablemarketing-pro-pricing-sections-simple-rate-tableA minimal rate table listing each metric, its included allowance, and the overage price.

Single Plan With FAQmarketing-pro-pricing-sections-single-plan-with-faqA single full plan price card beside a divided list of three short pricing questions.

Startup Discount Cardmarketing-pro-pricing-sections-startup-discount-cardThe startup program as five labeled rows, including what happens when the discount ends.

Trial Timelinemarketing-pro-pricing-sections-trial-timelineA single plan card with a flat price and feature list beside a vertical timeline walking through each day of a 14 day trial.

Usage Estimatormarketing-pro-pricing-sections-usage-estimatorAn interactive estimator with a seats slider and annual switch on one side and an inverted summary card with a line item breakdown on the other.

Usage Estimator Slidermarketing-pro-pricing-sections-usage-estimator-sliderOne slider for contacts, the matching plan and price computed live with the CTA labeled.

With Roi Chartmarketing-pro-pricing-sections-with-roi-chartA flat price plan beside a chart of cumulative value crossing cost at a labeled break even.

With Usage Curvemarketing-pro-pricing-sections-with-usage-curveA plan card beside an SVG curve of the unit price flattening across three labeled volume tiers.

Accordion Stepsmarketing-pro-process-sections-accordion-stepsA split process section pairing a four step accordion of numbered onboarding steps with a window styled data sync mockup and progress meter.

Branching Flowmarketing-pro-process-sections-branching-flowAn SVG flowchart of automated checks branching to approve or review, with a numbered step list.

Checklist With Progressmarketing-pro-process-sections-checklist-with-progressThe setup checklist mid flight, a computed meter above tasks in three states.

Cycle Diagrammarketing-pro-process-sections-cycle-diagramA numbered four step list beside a circular loop diagram with nodes on a dashed ring.

Day In The Lifemarketing-pro-process-sections-day-in-the-lifeA workday told in timestamped scenes down a rule, each with its quiet before.

Day One Timelinemarketing-pro-process-sections-day-one-timelineIntro copy beside a first day timeline of product moments keyed by monospaced times.

First Week Timelinemarketing-pro-process-sections-first-week-timelineDays one through seven in honest prose, including the two days of nothing on purpose.

Gantt Style Planmarketing-pro-process-sections-gantt-style-planThe onboarding month as overlapping workstream bars with owners labeled per bar.

Handoff Lanesmarketing-pro-process-sections-handoff-lanesA responsibility split process section running three rollout phases as rows under two lanes, contrasting the customer tasks against the heavier vendor tasks.

Horizontal Connectedmarketing-pro-process-sections-horizontal-connectedThree steps in a row joined by a thin connector line with a dot marking each step.

Milestone Pathmarketing-pro-process-sections-milestone-pathA winding dashed path with four numbered milestone dots above a matching grid of steps.

Numbered Editorialmarketing-pro-process-sections-numbered-editorialFour oversized numbered steps in a two column editorial grid with top borders.

Old Way New Waymarketing-pro-process-sections-old-way-new-wayA process comparison telling one weekly workflow twice, a manual panel with X marks beside a product panel with check marks and summed totals.

Onboarding Checklistmarketing-pro-process-sections-onboarding-checklistCopy about a one afternoon setup beside a bordered checklist card with a progress bar.

Pipeline Flowmarketing-pro-process-sections-pipeline-flowInline SVG flow of four pipeline stages above a three column row explaining them.

Process Tablemarketing-pro-process-sections-process-tableA process section laying the rollout out as a five row table with stage, description, owner badge, timeline, and deliverable columns.

Progress Bar Stepsmarketing-pro-process-sections-progress-bar-stepsOnboarding as a segmented meter frozen mid journey with honest time labels per step.

Split Steps With Mockupmarketing-pro-process-sections-split-steps-with-mockupThree numbered steps beside an app window mockup showing live metrics and a chart.

Step Tabsmarketing-pro-process-sections-step-tabsTabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.

Steps With Mini Mockupsmarketing-pro-process-sections-steps-with-mini-mockupsThree numbered step cards, each led by a mini UI mockup of the brief, board, and report stages.

Three Phase Pathmarketing-pro-process-sections-three-phase-pathA three phase process section with icon squares, arrow connectors on desktop, per phase checklists, and a quiet link to the onboarding guide.

Three Step Cardsmarketing-pro-process-sections-three-step-cardsCentered heading above three step cards, each pairing an icon and number with short copy.

Vertical Milestonesmarketing-pro-process-sections-vertical-milestonesA split process section with a sticky header, CTA, and proof stats beside a vertical timeline of four numbered milestones with timing detail rows.

Vertical Timelinemarketing-pro-process-sections-vertical-timelineNarrow vertical timeline of four numbered steps joined by a line, with buttons below.

Zigzag Stepsmarketing-pro-process-sections-zigzag-stepsAlternating rows of step copy and app mockups, each tagged with a bordered step badge.

Annotated Screenshotmarketing-pro-product-tours-annotated-screenshotA browser mockup with numbered marker dots decoded by a sticky legend list.

Before After Screensmarketing-pro-product-tours-before-after-screensA shabby dashed before screen beside a confident after screen with verdict captions.

Command Palette Tourmarketing-pro-product-tours-command-palette-tourSplit layout pairing a power user pitch with a static command palette blueprint showing a typed query, grouped results, and inline shortcut hints.

Demo Teaser Splitmarketing-pro-product-tours-demo-teaser-splitA sandbox pitch beside a mockup with a drawn cursor, hovered row, and honest tooltip.

Feature Spotlight Tabsmarketing-pro-product-tours-feature-spotlight-tabsThree workflows on ui tabs, each pairing one paragraph with a small drawn panel.

Feature Spotlight Zoommarketing-pro-product-tours-feature-spotlight-zoomOne UI element drawn at large scale, an automation rule row with a toggle and live count.

Keyboard Shortcuts Panelmarketing-pro-product-tours-keyboard-shortcuts-panelThe product shortcuts as a Kbd reference panel, craft signaled through key caps.

Onboarding Checklistmarketing-pro-product-tours-onboarding-checklistSplit layout pairing a guided onboarding pitch and reassurance rows with a setup checklist mockup showing a progress bar and highlighted current step.

Persona Tour Gridmarketing-pro-product-tours-persona-tour-gridCentered heading above three persona columns, each pairing a framed home screen mockup with a role name and a short line on what they do.

Side Tabs Tourmarketing-pro-product-tours-side-tabs-tourVertical tabs of product areas, each pane pairing a blurb with a framed list mockup.

Tour Steps With Screensmarketing-pro-product-tours-tour-steps-with-screensThree numbered tour steps, each paired with a framed mini screen showing that stage.

Video Tour Chaptersmarketing-pro-product-tours-video-tour-chaptersCentered heading over a static video player mockup with a chaptered scrubber, beside a timestamped chapter list that highlights the active chapter.

Workflow Walkthroughmarketing-pro-product-tours-workflow-walkthroughThree mini screens joined by arrows following one item from new to sent.

Feature Journeymarketing-pro-roadmap-sections-feature-journeyA split section with heading, a stat rows panel, and a dated vertical timeline tracing one feature from first request to shipped.

Feature Request Formmarketing-pro-roadmap-sections-feature-request-formA split call to action pairing numbered triage steps that explain what happens after you submit with a labeled request form card.

Milestone Progress Barsmarketing-pro-roadmap-sections-milestone-progress-barsIn flight initiatives with stage chips, owners, and progress bars defined by milestones.

Prioritization Criteriamarketing-pro-roadmap-sections-prioritization-criteriaA centered header over a two by two grid of criteria cards, each pairing the test we apply with a passed or failed real example.

Public Roadmap Bannermarketing-pro-roadmap-sections-public-roadmap-bannerA transparency banner with in flight and shipped counts linking roadmap and changelog.

Quarter Timelinemarketing-pro-roadmap-sections-quarter-timelineFour quarters on a line with status chips and struck through shipped items.

Roadmap Columnsmarketing-pro-roadmap-sections-roadmap-columnsA Now, Next, Later board with defined column semantics and tagged item cards.

Roadmap Tablemarketing-pro-roadmap-sections-roadmap-tableA section header over a summary line and a dense table listing every initiative with detail, product area, status badge, and target quarter columns.

Roadmap With Votesmarketing-pro-roadmap-sections-roadmap-with-votesFeature requests ranked by vote buttons with status badges and descriptions.

Shipped Vs Planned Listmarketing-pro-roadmap-sections-shipped-vs-planned-listDated shipped items beside planned ones with quarter chips and an honest exploring label.

Voting Board Columnsmarketing-pro-roadmap-sections-voting-board-columnsThe public roadmap as a three column kanban, vote counts kept on shipped cards.

Yearly Themesmarketing-pro-roadmap-sections-yearly-themesThe three directive themes the year answers to, with reasoning and in flight bets.

Annual Report Numbersmarketing-pro-stats-sections-annual-report-numbersAn editorial year in review with a statement headline and three oversized ruled numbers.

Counters With Iconsmarketing-pro-stats-sections-counters-with-iconsA light four counter row with tinted icon discs, large values, and hairline dividers.

Dark Stat Bandmarketing-pro-stats-sections-dark-stat-bandA solid primary band with a short headline beside three large stats divided by hairline rules.

Growth Storymarketing-pro-stats-sections-growth-storyA split stats section pairing a heading, narrative paragraph, and three hairline stat rows with a large decorative area chart panel.

Inline Stat Stripmarketing-pro-stats-sections-inline-stat-stripA slim pill shaped strip of four value and label pairs, the lightest proof beat between sections.

KPI Cardsmarketing-pro-stats-sections-kpi-cardsA centered stats header over three KPI cards, each pairing a small label and oversized value with a delta chip and a twelve bar sparkline.

Kpi Cards With Chartsmarketing-pro-stats-sections-kpi-cards-with-chartsFour KPI cards with working shadcn sparklines beneath their numbers.

Live Counter Bandmarketing-pro-stats-sections-live-counter-bandOne running total with a pulsing dot and the per minute rate beneath.

Metric Bandmarketing-pro-stats-sections-metric-bandA centered stats band with a heading, four oversized metrics separated by hairline dividers, and a footnote citing the measurement period.

Metric Tiles Bandmarketing-pro-stats-sections-metric-tiles-bandA centered heading above four large KPI tiles separated by hairline dividers in one rounded band.

Milestones Inline Textmarketing-pro-stats-sections-milestones-inline-textSix years of company history as one paragraph with the milestones set at display size inline.

Rating Stats Bandmarketing-pro-stats-sections-rating-stats-bandA split satisfaction band with the overall score set enormous beside a star row and a ruled list of rating sources, each with its own stars and volume.

Single Stat Spotlightmarketing-pro-stats-sections-single-stat-spotlightOne enormous centered number with a quiet claim above and a sourcing line below.

Split Numbers With Copymarketing-pro-stats-sections-split-numbers-with-copyA text only split section with a heading and two paragraphs beside a grid of four large numbers.

Stat Bento Gridmarketing-pro-stats-sections-stat-bento-gridA left aligned header, then one dominant hero card carrying the headline number and sourcing beside four smaller supporting stat cards in a two by two grid.

Stats Benchmark Barsmarketing-pro-stats-sections-stats-benchmark-barsA centered header over one bordered panel where each row compares a measure as two horizontal bars, customer result above industry average, with a legend.

Stats Comparison Columnsmarketing-pro-stats-sections-stats-comparison-columnsA then and now ledger with before values struck through beside bold on Acme numbers.

Stats With Bar Chartmarketing-pro-stats-sections-stats-with-bar-chartA split section pairing a heading and three stacked stats with a twelve month bar chart panel.

Stats With Donut Chartmarketing-pro-stats-sections-stats-with-donut-chartThree stat lines beside a shadcn donut splitting the same claim into its parts.

Stats With Donut Gridmarketing-pro-stats-sections-stats-with-donut-gridThree large donut rings with centered percentages and captions inside one bordered panel.

Stats With Progress Barsmarketing-pro-stats-sections-stats-with-progress-barsCopy beside four goal attainment rows, each with a label, value, and filled progress bar.

Stats With Quotesmarketing-pro-stats-sections-stats-with-quotesA centered header over three cards, each pairing an oversized stat and label with the customer quote behind the number and an avatar attribution.

Stats With Sparklinesmarketing-pro-stats-sections-stats-with-sparklinesFour stat cards, each topped by a small sparkline that shows the trend behind the number.

Text Stat Sentencesmarketing-pro-stats-sections-text-stat-sentencesThree prose sentences with the numbers rendered large inline, stats with grammar.

Current Status Listmarketing-pro-status-sections-current-status-listAn aggregate status banner above per component rows with dots and uptime figures.

Incident History Listmarketing-pro-status-sections-incident-history-listDated incidents with severity chips, precise impact lines, and postmortem links.

Incident Response Processmarketing-pro-status-sections-incident-response-processA heading and lede over four numbered step cards, each pairing a title and description with a time commitment printed in a footer row.

Incident Update Timelinemarketing-pro-status-sections-incident-update-timelineA split section pairing a communication promise and three bullet commitments with a live incident feed of phase chips, timestamps, and update text.

Maintenance Schedulemarketing-pro-status-sections-maintenance-scheduleA heading and lede over a bordered list of maintenance windows, each row carrying date, UTC time, affected components, impact, and a status chip.

Regional Status Gridmarketing-pro-status-sections-regional-status-gridPer region health cards with local latency and twelve month incident counts.

Reliability Stats Bandmarketing-pro-status-sections-reliability-stats-bandA centered heading and lede above a four column stat band, each cell pairing a large metric with its label and a method note.

Response Time Chartmarketing-pro-status-sections-response-time-chartMedian and p99 latency as shadcn lines with the visible spike explained.

Sla Commitments Tablemarketing-pro-status-sections-sla-commitments-tableSLA targets beside trailing actuals and automatic remedies, published inline.

Status Summary Bannermarketing-pro-status-sections-status-summary-bannerA one row live status banner with a pulsing dot linking the full status page.

Subscribe To Updatesmarketing-pro-status-sections-subscribe-to-updatesA status list signup with a never marketing constitution and an email form.

Uptime Day Ticksmarketing-pro-status-sections-uptime-day-ticksThe last 90 days as tick bars with the two degraded days named below, not in tooltips.

Advisors And Boardmarketing-pro-team-sections-advisors-and-boardA split section with intro copy and engagement notes beside two labeled lists of advisor and board rows, each with avatar, name, and former role.

Compact Team Rolesmarketing-pro-team-sections-compact-team-rolesA text only roster in three department columns listing names and roles without portraits.

Founders Spotlightmarketing-pro-team-sections-founders-spotlightTwo wide founder cards with large avatars, problem and answer bios, and social links.

Hiring Processmarketing-pro-team-sections-hiring-processA heading and lede above a four column grid of numbered interview stages with durations, closed by a candidate promises row and an open roles button.

Leadership Listmarketing-pro-team-sections-leadership-listEditorial leadership rows with avatars, highlighted roles, and short biographies.

Open Roles By Teammarketing-pro-team-sections-open-roles-by-teamPositions grouped by team with location and the real comp range on every row.

Team By Departmentmarketing-pro-team-sections-team-by-departmentPeople grouped into labeled departments as avatar pill chips with one line charters.

Team Cards With Socialsmarketing-pro-team-sections-team-cards-with-socialsSix bordered member cards with avatars, personality one liners, and social icon rows.

Team Grid With Avatarsmarketing-pro-team-sections-team-grid-with-avatarsA centered heading above a four column grid of illustrated portraits with names and roles.

Team Growth Chartmarketing-pro-team-sections-team-growth-chartFive years of headcount as a stepped shadcn line beside the slow on purpose philosophy.

Team Map Distributionmarketing-pro-team-sections-team-map-distributionA distributed team pitch beside a dot grid map with city pins and an overlap caption.

Team Stats Bannermarketing-pro-team-sections-team-stats-bannerA compact banner pairing overlapping avatars and a team pitch with three numbers.

Team Timelinemarketing-pro-team-sections-team-timelineA heading and lede above a vertical rail of year entries, each with a milestone title, a short story, and an overlapping avatar group of new joiners.

Team Voicesmarketing-pro-team-sections-team-voicesA centered heading above a three column grid of bordered quote cards, each carrying a teammate quote with an avatar, name, and role footer.

Team With Hiring Ctamarketing-pro-team-sections-team-with-hiring-ctaRecruiting copy and CTAs beside an avatar mosaic ending in a dashed open seat tile.

Alternating Quotesmarketing-pro-testimonials-alternating-quotesLarge quotes with avatars that alternate left and right alignment in a divided stack.

Avatar Strip With Quotemarketing-pro-testimonials-avatar-strip-with-quoteA centered row of ten overlapping avatars above one quote, five stars, and a review count.

Case Study Cardsmarketing-pro-testimonials-case-study-cardsA centered header over two large case study cards pairing a customer wordmark and quote excerpt with two headline metrics and a story link.

Chat Style Quotesmarketing-pro-testimonials-chat-style-quotesTestimonials as a chat thread with alternating bubbles, avatars, and timestamps in a framed window.

Dark Panel Quotemarketing-pro-testimonials-dark-panel-quoteOne featured quote inside a solid primary panel with avatar attribution at the bottom.

Interview Excerptmarketing-pro-testimonials-interview-excerptA two column layout pairing a profile card with a ruled fact sheet and headline outcome beside four question and answer exchanges in a hairline divided list.

Journey Quotes Timelinemarketing-pro-testimonials-journey-quotes-timelineA centered header with avatar attribution above a vertical timeline of four dated quotes from one customer, day one to renewal.

Logos And Quotes Gridmarketing-pro-testimonials-logos-and-quotes-gridA grid that alternates customer quote cards with company wordmark tiles under a heading.

Nps Chart With Quotesmarketing-pro-testimonials-nps-chart-with-quotesSix quarters of NPS as shadcn bars beside survey verbatims including the missing point.

One Line Quotes Listmarketing-pro-testimonials-one-line-quotes-listTen customers at one ruled line each, density and variety as the proof.

Press Quotes Rowmarketing-pro-testimonials-press-quotes-rowThree pulled review lines under publication wordmarks, each cited to its piece.

Pull Quotes Stackmarketing-pro-testimonials-pull-quotes-stackAn editorial stack of two big pull quotes with oversized quote marks and attributions.

Quote Carouselmarketing-pro-testimonials-quote-carouselA looping carousel of three large centered pull quotes with avatars, customer wordmarks, and rounded previous and next controls below.

Quote Masonry Gridmarketing-pro-testimonials-quote-masonry-gridFive quotes at their natural lengths flowing in masonry columns with avatar attributions.

Quote With Metricsmarketing-pro-testimonials-quote-with-metricsA featured customer quote card beside a divided grid of two big result numbers.

Quote With Metrics Panelmarketing-pro-testimonials-quote-with-metrics-panelOne substantial quote beside the board slide it describes, befores struck through.

Quote With Product Shotmarketing-pro-testimonials-quote-with-product-shotA large quote and attribution beside a launch checklist mockup of the product.

Quote With Rating Barsmarketing-pro-testimonials-quote-with-rating-barsA review summary with average score, star row, and histogram bars beside a featured quote.

Quote With Results Chartmarketing-pro-testimonials-quote-with-results-chartA large customer quote beside a results panel with an outcome headline and twelve month bar chart.

Quote With Stats Rowmarketing-pro-testimonials-quote-with-stats-rowA centered banner quote above a ruled row of three results from the same customer.

Role Quote Tabsmarketing-pro-testimonials-role-quote-tabsA centered header above a three tab switcher segmented by buyer role, each panel showing one large quote with avatar attribution and a ruled result line.

Single Quote Bannermarketing-pro-testimonials-single-quote-bannerOne large centered quote with an avatar, name, and role stacked beneath it.

Social Cardsmarketing-pro-testimonials-social-cardsA grid of six social post style cards with avatars, handles, and casual praise.

Social Posts Wallmarketing-pro-testimonials-social-posts-wallSix short posts drawn as cards with avatars, handles, and timestamps, displayed unedited.

Three Column Quotesmarketing-pro-testimonials-three-column-quotesThree customer quotes in divided columns under a centered heading and lede.

Video Testimonial Cardsmarketing-pro-testimonials-video-testimonial-cardsA centered header above a three card grid of testimonials, each framing a thumbnail with a play control, a pull quote, avatar, and clip length.

Wall of Lovemarketing-pro-testimonials-wall-of-loveA masonry wall of nine short quote cards under a centered header, with illustrated avatars, names, and roles at customer companies.

Audit Log Previewmarketing-pro-trust-and-security-audit-log-previewA mono audit log mockup including the line the vendor own support access writes.

Compliance Badges Rowmarketing-pro-trust-and-security-compliance-badges-rowA strip of certification chips with shield icons and audit dates beside a delivery promise.

Compliance Panelmarketing-pro-trust-and-security-compliance-panelA compliance section with a centered header, four framework cards pairing drawn badge marks with status lines, and a quiet trust center link.

Data Flow Diagrammarketing-pro-trust-and-security-data-flow-diagramAn SVG flow of tools, platform, and storage with TLS and AES labels on the arrows.

Data Promisemarketing-pro-trust-and-security-data-promiseA centered data manifesto with five check marked promise rows split by hairlines and whitepaper and DPA buttons beneath.

Data Retention Stagesmarketing-pro-trust-and-security-data-retention-stagesA left aligned header above three lifecycle panels for active accounts, cancellation, and deletion, each with a duration and data category rows.

Encryption Flow Diagrammarketing-pro-trust-and-security-encryption-flow-diagramBrowser to storage as a three node SVG flow with the encryption state on every hop.

Incident Response Stepsmarketing-pro-trust-and-security-incident-response-stepsA left aligned header above five numbered phases in a horizontal stepper, each with a time chip and short note, plus a last incident line.

Plain Language Privacymarketing-pro-trust-and-security-plain-language-privacyFive human sentences summarizing the privacy policy, each linked to its legal section.

Residency Map Dotsmarketing-pro-trust-and-security-residency-map-dotsA residency promise beside a dot grid map with pinned storage regions and a backup clause.

Responsible Disclosuremarketing-pro-trust-and-security-responsible-disclosureA centered header over three response time tiles, side by side in scope and out of scope lists, and a report button with a safe harbor note.

Security Faq Compactmarketing-pro-trust-and-security-security-faq-compactSix always open security answers written to be pasted into a vendor review form.

Security Feature Listmarketing-pro-trust-and-security-security-feature-listA split security section pairing a headline, whitepaper button, and spec rows with a grouped icon feature list under two uppercase labels.

Security Pillars Gridmarketing-pro-trust-and-security-security-pillars-gridSix security control cards with icon discs and implementation detail sentences.

Security Split With Checklistmarketing-pro-trust-and-security-security-split-with-checklistA security pitch and pack request beside six checked controls with terse implementation notes.

Shared Responsibility Modelmarketing-pro-trust-and-security-shared-responsibility-modelA centered header over two paired panels splitting what we secure and what you control, each an icon list closed by a joint strip.

Subprocessors Tablemarketing-pro-trust-and-security-subprocessors-tableEvery third party that touches customer data, with purpose, region, and year added.

Trust Center Linksmarketing-pro-trust-and-security-trust-center-linksFour document cards with updated dates and honest action links for security reviewers.

Uptime History Barsmarketing-pro-trust-and-security-uptime-history-barsSLA stats beside twelve monthly uptime bars with one honest dip explained in the caption.

Access Denied 403marketing-pro-utility-pages-access-denied-403A centered 403 page with a signed-in identity card, the admin who can grant access, a request action, and account switch controls.

Coming Soonmarketing-pro-utility-pages-coming-soonA prelaunch page with the launch date at display size and a two email promise.

Email Confirmedmarketing-pro-utility-pages-email-confirmedA verification landing that names what the click unlocked before one button back.

Link Expiredmarketing-pro-utility-pages-link-expiredAn expired sign-in link page with a three-column lifecycle timeline, a security framed explanation, and a one field form for a fresh link.

Maintenance Pagemarketing-pro-utility-pages-maintenance-pageA planned window notice with the untouched list and a live status link.

Not Found 404marketing-pro-utility-pages-not-found-404A 404 with a search pill and chips for the pages people were actually hunting.

Not Found Directorymarketing-pro-utility-pages-not-found-directoryA 404 page with an oversized muted number, a calm headline, a rounded home button, and three destination cards for docs, status, and support.

Rate Limited 429marketing-pro-utility-pages-rate-limited-429A blameless 429 page with the exact retry window and a human path to higher limits.

Server Error 500marketing-pro-utility-pages-server-error-500A 500 that owns the failure, protects the draft, and hands out an error ID.

Signups Closedmarketing-pro-utility-pages-signups-closedA capacity pause page with the reason, reopen date, and a hold my place form.

Thank You Pagemarketing-pro-utility-pages-thank-you-pageA post signup page that schedules the next five minutes with honest times.

Unsubscribe Confirmedmarketing-pro-utility-pages-unsubscribe-confirmedAn unsubscribe confirmation with an icon badge, a preference card of remaining lists with per-list checkboxes and cadences, and an undo action.

Verify Your Inboxmarketing-pro-utility-pages-verify-your-inboxA post-signup check your inbox page with an icon badge, three-step progress row, the sent-to address, and resend or fix-typo actions.

Centered Video Showcasemarketing-pro-video-sections-centered-video-showcaseOne ultrawide cinematic player mockup under a centered heading with a duration caption.

Live Session Registermarketing-pro-video-sections-live-session-registerA live session split: date, agenda, and host credits on one side with a labeled registration card and recording note on the other.

Podcast Episode Listmarketing-pro-video-sections-podcast-episode-listEpisode rows with play discs, guest credits, and platform chips.

Short Clips Rowmarketing-pro-video-sections-short-clips-rowA heading with a browse link above a row of four portrait clip cards, each with a play disc, duration chip, and caption.

Testimonial Video Cardsmarketing-pro-video-sections-testimonial-video-cardsThree customer film cards with pull quote lines, avatars, and duration chips.

Video Grid Thumbnailsmarketing-pro-video-sections-video-grid-thumbnailsThree video cards with posters, play discs, duration chips, and topic badges.

Video Player Splitmarketing-pro-video-sections-video-player-splitPitch copy beside a player mockup with a poster, play disc, and progress bar.

Video Playlist Queuemarketing-pro-video-sections-video-playlist-queueA featured video player beside a numbered up next queue of thumbnail rows with durations and a highlighted now playing row.

Video Transcript Splitmarketing-pro-video-sections-video-transcript-splitA player mockup beside a transcript excerpt of timestamped speaker turns with a link out to the full text.

Video With Chaptersmarketing-pro-video-sections-video-with-chaptersA player mockup beside a chapter list with timestamps and one active row.

Webinar Replay Splitmarketing-pro-video-sections-webinar-replay-splitA dated replay player beside checked takeaways with watch and slides CTAs.

Webinar Replays Gridmarketing-pro-video-sections-webinar-replays-gridFour past sessions with posters, live attendance counts, and no registration wall.

Cohort Schedulemarketing-pro-waitlist-sections-cohort-scheduleA centered heading over an admission calendar table of upcoming cohorts with dates, seat counts, and status, marking the row a signup lands in.

Early Access Tiersmarketing-pro-waitlist-sections-early-access-tiersThe free queue beside a paid skip whose fee credits against the first year.

Founding Member Perksmarketing-pro-waitlist-sections-founding-member-perksFour founding perks with stated limits, led by the price lock, dated window.

Invite Code Redeemmarketing-pro-waitlist-sections-invite-code-redeemA centered code entry card with the invite tree explained and a polite no code path.

Launch Timelinemarketing-pro-waitlist-sections-launch-timelineAlpha, beta, launch phases down a rail with a you are here chip on the live one.

Milestone Unlocksmarketing-pro-waitlist-sections-milestone-unlocksA centered heading, a progress bar over the signup count, and a grid of milestone cards that each unlock a feature at a threshold.

Referral Position Cardmarketing-pro-waitlist-sections-referral-position-cardYour queue position with referral math, a copyable link, and a fairness cap.

Waitlist Faq Compactmarketing-pro-waitlist-sections-waitlist-faq-compactThe five waitlist questions answered with dates, counts, and mechanisms.

Waitlist Hero Countmarketing-pro-waitlist-sections-waitlist-hero-countA waitlist hero with the queue size and weekly admission rate as the proof.

Waitlist How It Worksmarketing-pro-waitlist-sections-waitlist-how-it-worksA four step numbered grid explaining the queue mechanics from signup to invite, each step carrying the one rule that governs it.

Waitlist Signup Splitmarketing-pro-waitlist-sections-waitlist-signup-splitA two column waitlist section pairing a labeled signup form with a spec row card that lists the plain terms of the list.

Waitlist Stats Bandmarketing-pro-waitlist-sections-waitlist-stats-bandFour queue health numbers including median wait and invite activation rate.

Achievement Barsmarketing-stats-achievement-barsHorizontal 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.

Card Groupmarketing-stats-card-groupA 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.

Circular Progressmarketing-stats-circular-progressRing shaped progress dials that animate to a percentage value. Good for dashboards or landing pages that report completion rates and capacity at a glance.

Comparison Metricsmarketing-stats-comparison-metricsTwo 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.

Comparison Statsmarketing-stats-comparison-statsPaired figures with labels that weigh your offering against a baseline. Great for sales pages that need to make the gain feel concrete and credible.

Customer Testimonialmarketing-stats-customer-testimonialA 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.

Funnel Statsmarketing-stats-funnel-statsA 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.

Gradient Gridmarketing-stats-gradient-gridA 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.

Growth Timelinemarketing-stats-growth-timelineA 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.

Horizontal With Dividersmarketing-stats-horizontal-with-dividersA 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.

Impact Numbersmarketing-stats-impact-numbersOversized counters that animate upward as the section scrolls into view. Use it to make reach, users, or revenue feel bold and immediate to readers.

Interactive Hovermarketing-stats-interactive-hoverStat 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.

Metric Cardsmarketing-stats-metric-cardsBordered 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 Main With Three Follow Upsmarketing-stats-one-main-with-three-follow-upsOne large headline number anchored by three smaller supporting stats. Use it to lead with your strongest figure and back it with related proof.

Progress Barsmarketing-stats-progress-barsLabeled 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.

Simple 3 Colsmarketing-stats-simple-3-colsThree 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.

Sparkline Statsmarketing-stats-sparkline-statsStat 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.

Stats With Iconsmarketing-stats-stats-with-iconsEach 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.

Timeline Statsmarketing-stats-timeline-statsKey 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.

Trust Indicatorsmarketing-stats-trust-indicatorsA 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.

Benefits Listmarketing-subscribe-benefits-listA 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.

Incentive Center Alignedmarketing-subscribe-incentive-center-alignedA 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.

Input Stylemarketing-subscribe-input-styleA 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.

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

Simple Center Alignedmarketing-subscribe-simple-center-alignedA clean centered newsletter signup with a heading, short text, and email field. The reliable default for landing pages and blog footers here.

Simple Right Alignedmarketing-subscribe-simple-right-alignedA 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.

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

Split Layoutmarketing-subscribe-split-layoutA 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.

Alternating Sectionsmarketing-team-sections-alternating-sectionsA 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.

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

Simple Cardsmarketing-team-sections-simple-cardsA 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.

With Contactmarketing-team-sections-with-contactTeam 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.

With Filtersmarketing-team-sections-with-filtersA team directory with category filters that sort members by department or location. Helps visitors find the right person inside a large company.

With Hover Cardsmarketing-team-sections-with-hover-cardsA 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.

With Large Imagesmarketing-team-sections-with-large-imagesTeam 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.

With Skill Badgesmarketing-team-sections-with-skill-badgesTeam 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.

With Testimonialsmarketing-team-sections-with-testimonialsTeam 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.

Basemarketing-testimonials-baseA 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.

Big Imagemarketing-testimonials-big-imageA 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.

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

Cards With Statsmarketing-testimonials-cards-with-statsTestimonial cards joined by a row of headline metrics like users and revenue. Pair real quotes with hard numbers to prove your product delivers.

Customer Story Showcasemarketing-testimonials-customer-story-showcaseA featured customer story with a detailed quote, company logo, and result. Use it as social proof when one account speaks to your ideal buyer.

Mini With Dividers In Gridmarketing-testimonials-mini-with-dividers-in-gridCompact testimonials arranged in a grid with thin dividers between them. Fit many short quotes into a tidy space without crowding the layout.

Short Review With Logo And Starsmarketing-testimonials-short-review-with-logo-and-starsA 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.

Simple Center Aligned With Logomarketing-testimonials-simple-center-aligned-with-logoA single centered quote topped with a company logo and the author below. Keep focus on one strong endorsement on a calm, uncluttered section.

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

With Statsmarketing-testimonials-with-statsA testimonial section blended with key metrics such as customers served and ratings. Combine a quote with proof points to back your claims with data.

Company Intro Heromodern-saas-about-sections-company-intro-heroA centered about page opener: kicker pill, oversized headline, and a single plainspoken thesis line over a dark mode only ambient glow.

Founding Story Splitmodern-saas-about-sections-founding-story-splitA founding story split: mono tag and large heading on the left lane, two measured prose paragraphs on the right.

Hiring Banner Stripmodern-saas-about-sections-hiring-banner-stripA hiring banner strip: an invitation line and a short teams list beside a primary depth pill pointing at open roles.

Leadership Avatar Gridmodern-saas-about-sections-leadership-avatar-gridA five up leadership grid of tile cards with large illustrated avatars, names, and roles under an asymmetric header.

Leadership Teammodern-saas-about-sections-leadership-teamA 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.

Meet the Teammodern-saas-about-sections-meet-the-teamA swipeable carousel of team profile cards with names, roles, and portraits, each opening a short bio in a dialog.

Numbered Value Cardsmodern-saas-about-sections-numbered-value-cardsThree numbered value cards: mono index, bold principle, and a two line explanation on gradient panels.

Our Purposemodern-saas-about-sections-our-purposeAn editorial about section with no imagery: an uppercase eyebrow and large headline on the left beside a two paragraph purpose statement on the right.

Story Timelinemodern-saas-about-sections-story-timelineA 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.

Team Stats Interludemodern-saas-about-sections-team-stats-interludeA quiet company facts interlude: two large proof stats split by a hairline, followed by a single transitional statement line about the team.

Depth Loginmodern-saas-auth-pages-depth-loginA centered login screen with SSO pills, mono divider, email field, and primary depth pill over a soft radial glow.

Depth Signupmodern-saas-auth-pages-depth-signupA split signup screen: form half with SSO pills and fields, proof half with a customer quote and social proof row.

Article Card Gridmodern-saas-blog-sections-article-card-gridA three up grid of blog post cards, each pairing a category badge and date with the post title and a stacked author byline.

Article Prose Pagemodern-saas-blog-sections-article-prose-pageA full blog article page: breadcrumb, oversized headline, avatar byline, wide photograph, measured prose with a pull quote, tag chips, and read next tiles.

Card Carouselmodern-saas-blog-sections-card-carouselA swipeable carousel of blog post cards, each pairing a cover image with a category, date, two line title, and read time.

Category Post Listmodern-saas-blog-sections-category-post-listA blog category page: breadcrumb, left aligned heading with mono post count, category filter pills, a column of quiet list rows, and an honest load more pill.

Featured Post Gridmodern-saas-blog-sections-featured-post-gridA blog landing opener: a centered kicker and heading over a wide featured post split card with an illustrative constellation panel and avatar byline.

Filterable Post Gridmodern-saas-blog-sections-filterable-post-gridA blog post grid with working category filter pills over two rows of text first post cards with mono meta lanes and illustrated avatar bylines.

Hiring Intro Benefitsmodern-saas-careers-hiring-intro-benefitsA careers page opener: kicker, oversized heading, plainspoken pitch, and a three up grid of quiet benefit tiles.

Open Roles Listmodern-saas-careers-open-roles-listAn open roles section: mono team labels over quiet role tiles with location and contract details, ghost apply pills, and a strip for unlisted roles.

Team Quote Statsmodern-saas-careers-team-quote-statsA careers proof section: a centered teammate quote with an illustrated avatar attribution, followed by two hiring stats split by a hairline.

Horizontal Timelinemodern-saas-changelogs-horizontal-timelineA 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.

Versioned Entry Listmodern-saas-changelogs-versioned-entry-listA changelog with mono dates and version pills in a left lane and typed change chips stepping down in weight on the right.

Vertical Timelinemodern-saas-changelogs-vertical-timelineA 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.

Split Contact Formmodern-saas-contact-sections-split-contact-formA contact section splitting a form panel from a channel rail of direct line cards with mono emails and a status card.

Centered Calloutmodern-saas-ctas-centered-calloutA simple, centered closing CTA on a soft bordered panel: a bold headline and short lede over two pill buttons.

Horizon Glow CTAmodern-saas-ctas-horizon-glow-ctaA closing CTA over a soft radial glow rising from the bottom edge, with a depth pill button pair.

Inline Banner Stripmodern-saas-ctas-inline-banner-stripA slim banner strip: bold prompt and one line support on the left, a single ghost pill action on the right.

Newsletter Signup Stripmodern-saas-ctas-newsletter-signup-stripA newsletter strip: an invitation line and a frequency promise beside a primary depth pill.

Selfserve FAQ Stripmodern-saas-ctas-selfserve-faq-stripA self serve strip: a gentle redirect for contact page visitors whose answer already exists, pointing at the FAQ.

Split Signupmodern-saas-ctas-split-signupA 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.

Sidebar Docs Shellmodern-saas-docs-pages-sidebar-docs-shellA complete docs page shell: sidebar with mini search and mono section labels, prose column with terminal blocks and working copy buttons, and an on this page rail.

Centered Astronautmodern-saas-error-pages-centered-astronautA 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.

Split With Linksmodern-saas-error-pages-split-with-linksA 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.

Category Pill Accordionsmodern-saas-faqs-category-pill-accordionsA full FAQ section with a category pill row and mono labeled question groups as quiet accordion tiles.

Single Open Accordionmodern-saas-faqs-single-open-accordionA centered FAQ on the shadcn Accordion where the first item ships open and closed rows stay on quiet hairline tiles.

Split With Asidemodern-saas-faqs-split-with-asideA two-column FAQ: a sticky heading and help link beside a flat, single-open accordion of answers.

Tabbed Categoriesmodern-saas-faqs-tabbed-categoriesA 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.

App Workspacemodern-saas-feature-sections-app-workspaceAn oversized display word over a stat-led feature rail beside a full automation workspace dashboard mockup built from theme tokens.

Assistant Snippet Gridmodern-saas-feature-sections-assistant-snippet-gridA two by two grid of assistant feature cards, each led by a miniature UI snippet inside an inset tile.

Benefits Isometricmodern-saas-feature-sections-benefits-isometricThree benefit columns, each with a centered isometric SVG illustration, a FIG tag, label, and short paragraph. A clean, minimal way to frame product principles.

Bento Gridmodern-saas-feature-sections-bento-gridAn asymmetric bento feature grid with a custom SVG illustration in every cell: analytics, collaboration, automation, security, and integrations. A clean, minimal overview.

Capability Columnsmodern-saas-feature-sections-capability-columnsA split lead over three capability columns, each framing a schematic SVG figure with corner crop marks, a caption tag, and a Learn more cue.

Capability Diagram Cardsmodern-saas-feature-sections-capability-diagram-cardsThree depth cards each led by an illustrative SVG diagram: node constellation, decision doc, and ascending bars.

Illustrated Cardsmodern-saas-feature-sections-illustrated-cardsA gradient lead headline over two equal isometric cards: a backlog sorted into stacked lanes and cubes converging on one focused point.

Metric Interludemodern-saas-feature-sections-metric-interludeA quiet pacing section: two large proof stats split by a hairline, followed by a single transitional statement line.

Product Showcasemodern-saas-feature-sections-product-showcaseA 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.

Split Checklist Panelmodern-saas-feature-sections-split-checklist-panelA split highlight: heading, lede, and checklist beside a roadmap panel of initiative rows with stepped progress meters.

Brand Watermarkmodern-saas-footers-brand-watermarkA full width footer with a brand line, social buttons, and link columns, over a giant outlined brand wordmark above a legal bottom bar.

Simplemodern-saas-footers-simpleA simple footer: a brand mark and tagline beside columns of navigation links, over a bottom bar with a copyright line and social icons.

Status Columns Footermodern-saas-footers-status-columns-footerA multi column footer with brand tagline, live status pill, four link columns, and a hairline social bottom row.

Popular Articles Support Stripmodern-saas-help-centers-popular-articles-supportA help center closer: a most read header with browse all link, two columns of article rows with mono category tags, and a support strip with a depth CTA.

Search Hero Topic Gridmodern-saas-help-centers-search-hero-topic-gridA help center opener: kicker, oversized heading, wide search field with shortcut hint and popular chips, then a grid of icon tile topic cards with mono article counts.

Centered With Backdropmodern-saas-hero-sections-centered-with-backdropA 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.

Centered With Product Imagemodern-saas-hero-sections-centered-with-product-imageA 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.

Planet Centerpiecemodern-saas-hero-sections-planet-centerpieceA full-fold hero spread pairing a headline and CTAs with a token-built planet centerpiece and a monospace statement above a customer logo strip.

Connect Your Stackmodern-saas-integrations-connect-your-stackA 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.

Connector Directorymodern-saas-integrations-connector-directoryAn integrations directory: centered heading over a responsive grid of connector cards pairing monochrome brand marks with one line descriptions and mono category tags, closed by an API strip.

Icon Tile Spotlightmodern-saas-integrations-icon-tile-spotlightTwo rows of gradient icon tiles above a centered heading, one line promise, and a ghost pill CTA.

Dual Marqueemodern-saas-logo-clouds-dual-marqueeA logo cloud with two rows of customer logos scrolling in opposite directions. A seamless, pure CSS marquee for social proof on a landing page.

Inline Wordmark Stripmodern-saas-logo-clouds-inline-wordmark-stripA quiet single row logo strip: a muted caption over one evenly justified line of glyph and wordmark pairs.

Simple Gridmodern-saas-logo-clouds-simple-gridA 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.

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

Standard Stickymodern-saas-navbars-standard-stickyA 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.

Company Pagemodern-saas-prebuilt-pages-company-pageA complete Modern SaaS company page that opens with the navbar and runs from purpose through the story and team to a closing call to action.

Depth SaaS Landingmodern-saas-prebuilt-pages-depth-saas-landingA complete depth style SaaS landing page composed from thirteen depth blocks, from pill navbar to glow CTA and footer.

Pricing Pagemodern-saas-prebuilt-pages-pricing-pageA full Modern SaaS pricing page that leads with the plans, then backs them with logo proof, customer voices, and answers before a final CTA.

Product Landingmodern-saas-prebuilt-pages-product-landingA complete Modern SaaS landing page that runs from hero through features, proof, and plans into a closing call to action and footer.

Startup Landingmodern-saas-prebuilt-pages-startup-landingA calmer, story led Modern SaaS landing page with a full bleed hero, principle first benefits, two simple plans, and a newsletter close.

Depth Tier Cardsmodern-saas-pricing-sections-depth-tier-cardsThree depth style pricing tiers with a billing toggle; the featured plan carries a brighter hairline and mono tag.

Membershipmodern-saas-pricing-sections-membershipA single membership plan: a price card with an annual note and refund line beside a checked list of what the plan includes.

Plan Comparison Tablemodern-saas-pricing-sections-plan-comparison-tableA plan comparison table with price column headers, mono feature groups, and checks aligned down fixed lanes.

Three Tiermodern-saas-pricing-sections-three-tierA three tier pricing section with a featured plan, per card annual billing toggles, icon feature lists, and an enterprise banner.

Two Plansmodern-saas-pricing-sections-two-plansTwo 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.

Numbered Stepsmodern-saas-process-flow-numbered-stepsA 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.

Pull Quote with Proof Statsmodern-saas-testimonials-pull-quote-proof-statsA large centered pull quote with attribution mark and a pair of proof stats split by a hairline divider.

Quote Card Gridmodern-saas-testimonials-quote-card-gridA two column grid of testimonial cards, each pairing a customer quote with an avatar, name, and role.

Spotlight With Statsmodern-saas-testimonials-spotlight-with-statsA 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.

Staggered Quote Masonrymodern-saas-testimonials-staggered-quote-masonryA three column testimonial masonry of naturally staggered quote cards, each closed by an illustrated avatar byline.

About Meportfolio-portfolio-about-and-skills-about-meAn 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.

Education Certificationsportfolio-portfolio-about-and-skills-education-certificationsA list of degrees, courses, and certifications with issuer, date, and credential. Shows formal training and qualifications on a portfolio or resume page.

Resume Downloadportfolio-portfolio-about-and-skills-resume-downloadA 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.

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

Timeline Category Skillsportfolio-portfolio-about-and-skills-timeline-category-skillsA 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.

Awards Timelineportfolio-portfolio-awards-and-recognition-awards-timelineA vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.

Badge Or Icon Gridportfolio-portfolio-awards-and-recognition-badge-or-icon-gridA responsive grid of award badges or icons with short captions. Displays many certifications and honors at a glance on a portfolio about page.

Carousel Of Certificationsportfolio-portfolio-awards-and-recognition-carousel-of-certificationsA sliding carousel that cycles through certification logos and details. Fits a long list of credentials into a compact, scrollable strip here.

Featured Award Highlightportfolio-portfolio-awards-and-recognition-featured-award-highlightA 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.

Quote Award Comboportfolio-portfolio-awards-and-recognition-quote-award-comboA block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.

Featured Article Listportfolio-portfolio-blog-writing-and-previews-featured-article-listA list that leads with one large featured article followed by smaller entries. Use it to spotlight your best post while listing recent writing.

Grid Blog Cardsportfolio-portfolio-blog-writing-and-previews-grid-blog-cardsA responsive grid of blog cards with cover image, title, and excerpt. The standard layout for browsing many articles on a writing index page.

Horizontal Blog Carouselportfolio-portfolio-blog-writing-and-previews-horizontal-blog-carouselA horizontal carousel of blog cards that scrolls sideways. Use it to preview recent posts in a tidy row without taking up much vertical space.

Masonry Layout Articlesportfolio-portfolio-blog-writing-and-previews-masonry-layout-articlesA 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.

Minimal List Datesportfolio-portfolio-blog-writing-and-previews-minimal-list-datesA 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.

Accordion Expandable Case Studiesportfolio-portfolio-case-studies-accordion-expandable-case-studiesAn 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.

Grid Case Study Previewsportfolio-portfolio-case-studies-grid-case-study-previewsA responsive grid of case study cards with thumbnail, title, and summary. The go to layout for browsing a portfolio of client projects at once.

Large Visual Focus Case Studyportfolio-portfolio-case-studies-large-visual-focus-case-studyA 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.

Side By Side Image Storyportfolio-portfolio-case-studies-side-by-side-image-storyA two column block placing a project image beside its written story. Pairs visuals and narrative to walk readers through a single case study.

Timeline Style Case Studyportfolio-portfolio-case-studies-timeline-style-case-studyA 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.

Classic Contact Formportfolio-portfolio-contact-sections-classic-contact-formA 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.

Map With Contact Infoportfolio-portfolio-contact-sections-map-with-contact-infoPairs 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.

Minimal Form With Socialportfolio-portfolio-contact-sections-minimal-form-with-socialA 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.

Popup Trigger Contactportfolio-portfolio-contact-sections-popup-trigger-contactA 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.

Split Layoutportfolio-portfolio-contact-sections-split-layoutA 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.

Accordion Servicesportfolio-portfolio-core-services-overview-accordion-servicesAn 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.

Icon List Overviewportfolio-portfolio-core-services-overview-icon-list-overviewA 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.

Numbered Process Style Servicesportfolio-portfolio-core-services-overview-numbered-process-style-servicesA 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.

Service Cards Gridportfolio-portfolio-core-services-overview-service-cards-gridA responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.

Split Layout Featureportfolio-portfolio-core-services-overview-split-layout-featureA split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.

Full Width Bold Bannerportfolio-portfolio-cta-banner-full-width-bold-bannerA 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.

Inline CTAportfolio-portfolio-cta-banner-inline-ctaA 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.

Personal Photo CTAportfolio-portfolio-cta-banner-personal-photo-ctaA 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.

Split CTAportfolio-portfolio-cta-banner-split-ctaA 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.

Sticky CTAportfolio-portfolio-cta-banner-sticky-ctaA 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.

Card Style Signupportfolio-portfolio-email-signup-and-newsletter-card-style-signupA bordered card holding a headline, short pitch, and email field. Use it as a standalone callout inviting visitors to join your mailing list.

Footer Integrated Signupportfolio-portfolio-email-signup-and-newsletter-footer-integrated-signupAn email field built into the site footer beside links and details. Captures subscribers at the bottom of every page without a dedicated section.

Popup Signup Formportfolio-portfolio-email-signup-and-newsletter-popup-signup-formA 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.

Simple Inline Formportfolio-portfolio-email-signup-and-newsletter-simple-inline-formA 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.

Split Section Signupportfolio-portfolio-email-signup-and-newsletter-split-section-signupA two column section with descriptive copy beside the signup form. Explains what subscribers get while keeping the email field clearly in view.

Event Cards Gridportfolio-portfolio-event-speaking-and-workshops-event-cards-gridA grid of cards listing talks and workshops with their title, date, and venue. Use it to present many speaking appearances in one scannable layout.

Featured Talkportfolio-portfolio-event-speaking-and-workshops-featured-talkA spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.

Featured Talk Highlightportfolio-portfolio-event-speaking-and-workshops-featured-talk-highlightA bold featured talk layout pairing a large title with imagery and key facts. Draws extra attention to your most notable conference appearance.

Timeline Speaking Engagementsportfolio-portfolio-event-speaking-and-workshops-timeline-speaking-engagementsA vertical timeline charting talks and workshops in date order. Use it to show how your speaking history has grown across many events over time.

Video Recording Embedportfolio-portfolio-event-speaking-and-workshops-video-recording-embedA section embedding a recorded talk video alongside its title and context. Lets visitors watch you present without ever leaving your portfolio.

Carousel Of Featured Projectsportfolio-portfolio-featured-work-highlights-carousel-of-featured-projectsA 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.

Interactive Hover Revealportfolio-portfolio-featured-work-highlights-interactive-hover-revealA 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.

Large Hero Project Displayportfolio-portfolio-featured-work-highlights-large-hero-project-displayA 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.

Split Image And Details Layoutportfolio-portfolio-featured-work-highlights-split-image-and-details-layoutA 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.

Stacked Highlight Cardsportfolio-portfolio-featured-work-highlights-stacked-highlight-cardsA 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.

Carousel Sliderportfolio-portfolio-hero-showcases-carousel-sliderA 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.

Floating Elementsportfolio-portfolio-hero-showcases-floating-elementsA hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.

Full Screen Centeredportfolio-portfolio-hero-showcases-full-screen-centeredA 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.

Minimalist CTAportfolio-portfolio-hero-showcases-minimalist-ctaA 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.

Split Layoutportfolio-portfolio-hero-showcases-split-layoutA 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.

Grid Of Core Valuesportfolio-portfolio-mission-and-values-grid-of-core-valuesA 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.

Quote Values Comboportfolio-portfolio-mission-and-values-quote-values-comboA 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.

Story First Narrativeportfolio-portfolio-mission-and-values-story-first-narrativeA 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 Pillars Layoutportfolio-portfolio-mission-and-values-three-pillars-layoutThree equal columns, each presenting one guiding pillar with a heading and text. Use it to summarize the ideas your practice is built around.

Vertical Step Timelineportfolio-portfolio-mission-and-values-vertical-step-timelineA 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.

Cycle Diagramportfolio-portfolio-process-and-approach-cycle-diagramA 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.

Horizontal Stepperportfolio-portfolio-process-and-approach-horizontal-stepperA 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.

Process Principlesportfolio-portfolio-process-and-approach-process-principlesA section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.

Stacked Cardsportfolio-portfolio-process-and-approach-stacked-cardsA 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.

Vertical Timelineportfolio-portfolio-process-and-approach-vertical-timelineA 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.

Filterable Gridportfolio-portfolio-project-displays-filterable-gridA 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.

Quote Stackportfolio-portfolio-project-displays-quote-stackA 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.

Standard Gridportfolio-portfolio-project-displays-standard-gridAn 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.

Stats Cardsportfolio-portfolio-project-displays-stats-cardsA 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.

Zigzag Layoutportfolio-portfolio-project-displays-zigzag-layoutAlternating 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.

Baseportfolio-portfolio-quote-and-feedback-baseA 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.

Grid Of Quotesportfolio-portfolio-quote-and-feedback-grid-of-quotesA 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.

Quote With Project Contextportfolio-portfolio-quote-and-feedback-quote-with-project-contextA 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.

Scrollable Quote Carouselportfolio-portfolio-quote-and-feedback-scrollable-quote-carouselA carousel that slides through client quotes one at a time with author details. Use it to rotate testimonials without crowding a portfolio page.

Single Quote Highlightportfolio-portfolio-quote-and-feedback-single-quote-highlightA 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.

Featured Resource Cardportfolio-portfolio-resource-download-sections-featured-resource-cardA prominent card spotlighting one downloadable resource with a cover, summary, and button. Use it to push a flagship guide or template to visitors.

Gated Downloadportfolio-portfolio-resource-download-sections-gated-downloadA 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.

Inline Resource Calloutportfolio-portfolio-resource-download-sections-inline-resource-calloutA 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.

Minimalist Resource Listportfolio-portfolio-resource-download-sections-minimalist-resource-listA 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.

Resources Gridportfolio-portfolio-resource-download-sections-resources-gridA 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.

Branded Document Icons Gridportfolio-portfolio-resume-and-downloads-branded-document-icons-gridA 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.

Resume Cover Letter Comboportfolio-portfolio-resume-and-downloads-resume-cover-letter-comboA 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.

Resume With Short Bio CTAportfolio-portfolio-resume-and-downloads-resume-with-short-bio-ctaA 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.

Simple Download Buttonportfolio-portfolio-resume-and-downloads-simple-download-buttonA 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.

Split Layoutportfolio-portfolio-resume-and-downloads-split-layoutA 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.

Highlighted Postportfolio-portfolio-social-media-embeds-highlighted-postA single featured post pinned in a clean card with avatar, caption, and engagement counts. Spotlights your best content when one example carries the message.

Instagram Gridportfolio-portfolio-social-media-embeds-instagram-gridA 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.

Social Icons Feedportfolio-portfolio-social-media-embeds-social-icons-feedA 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.

Tweet Carouselportfolio-portfolio-social-media-embeds-tweet-carouselA swipeable carousel of tweet cards with author, timestamp, and text. Rotate through recent posts or testimonials without stacking them down the page.

YouTube Video Stripportfolio-portfolio-social-media-embeds-youtube-video-stripA 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.

Before After Comparisonportfolio-portfolio-why-work-with-me-before-after-comparisonA 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.

Bulleted Value Propositionportfolio-portfolio-why-work-with-me-bulleted-value-propositionA 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.

Client Oriented Testimonialsportfolio-portfolio-why-work-with-me-client-oriented-testimonialsStacked testimonial cards framed around client outcomes, with quote, name, and role. Builds trust by letting past clients vouch for your results.

Storytelling Approachportfolio-portfolio-why-work-with-me-storytelling-approachA 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.

Why Me Vs Competitionportfolio-portfolio-why-work-with-me-why-me-vs-competitionA two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.

Accordion Experience Cardsportfolio-portfolio-work-experience-cards-accordion-experience-cardsCollapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.

Card With Project Showcaseportfolio-portfolio-work-experience-cards-card-with-project-showcaseA 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.

Experience Quote Comboportfolio-portfolio-work-experience-cards-experience-quote-comboA 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.

Logo First Card Layoutportfolio-portfolio-work-experience-cards-logo-first-card-layoutA 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.

Minimalist Role Highlightportfolio-portfolio-work-experience-cards-minimalist-role-highlightA 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.

About Long Formportfolio-pro-about-sections-about-long-formA reading-width essay about with three prose paragraphs covering career origin, what shaped the practice, and where the work stands now.

About Splitportfolio-pro-about-sections-about-splitAn about split with a portrait, a point of view bio, and three grounding facts including a human one.

About With Image Rowportfolio-pro-about-sections-about-with-image-rowAn about section with a two-column bio and ruled facts grid above a row of three labelled Placeholder tiles showing workspace, process, and a close detail.

About With Statsportfolio-pro-about-sections-about-with-statsA two-column about pairing a short bio and a facts list with a four-card stat strip covering years, projects, clients, and one human metric.

Approach Aboutportfolio-pro-about-sections-approach-aboutAn about section that presents three to four named working principles in a numbered ruled list beside a heading and setup paragraph.

Elsewhere Aboutportfolio-pro-about-sections-elsewhere-aboutHeading and intro above a ruled list of talks, podcasts, essays, and teaching, each with a year, format, title, venue, and note.

Expectations Aboutportfolio-pro-about-sections-expectations-aboutHeading and intro above two bordered lists side by side, what a client can expect from you and what you ask of them in return.

FAQ Aboutportfolio-pro-about-sections-faq-aboutAn about told as five ruled intro call questions with honest answers, beside a heading and a card inviting anything not covered.

Full Width Statementportfolio-pro-about-sections-full-width-statementA centered bordered panel containing a single large belief sentence at heading scale and one supporting line attributing the principle to the practice.

Influences Aboutportfolio-pro-about-sections-influences-aboutHeading and intro above a two column ruled grid of four cards, each pairing a type badge with an influence title and a lesson.

Journey Aboutportfolio-pro-about-sections-journey-aboutA ruled vertical list of three dated milestones tracing the career path from first role to going independent, each with a year, heading, and body.

Letter Aboutportfolio-pro-about-sections-letter-aboutA card-framed signed note with three personal paragraphs and a ruled sign-off naming the designer and their location.

Manifesto Aboutportfolio-pro-about-sections-manifesto-aboutA numbered list of craft beliefs each paired with a clarifying sentence, for a practitioner with a genuine position on their work.

Now Page Aboutportfolio-pro-about-sections-now-page-aboutA dated snapshot of current projects, learning, and availability with a side column showing location and next opening.

Off Hours Aboutportfolio-pro-about-sections-off-hours-aboutA four-card grid of pursuits away from the desk, each with an honest note, closed by a line tying them back to the craft.

Photo Collage Aboutportfolio-pro-about-sections-photo-collage-aboutA two-column about with a mixed aspect ratio three-image collage beside a short bio and facts list, designed for photographers and makers who lead with their environment.

Press Bio Aboutportfolio-pro-about-sections-press-bio-aboutHeading, intro, and a portrait with usage notes beside three labelled cards holding ready to paste bios at one line, short, and full lengths.

Principles Aboutportfolio-pro-about-sections-principles-aboutThree principle cards each split into the belief and its honest cost, naming the tradeoff that following the principle requires in practice.

Quote And Bioportfolio-pro-about-sections-quote-and-bioAn about section that leads with a personal philosophy quote at heading size, then follows with a short bio paragraph and a ruled fact strip.

Split With Listportfolio-pro-about-sections-split-with-listA two-column about split with a portrait Placeholder beside a bio heading, a paragraph, and a five-item checklist that names capabilities and explicitly lists what is not taken on.

Stats And Bioportfolio-pro-about-sections-stats-and-bioA two-column section pairing a career bio paragraph with a 2x2 grid of four concrete career figures in large tabular numerals.

Studio Aboutportfolio-pro-about-sections-studio-aboutA two-column studio about with a founding narrative, three named avatar team cards showing name and role, and a single belief line beneath the team.

Then And Now Aboutportfolio-pro-about-sections-then-and-now-aboutA ruled comparison list of four topics, each pairing an early career belief with the replacement a decade of practice produced.

Three Things Aboutportfolio-pro-about-sections-three-things-aboutA scannable about section with three bordered cards covering what the person does, how they work, and what they care about.

Timeline Aboutportfolio-pro-about-sections-timeline-aboutA career told as a vertical ruled timeline with a year and a concrete sentence per chapter from first job to now.

Tools And Setup Aboutportfolio-pro-about-sections-tools-and-setup-aboutA grouped card grid listing the hardware and software this person uses day to day with a short honest note per tool.

Typical Week Aboutportfolio-pro-about-sections-typical-week-aboutA two-column about showing the shape of a working week as five ruled day rows beside a heading and three working facts.

Values Listportfolio-pro-about-sections-values-listA four-row ruled list of numbered working principles each with a short imperative title and a concrete sentence on what the principle has cost to learn.

What I Do Aboutportfolio-pro-about-sections-what-i-do-aboutThree discipline cards each naming a practice area and describing the approach taken, defining the work by activity rather than by job title or deliverable.

Availability FAQportfolio-pro-availability-sections-availability-faqA two-column block answering common booking questions in an accordion beside a short intro, response meta rows, and a direct contact button.

Availability Statementportfolio-pro-availability-sections-availability-statementA centered availability statement with a large headline naming the open window, a supporting line, two actions, and a ruled three column facts strip.

Booking Calendarportfolio-pro-availability-sections-booking-calendarA six month availability strip of month cells marked booked, open, or closed, each with a short note, plus a status legend and booking button.

Booking Statusportfolio-pro-availability-sections-booking-statusA two-column availability block stating the current booked-through month, the next opening slot, response time, and typical engagement length as ruled detail rows.

Capacity Breakdownportfolio-pro-availability-sections-capacity-breakdownA two-column block with a stacked weekly capacity bar and legend beside commitment rows naming each engagement, its share, and the open day.

Capacity Noteportfolio-pro-availability-sections-capacity-noteA two-column block with a candid workload statement and a last-updated timestamp on the left, and four expectation rows covering response time and start dates on the right.

Engagement Matrixportfolio-pro-availability-sections-engagement-matrixAn availability table, one row per engagement type showing scope, length, next start, and status, with a heading above and a booking action below.

Hire Me Cardportfolio-pro-availability-sections-hire-me-cardA two-column block listing engagement types as ruled rows beside availability, location, and rate detail rows, with a referral note for when the calendar is full.

Next Opening Cardportfolio-pro-availability-sections-next-opening-cardA two-column split showing the next available start date with slot details and a three-step claim process ending in a contact action.

Open For Work Bannerportfolio-pro-availability-sections-open-for-work-bannerA slim top-of-page band with a green status dot, an availability statement naming the open month, and a contact button for an immediate above-the-fold signal.

Project Slotsportfolio-pro-availability-sections-project-slotsA two-column availability block showing 3 named project slots with open or taken status, engagement details, and a claim action.

Quarter Outlookportfolio-pro-availability-sections-quarter-outlookA row of four quarter panels, each with a segmented slot meter, status line, and focus note, closed by an update line and booking action.

Retainer Daysportfolio-pro-availability-sections-retainer-daysA two-column block with a weekday strip marking committed and open days beside retainer detail rows and a reserve-a-day contact action.

Status Bandportfolio-pro-availability-sections-status-bandA slim card stating current booking status, next opening month, and response time with a direct contact button in one horizontal strip.

Timezone Overlapportfolio-pro-availability-sections-timezone-overlapA two column block pairing an async policy intro and schedule rows with a timezone overlap chart plotting each city against your business hours.

Waitlist Cardportfolio-pro-availability-sections-waitlist-cardA two-column block explaining the first-refusal waitlist mechanic in three numbered steps, with current list stats as ruled rows and an email join form on the right.

As Featured Inportfolio-pro-awards-recognition-as-featured-inA centred press strip with eight publication wordmarks and a dated context line per entry showing what kind of coverage was given.

Awards And Pressportfolio-pro-awards-recognition-awards-and-pressA two-column recognition block listing formal awards with body and category on the left and press features with outlet and headline on the right.

Awards By Projectportfolio-pro-awards-recognition-awards-by-projectHeading and intro above ruled rows grouped by project, each pairing a name and summary with the list of honours that work earned.

Awards By Yearportfolio-pro-awards-recognition-awards-by-yearAn awards ledger grouped by year with each year as a large left numeral beside that year's wins, bodies, and projects in ruled rows.

Awards Listportfolio-pro-awards-recognition-awards-listA ruled list of award wins naming the award, the project it recognised, the awarding body, and the year.

Certifications Rowportfolio-pro-awards-recognition-certifications-rowA row of compact credential cards each naming the certification, the issuing organisation, and the year.

Feature Quotesportfolio-pro-awards-recognition-feature-quotesA three-card grid of short press pull quotes each attributed to a named publication with its date.

Interviews Listportfolio-pro-awards-recognition-interviews-listHeading and intro above ruled rows of media appearances, each with a format badge, the show, episode title, year, and a listen or watch link.

Judging Rolesportfolio-pro-awards-recognition-judging-rolesA ruled table of invited jury seats with columns for the awarding body, the role held, the category judged, and the year.

Nominations And Winsportfolio-pro-awards-recognition-nominations-and-winsA ruled list of award submissions where an outcome badge marks each entry as won, shortlisted, or an honourable mention beside its year.

Press Featuresportfolio-pro-awards-recognition-press-featuresA ruled list of press coverage naming the publication, the article headline, the date, and a read link.

Press Logo Rowportfolio-pro-awards-recognition-press-logo-rowA heading and lede above a single ruled grid of six publication wordmarks where the practice has been featured.

Press Quote Spotlightportfolio-pro-awards-recognition-press-quote-spotlightTwo column layout pairing a large pull quote from a publication with its attribution on the left beside a ruled card of further press mentions.

Recognition Bandportfolio-pro-awards-recognition-recognition-bandA slim border-y strip listing award wins and press features with their source and year in a compact horizontal flow.

Recognition Gridportfolio-pro-awards-recognition-recognition-gridA four-card grid mixing awards, press features, and honours each tagged by kind with its source and year.

Recognition Statsportfolio-pro-awards-recognition-recognition-statsA four-column stat band summarising awards won, press features, jury invitations, and years of practice with a source line under each number.

Repeat Winsportfolio-pro-awards-recognition-repeat-winsHeading over three cards, each an awarding body led by a large win count numeral above a ruled list of its individual wins by year.

Single Award Featureportfolio-pro-awards-recognition-single-award-featureA two-column block spotlighting one award with a ruled context list on the left and a large award callout card on the right.

Speaking Listportfolio-pro-awards-recognition-speaking-listA ruled list of conference talks naming the event, the talk title, the year, and an optional recording link.

Timeline Awardsportfolio-pro-awards-recognition-timeline-awardsA vertical connected timeline listing awards most recent first, each tied to a specific project and awarding body.

Archive By Yearportfolio-pro-blog-sections-archive-by-yearA chronological archive grouping posts under large year labels with post counts, each year holding a ruled list of titles, dates, and read times.

Article Bodyportfolio-pro-blog-sections-article-bodyA reading-width prose column with h2 sections, body paragraphs, a pull-quote, and an inline Placeholder image demonstrating long-form typographic rhythm.

Article Seriesportfolio-pro-blog-sections-article-seriesTwo article series cards with status badges, descriptions, numbered part rows showing read times or a coming soon badge, and start reading links.

Article Table of Contentsportfolio-pro-blog-sections-article-tocA long form article layout pairing a sticky numbered table of contents and publish meta with a prose column of titled sections.

Author Bio Cardportfolio-pro-blog-sections-author-bio-cardA compact end-of-article card with an avatar, name, role line, a two-sentence bio, and a subscribe link for the foot of a blog post.

Blog Categoriesportfolio-pro-blog-sections-blog-categoriesA six-card topic index with post counts and a one-line description per category so readers can find the threads that match their interests.

Blog Post Gridportfolio-pro-blog-sections-blog-post-gridA six-post writing index in a three-column card grid, each card showing a Placeholder cover, category, title, date, and read time.

Blog Post Headerportfolio-pro-blog-sections-blog-post-headerAn article page opener with a category label, h1-scale post title, author avatar and meta, and a wide Placeholder cover image.

Blog Sidebar Layoutportfolio-pro-blog-sections-blog-sidebar-layoutA post list with thumbnail and meta on the left and a sidebar of about bio, category counts, and email subscribe on the right.

Featured And Listportfolio-pro-blog-sections-featured-and-listA writing landing with one promoted post shown at full width with a cover image and excerpt above a ruled list of four recent posts.

Featured Postportfolio-pro-blog-sections-featured-postA writing section with one large featured post carrying a cover, excerpt, and meta beside a ruled list of three recent posts.

Link Roundupportfolio-pro-blog-sections-link-roundupA curated reading digest grouping shared links under month headings, each row carrying the title, source domain, and a one line note.

Magazine Blog Gridportfolio-pro-blog-sections-magazine-blog-gridAn editorial two-column layout with one large featured post and a divided stack of three secondary posts beside it.

Most Read Listportfolio-pro-blog-sections-most-read-listA split section with archive stats rows and a browse link beside a ranked list of five posts with large ordinals, category, and read counts.

Newsletter Issuesportfolio-pro-blog-sections-newsletter-issuesA newsletter archive with a subscribe panel on the left showing cadence stats and an email field beside a ruled list of past issues.

Post List Rowsportfolio-pro-blog-sections-post-list-rowsA minimal image-free writing archive as ruled rows showing publish date, post title with inline category, and read time.

Published Elsewhereportfolio-pro-blog-sections-published-elsewhereA guest writing section grouping essays by publication, each pairing an SVG mark and wordmark with a ruled list of pieces, dates, and links.

Read Next Postsportfolio-pro-blog-sections-read-next-postsAn end of article footer with previous and next post cards carrying excerpts and meta, above a short ruled list of related reading.

Recent Writingportfolio-pro-blog-sections-recent-writingA homepage writing teaser showing three recent posts as compact rows with category, title, and date, plus a link to the full archive.

Tag Filter Blogportfolio-pro-blog-sections-tag-filter-blogA writing index with tag chips (All, Design, Career, Process) that filter six post rows via client-side state and show a live article count.

Three Card Rowportfolio-pro-blog-sections-three-card-rowThree equal blog post cards each with a Placeholder cover, title, date, and reading time in a responsive three-column grid.

Writing With Topicsportfolio-pro-blog-sections-writing-with-topicsA three-column writing index that groups posts under topic headings, each column holding a ruled list of two to three post rows.

Annotated Screen Caseportfolio-pro-case-study-sections-annotated-screen-caseA single product screen as a Placeholder with numbered markers keyed to a side list naming the design decision behind each area.

Before After Caseportfolio-pro-case-study-sections-before-after-caseA redesign case study with two Placeholder images side by side, each followed by a paragraph that names the problem or outcome and one unresolved edge case.

Case Study Coverportfolio-pro-case-study-sections-case-study-coverA case study opening with a full-width Placeholder hero and a bordered panel showing the project title, subtitle, and a meta table of client, role, duration, and year.

Case Study Heroportfolio-pro-case-study-sections-case-study-heroA fold-filling project page opener with the project name large, a one-line outcome summary, a four-cell meta row of client, role, year, and deliverables, and a wide cover image.

Case Study Indexportfolio-pro-case-study-sections-case-study-indexA ruled list of four navigable case study rows each carrying a thumbnail, a one-line problem statement, a result figure, and a category tag.

Case Study Pagerportfolio-pro-case-study-sections-case-study-pagerAn end of case study pager with previous and next project cells carrying thumbnails, summaries, and result lines, plus an all work link.

Case Study Splitportfolio-pro-case-study-sections-case-study-splitA case study split telling problem, what I did, and the constraint, with a sticky result strip.

Challenge Solutionportfolio-pro-case-study-sections-challenge-solutionA case study section with a wide Placeholder image above a two-column ruled layout naming the specific challenge and the solution with its test rounds.

Constraints Caseportfolio-pro-case-study-sections-constraints-caseFour fixed project constraints in a ruled list, each typed and explained by the mark it left on the design, with a candid closing note.

Decision Log Caseportfolio-pro-case-study-sections-decision-log-caseA ruled log of four project decisions, each row pairing the chosen path with the rejected alternative and the reason it lost.

Deliverables Caseportfolio-pro-case-study-sections-deliverables-caseA six-cell grid counting everything shipped to the client, each cell naming the count, format, and where it lives, closed by a handoff note.

Full Bleed Caseportfolio-pro-case-study-sections-full-bleed-caseA case study section with a full-width container image and an attached ruled panel carrying the title, summary, and outcome figures.

Gallery Case Studyportfolio-pro-case-study-sections-gallery-case-studyA vertically sequenced case study of three numbered Placeholder images with captions that name the specific decision visible in each screen.

Goals vs Outcomesportfolio-pro-case-study-sections-goals-vs-outcomesFour ruled rows pairing each kickoff target with its measured outcome and a status pill, closed by an honest note on the goal that missed.

Impact Summaryportfolio-pro-case-study-sections-impact-summaryA case study closing section with a four-cell tabular figure strip and a reflection paragraph that names the specific scheduling or process mistake the designer would change.

Intro and Galleryportfolio-pro-case-study-sections-intro-and-galleryA case study section with a short project intro paragraph followed by a captioned gallery of process frames in a three-column grid.

Iteration Rounds Caseportfolio-pro-case-study-sections-iteration-rounds-caseThree columns tracking one screen across three usability rounds, each with a version frame, what testing showed, and a ruled list of changes made.

Long Form Caseportfolio-pro-case-study-sections-long-form-caseA full written case study with an intro, five titled prose sections including a constraint, inline Placeholders, and a results strip.

Metrics Grid Caseportfolio-pro-case-study-sections-metrics-grid-caseA 2x2 grid of outcome figures each with a context line and measurement window, plus a candid attribution note below the grid.

Outcome First Caseportfolio-pro-case-study-sections-outcome-first-caseA case study that leads with the result at display size before a ruled divider reveals the problem and approach in two equal columns.

Process Walkthroughportfolio-pro-case-study-sections-process-walkthroughA numbered sequence of project steps each with a large step number, title, duration, paragraph, and a Placeholder showing the artefact.

Quote Led Caseportfolio-pro-case-study-sections-quote-led-caseA case study that opens with a client testimonial in a ruled blockquote before the work narrative and a results strip.

Research Insights Caseportfolio-pro-case-study-sections-research-insights-caseA four-cell method stat strip above three numbered research insights, each pairing a finding, a participant quote, and the design response it produced.

Results Bandportfolio-pro-case-study-sections-results-bandA ruled metric strip of four figures with one context line each and an honest attribution note naming any confounding changes in the same window.

Role Breakdownportfolio-pro-case-study-sections-role-breakdownTwo ruled lists side by side naming what the author owned versus what named teammates contributed, with honest framing about the credit split.

Sticky Summary Caseportfolio-pro-case-study-sections-sticky-summary-caseA case study layout with project facts and result figures fixed in a sticky left column while the prose writeup scrolls on the right.

Testimonial In Caseportfolio-pro-case-study-sections-testimonial-in-caseA single attributed client quote in a ruled panel placed between the work body and results sections of a case study.

Two Column Writeupportfolio-pro-case-study-sections-two-column-writeupA dense case study section with the project narrative split across two prose columns and a four-figure result strip below.

Visual Processportfolio-pro-case-study-sections-visual-processA vertical sequence of numbered process phases each pairing a Placeholder artefact frame with a short paragraph naming the concrete finding or decision from that phase.

Animated Logo Rowportfolio-pro-clients-and-logos-animated-logo-rowEight client wordmarks as muted semibold text at varied type sizes arranged in a single wrapping bordered panel.

Client Grid Detailedportfolio-pro-clients-and-logos-client-grid-detailedSix client cards each showing the wordmark, sector, the actual deliverable delivered, and the year of engagement.

Client Listportfolio-pro-clients-and-logos-client-listA ruled-row roster of ten clients each showing the company name, the kind of work delivered, and the year, the complete scannable client history.

Client Results Rowportfolio-pro-clients-and-logos-client-results-rowThree columns each attributing a large tabular-nums result figure and a one-line context sentence to a named client, the outcomes-by-client proof strip.

Client Spotlightportfolio-pro-clients-and-logos-client-spotlightA split layout pairing one anchor client panel with scope, fact rows, and an outcome against a ruled six row list of further clients.

Client Timelineportfolio-pro-clients-and-logos-client-timelineA heading and lede above ruled year bands, each pairing a large year label and note with the clients signed and work delivered.

Clients By Serviceportfolio-pro-clients-and-logos-clients-by-serviceThree bordered discipline columns each with a service description, a stacked list of client wordmarks, and a client count per column.

Confidential Clientsportfolio-pro-clients-and-logos-confidential-clientsA split layout pairing an NDA explanation and shareable detail rows with a grid of dashed anonymized cards naming client, work, and sector.

Engagement Lengthsportfolio-pro-clients-and-logos-engagement-lengthsA ruled panel of clients ordered by how long each engagement ran, every row pairing company and year span with a proportional bar and months figure.

Global Clientsportfolio-pro-clients-and-logos-global-clientsThree stacked region bands each pairing a region label and client count with a wrapped set of client names and home cities.

Industries Servedportfolio-pro-clients-and-logos-industries-servedA six-tile sector grid showing project counts and example client types per industry to demonstrate breadth without a logo grid.

Logo Grid With Quoteportfolio-pro-clients-and-logos-logo-grid-with-quoteEight client wordmarks in a bordered grid on one side and one attributed client testimonial on the other, pairing breadth with a specific endorsement.

Logo Wallportfolio-pro-clients-and-logos-logo-wallA grid of ten client wordmarks styled as muted text in varying sizes, with a heading and lede, showing the full breadth of past clients at a glance.

Logos And Testimonialportfolio-pro-clients-and-logos-logos-and-testimonialA ruled wordmark row of seven clients above one attributed pull quote that names a specific deliverable and outcome.

Logos With Countportfolio-pro-clients-and-logos-logos-with-countA centred headline figure above a twelve-cell client wordmark grid that proves practice scale with a count and a longevity line.

Notable Clientsportfolio-pro-clients-and-logos-notable-clientsFour client cards each naming the company, a paragraph on the scope of work, and a concrete one-line outcome, the selected engagements with results attached.

Referral Chainportfolio-pro-clients-and-logos-referral-chainA split layout pairing a large referral share figure and fact rows with a ruled list naming who introduced whom, the work, and the year.

Repeat Clientsportfolio-pro-clients-and-logos-repeat-clientsRuled rows of five returning clients each pairing the company and a one line history with a right aligned project count and year span.

Trusted By Rowportfolio-pro-clients-and-logos-trusted-by-rowA compact single-line strip of five client wordmarks with a small uppercase label, placed beneath a hero to add proof without interrupting page flow.

Two Row Logosportfolio-pro-clients-and-logos-two-row-logosA centered heading with a client count above two even ruled rows of five client wordmarks each, covering ten names across two sectors.

Between Sessionsportfolio-pro-coaching-mentoring-between-sessionsFour channel rows with response expectations beside a sample fortnight timeline and a single boundary rule, showing the support layer between calls.

Book Sessionportfolio-pro-coaching-mentoring-book-sessionA two-column booking block showing what a single session covers, the duration and price, a four-step booking sequence, and an honest list of what coaching is not.

Coaching FAQportfolio-pro-coaching-mentoring-coaching-faqA two column FAQ answering common coaching questions in an accordion beside quick facts covering price, engagement length, and reply time.

Coaching Heroportfolio-pro-coaching-mentoring-coaching-heroA full-fold hero naming the coach, their one-line premise, the next availability date, primary and secondary actions, and a three-cell credential strip.

Coaching Offeringsportfolio-pro-coaching-mentoring-coaching-offeringsThree coaching engagement types as cards with included items and a from price so visitors can self-sort before reaching out.

Coaching Packagesportfolio-pro-coaching-mentoring-coaching-packagesThree named coaching packages with session counts, durations, prices, and included items, one marked recommended, plus a scoping note confirming fit before payment.

Coaching Principlesportfolio-pro-coaching-mentoring-coaching-principlesFive numbered coaching ground rules in a divided list beside an intro, a short origin note, and a three-fact track record panel.

Engagement Timelineportfolio-pro-coaching-mentoring-engagement-timelineA five phase vertical timeline tracing a coaching engagement from free intake call to the one month check-in, plus a strip of what stays after.

Focus Areasportfolio-pro-coaching-mentoring-focus-areasSix topic cards mapping the territory a coaching practice covers, each pairing a short description with a real client question, plus a booking footer.

Group Cohortportfolio-pro-coaching-mentoring-group-cohortA six week group program pairing a curriculum list with a cohort card showing start date, schedule, seats left, price, and a reserve action.

Meet The Coachportfolio-pro-coaching-mentoring-meet-the-coachSplit bio pairing a framed portrait and quick-fact rows with a first person career account, a four-line role history, and credential chips.

Mentee Outcomesportfolio-pro-coaching-mentoring-mentee-outcomesA summary stat row and three outcome cards pairing then and now role panels with mentee quotes, avatars, and engagement lengths.

Mentorship Cardportfolio-pro-coaching-mentoring-mentorship-cardA free or low-cost mentorship offer naming who it is for, the monthly cadence, the pay-what-you-can cost, and a four-step application process.

Office Hoursportfolio-pro-coaching-mentoring-office-hoursOpen weekly slots with a spots-remaining count, a good-for list, a not-the-right-fit list, and a how-it-works breakdown for free 25-minute advice calls.

Session Anatomyportfolio-pro-coaching-mentoring-session-anatomyMinute by minute breakdown of a sixty minute coaching session as a four segment list beside panels for what clients send before and receive after.

Session Formatsportfolio-pro-coaching-mentoring-session-formatsFour format cards for video, async review, voice notes, and in person days, with best-when lists and a how-to-choose strip.

Brands Worked Withportfolio-pro-collaborations-brands-worked-withA wordmark grid of twelve named client brands with sector labels, a total client count, and a four-column breakdown of work by engagement type.

Collab Availabilityportfolio-pro-collaborations-collab-availabilityA split layout pairing an explanation of how slots are booked with a ruled ledger of four seasons, each showing the format and a booking status.

Collab Ctaportfolio-pro-collaborations-collab-ctaA two-column band listing four genuine collaboration types in a ruled list with explicit exclusions and a direct contact email button.

Collab Disciplinesportfolio-pro-collaborations-collab-disciplinesA heading, intro, and count line above a grid of six discipline cells, each with a working note, a joint project count, and a frequent partner.

Collab Faqportfolio-pro-collaborations-collab-faqA two-column FAQ answering five questions studios ask before a joint project, beside a heading and a three-row list of fixed terms.

Collab Formatsportfolio-pro-collaborations-collab-formatsThree engagement format cards, each with a summary, a ruled facts list of length, team shape, and fit, plus a recent partner example.

Collab Galleryportfolio-pro-collaborations-collab-galleryA heading and intro above three joint project cards, each with a Placeholder image, the project name, the partner and field, a role split line, and the year.

Collab Gridportfolio-pro-collaborations-collab-gridA four-card grid of joint projects each naming the partner, their discipline and location, the deliverable, and the year.

Collab Logosportfolio-pro-collaborations-collab-logosA four-column wordmark grid of collaborated companies each showing the brand name and the type of engagement as a secondary line.

Collab Processportfolio-pro-collaborations-collab-processFour numbered stage cards from first call to shipped work, each with a timing line, over a three cell band of working agreements.

Collab Splitportfolio-pro-collaborations-collab-splitA heading and intro above two ruled columns setting out what the studio carries and what the partner carries, closed by a three cell band of shared duties.

Collab Timelineportfolio-pro-collaborations-collab-timelineA year-by-year ruled ledger of five joint projects, each entry naming the partner, the shared deliverable, and the role split.

Featured Collabportfolio-pro-collaborations-featured-collabA split block spotlighting one joint project with a Placeholder image, a two-paragraph story including a constraint named, and a five-row facts list.

Partner Quotesportfolio-pro-collaborations-partner-quotesTwo large quote cards from past collaborators with avatar attribution and a footer row naming the shared project and their side of the split.

Partners Rowportfolio-pro-collaborations-partners-rowA divided wordmark grid of eight collaborators each showing the name and a one-word discipline label under a section heading.

Repeat Partnersportfolio-pro-collaborations-repeat-partnersA ruled ledger of four returning collaborators, each row pairing discipline and a working note with a tabular count of projects and years.

AI vs Hiring Meportfolio-pro-comparison-sections-ai-vs-hiring-meFive design tasks stacked as cards, each pairing what AI tools honestly deliver against what hiring me adds, with one task conceded outright.

Am I the Right Fitportfolio-pro-comparison-sections-am-i-the-right-fitTwo honest panels of fit signals, a good fit checklist beside reasons to look elsewhere, each item backed by a one line detail.

Before And Afterportfolio-pro-comparison-sections-before-and-afterFive paired before and after panels joined by arrows, each labelled by the dimension that changed, selling outcomes rather than deliverables.

By the Numbersportfolio-pro-comparison-sections-by-the-numbersFive project metrics as paired horizontal bars comparing a typical engagement with mine, each metric captioned and labelled with plain values.

Comparison Tableportfolio-pro-comparison-sections-comparison-tableNine criteria rows comparing this person against a typical alternative using check and minus icons, with honest gaps on both sides.

Expectations Vs Realityportfolio-pro-comparison-sections-expectations-vs-realityFive assumptions about hiring a solo designer paired row by row with what actually happens, including one the block admits is true.

Freelance Vs Agencyportfolio-pro-comparison-sections-freelance-vs-agencyA three-column table comparing freelance and agency across seven criteria including cost, speed to start, and institutional knowledge.

Freelance Vs Inhouseportfolio-pro-comparison-sections-freelance-vs-inhouseA three-column table of five signals arguing honestly for hiring a freelancer or building in-house across project length, budget, and team structure.

Process Comparisonportfolio-pro-comparison-sections-process-comparisonTwo engagement timelines side by side, a typical studio process against mine, with five numbered steps, timing labels, and an honest closing note.

Project vs Retainerportfolio-pro-comparison-sections-project-vs-retainerTwo engagement models compared down a central spine of six criteria, closed by paired pick this when lists so a prospect can self select.

Shortlist Questionsportfolio-pro-comparison-sections-shortlist-questionsFour questions to ask every designer you are comparing, each card pairing the question and why it matters with my answer below a divider.

Should You Hire Meportfolio-pro-comparison-sections-should-you-hire-meA four step decision path where each numbered question branches into yes and no outcomes, ending in a short verdict panel.

Specialists vs Generalistportfolio-pro-comparison-sections-specialists-vs-generalistA roster of four priced specialists beside my single generalist panel, where a three dot coverage meter rates my depth per discipline.

Template Vs Customportfolio-pro-comparison-sections-template-vs-customTwo decision panels weighing a bought template against custom work, each with cost and timeline facts plus the signs it is the right call.

What Makes Me Differentportfolio-pro-comparison-sections-what-makes-me-differentThree distinctive approach points each paired with an explicit tradeoff so the block reads as credible rather than promotional.

What You Actually Payportfolio-pro-comparison-sections-what-you-actually-payTwo itemised cost ledgers pricing the same project through an agency and through me, with line notes, plain totals, and an honest caveat.

Why Work With Meportfolio-pro-comparison-sections-why-work-with-meFour honest reasons as cards, each pairing a direct claim with the substance that makes it verifiable, the differentiation block.

Availability And Formportfolio-pro-contact-sections-availability-and-formAn availability strip showing current status and four project criteria sits above a name plus email plus message form so visitors self-qualify before writing.

Booking Window Stripportfolio-pro-contact-sections-booking-window-stripA six month availability strip of status dot cells, plus a footer pairing an earliest start note with a reserve by email action.

Brief Upload Formportfolio-pro-contact-sections-brief-upload-formA two column brief intake with submission facts on the left and a form pairing contact fields, a static upload zone, and a link field.

Calendar Embed Blueprintportfolio-pro-contact-sections-calendar-embed-blueprintA static booking widget blueprint showing a month grid with available and selected dates, a time-slot row, and a confirm button beside a call fact strip, ready to wire to a real scheduler.

Centered Contactportfolio-pro-contact-sections-centered-contactA centred narrow column with a heading, a framing sentence, and a name plus email plus message form with a reply-time note below the button.

Contact By Inquiry Typeportfolio-pro-contact-sections-contact-by-inquiry-typeA three card contact router splitting inquiries by intent, each card pairing an icon, a description, a dedicated email, and a reply time note.

Contact Card Gridportfolio-pro-contact-sections-contact-card-gridSix reach channels laid out as linked cards in a three-column grid, each naming the platform, the handle, and what that channel is best for.

Contact Details Panelportfolio-pro-contact-sections-contact-details-panelA text-only ruled list of email, location, availability, and response time rows with social links beneath, no form required.

Contact Faq Comboportfolio-pro-contact-sections-contact-faq-comboA contact form beside three pre-emptive FAQ answers covering rates, timeline, and availability so common objections are resolved before the message is sent.

Contact Formportfolio-pro-contact-sections-contact-formA centred name, email, and message form with a send button and an explicit two-business-day reply commitment below the submit action.

Contact Splitportfolio-pro-contact-sections-contact-splitA two-column contact section with a warm intro, ruled detail rows, and social links on the left and a name, email, and message form on the right.

Contact With Availabilityportfolio-pro-contact-sections-contact-with-availabilityA contact section that opens with a status dot, availability label, and a four-row capacity table before presenting the inquiry form.

Contact With Map Blueprintportfolio-pro-contact-sections-contact-with-map-blueprintA studio contact panel beside a bg-muted inline SVG map surface with a centred MapPin marker and a location chip, no third-party embed.

Contact With Testimonialportfolio-pro-contact-sections-contact-with-testimonialA name plus email plus message form beside a bordered client testimonial panel with a quote, avatar attribution, and two relationship facts.

Copy Email Contactportfolio-pro-contact-sections-copy-email-contactA centered formless contact block with one email in a bordered field, a copy button, a mailto link, and a three cell fact strip.

Email And Socialsportfolio-pro-contact-sections-email-and-socialsA centred minimal contact block with the email address rendered large as a mailto link and a row of social platform links with brand icons beneath.

Email Brief Checklistportfolio-pro-contact-sections-email-brief-checklistA large mailto link and a no forms pitch beside a checklist card covering the five details a useful first email should include.

Full Contact Pageportfolio-pro-contact-sections-full-contact-pageA two-column contact section with a warm intro, ruled details list, availability block naming exclusions, social links, and a complete inquiry form.

Inquiry Formportfolio-pro-contact-sections-inquiry-formA qualified project inquiry form with name, email, project-type and budget-range selects, a message field, and a note that scope and fee follow a discovery call.

Office Hours Bookingportfolio-pro-contact-sections-office-hours-bookingThree recurring office hour slots as ruled rows naming session, audience, schedule, and length, each with a book button and an email fallback.

Process And Formportfolio-pro-contact-sections-process-and-formA numbered three step outline of the reply, intro call, and written proposal sits beside a name plus email plus message form.

Simple Contact Rowportfolio-pro-contact-sections-simple-contact-rowA single bordered row with a mailto email link on the left and three social icon and text links on the right, sized for footer-adjacent placement.

Social Contact Gridportfolio-pro-contact-sections-social-contact-gridA grid of six destination cards covering email, LinkedIn, GitHub, X, Instagram, and a calendar booking link, each with a description of what lives there.

Two Column Contactportfolio-pro-contact-sections-two-column-contactA contact form on the left balanced against a ruled detail list of email, location, timezone, availability, and social links on the right.

Availability Bandportfolio-pro-cta-sections-availability-bandA ruled availability list naming real months and booking statuses with a get-in-touch action for the one open September slot.

Availability CTA Bandportfolio-pro-cta-sections-availability-cta-bandA bordered card that states the next opening month as a heading and pairs it with a single action button linking to the contact section.

Book A Call Bandportfolio-pro-cta-sections-book-a-call-bandA call-booking band with a two-row agenda covering what the call addresses and what it skips, plus a duration row stating free 20 minutes and no prep needed.

Client Logos CTAportfolio-pro-cta-sections-client-logos-ctaA bordered closer with a centered heading, one line pitch, and primary action above a ruled four cell strip of client wordmarks.

Download Resume Ctaportfolio-pro-cta-sections-download-resume-ctaA resume prompt with a lede, a ruled meta strip covering last-updated date and page count, and dual actions for downloading the PDF and viewing it online.

Email Capture CTAportfolio-pro-cta-sections-email-capture-ctaA centered heading with an inline email input and submit button that collects addresses for a one-email availability notification.

Engagement Paths CTAportfolio-pro-cta-sections-engagement-paths-ctaA heading above three bordered engagement cards, each naming a way to work together with a scope note, a terms line, and its own action button.

FAQ CTAportfolio-pro-cta-sections-faq-ctaA two column closer with a heading, lede, and primary action beside a ruled list of four common questions each answered in a sentence.

Featured Work CTAportfolio-pro-cta-sections-featured-work-ctaA bordered closer with a heading, lede, and two actions beside a featured project card showing a cover image, title, meta, and outcome.

Full Bleed Ctaportfolio-pro-cta-sections-full-bleed-ctaA bold section-filling heading with a concrete availability line and a single primary button, no gradient and no overlay.

Get In Touch Ctaportfolio-pro-cta-sections-get-in-touch-ctaA contact band with a pill-shaped email chip and three social icon links that lets visitors follow or reach out without committing to a message.

Hire Me Bandportfolio-pro-cta-sections-hire-me-bandA bordered conversion band with a confident heading, a one-line capacity note, and a single primary action that closes a portfolio page.

Lets Talk Splitportfolio-pro-cta-sections-lets-talk-splitA two-column contact split with a warm heading on the left and a bordered card carrying response time, fit criteria, and preferred start date on the right.

Newsletter Ctaportfolio-pro-cta-sections-newsletter-ctaA centred subscribe band with a heading naming the cadence, an honest pitch describing the content and what it excludes, and an inline email form.

Next Steps CTAportfolio-pro-cta-sections-next-steps-ctaA centered closer with three numbered steps covering the first message, a short intro call, and a written proposal, ending in one primary action.

Project Inquiry Ctaportfolio-pro-cta-sections-project-inquiry-ctaA ruled brief prompt listing four things to include in a first message, timeline, budget range, product description, and scope, to qualify enquiries before they arrive.

Simple Contact Ctaportfolio-pro-cta-sections-simple-contact-ctaA minimal closer with a single centered heading and one large email link at heading scale, nothing else, for visitors who have already decided to reach out.

Split Availability Ctaportfolio-pro-cta-sections-split-availability-ctaA two-column CTA with booking criteria and an availability dot on the left and what to send plus a project brief button on the right.

Start Project Bandportfolio-pro-cta-sections-start-project-bandA single bordered card with a confident heading, a one-line on how to begin, and a primary email action that names the response time commitment.

Starting Rate CTAportfolio-pro-cta-sections-starting-rate-ctaA bordered closer with a heading, lede, and primary action beside a rate card stating the starting price and a checked list of inclusions.

Stats CTA Bandportfolio-pro-cta-sections-stats-cta-bandA centered band with a heading, a primary button, and a ruled three cell stat strip proving years of practice, shipped projects, and returning clients.

Testimonial CTAportfolio-pro-cta-sections-testimonial-ctaA two column closer pairing a heading and dual actions with a bordered client quote card carrying an avatar, attribution, and an outcome line.

Two Action Ctaportfolio-pro-cta-sections-two-action-ctaA centered band with a heading and two equal-weight buttons offering distinct paths for visitors browsing work and visitors ready to reach out.

Annotated Screenportfolio-pro-design-portfolio-annotated-screenA single captioned product screen beside five numbered decision notes, each naming a screen region and the reasoning behind the call.

Before After Designportfolio-pro-design-portfolio-before-after-designA redesign proof with side-by-side Placeholder visuals and a ruled change table naming the constraint and three specific before-and-after decisions.

Brand Showcaseportfolio-pro-design-portfolio-brand-showcaseA brand identity case showing logo mark, theme-token colour swatches, typography panel, and three application mockups for one project.

Case Study Designportfolio-pro-design-portfolio-case-study-designA design case study with a sticky screen stack and result strip on the left and a four-section narrative (problem, approach, constraint, outcome) on the right.

Concept Gridportfolio-pro-design-portfolio-concept-gridA process-transparency grid of six unexplored or unshipped design directions, each with a Placeholder tile and an honest reason it was set aside.

Design Directionsportfolio-pro-design-portfolio-design-directionsThree visual directions for one project as tiles with trait rows for type, color, and feel, a verdict line, and the selected pick marked.

Design Principlesportfolio-pro-design-portfolio-design-principlesA ruled three-column grid of six numbered working principles, each pairing a short titled belief with an honest explanation of its impact.

Design Processportfolio-pro-design-portfolio-design-processA five-step design process block with numbered rows each carrying a title, duration, Placeholder illustration, and an honest description of the step output.

Design System Displayportfolio-pro-design-portfolio-design-system-displayA systems-work section showing a shared design system as colour token swatches, a six-step type scale, and three component documentation cards.

Featured Projectportfolio-pro-design-portfolio-featured-projectA flagship project split with a full-height Placeholder screen beside a summary, five ruled spec rows, and three measured outcome stats.

Iteration Timelineportfolio-pro-design-portfolio-iteration-timelineOne product screen across four dated design rounds in a ruled grid, each pairing a snapshot with the round name, date, and a change note.

Logo Gridportfolio-pro-design-portfolio-logo-gridAn eight-mark logo portfolio grid with centred monogram overlays on Placeholder tiles, each labelled by client name and mark kind.

Project Indexportfolio-pro-design-portfolio-project-indexA ruled archive table of every project by year with client sector and deliverable columns and a row-level arrow link to each case.

Research Decisionsportfolio-pro-design-portfolio-research-decisionsThree ruled rows pairing a real research quote with the exact design change it drove and the measured result after shipping.

Responsive Pairsportfolio-pro-design-portfolio-responsive-pairsThree projects each shown as a paired desktop and mobile frame with a note explaining the specific adaptation decision behind the small screen.

Screens Carousel Blueprintportfolio-pro-design-portfolio-screens-carousel-blueprintA static carousel blueprint of five app screens with prev and next affordances, dot indicators, and a thumbnail strip with one slide active.

UI Wallportfolio-pro-design-portfolio-ui-wallA six-screen product interface grid with state-level captions showing the full range of a design system from empty states to dense data views.

Visual Gridportfolio-pro-design-portfolio-visual-gridA dense nine-item square grid of design shots with minimal captions for explorations and process fragments that did not fit a case study.

Work Showcaseportfolio-pro-design-portfolio-work-showcaseA four-project design grid where each card names the client type, the role, the year, and the specific deliverables the designer owned.

ADR Logportfolio-pro-developer-portfolio-adr-logA single column architecture decision log of ruled rows, each pairing a record id and date with the decision, reasoning note, and status chip.

Api Project Cardportfolio-pro-developer-portfolio-api-project-cardA two-column backend project card pairing a project description and stack chips with a static mono panel showing a sample endpoint path and a formatted HTTP response.

Career Timelineportfolio-pro-developer-portfolio-career-timelineReverse chronological engineering roles as ruled rows pairing period and tenure with role, company, summary, a shipped highlight, and stack tags.

Code Snippetportfolio-pro-developer-portfolio-code-snippetA production function displayed in a mono bg-muted editor panel with a filename tab, gutter line numbers, and a caption explaining the technical tradeoff the snippet demonstrates.

Contributions Gridportfolio-pro-developer-portfolio-contributions-gridAn activity heatmap showing 1654 contributions across 52 weeks using theme-token opacity squares with a streak note and quarterly commit breakdown.

Engineering Principlesportfolio-pro-developer-portfolio-engineering-principlesSix numbered engineering principles in an editorial three column grid, each pairing a mono index with a short title and a first person note.

Github Statsportfolio-pro-developer-portfolio-github-statsA four-figure contribution stat strip above a 52-week CSS-grid heatmap built with theme-token opacity squares and a deterministic seed, with no green color scale.

Incident Postmortemportfolio-pro-developer-portfolio-incident-postmortemA two column incident retro pairing the story, root cause, and follow up changes with a static minute by minute timeline panel.

Now Buildingportfolio-pro-developer-portfolio-now-buildingA stacked list of 3 projects currently in development, each with a status badge, technical description, and a dated progress note.

Open Source Listportfolio-pro-developer-portfolio-open-source-listA ruled-row list of open-source contributions each naming the project, a specific description of the work done, a tabular star count, and a Maintainer or Contributor role badge.

Performance Winsportfolio-pro-developer-portfolio-performance-winsA single column list of optimization stories as ruled rows, each pairing the narrative and an improvement chip with before and after metric bars.

Project Listportfolio-pro-developer-portfolio-project-listA ruled-row developer projects index with stack chips, a one-line summary, and separate repo and live links per project.

Project Reposportfolio-pro-developer-portfolio-project-reposA four-card grid of public repositories each showing the project name, a one-line description, the stack as chips, and tabular stars and forks counts with a repo link.

Published Packagesportfolio-pro-developer-portfolio-published-packagesA ruled list of maintained npm packages, each row with the name, version, license, weekly downloads, a short description, and an install command.

Pull Request Showcaseportfolio-pro-developer-portfolio-pull-request-showcaseA two column pull request case study pairing the change narrative, review notes, and merge stats beside a static diff panel of the reworked hunk.

Skills and Projectsportfolio-pro-developer-portfolio-skills-and-projectsA two-column block with the technology stack organised into labelled chip categories on the left and a ruled list of representative projects on the right.

System Design Caseportfolio-pro-developer-portfolio-system-design-caseA case study split pairing the problem, numbered architecture decisions, and outcome metrics with a blueprint panel tracing the ingest and read paths.

Tech Stack Detailportfolio-pro-developer-portfolio-tech-stack-detailA four-column grid of technologies grouped under Languages, Frameworks, Infrastructure, and Tools, each item showing a two-letter mark and a short honest context note.

Terminal Introportfolio-pro-developer-portfolio-terminal-introA full-viewport hero split with an h1 and lede on the left and a static mono terminal panel on the right showing a whoami command with structured key-value output and a static cursor.

Career Chaptersportfolio-pro-experience-sections-career-chaptersThe full history grouped into three named eras as columns, each with a year range, a first person narrative, and a ruled list of roles.

Career Timelineportfolio-pro-experience-sections-career-timelineA vertical connected timeline of key roles and turning points with year markers and short narrative descriptions of how each move built on the last.

Client Engagementsportfolio-pro-experience-sections-client-engagementsFreelance work listed as a ruled index, each row pairing client and sector with a one line deliverable, an engagement type badge, and the year.

Compact Historyportfolio-pro-experience-sections-compact-historyA ruled list of roles showing company, title, and year range in tabular-nums, fitting five positions into a minimal footprint.

Current Positionportfolio-pro-experience-sections-current-positionA two-column card stating the present role with company, title, focus rows, and a plain note on what the person is and is not open to.

Experience Accordionportfolio-pro-experience-sections-experience-accordionAn accordion work history where each ruled row shows company, title, and years, expanding to a first person summary, highlights, and a departure note.

Experience Detailportfolio-pro-experience-sections-experience-detailA single role expanded with company, tenure, scope, a not in scope list, and key project cards each naming the work done and the measured outcome.

Experience Tabsportfolio-pro-experience-sections-experience-tabsA vertical rail of companies switches a detail panel showing the role title, a first person summary, what you owned, and a stat row.

Experience With Logosportfolio-pro-experience-sections-experience-with-logosA ruled history list where each role leads with an inline SVG company wordmark alongside title, date range, and a one-line summary.

Growth Matrixportfolio-pro-experience-sections-growth-matrixAreas of responsibility as rows and career levels as columns, with filled, faded, and empty dots marking what was owned or contributed at each stage.

Highlights Bandportfolio-pro-experience-sections-highlights-bandA four-cell bordered grid strip presenting standout career moments each with a bold label and a concrete outcome sentence.

Positions Listportfolio-pro-experience-sections-positions-listA compact ruled index of every role with company, title, employment type, and year range and no descriptions by design.

Promotion Pathportfolio-pro-experience-sections-promotion-pathA connected stepper telling six years at one company as four titles, each carrying the year, what changed in the work, and a scope fact.

Role Highlightsportfolio-pro-experience-sections-role-highlightsCards for the two or three most consequential roles, each with a context sentence and bulleted achievements that include concrete numbers.

Role Referencesportfolio-pro-experience-sections-role-referencesA three card work history pairing each role with a short quote from the manager or founder who was in the room, credited beneath.

Tenure Spansportfolio-pro-experience-sections-tenure-spansA tenure chart drawing every role as a horizontal bar across a shared year axis, with a legend separating full time roles from freelance work.

Work Historyportfolio-pro-experience-sections-work-historyA ruled list of every role with company, title, date range, and a one-sentence summary covering the full employment record.

Anchored FAQportfolio-pro-faq-sections-anchored-faqA FAQ with a sticky anchor rail listing three topic sections beside always open ruled answers, keeping long lists navigable without accordions.

Availability Faqportfolio-pro-faq-sections-availability-faqAn availability FAQ that states the real next opening month in the lede and answers five questions about lead time, rush work, waiting list, and start date slippage.

Centered Faqportfolio-pro-faq-sections-centered-faqA centered heading and lede above a narrow max-w-2xl accordion of six working-together questions with specific policy answers.

Faq Accordionportfolio-pro-faq-sections-faq-accordionA six-question general FAQ accordion covering how to start, revisions, time zones, file ownership, and NDA signing, with the first item open by default.

Faq Three Columnportfolio-pro-faq-sections-faq-three-columnNine questions and answers laid out in three equal columns as plain text blocks for at-a-glance scanning without interaction.

Faq With Contactportfolio-pro-faq-sections-faq-with-contactA five-question accordion beside a sticky contact nudge card so visitors whose question is not listed can reach out without leaving the page.

Grouped Faqportfolio-pro-faq-sections-grouped-faqA FAQ block that organizes questions into three topic groups (Process, Pricing, Working together) each rendered as a collapsible accordion.

Inline Faq Listportfolio-pro-faq-sections-inline-faq-listA FAQ block that shows all questions and answers as always-open ruled rows in a two-column grid with no accordion.

Myth FAQportfolio-pro-faq-sections-myth-faqA left aligned heading over a ruled stack of five two column rows, each pairing a quoted assumption with the reality that corrects it.

Numbered FAQportfolio-pro-faq-sections-numbered-faqAn editorial FAQ of six always open questions in a single narrow column, each led by a large index numeral and separated by ruled dividers.

Numbers FAQportfolio-pro-faq-sections-numbers-faqA left aligned heading above a three column grid of six rule topped cards, each pairing a question with a large number and detail.

Objections FAQportfolio-pro-faq-sections-objections-faqA centered heading over a chat styled thread of four exchanges, each a right aligned objection bubble answered by a reply beside a designer avatar.

Pricing Faqportfolio-pro-faq-sections-pricing-faqA five-question pricing FAQ stating project cost ranges, payment installments, delay responsibility, refund policy, and retainer terms without hedging.

Process Faqportfolio-pro-faq-sections-process-faqA five-question process FAQ covering revision rounds, how to give feedback, handoff deliverables, source file ownership, and how design disagreements are handled.

Tabbed FAQportfolio-pro-faq-sections-tabbed-faqA tabbed FAQ that splits questions into Projects, Pricing, and Logistics tabs, each revealing its own accordion of answers below a centered heading.

Timeline FAQportfolio-pro-faq-sections-timeline-faqA vertical numbered timeline of three project stages, each node carrying a stage title and two always open questions with paragraph answers.

Two Column Faqportfolio-pro-faq-sections-two-column-faqA two-column FAQ with a heading and quick-facts strip on the left and a five-question accordion on the right in a balanced split layout.

Working Faqportfolio-pro-faq-sections-working-faqA five-question collaboration FAQ answering how often you will talk, what the client needs to provide, scope changes, feedback format, and typical timelines.

Yes No FAQportfolio-pro-faq-sections-yes-no-faqA rapid FAQ of nine questions in a three column card grid, each led by a Yes, No, or Depends badge above a short answer.

Awards Footerportfolio-pro-footers-awards-footerA full width recognition ledger of ruled rows pairing each award with its body, project, and year, above a bar with copyright and social icons.

Big Cta Footerportfolio-pro-footers-big-cta-footerA conversion footer with a status line, a heading, a qualifier sentence, and a large email link filling the card, with compact links and a copyright line below.

Big Name Footerportfolio-pro-footers-big-name-footerA footer centred on the name and a tagline set at heading scale, with a ruled divider separating a short page link row and a copyright line.

Centered Footerportfolio-pro-footers-centered-footerA fully centered footer with the name mark, a row of nav links, a row of social icon links, and a copyright line separated by a top border.

Colophon Footerportfolio-pro-footers-colophon-footerA colophon footer pairing a name and site note with a ruled definition list of typefaces, stack, tools, and last update, above a copyright line.

Columns And Social Footerportfolio-pro-footers-columns-and-social-footerA three-column footer with a brand bio, a navigation column, and a contact column, topped by a social icon row and copyright bar.

Contact Footerportfolio-pro-footers-contact-footerA contact footer with a large email address as the centrepiece, social icon links, a compact site nav, and a copyright line inside a rounded card.

Elsewhere Footerportfolio-pro-footers-elsewhere-footerA grid of four bordered profile tiles, each with a platform icon, handle, and posting note, above a bar with nav and copyright.

Footer With Availabilityportfolio-pro-footers-footer-with-availabilityA two-column footer pairing the name, positioning line, and email on the left with a toggling availability status card and social icons on the right.

Footer With CTA Bandportfolio-pro-footers-footer-with-cta-bandA footer that opens with a bordered card holding a lets-work heading and action button, then closes with nav links, social icons, and a copyright line.

Footer With Navportfolio-pro-footers-footer-with-navA footer with four labelled link columns covering Work, About, Contact, and Social, the studio name and tagline above, and a copyright bar below.

Footer With Newsletterportfolio-pro-footers-footer-with-newsletterA footer pairing contact details and social icons with an inline newsletter subscribe form inside a bordered card above a copyright bar.

Footer With Nowportfolio-pro-footers-footer-with-nowA now panel of three ruled cells reporting what the owner builds, where they are based, and current interests, above a nav and copyright bar.

Latest Writing Footerportfolio-pro-footers-latest-writing-footerA footer pairing a brand column with a ruled list of recent essays, each titled and dated, plus a view all link and copyright bar.

Minimal Link Footerportfolio-pro-footers-minimal-link-footerA single centered row of text nav links above a copyright line, the smallest possible footer for pages that close with a strong CTA section.

Minimal Signoff Footerportfolio-pro-footers-minimal-signoff-footerA single ruled line carrying the name and copyright year on one side and a made-with location line on the other, with no nav or social links.

Quote Footerportfolio-pro-footers-quote-footerA large centered client quote with an avatar attribution, closed by a ruled bar carrying nav links, social icons, and a copyright line.

Recent Work Footerportfolio-pro-footers-recent-work-footerA footer opening with three latest project thumbnails, closed by a ruled bar carrying the copyright, a compact nav, and a row of social icons.

Sitemap Footerportfolio-pro-footers-sitemap-footerA complete portfolio footer with the name set at heading scale and five link columns covering Work, Writing, About, Contact, and Social.

Social Row Footerportfolio-pro-footers-social-row-footerA centred footer showing the name at heading scale, a one-line tagline, a row of social icon links, and a copyright line with no other navigation.

Stats Footerportfolio-pro-footers-stats-footerA ruled band of four practice numbers, each a large numeral with a label and detail line, above a bar with copyright, email, and nav.

Three Column Footerportfolio-pro-footers-three-column-footerA three-column footer with a brand and tagline column, a navigation links column, and a contact and social column, plus a full-width copyright bar.

Album Gridportfolio-pro-gallery-sections-album-gridA collections index of six named photography series, each card showing a cover image, album title, photo count, and date range.

Alternating Galleryportfolio-pro-gallery-sections-alternating-galleryAn alternating editorial gallery of full width rows that swap the image left and right beside a series title, story, and bordered facts list.

Before After Galleryportfolio-pro-gallery-sections-before-after-galleryThree retouching pairs showing a before and after image side by side with a technical note naming the specific technique applied to each.

Captioned Galleryportfolio-pro-gallery-sections-captioned-galleryFour photographs each paired with a full documentary caption naming where, when, and the story behind how the frame was made.

Columns Galleryportfolio-pro-gallery-sections-columns-galleryA four-column uniform grid of twelve captioned Placeholder tiles showing project name and client for a large body of work.

Contact Sheetportfolio-pro-gallery-sections-contact-sheetA ring framed sheet panel with a roll header above a dense grid of numbered mono frames, two ringed as picks marked for print.

Filmstrip Galleryportfolio-pro-gallery-sections-filmstrip-galleryA horizontally scrolling row of wide film frames with mono frame codes and captions beneath each, plus roll metadata beside the heading.

Frame Studyportfolio-pro-gallery-sections-frame-studyA single frame study pairing one large photograph with its title, story, and a bordered list of camera, exposure, film, and print details.

Full Bleed Galleryportfolio-pro-gallery-sections-full-bleed-galleryFour large edge-to-edge images stacked vertically with a sentence caption and location plus date beside each frame for immersive editorial presentation.

Full Width Rowsportfolio-pro-gallery-sections-full-width-rowsLarge images stacked at full container width with a title, a context-naming caption, and a two-digit series counter beneath each.

Grid With Filtersportfolio-pro-gallery-sections-grid-with-filtersA client-rendered gallery with category chips that filter image tiles via useState and a live count showing how many images are visible.

Index Preview Galleryportfolio-pro-gallery-sections-index-preview-galleryA numbered list of works with medium and year on the left beside a large preview of the highlighted row with its caption and counter.

Lightbox Blueprintportfolio-pro-gallery-sections-lightbox-blueprintA static open-state lightbox layout showing a centered large image with prev/next controls, a frame counter, caption, and thumbnail strip over a dark scrim.

Mosaic Galleryportfolio-pro-gallery-sections-mosaic-galleryA mosaic gallery with one large anchor frame spanning two columns and two rows beside eight square supporting tiles, above a view all link.

Photo Gridportfolio-pro-gallery-sections-photo-gridA three-column grid of nine square photography frames with hover captions showing location, date, and subject for each shot.

Photo Masonryportfolio-pro-gallery-sections-photo-masonryA CSS-columns masonry gallery of twelve Placeholder images in mixed aspect ratios that form a dense visual wall of travel photography.

Spotlight Galleryportfolio-pro-gallery-sections-spotlight-galleryA large main image with a captioned location and date above a five-thumbnail strip with the active selection ringed.

Thumbnail Stripportfolio-pro-gallery-sections-thumbnail-stripA compact responsive grid of square Placeholder thumbnails labelled with a series name and year for browsing a photographic archive.

Triptych Galleryportfolio-pro-gallery-sections-triptych-galleryA triptych gallery where each work is a row of three tall panels under a title and edition line, with one shared caption beneath.

Two Up Galleryportfolio-pro-gallery-sections-two-up-galleryAn editorial two-column image layout pairing photographs by series with title and medium captions beneath each image.

Year Archive Galleryportfolio-pro-gallery-sections-year-archive-galleryWork grouped into bordered rows by year, each pairing a large year heading, frame count, and note with a four image row of selects.

Availability Heroportfolio-pro-hero-sections-availability-heroA freelancer hero that centres a card showing the next open project slot, the slot count, and the typical engagement length beside a get-in-touch action.

Awards Heroportfolio-pro-hero-sections-awards-heroSplit hero with a first person intro and actions beside a two by two grid of award cells, each naming the issuer, honour, and year.

Big Type Heroportfolio-pro-hero-sections-big-type-heroA fold-filling hero that renders the name at oversized typographic scale with a discipline line, lede, two actions, and a three-cell grounding facts grid.

Career Timeline Heroportfolio-pro-hero-sections-career-timeline-heroA split hero with name, lede, actions, and availability note beside a bordered timeline panel listing each chapter with years, role, and detail.

Centered Statement Heroportfolio-pro-hero-sections-centered-statement-heroA symmetric portfolio opener with everything centered around a single strong positioning sentence, a quiet role lede, and one action button.

Client Quote Heroportfolio-pro-hero-sections-client-quote-heroA hero with name, role lede, and two actions above a full width client quote strip carrying the quote, an avatar, and attribution.

Cta Focused Heroportfolio-pro-hero-sections-cta-focused-heroA conversion-first hero with a single confident headline, a start-a-project button, and a four-figure trust signal strip at the base of the fold.

Featured Case Heroportfolio-pro-hero-sections-featured-case-heroA split hero with name, positioning lede, detail strip, and actions beside a single featured case study panel showing a thumbnail and outcome rows.

Hero With Marqueeportfolio-pro-hero-sections-hero-with-marqueeA fold-filling hero with a declarative h1, lede, two actions, a static row of service chips as a skills strip, and a three-cell availability facts grid.

Inquiry Form Heroportfolio-pro-hero-sections-inquiry-form-heroSplit hero with a first person invitation and expectations strip on the left beside a labelled inquiry form for name, email, company, and project.

Intro Paragraph Heroportfolio-pro-hero-sections-intro-paragraph-heroA hero that opens with a first-person paragraph above the name and headline, followed by a single action button and a three-field detail strip.

Intro With Socialsportfolio-pro-hero-sections-intro-with-socialsA personal portfolio hero with a name, role lede, two actions, and a branded social icon row that moves profile links into the first viewport.

Left Aligned Heroportfolio-pro-hero-sections-left-aligned-heroA left-anchored editorial hero with name and role in the h1, a studio lede, two actions, and a four-row ruled metadata strip covering role, studio, availability, and clients.

Minimal Name Heroportfolio-pro-hero-sections-minimal-name-heroA fully reduced centered hero with the name in the h1, a role line below it, and a small set of plain text navigation links and nothing else.

Name And Role Heroportfolio-pro-hero-sections-name-and-role-heroA name and role hero with a positioning line, a three fact strip, and an honest availability note.

Photo Grid Heroportfolio-pro-hero-sections-photo-grid-heroA hero built around a 2x2 photo tile grid with the photographer name and credential facts in a height-balanced side panel.

Portrait Right Heroportfolio-pro-hero-sections-portrait-right-heroA split hero with a name, lede, actions, and three grounding facts on the left beside a tall portrait placeholder on the right.

Process Steps Heroportfolio-pro-hero-sections-process-steps-heroA hero with a first person intro, lede, and two actions above a numbered three step strip showing how an engagement runs end to end.

Project Index Heroportfolio-pro-hero-sections-project-index-heroEditorial index hero with a name and positioning intro above a ruled, text only list of selected projects showing number, title, client, discipline, and year.

Quote Heroportfolio-pro-hero-sections-quote-heroA hero that opens with a craft philosophy sentence as the heading and the practitioner name and studio in a quieter line below.

Role And Clients Heroportfolio-pro-hero-sections-role-and-clients-heroA portfolio hero that pairs a name and role statement with an inline row of past client wordmarks placed between the lede and the action buttons.

Scrolling Roles Heroportfolio-pro-hero-sections-scrolling-roles-heroA hero that stacks every discipline this person works in as a static role list with one role emphasised and a facts panel beside it.

Service Menu Heroportfolio-pro-hero-sections-service-menu-heroSplit hero pairing a first person intro and availability facts with a bordered service menu panel listing each offering, its scope, and starting price.

Split Portrait Heroportfolio-pro-hero-sections-split-portrait-heroA two-column hero with a name, positioning lede, and ruled availability strip on the left and an aspect-4/5 portrait placeholder on the right.

Statement Heroportfolio-pro-hero-sections-statement-heroA stripped-back hero with one confident h1 sentence, a single lede, and one primary action directing visitors to the work.

Studio Heroportfolio-pro-hero-sections-studio-heroA small-agency opener with a studio name, a we-voice lede naming what the team does not offer, two actions, and a three-fact founding strip.

Two Disciplines Heroportfolio-pro-hero-sections-two-disciplines-heroA hero for a dual-practice creator with an h1 naming both disciplines, a lede connecting them, and two cards each pointing at one body of work.

Video Reel Heroportfolio-pro-hero-sections-video-reel-heroA hero that leads with a large video frame and play affordance, then names the director and their availability below it.

Work Preview Heroportfolio-pro-hero-sections-work-preview-heroA hero that leads with the name and role then immediately shows three labelled work thumbnails with role and year below each.

Album Featureportfolio-pro-music-audio-album-featureA split layout pairing a large Placeholder album cover with a full ruled tracklist, meta line, short release note, and platform links.

Booking Panelportfolio-pro-music-audio-booking-panelA live booking split pairing a ruled list of set formats with a details card of availability, a rider link, and a request button.

Discography Gridportfolio-pro-music-audio-discography-gridA six-album grid with Placeholder covers, titles, years, and track counts spanning a full catalogue from debut to latest release.

Gig Listportfolio-pro-music-audio-gig-listUpcoming shows as ruled rows with date, venue, city, and a tickets link, followed by muted past shows as an archive beneath.

Listen Cardportfolio-pro-music-audio-listen-cardA featured track card with a Placeholder cover, static div-bar waveform in theme tokens, and text links to four streaming platforms.

Live Sessionsportfolio-pro-music-audio-live-sessionsA three card grid of filmed live sessions, each with a still, song title, venue and year line, and a watch link with duration.

Music Heroportfolio-pro-music-audio-music-heroA fold-filling hero with a sentence h1, album lede, play and releases CTAs, a three-stat strip, and a Placeholder album cover beside it.

Press Kitportfolio-pro-music-audio-press-kitA press kit section pairing an approved short bio and press pull quotes with two photos and a ruled list of downloadable assets.

Releases Rowportfolio-pro-music-audio-releases-rowA four-column grid of recent album and EP cards each with a Placeholder cover, title, year, format, and a listen link.

Session Creditsportfolio-pro-music-audio-session-creditsA ruled credit table listing year, artist and record, and role for each session, closed by an availability note and a full credits link.

Song Storyportfolio-pro-music-audio-song-storyA two column split pairing a lyric excerpt card with the written story of a song, closed by a ruled credits list and a listen link.

Streaming Statsportfolio-pro-music-audio-streaming-statsA four stat strip of listener and stream totals above a split of most streamed tracks with bars and a ranked list of top cities.

Studio Servicesportfolio-pro-music-audio-studio-servicesThree service cards for mixing, mastering, and production, each with a rate, a checklist of what is included, and a turnaround line.

Sync Placementsportfolio-pro-music-audio-sync-placementsSelected sync licensing credits in three columns for film and television, advertising, and games, each a ruled list with a licensing link below.

Track Listportfolio-pro-music-audio-track-listA ruled list of ten tracks with tabular-numeral durations, track numbers, and a static play affordance for an album or EP.

Announcement Bar Navportfolio-pro-navbars-announcement-bar-navA header topped by an inverse announcement strip with a booking note, inline arrow link, and dismiss button, above the name mark and page links.

Centered Navportfolio-pro-navbars-centered-navAn editorial header with the name mark pinned to the absolute center and two nav links split symmetrically on each side.

Compact Navportfolio-pro-navbars-compact-navA slim 12-unit header with a name mark on the left and three minimal text links on the right, nothing else.

Divided Navportfolio-pro-navbars-divided-navFull width header where the name mark and each page link occupy their own border separated cell, ending in a solid inverse contact cell.

Logo Center Navportfolio-pro-navbars-logo-center-navA navbar with the name mark centered and two navigation links flanking it on each side, plus a contact button on the far right.

Mega Panel Navportfolio-pro-navbars-mega-panel-navA desktop header shown with its Work menu open, a full width panel laying out three category cards with thumbnails, counts, and a footer row.

Minimal Name Navbarportfolio-pro-navbars-minimal-name-navbarA minimal personal-site header with the name mark on the left and three nav links on the right, nothing else.

Name And Menuportfolio-pro-navbars-name-and-menuA mobile-first header shown in its open-menu state with four large stacked links and zero-padded index numbers.

Nav With Availability Dotportfolio-pro-navbars-nav-with-availability-dotA navbar with name, centred links, and a pulsing emerald dot beside an availability month label on the right.

Nav With Ctaportfolio-pro-navbars-nav-with-ctaA conversion header with the name mark, three nav links, and a primary Get in touch button on the right.

Nav with Location and Timeportfolio-pro-navbars-nav-with-location-timeHeader with a name mark on the left, centered page links, and a location readout showing the city and a local time label on the right.

Nav With Resumeportfolio-pro-navbars-nav-with-resumeA site header with a name mark and nav links on the left and a download CV button on the right for portfolios where recruiters need direct resume access.

Nav With Socialsportfolio-pro-navbars-nav-with-socialsA connected header with the name mark and nav links on the left and a row of GitHub, LinkedIn, and Instagram icon links on the right.

Nav With Theme Toggleportfolio-pro-navbars-nav-with-theme-toggleA navbar with the name mark on the left, four nav links in the center, and a static sun and moon theme toggle button on the right.

Numbered Navportfolio-pro-navbars-numbered-navHeader with a name mark on the left, horizontal links each carrying a zero padded index number, and a small index caption on the right.

Pill Links Navportfolio-pro-navbars-pill-links-navHeader with a name mark, page links inside a bordered rounded pill segmented control with the active one highlighted, and a quiet arrow link.

Side Rail Navportfolio-pro-navbars-side-rail-navA fixed left rail with the name mark and role, stacked section links with an active highlight, and a bottom row of social icons.

Sticky Minimal Navportfolio-pro-navbars-sticky-minimal-navA slim sticky header with frosted background, the name mark, three nav links, and an emerald availability dot.

Transparent Navportfolio-pro-navbars-transparent-navA background-free header with the studio name on the left and anchor links on the right, designed to float over a hero section.

Two Row Navportfolio-pro-navbars-two-row-navA stacked two-row header with the name and social icons on the top row and a six-link section nav on the second row for content-rich portfolios.

Underline Tabs Navportfolio-pro-navbars-underline-tabs-navA header whose page links behave like full height tabs, the active one carrying a bottom border that sits flush against the header rule.

Wide Navportfolio-pro-navbars-wide-navA full-width header with the name mark on the left, five centred navigation links, and a contact button on the right in a generous 16-unit bar.

Author Noteportfolio-pro-newsletter-sections-author-noteCentered newsletter signup framed as a first person letter in a bordered note, signed with avatar, name, and role above a labeled email form.

Centered Signupportfolio-pro-newsletter-sections-centered-signupA centered heading, pitch, and email-and-button form with a cadence note naming the send dates, frequency, and unsubscribe policy.

Greatest Hitsportfolio-pro-newsletter-sections-greatest-hitsCentered newsletter signup leading with a two by two grid of the most opened issues, each with a topic badge, summary, and open rate.

Inbox Previewportfolio-pro-newsletter-sections-inbox-previewA two column newsletter signup pairing a pitch and labeled email form with a drawn inbox mockup listing five recent issues by subject and date.

Inline Newsletter Bandportfolio-pro-newsletter-sections-inline-newsletter-bandA slim bordered subscribe band with a one-line pitch and inline email input designed for mid-page placement between content sections.

Issue Anatomyportfolio-pro-newsletter-sections-issue-anatomyTwo column newsletter signup pairing a pitch and labeled email form with a numbered breakdown of the four recurring segments, each with a read time.

Latest Issueportfolio-pro-newsletter-sections-latest-issueA two-column block showing a preview card of the most recent newsletter issue beside a subscribe form with cadence note.

Newsletter FAQportfolio-pro-newsletter-sections-newsletter-faqA two column newsletter signup pairing the pitch and labeled email form with a bordered list of five short questions and plain answers.

Newsletter Featureportfolio-pro-newsletter-sections-newsletter-featureA two-column newsletter signup with value props and cadence on the left and recent issue previews on the right.

Newsletter Signupportfolio-pro-newsletter-sections-newsletter-signupA newsletter signup section with a heading, a one-sentence pitch, an email and subscribe form, and an exact cadence note naming the send dates.

Newsletter Statsportfolio-pro-newsletter-sections-newsletter-statsA two-column newsletter signup block pairing an email form with three proof figures including subscriber count, open rate, and issues published.

Newsletter Tiersportfolio-pro-newsletter-sections-newsletter-tiersA two tier newsletter signup pairing side by side Reader and Supporter cards, one carrying the email form and the other a feature list.

Newsletter With Archiveportfolio-pro-newsletter-sections-newsletter-with-archiveA newsletter signup block that lists the three most recent issues as titled linked rows before showing the subscribe form, letting visitors sample the content first.

Reader Quotesportfolio-pro-newsletter-sections-reader-quotesA centered newsletter signup above a three card row of short reader quotes, each attributed with avatar art, a name, and a role.

Sidebar Subscribeportfolio-pro-newsletter-sections-sidebar-subscribeA compact subscribe card sized for a sidebar with a short pitch, email form, and subscriber count.

Simple Subscribeportfolio-pro-newsletter-sections-simple-subscribeA minimal horizontal band with a single line of copy and an inline email input and subscribe button, sized for placement directly above a footer.

Split Newsletterportfolio-pro-newsletter-sections-split-newsletterA two-column block with the pitch and four dated recent issue titles on the left and a signup form card with cadence and reader count on the right.

Subscribe Cardportfolio-pro-newsletter-sections-subscribe-cardA compact bordered card with a newsletter pitch, a subscriber count and frequency stats strip, and an email form sized for a sidebar or narrow column.

Topic Pickerportfolio-pro-newsletter-sections-topic-pickerCentered newsletter signup card with a checkbox list of three letters, each with a description and cadence, above a labeled email form.

App Defaultsportfolio-pro-now-uses-app-defaultsTwo ruled columns pairing twenty everyday categories with the single app that wins each job, a dot flagging any default changed this year.

Currently Cardportfolio-pro-now-uses-currently-cardA compact ruled card of six status rows covering building, reading, listening, learning, availability, and location as a live snapshot.

Desk Tourportfolio-pro-now-uses-desk-tourSplit desk tour pairing a square workspace photo with six numbered callout rows naming each item and the reason it earned its place.

Gear Listportfolio-pro-now-uses-gear-listKit organised into category groups as cards with a placeholder visual, a model name, and a sentence on why each piece earned its place.

Learning Logportfolio-pro-now-uses-learning-logVertical timeline of five skills with month stamps, status badges covering progress and pauses, and short notes on what each skill changed.

Media Dietportfolio-pro-now-uses-media-dietFour category cards for listening, watching, playing, and following, each holding three titled items with meta notes and one highlighted pick.

Now Archiveportfolio-pro-now-uses-now-archiveDated snapshots of a now page, each pairing a date column with a three column panel of what started, stopped, and kept going.

Now Pageportfolio-pro-now-uses-now-pageA dated snapshot across Work, Learning, and Life sections with specific items so the page reads as a live signal rather than a static bio.

Paid Toolsportfolio-pro-now-uses-paid-toolsRuled rows of the subscriptions behind an independent practice, each showing the tool, its plan, a monthly price, closing on a total row.

Reading Listportfolio-pro-now-uses-reading-listBooks listed as ruled rows with title, author, a one-line connection to current practice, and a reading, finished, or queued status badge.

Uses Pageportfolio-pro-now-uses-uses-pageDaily gear and software listed across Desk Setup, Software, and Everyday Carry groups, each item with a model name and a one-line why.

Category Tilesportfolio-pro-photography-category-tilesA browse-by-genre block with 4 Placeholder tiles for Portrait, Landscape, Street, and Studio, each labelled with a genre name, image count, and a hover descriptor.

Commission Briefportfolio-pro-photography-commission-briefThree commission types with day rates and inclusions beside a booking panel walking four steps from enquiry to delivery with an availability note.

Contact Sheetportfolio-pro-photography-contact-sheetA proof-sheet block with 12 small Placeholder frames in a dense grid labelled by roll and frame number, with a footer naming the camera, film stock, and lab.

Edit Breakdownportfolio-pro-photography-edit-breakdownThe raw scan and final print file side by side, four numbered edit steps, and a closing note on what the retouching never includes.

Exhibition Historyportfolio-pro-photography-exhibition-historyTwo ruled lists set side by side, selected exhibitions with venue, city, and year beside publications naming each outlet, piece, and date.

Full Bleed Setportfolio-pro-photography-full-bleed-setA full-bleed editorial photo set with 3 edge-to-edge Placeholder images and ruled caption rows carrying location, date, and a field note between each frame.

Photo Aboutportfolio-pro-photography-photo-aboutA photographer profile split with a Placeholder portrait beside a bio, three approach sections, and a gear table.

Photo Bookportfolio-pro-photography-photo-bookA book cover and three spread thumbnails beside the monograph story, a full specifications table, a stockist list, and a direct order button.

Photo Heroportfolio-pro-photography-photo-heroA fold-filling photography hero with a large Placeholder image above a two-column text panel carrying the photographer name, focus, commission note, and a four-row meta strip.

Print Pricingportfolio-pro-photography-print-pricingA photography print pricing block listing multiple series as cards with size and price tables, edition counts, remaining inventory, and framing notes.

Print Shopportfolio-pro-photography-print-shopA print sales block with 4 limited-edition print cards each showing a Placeholder image, a size-to-price table, edition size, and an honest shipping and duties note.

Series Featureportfolio-pro-photography-series-featureA photography series feature with a large lead frame, a four-still strip with location captions, and a series note naming the shooting constraint and frame count.

Series Gridportfolio-pro-photography-series-gridA photo series grid showing 6 Placeholder images grouped under a series title, year span, and intro paragraph with per-frame location captions.

Shoot Detailportfolio-pro-photography-shoot-detailA single-shoot case block with a lead Placeholder image, a one-sentence brief, a ruled meta strip of six rows, and a supporting row of three smaller frames.

Two Column Photosportfolio-pro-photography-two-column-photosA two-column photo layout with six captioned frames at mixed aspect ratios that lets a photographer contrast subject, light, or location side by side.

About Pageportfolio-pro-prebuilt-pages-about-pageA full about page composing a long form personal story, skills list, process steps, and testimonial cards into one ready to deploy page.

Contact Pageportfolio-pro-prebuilt-pages-contact-pageA minimal contact page composing a split section that shows the inquiry form and contact details side by side without scrolling.

Developer Pageportfolio-pro-prebuilt-pages-developer-pageA full developer portfolio page composing a terminal intro hero, project repos, tech stack detail, and contact footer from sibling blocks.

Freelancer Pageportfolio-pro-prebuilt-pages-freelancer-pageA full freelancer hire-me page composing an availability hero with a next opening month, services list, featured work grid, hire me band, and contact footer from sibling blocks.

Home Pageportfolio-pro-prebuilt-pages-home-pageA full portfolio homepage composing a name and role hero, featured work grid, about split, testimonial cards, and hire me band into one ready to deploy page.

Link In Bio Pageportfolio-pro-prebuilt-pages-link-in-bio-pageA minimal two-block link-in-bio page composing the link-in-bio social links block and a minimal signoff footer for a single-URL creator landing page.

Photographer Pageportfolio-pro-prebuilt-pages-photographer-pageA full photographer portfolio page composing a photo hero, series grid, print shop, and contact footer from sibling blocks.

Project Pageportfolio-pro-prebuilt-pages-project-pageA full case study page composing a project hero, problem and approach split with a named constraint, and a quantified results band.

Services Pageportfolio-pro-prebuilt-pages-services-pageA full services page composing a scoped services list, engagement cards with rates, process steps, and a hire me band into one ready to deploy page.

Studio Pageportfolio-pro-prebuilt-pages-studio-pageA full studio site page composing a studio hero, named team grid, services list with explicit exclusions, and contact footer from sibling blocks.

Work Pageportfolio-pro-prebuilt-pages-work-pageA dedicated work page composing a featured work grid and masonry grid with a hire me band so visitors see selected and full work in one flow.

Writer Pageportfolio-pro-prebuilt-pages-writer-pageA full writer portfolio page composing a writing hero, featured essay, published list, publications wall, and contact footer from sibling blocks.

Brand Bioportfolio-pro-press-kit-brand-bioThree approved bio lengths in copyable cards with word counts, followed by a key facts list for journalists to cite without follow-up.

By the Numbersportfolio-pro-press-kit-by-the-numbersHeading and lede above a hairline grid of eight large stat tiles with labels and notes, closed by a verification footnote.

Download Rowportfolio-pro-press-kit-download-rowA compact border-y strip of outline download buttons each labelled with file format and tabular size for press kit, CV, brand guide, logo pack, and case studies.

Headshot Galleryportfolio-pro-press-kit-headshot-galleryHeading with a download button, three headshot crops in a grid with resolution and use captions, and a required photo credit panel.

Interview Topicsportfolio-pro-press-kit-interview-topicsSix numbered cards pitching subjects a founder can speak about, with a formats band covering podcasts, panels, and written Q&A.

Logo Guidelinesportfolio-pro-press-kit-logo-guidelinesWordmark demo tiles on plain and reversed surfaces with size and format specs beside ruled lists of approved and prohibited uses.

Media Assetsportfolio-pro-press-kit-media-assetsA four-card grid of downloadable brand assets each showing a Placeholder preview, a format and resolution note, a file size, and a download button.

Press FAQportfolio-pro-press-kit-press-faqTwo column press FAQ with a heading and response time list beside an accordion answering the questions journalists ask before covering a studio.

Press Inquiryportfolio-pro-press-kit-press-inquiryTwo column press inquiry with a heading and what to include checklist beside a labeled contact form for outlet, deadline, and request.

Press Kit Pageportfolio-pro-press-kit-press-kit-pageA consolidated press section with a studio bio, five key facts, three downloadable assets with format notes, and a press contact card.

Press Mentionsportfolio-pro-press-kit-press-mentionsA ruled list of editorial coverage showing publication name, article headline, date, and an external read link for each mention.

Quick Factsportfolio-pro-press-kit-quick-factsA ruled definition list of ten key editorial facts covering name, location, focus, notable work, and a clickable press contact email.

Add-On Pricingportfolio-pro-pricing-sections-add-on-pricingTwo category panels list a la carte extras as divided rows, each pairing a name and one line description with a plainly stated price.

Budget Guideportfolio-pro-pricing-sections-budget-guideThree stacked budget bands pair a price range and engagement with a good fit list and a keep in mind list, the middle band flagged.

Hourly Rate Cardportfolio-pro-pricing-sections-hourly-rate-cardAn hourly rate stated plainly with included and excluded item columns, a four-hour minimum, and a ruled list of three scenarios where hourly billing makes more sense than a fixed scope.

Package Comparisonportfolio-pro-pricing-sections-package-comparisonA three-package comparison table with Check and Minus feature rows, prices, and per-package CTAs in a scrollable layout.

Payment Scheduleportfolio-pro-pricing-sections-payment-scheduleThree numbered payment stages with percentage splits sit beside a worked example panel that breaks a project fee into three payments with terms.

Pricing Tiersportfolio-pro-pricing-sections-pricing-tiersThree package cards with price-from amounts, durations, and included item lists, with a recommended tier highlighted and an honest scoping note below the grid.

Pricing With Faqportfolio-pro-pricing-sections-pricing-with-faqTwo tier cards with from prices and included lists beside three plainly answered pricing questions that remove common objections.

Project Estimate Cardportfolio-pro-pricing-sections-project-estimate-cardSix common project types as ruled table rows showing price bands and timelines, with scope assumptions per row and an honest note that all figures are starting points.

Rate and FAQportfolio-pro-pricing-sections-rate-and-faqA prominent day rate panel with a breakdown of half-day and retainer rates beside three plain-answer billing FAQ pairs.

Retainer Pricingportfolio-pro-pricing-sections-retainer-pricingThree monthly retainer cards with hour counts, prices, and cover items, plus a ruled panel explaining minimum terms, hour rollover policy, and when to switch off a retainer.

Simple Rate Bandportfolio-pro-pricing-sections-simple-rate-bandA minimal pricing block with three from-price rows and a qualifying note beside a heading and a single contact CTA.

Single Package Cardportfolio-pro-pricing-sections-single-package-cardOne clearly presented package with a from price, a bulleted included list, a not-included list, and a call to action button.

Three Tier Pricingportfolio-pro-pricing-sections-three-tier-pricingThree project tiers with from-prices, durations, and feature checklists where the middle tier is marked Recommended.

Usage Licensingportfolio-pro-pricing-sections-usage-licensingA formula strip showing creation fee times usage multiplier equals final fee sits above four license tier cards, closed by notes on exclusivity.

Value Pricing Noteportfolio-pro-pricing-sections-value-pricing-noteA two-column prose block arguing why project pricing beats hourly, with three named reasons on the right and a pair of actions linking to a quote and the hourly rate.

Whats Included Cardportfolio-pro-pricing-sections-whats-included-cardSide-by-side included and not-included cards for a design package, followed by a ruled assumptions panel covering brief quality, feedback rounds, content readiness, and stakeholder access.

Checklist Processportfolio-pro-process-sections-checklist-processFour project stages in a two-column card grid each listing the deliverables as checked items so scope is unambiguous.

Discovery Call Stepsportfolio-pro-process-sections-discovery-call-stepsA first-call explainer listing the four agenda items of a free 30-minute discovery call alongside a fact strip covering duration, format, cost, and commitment.

Engagement Flowportfolio-pro-process-sections-engagement-flowFive steps from first call to handoff presented as a two-column you and me table that names the mutual responsibilities at every stage.

Four Step Processportfolio-pro-process-sections-four-step-processA four-step process block showing Discover, Define, Design, and Deliver as numbered cards, each with a plain sentence describing the work at that stage.

Handoff Checklistportfolio-pro-process-sections-handoff-checklistA checked list of six deliverables the client receives at project close alongside a ruled notes strip and a card naming what the handoff does not include.

Horizontal Stepsportfolio-pro-process-sections-horizontal-stepsA centered heading above four numbered steps on a connected rail, each marker with a title and short description that stacks on small screens.

How I Work Stepsportfolio-pro-process-sections-how-i-work-stepsFour numbered cards each naming a stage title, what happens, and the concrete artifact the client receives at the close of that stage.

Numbered Processportfolio-pro-process-sections-numbered-processThree large-numbered phase cards showing Discover, Make, and Ship with a description and typical duration for each phase.

Phase Allocationportfolio-pro-process-sections-phase-allocationA heading and intro above a segmented proportional bar, with a ruled legend listing each phase, its percentage share, and what the time buys.

Phases Gridportfolio-pro-process-sections-phases-gridFour project phases in a two-column card grid, each card naming what happens, the concrete deliverable, and the typical duration.

Principles Processportfolio-pro-process-sections-principles-processA principles-led process block presenting three working principles as wide cards, each with an explanatory sentence and an explicit named tradeoff.

Process Comparisonportfolio-pro-process-sections-process-comparisonA heading and intro above a two column comparison table, contrasting the usual studio approach with how I work across five ruled aspect rows.

Process With Deliverablesportfolio-pro-process-sections-process-with-deliverablesFour stage cards each split into a process description on the left and the named artifact it produces on the right, from the brief to the spec.

Revision Roundsportfolio-pro-process-sections-revision-roundsA heading and intro above three feedback round cards, each naming its scope and an example note, plus a two panel footer on process.

Three Phase Processportfolio-pro-process-sections-three-phase-processA two-column split with design philosophy and three belief statements on the left and three numbered phases as a ruled list on the right.

Timeline Processportfolio-pro-process-sections-timeline-processA vertical timeline rail with five milestones each carrying a week range, day count, and the exact deliverable produced at that stage.

Timeline With Artportfolio-pro-process-sections-timeline-with-artA four-step vertical timeline with a Placeholder thumbnail per step and a named deliverable line under each description.

Two Column Processportfolio-pro-process-sections-two-column-processA working philosophy in three paragraphs on the left balanced against four numbered process steps in a ruled card on the right.

Vertical Stepsportfolio-pro-process-sections-vertical-stepsFive numbered stages stacked in a ruled list each with a title and a description that names a concrete commitment.

Working Together Stepsportfolio-pro-process-sections-working-together-stepsA day-by-day breakdown of the first two weeks with honest expectations listed beside the Week 1 and Week 2 ruled day cards.

Before After Cardportfolio-pro-project-cards-before-after-cardTwo redesign cards in a grid, each pairing captioned before and after thumbnails side by side with a name, meta line, and result figure.

Bordered Project Cardportfolio-pro-project-cards-bordered-project-cardA bordered card grid showing project thumbnails with name, role, year, skill tags, and a view link per entry.

Case Study Cardportfolio-pro-project-cards-case-study-cardA project teaser card showing a Placeholder image, a one-line problem statement, a headline result figure, and a read-case-study link.

Compact Grid Cardportfolio-pro-project-cards-compact-grid-cardA dense four-column archive grid showing eight project thumbnails each with a name and year in a tight baseline row.

Duo Tone Cardportfolio-pro-project-cards-duo-tone-cardA project card grid where each tile pairs a thumbnail with a muted caption panel in a contrasting surface tone, no gradient.

Featured Project Cardportfolio-pro-project-cards-featured-project-cardA single project given full-width treatment with a wide aspect-16/10 Placeholder, a heading-scale project name, a two-sentence description naming the problem and outcome, and a view-case link.

Hover Reveal Cardportfolio-pro-project-cards-hover-reveal-cardA project card rendered in its revealed state as a blueprint, showing the name, role, and arrow in an overlay strip with an outcome caption and year below the image.

Image Stack Cardportfolio-pro-project-cards-image-stack-cardA project card showing two or three Placeholder images layered at offsets to suggest depth, with the project name and role below.

Minimal List Cardportfolio-pro-project-cards-minimal-list-cardProjects as quiet ruled rows with a small thumb, name, role, and year, for a text forward work index.

Minimal Project Cardportfolio-pro-project-cards-minimal-project-cardA four-up project grid with a portrait Placeholder image, project name, and a single muted role line per card, nothing else.

Next Project Teaserportfolio-pro-project-cards-next-project-teaserA full-width bordered band at the foot of a case study page with a Placeholder thumbnail, the next project name and meta, a forward link, and a back-to-all link.

Numbered Project Cardportfolio-pro-project-cards-numbered-project-cardA vertical project stack where each entry is led by a large muted editorial index number beside a Placeholder image with the name, role, and year below.

Overlay Caption Cardportfolio-pro-project-cards-overlay-caption-cardA two-column project grid where each full-bleed thumbnail carries a frosted bottom strip naming the project and role.

Project Card With Tagsportfolio-pro-project-cards-project-card-with-tagsA two-column project grid where each card carries a Placeholder image, name, a one-line problem description, and a row of small skill and category chips.

Project List Rowportfolio-pro-project-cards-project-list-rowA ruled divided list where each project appears as a row with a small square thumbnail, name, client type, role, year in tabular numerals, and an arrow.

Quote Project Cardportfolio-pro-project-cards-quote-project-cardTwo project cards in a grid, each pairing a thumbnail with a short client quote attributed by avatar, name, role, and a view link.

Split Project Cardportfolio-pro-project-cards-split-project-cardA full-width horizontal card featuring one project with a Placeholder on the left and the name, description, discipline tags, and a case study link on the right.

Stat Project Cardportfolio-pro-project-cards-stat-project-cardAn imageless three column grid where each card leads with a large metric and context line, then the project name, meta, summary, and link.

Tag Heavy Cardportfolio-pro-project-cards-tag-heavy-cardA three-column project grid where each card leads with a prominent row of skill and tool tags before the description, for technical work where the stack signals as much as the outcome.

Tall Project Cardportfolio-pro-project-cards-tall-project-cardA four-column grid of portrait-format project cards each showing a Placeholder at aspect-4/5 with the name, role, and a concrete two-sentence outcome description below.

Text Only Cardportfolio-pro-project-cards-text-only-cardA typographic work index of ruled rows, each naming the project, role, year, and a one-sentence outcome with no thumbnail.

Timeline Project Cardportfolio-pro-project-cards-timeline-project-cardA vertical rail grouped by year, each project a compact row with a square thumbnail, name, role, and a one line outcome.

Wide Project Rowportfolio-pro-project-cards-wide-project-rowA full-width bordered project row with a Placeholder on one side and the name, description, tags, and view link on the other.

Year Badge Cardportfolio-pro-project-cards-year-badge-cardA project card grid with a pill chip marking the year on each thumbnail, plus the project name, client type, and role below.

Certifications and Awardsportfolio-pro-resume-cv-certifications-awardsA heading and intro above two ruled lists in a grid, one for certifications with issuer and ID, one for awards with presenter and note.

Compact Resumeportfolio-pro-resume-cv-compact-resumeA tight single-column CV with a positioned summary, three bulleted roles, and a two-column skills and education grid.

Cover Letterportfolio-pro-resume-cv-cover-letterA centered letter with a name and contact letterhead, date and recipient lines, three body paragraphs, a signed sign off, and an enclosures footer.

Cv Download Bandportfolio-pro-resume-cv-cv-download-bandA slim card showing the last updated date beside a Download CV button for the linked PDF resume.

Cv Headerportfolio-pro-resume-cv-cv-headerA print-friendly CV header band showing name large, title, and an inline contact and social strip with email, location, site URL, and brand icon social links.

Download Cv Cardportfolio-pro-resume-cv-download-cv-cardA bordered card with a heading, a one-line document description, a last-updated date, a primary download PDF button, and a secondary view-online text link.

Education Listportfolio-pro-resume-cv-education-listA ruled list of education entries showing institution, qualification, year range, and an optional contextual note per row.

Experience Timelineportfolio-pro-resume-cv-experience-timelineA vertical work history timeline listing four roles most recent first, each with company, title, date range, a short description, and a concrete result set off by a left border rule.

Printable CVportfolio-pro-resume-cv-printable-cvA single-column CV with a contact header, experience, education, and grouped skills sections optimised for both screen and print.

Publications and Talksportfolio-pro-resume-cv-publications-talksA heading and intro above a single ruled list of writing and speaking, each row with a year, title, venue, and a format badge.

References Rowportfolio-pro-resume-cv-references-rowA heading and intro above three reference cards, each with an avatar, name, role, a note, and a relationship and overlap meta footer.

Resume Summaryportfolio-pro-resume-cv-resume-summaryA CV opener with a name and title header, a two-sentence professional summary, and a three-cell quick-facts strip covering location, years of experience, and primary focus area.

Resume With Photoportfolio-pro-resume-cv-resume-with-photoA CV header pairing a square Placeholder portrait with the name, contact details, and summary before experience and skills follow below.

Skills And Tools Cvportfolio-pro-resume-cv-skills-and-tools-cvA ruled skills table grouping six disciplines with a proficiency level label and chip tags so a hiring manager can scan breadth in one pass.

Skills Resumeportfolio-pro-resume-cv-skills-resumeA resume skills section presenting four skill categories as chip rows in a two-column grid, each with a short proficiency note and no bar charts or percentage scores.

Timeline Resumeportfolio-pro-resume-cv-timeline-resumeA vertical connected timeline of four career roles with company, title, period, and bullet outcomes for a resume or about page.

Two Column Resumeportfolio-pro-resume-cv-two-column-resumeA two-column CV with a main experience and education column and a fixed sidebar for skills, contact, and brand icon links.

Availability Servicesportfolio-pro-services-sections-availability-servicesA services block that leads with a four-row availability table showing current status and next opening before the services detail.

Capabilities Gridportfolio-pro-services-sections-capabilities-gridSix capability tiles in a three-column grid each with a label and one sentence describing the concrete output, suited to generalist or multi-discipline practices.

Detailed Service Listportfolio-pro-services-sections-detailed-service-listA ruled two-column services layout with a scope paragraph and a bulleted deliverables list per service.

Engagement Comparisonportfolio-pro-services-sections-engagement-comparisonA heading and intro above a scrollable table that compares three engagement types row by row across fit, length, communication, and pricing.

Engagement Typesportfolio-pro-services-sections-engagement-typesThree ways to work together as cards each showing a commitment level, a summary, and a fit line naming the ideal client situation.

Icon Services Gridportfolio-pro-services-sections-icon-services-gridA services grid of four cards each with a lucide icon, a service name, and one sentence naming what is included and what is not.

Not Offered Noteportfolio-pro-services-sections-not-offered-noteA ruled list of four things this practice does not offer, each paired with a specific redirect to who can help instead.

Numbered Servicesportfolio-pro-services-sections-numbered-servicesAn editorial services list of large-numbered ruled rows each carrying a service title and a plain description with a stated scope limit.

Packages Overviewportfolio-pro-services-sections-packages-overviewThree engagement package cards showing a starting price, duration, and included items with a written-proposal footnote.

Process And Servicesportfolio-pro-services-sections-process-and-servicesA two-column services block that maps each service to its engagement phase so clients see the flow before they reach out.

Process Services Splitportfolio-pro-services-sections-process-services-splitA two-column block with four services on the left and four numbered process phases on the right showing both the offer and the method.

Service Cardsportfolio-pro-services-sections-service-cardsThree service cards each with a Lucide icon, a one-sentence description, and a bullet list of included deliverables.

Service Detail Splitportfolio-pro-services-sections-service-detail-splitA single service explained in depth with two paragraphs and a six-row deliverables table beside a sticky Placeholder visual.

Service Faq Comboportfolio-pro-services-sections-service-faq-comboA services block with three ruled service rows followed by three direct answers to the questions clients most commonly ask before contacting.

Service Outcomesportfolio-pro-services-sections-service-outcomesA heading and intro above a ruled list of services, each pairing a scope description with a large result stat and its context line.

Service With Pricingportfolio-pro-services-sections-service-with-pricingA ruled list of services each paired with a from-price and a short deliverable list so prospects can self-qualify before reaching out.

Services and CTAportfolio-pro-services-sections-services-and-ctaA two-column block pairing a concise services table on the left with a get-in-touch card on the right that names availability and prompts enquiry.

Services By Audienceportfolio-pro-services-sections-services-by-audienceA heading and intro above three columns, one per client type, each naming who it serves and listing the services most relevant to them.

Services Listportfolio-pro-services-sections-services-listA scannable ruled list of four services each with a title and a sentence describing what the engagement delivers.

Services Tabsportfolio-pro-services-sections-services-tabsA heading and intro above a tabbed explorer where each service tab opens a two column panel with scope, meta rows, and a deliverables list.

Services With Faqportfolio-pro-services-sections-services-with-faqA services block listing four offerings in a ruled table followed by three answered questions clients commonly ask before reaching out.

Three Services Rowportfolio-pro-services-sections-three-services-rowThree equal service cards each with an icon, a name, and a one-sentence scope, giving visitors an instant read of a focused practice.

What I Offerportfolio-pro-services-sections-what-i-offerA two-column split with an intro and honest capacity note on the left and a numbered list of four offerings on the right.

Who I Work Withportfolio-pro-services-sections-who-i-work-withA two-column fit block describing the ideal client by stage and team size alongside an honest list of situations that are a poor fit.

Bestseller Rowportfolio-pro-shop-products-bestseller-rowA four-column strip of top-selling products each with a ranked bestseller badge overlaid on a Placeholder thumbnail and a price.

Digital Downloadsportfolio-pro-shop-products-digital-downloadsA four-card block of downloadable products each showing a Placeholder, format chip, description, price, and an instant-download note.

Featured Productportfolio-pro-shop-products-featured-productA two-column split highlighting one digital product with a Placeholder image, price in tabular-nums, description, and an itemised includes list.

License Tiersportfolio-pro-shop-products-license-tiersThree license cards, each with a name, one time price, scope line, feature checklist, and buy action, the commercial tier flagged as most chosen.

Product Bundleportfolio-pro-shop-products-product-bundleA two column bundle offer: included product tiles with struck prices beside a pricing column showing the combined value, bundle price, and saving.

Product Categoriesportfolio-pro-shop-products-product-categoriesA three-tile category index for a creator shop showing a Placeholder, category name, and product count per format.

Product Comparisonportfolio-pro-shop-products-product-comparisonA comparison table for three packs, with prices as column headers, feature rows mixing counts, text, and check marks, and a buy button row.

Product Detail Cardportfolio-pro-shop-products-product-detail-cardA split single-product view with a Placeholder image, price, plain-language description, an itemised includes list, and a buy action.

Product Gridportfolio-pro-shop-products-product-gridA six-card shop grid listing products with a Placeholder thumbnail, name, from-price, and a format chip for each item.

Product Listportfolio-pro-shop-products-product-listA dense shop list inside one bordered panel, each row with a thumbnail, product name, one line description, format chip, price, and a view action.

Shop Heroportfolio-pro-shop-products-shop-heroA shop opener with a heading, studio lede, and a featured row of three Placeholder product tiles showing name, from-price, and format.

Badge Cloudportfolio-pro-skills-sections-badge-cloudA wrapped chip cloud that renders core disciplines larger and bolder so the primary expertise registers at a glance.

Capability Cardsportfolio-pro-skills-sections-capability-cardsThree capability cards each with a title, a plain-language approach sentence, and a ruled method list covering Product design, Design systems, and Front-end implementation.

Certifications Skillsportfolio-pro-skills-sections-certifications-skillsA two-column card grid pairing four formal credentials with the practical skill chips each one produces so visitors see qualification and capability together.

Core And Toolsportfolio-pro-skills-sections-core-and-toolsA ruled list of core disciplines each with a plain-language description and a chip row of the supporting tools used.

Disciplines Splitportfolio-pro-skills-sections-disciplines-splitThree equal discipline columns for a multi-discipline creative, each with a heading, a grounding sentence, and a ruled skill list covering Brand design, Product design, and Creative direction.

Expertise Barsportfolio-pro-skills-sections-expertise-barsA two-column expertise display with five div proficiency bars filled via theme tokens and plain-language level labels from Foundational to Fluent instead of percentages.

Grouped Tool Gridportfolio-pro-skills-sections-grouped-tool-gridThree labeled columns of tool tiles covering Design, Development, and Collaboration, each tile showing a two-letter mark and the tool name.

Now Learningportfolio-pro-skills-sections-now-learningA skills block listing four topics currently in progress, each with a reason and an honest status line showing where the learning stands.

Proficiency Listportfolio-pro-skills-sections-proficiency-listA ruled list of skills with an honest level word per row and a one-sentence note that qualifies what the level includes and what it does not.

Skill Bars Groupedportfolio-pro-skills-sections-skill-bars-groupedTwelve skills across three discipline columns each with a div bar and a word level from Foundational to Fluent rather than a percentage.

Skill Categoriesportfolio-pro-skills-sections-skill-categoriesFour category cards in a two-column grid organizing specific skills by project phase from Discovery through Delivery for a senior product designer.

Skills In Practiceportfolio-pro-skills-sections-skills-in-practiceA heading and lede above a ruled list where each row pairs a skill with the project that proved it, its outcome, and the year.

Skills Listportfolio-pro-skills-sections-skills-listA three-column grouped skills block with Design, Research, and Front-end category headings and bordered chip pills for a product designer or creative generalist.

Skills Matrixportfolio-pro-skills-sections-skills-matrixA heading and lede above a bordered table pairing skill rows with three engagement columns, one filled dot per row marking lead, build, or refer.

Skills Timelineportfolio-pro-skills-sections-skills-timelineA heading and lede above a dotted vertical timeline where each entry marks the year a skill arrived, its status word, and a note.

Specialties Rowportfolio-pro-skills-sections-specialties-rowThree card tiles each naming a core specialty with a focused sentence that states the scope and what falls outside it.

Stack With Contextportfolio-pro-skills-sections-stack-with-contextA three-column card grid showing six core tools each paired with a sentence explaining why it is in the stack rather than an alternative.

T-Shaped Skillsportfolio-pro-skills-sections-t-shaped-skillsAn asymmetric split pairing one deep discipline, unpacked as a ruled card of facets, with a breadth column of two labeled skill chip groups.

Tech Stack Rowportfolio-pro-skills-sections-tech-stack-rowA bordered horizontal strip showing a full-stack developer technology choices in three labeled rows: Frontend, Backend, and Infrastructure.

Tool Stack Gridportfolio-pro-skills-sections-tool-stack-gridA four-group grid of tool tiles with two-letter mark badges covering Design, Development, Research, and Delivery tools used day to day.

Tools Marqueeportfolio-pro-skills-sections-tools-marqueeA static wrap strip of twelve tool chips each showing a name and a one-word category, giving an at-a-glance view of the full toolkit.

Two Column Skillsportfolio-pro-skills-sections-two-column-skillsA two-column skills layout grouping chips by project phase across Research, Design, Systems, and Delivery columns.

What I Useportfolio-pro-skills-sections-what-i-useA ruled list of six daily tools each paired with one sentence explaining why that tool earned its place over the alternatives.

Big Type Linksportfolio-pro-social-links-big-type-linksAn index of social destinations in oversized type, each ruled row pairing a mono number, a large platform name, a handle, and a hover arrow.

Connect Cardportfolio-pro-social-links-connect-cardA compact centered card with a come-say-hi headline, an email row, a primary social row, and two side-by-side action buttons for a lightweight contact nudge.

Elsewhere Listportfolio-pro-social-links-elsewhere-listA ruled list of platforms where this person can be found online, showing the brand icon, handle, and a context-appropriate follow or connect action per row.

Featured Linksportfolio-pro-social-links-featured-linksFour high-priority destinations given prominence as large icon cards covering newsletter, shop, open-source project, and booking link.

Icon Rowportfolio-pro-social-links-icon-rowA centered strip of brand-icon links for GitHub, LinkedIn, X, and Instagram with accessible labels and hover transitions.

Link In Bioportfolio-pro-social-links-link-in-bioA mobile-first link hub with a centered avatar, name, one-line context, and a vertical stack of full-width buttons covering portfolio, newsletter, socials, and contact.

Links Cardportfolio-pro-social-links-links-cardA compact bordered card listing email, social handles, and a newsletter as ruled rows with an icon and platform label per entry.

Links Gridportfolio-pro-social-links-links-gridA responsive grid of link cards covering portfolio, newsletter, shop, calendar, and social channels, each with an icon, a bold label, and a short destination note.

Platform Feedsportfolio-pro-social-links-platform-feedsThree platform panels previewing recent posts, each with a brand icon header, handle, and follow action above a ruled list of titles with dates.

Platform Statsportfolio-pro-social-links-platform-statsA grid of platform cards, each pairing a brand icon and handle with a large audience count, a short note, and a follow action.

Reach Guideportfolio-pro-social-links-reach-guideA split contact guide ranking channels by reply speed, an intro column of location and hours beside a numbered list of channels with response chips.

Social Rowportfolio-pro-social-links-social-rowA centered horizontal strip of social links pairing a brand icon with a display handle for each platform, sized for embedding at the foot of any section.

Booking CTAportfolio-pro-speaking-events-booking-ctaA speaker booking closer with an invitation heading, a booking checklist, and dual actions beside a ruled card of speaking formats and logistics.

Conference Gridportfolio-pro-speaking-events-conference-gridA wordmark tile grid of conferences a speaker has appeared at, with a year sub-line per cell and a total count in the header.

Keynote Featureportfolio-pro-speaking-events-keynote-featureA split highlight of one signature talk with its title, abstract, a ruled venue history, and a watch link beside a portrait placeholder.

Organizer Quotesportfolio-pro-speaking-events-organizer-quotesThree organizer testimonial cards, each pairing an avatar, name, and role with a quote and the event it refers to in a ruled footer.

Past Talks Gridportfolio-pro-speaking-events-past-talks-gridA three-column card grid of speaking engagements showing event, talk title, year, and a watch link or a no-recording note.

Speaker Bioportfolio-pro-speaking-events-speaker-bioA two-column organizer package with a portrait placeholder, short and long bios ready to copy, a detail list, and a speaker kit download link.

Speaker Statsportfolio-pro-speaking-events-speaker-statsA three-panel ruled strip of headline speaking figures showing talks given, countries visited, and total audience with a context line under each number.

Speaking FAQportfolio-pro-speaking-events-speaking-faqA speaking FAQ with a heading and an accordion of organizer questions beside a small ruled card listing what to include in a first invite.

Talk Topicsportfolio-pro-speaking-events-talk-topicsA talk topics catalog of numbered ruled rows, each with a title, abstract, and a meta column of format, length, and audience fit.

Talks Listportfolio-pro-speaking-events-talks-listA reverse-chronological ruled index of past talks showing event, title, year, and a Watch or Slides link per row.

Upcoming Eventsportfolio-pro-speaking-events-upcoming-eventsA card grid of confirmed future talks showing date, event, city, talk title, and a register link for each appearance.

Achievement Countersportfolio-pro-stats-sections-achievement-countersThree large figures in equal columns covering products shipped, years of practice, and industries deep, each paired with a one-line context note that scopes the number.

At A Glance Factsportfolio-pro-stats-sections-at-a-glance-factsA 2x2 grid of qualitative fact tiles covering location, focus, availability, and response time so a prospective client has the practical working-with details at a glance.

Availability Stat Bandportfolio-pro-stats-sections-availability-stat-bandA three-figure booking facts band showing response time, current lead time, and next opening month alongside a short enquire CTA card.

Before After Statsportfolio-pro-stats-sections-before-after-statsA heading and lede above ruled rows that pair each metric and its measurement note with a before figure, an arrow, and an after figure.

Big Figures Bandportfolio-pro-stats-sections-big-figures-bandA three-stat band of oversized tabular-nums figures divided by vertical rules inside a bordered card, anchored by a closing statement.

By The Numbersportfolio-pro-stats-sections-by-the-numbersFive ruled rows pairing a tabular figure with a plain-language fact that scopes the number, presented as an honest accounting of the practice to date.

Career Statsportfolio-pro-stats-sections-career-statsA four-number horizontal strip showing years in practice, companies worked with, projects shipped, and active long-term retainers at a glance.

Client Logos And Statsportfolio-pro-stats-sections-client-logos-and-statsA credibility band combining a row of client wordmarks above a three-figure stat grid covering projects shipped, long-term clients, and on-time delivery rate.

Four Up Statsportfolio-pro-stats-sections-four-up-statsA 2x2 grid of four stat cards each showing a large figure, a short label, and a context line that earns the number.

Headline Statportfolio-pro-stats-sections-headline-statOne oversized centerpiece figure above a heading and a context paragraph, closed by a ruled row of three small supporting figures.

Impact Numbersportfolio-pro-stats-sections-impact-numbersAn outcome figures block showing four measured results from real client work, each with a context line, methodology note, and client attribution.

Impact Statsportfolio-pro-stats-sections-impact-statsThree outcome figures from real client work, each with an attribution note naming the project type and the measurement method so the result does not overstate.

Inline Stats Rowportfolio-pro-stats-sections-inline-stats-rowA single ruled band of four tabular figures with short labels, the slimmest way to surface career numbers without a card grid.

Numbers Stripportfolio-pro-stats-sections-numbers-stripA ruled horizontal band of four headline figures covering years, projects shipped, clients, and a retention count, each with a short plain-English label.

Projects Per Yearportfolio-pro-stats-sections-projects-per-yearA heading and lede above a bordered card of ruled year rows, each pairing a year with a proportional bar and a project count, plus a total footer.

Stats With Contextportfolio-pro-stats-sections-stats-with-contextThree figures each followed by a full sentence naming the client, the quarter, and the measurement method so no result appears without the context that earned it.

Stats With Iconsportfolio-pro-stats-sections-stats-with-iconsFour career figures each paired with a small lucide icon and a label in individual cards, making a numbers strip visually scannable.

Work Mix Splitportfolio-pro-stats-sections-work-mix-splitA heading and lede above a single segmented distribution bar showing how billed time splits across four kinds of work, with a percentage legend beneath.

Years And Projectsportfolio-pro-stats-sections-years-and-projectsA two-column split with a positioning heading on the left and two ruled figures on the right covering years of independent practice and total projects shipped.

Culture Sectionportfolio-pro-studio-team-culture-sectionA split block presenting three studio working principles as border-left blurbs beside a placeholder image.

Extended Teamportfolio-pro-studio-team-extended-teamA heading and intro above a two column grid of collaborator cards, each with avatar, discipline, project count and tenure, plus a credit note.

Founders Rowportfolio-pro-studio-team-founders-rowA three-column grid of studio founder cards each with a named avatar, role, and a single concrete bio line.

Open Rolesportfolio-pro-studio-team-open-rolesA heading above a two column layout: a ruled list of open roles with salary bands beside a numbered hiring process and application card.

Studio Heroportfolio-pro-studio-team-studio-heroA full-viewport studio opener with a we-voice headline, two actions, and a three-fact credential strip below.

Studio Servicesportfolio-pro-studio-team-studio-servicesFour studio service cards each listing a discipline, a scope statement, and a bulleted includes list in a two-column grid.

Studio Statsportfolio-pro-studio-team-studio-statsA four-figure horizontal strip showing a studio founded year, team size, projects completed, and clients served.

Studio Timelineportfolio-pro-studio-team-studio-timelineTwo column layout with a heading and founder quote card on the left beside a ruled list of year marked studio milestones on the right.

Studio Weekportfolio-pro-studio-team-studio-weekTwo column layout with a heading, exceptions list and note on the left beside a ruled five day breakdown of the studio's working week.

Team Gridportfolio-pro-studio-team-team-gridA six-member team grid showing avatar, name, role, and a one-line bio per card for a design or development studio.

Team Member Cardportfolio-pro-studio-team-team-member-cardA single studio member profile with avatar, bio, a ruled focus-area list, and an availability date in a split layout.

Team Valuesportfolio-pro-studio-team-team-valuesFour numbered studio principles each with a plain description and a ruled cost section naming the honest downside of holding to that principle.

Avatar Quote Rowportfolio-pro-testimonials-avatar-quote-rowThree short quote cards in a row each opening with the avatar and name before the quote, for fast scannable social proof across a range of client types.

Client Interviewportfolio-pro-testimonials-client-interviewA two column testimonial with a client and engagement summary card on the left and four honest question and answer pairs on the right.

Client Logo Quotesportfolio-pro-testimonials-client-logo-quotesThree client cards each pairing a styled wordmark badge with a quote tied to a concrete outcome and an avatar attribution.

Client Quotes Rowportfolio-pro-testimonials-client-quotes-rowThree brief punchy client quotes in a three-column row, each attributed with avatar and name, designed to be scanned in seconds.

Clients Say Gridportfolio-pro-testimonials-clients-say-gridA 2x2 grid of four client quotes each with an avatar, name, role, and company, giving a compact and scannable proof block on a single page section.

Featured Quote Bandportfolio-pro-testimonials-featured-quote-bandA single client quote at display scale inside a full-width bordered band with a small avatar and attribution row below.

Grid of Sixportfolio-pro-testimonials-grid-of-sixSix short client quotes in a three-column card grid with avatars and named role and company attribution per card.

Logo And Quoteportfolio-pro-testimonials-logo-and-quoteTwo client company wordmarks each paired with one attributed quote in a side-by-side row, leading with the brand name before the person.

Logos And Praiseportfolio-pro-testimonials-logos-and-praiseA row of five client wordmarks above two attributed quote cards, combining brand recognition with personal praise in a single section.

Long Form Testimonialportfolio-pro-testimonials-long-form-testimonialA four-paragraph client recommendation with a sticky attribution card naming the person, role, company, and working relationship.

Praise Timelineportfolio-pro-testimonials-praise-timelineA vertical timeline rail of four short client quotes from one project, from kickoff through six months after launch, each with an avatar.

Praise Wallportfolio-pro-testimonials-praise-wallSix short testimonials in a two-column masonry-feeling grid with mixed quote lengths and small attributions showing breadth of trust.

Quote Marqueeportfolio-pro-testimonials-quote-marqueeA static 3-col grid of six short attributed client quotes presenting a scannable horizontal band of social proof without animation.

Quote With Statsportfolio-pro-testimonials-quote-with-statsA client quote paired with a ruled table of four project result figures giving the measurable outcomes behind the praise.

Rating Scorecardportfolio-pro-testimonials-rating-scorecardA two column scorecard with an average rating and per criterion bars on the left and two supporting client quotes on the right.

Recommendation Cardportfolio-pro-testimonials-recommendation-cardA centered card holding a long first-person endorsement with avatar, name, title, and a relationship line naming the project and year.

Scrolling Quotesportfolio-pro-testimonials-scrolling-quotesA horizontal overflow strip of five fixed-width quote cards each attributed with avatar, role, and company.

Single Spotlightportfolio-pro-testimonials-single-spotlightA two-column split with a long detailed quote at heading scale on one side and the recommender, a context image, and an engagement line on the other.

Single With Photoportfolio-pro-testimonials-single-with-photoA single detailed client quote beside a context image and a ruled attribution card naming the role and engagement.

Testimonial Cardsportfolio-pro-testimonials-testimonial-cardsThree testimonial cards in a grid, each quoting a specific measurable outcome with avatar, name, role, and company.

Testimonial Quoteportfolio-pro-testimonials-testimonial-quoteA single large client quote set at heading scale with an avatar, name, role, and company beneath it, for spotlight social proof.

Testimonial Tabsportfolio-pro-testimonials-testimonial-tabsAn interactive switcher showing one featured client quote at large scale above a row of avatar tabs that flip between four clients.

Testimonial With Resultportfolio-pro-testimonials-testimonial-with-resultA testimonial block pairing each client quote with the concrete outcome figure from that engagement, proof and praise shown side by side in a single card.

Three Column Quotesportfolio-pro-testimonials-three-column-quotesThree equal client quote cards each anchored to a named project outcome and attributed with avatar and role.

Two Up Testimonialsportfolio-pro-testimonials-two-up-testimonialsTwo equal quote cards side by side each with an avatar and full attribution, presenting two clients and two distinct proof points at the same visual weight.

Video Testimonial Blueprintportfolio-pro-testimonials-video-testimonial-blueprintA static video testimonial layout with an aspect-video Placeholder frame, a play affordance, client attribution, and a pull-quote caption ready to wire to a real video embed.

Client Reel Listportfolio-pro-video-motion-client-reel-listA ruled list of commissioned films each showing a thumbnail, client name, deliverable description, runtime, year, and a watch link.

Discipline Columnsportfolio-pro-video-motion-discipline-columnsThree columns splitting work by discipline, each with a thumbnail, film count, positioning line, three titles with runtimes, and a link.

Episode Playlistportfolio-pro-video-motion-episode-playlistA series layout with a large play frame and synopsis for the current episode beside a card listing every episode with numbers and durations.

Featured Videoportfolio-pro-video-motion-featured-videoA single video piece highlighted as a full-width play frame above a two-column panel with the description, creative constraint, and a ruled credits list.

Festival Laurelsportfolio-pro-video-motion-festival-laurelsA split section pairing an award-winning film play frame and its logline with a ruled list of festival selections, categories, years, and result badges.

Filmography Timelineportfolio-pro-video-motion-filmography-timelineA chronological filmography grouped by year, each year a large tabular numeral beside ruled rows listing film title, format, client, and runtime.

Motion Breakdownportfolio-pro-video-motion-motion-breakdownA three-stage process section showing one project from storyboard to final, each frame captioned with the motion technique applied.

Play Featureportfolio-pro-video-motion-play-featureA two-column project detail with a video frame and play button on one side and description, discipline pills, and named crew credits on the other.

Reel Gridportfolio-pro-video-motion-reel-gridA three-column grid of video work thumbnails each with a centred play button, a duration badge, and a client and year line.

Reel Heroportfolio-pro-video-motion-reel-heroA fold-filling hero with a large video frame, play button, and director identity column showing name, discipline, three stats, and two CTAs.

Showreel Cardportfolio-pro-video-motion-showreel-cardA single featured reel in a full-width card with a play button, description, discipline tags, duration, year, and a named watch link.

Video Case Studyportfolio-pro-video-motion-video-case-studyA single project told through a Placeholder video frame, a stat strip of production figures, and a three-column brief, approach, and result narrative.

Video Gridportfolio-pro-video-motion-video-gridA three-column tile grid of six video commissions, each with a play affordance, duration badge, title, client type, and year.

Video List Rowsportfolio-pro-video-motion-video-list-rowsA ruled-row videography index listing each film with a small thumbnail, title, client name, duration, year, and a watch link.

Alternating Rowsportfolio-pro-work-grids-alternating-rowsA work layout of full-width two-column rows that flip image and detail sides on each project, with a constraint-led description, a ruled deliverables list, and a case study link per row.

Archive Gridportfolio-pro-work-grids-archive-gridA full-archive grid of nine project tiles with a total count badge and an honest lede noting that older work shows the range.

Bento Work Gridportfolio-pro-work-grids-bento-work-gridAn asymmetric four-column project grid where two tiles span two columns at a wide aspect ratio and four sit at standard size, each captioned with category, role, and year.

Category Sections Gridportfolio-pro-work-grids-category-sections-gridA work grid divided into discipline sections each with a ruled label and a row of project tiles naming the role and year.

Featured And Gridportfolio-pro-work-grids-featured-and-gridOne large lead project with a real summary above a supporting grid of three more, the pick plus the catalog.

Featured Threeportfolio-pro-work-grids-featured-threeThree equal project tiles each with a full-width image, client type, role, year, a one-line outcome description, and a case study link.

Featured Work Gridportfolio-pro-work-grids-featured-work-gridA selected work grid of project tiles that each name the client type, the role, and the year.

Filterable Work Gridportfolio-pro-work-grids-filterable-work-gridA filterable work grid with category chips and a live count that narrows six project tiles by discipline, naming the kind, role, and year per tile.

Grid With Categoriesportfolio-pro-work-grids-grid-with-categoriesA work index that groups project tiles under discipline category headings, each with a scope description and an archive link, so visitors navigate directly to the work type they need.

Hover Gridportfolio-pro-work-grids-hover-gridA six-tile work grid with a permanently revealed overlay strip naming the project and role on each thumbnail, plus static kind and year captions below.

List With Previewportfolio-pro-work-grids-list-with-previewAn interactive work list where selecting a project row swaps the side panel to that project's thumbnail, summary, role, and case study link.

Masonry Gridportfolio-pro-work-grids-masonry-gridA masonry work grid with six Placeholder tiles in mixed aspect ratios and medium and year captions, suited to photography and illustration portfolios.

Masonry With Captionsportfolio-pro-work-grids-masonry-with-captionsA CSS-columns masonry of six project tiles at mixed aspect ratios, each captioned with the project name, role, and year.

Numbered Work Listportfolio-pro-work-grids-numbered-work-listA ruled editorial index of projects as large-numbered rows showing name, role, and year with a hover arrow link on each entry.

One Big Three Smallportfolio-pro-work-grids-one-big-three-smallA featured layout with one large project tile carrying a summary sentence and a view case study link, followed by a row of three smaller supporting tiles.

Recent Work Rowportfolio-pro-work-grids-recent-work-rowA four-card recent work strip with a see-all link at heading level, each card showing a portrait thumbnail, project name, role, and year.

Sticky Split Indexportfolio-pro-work-grids-sticky-split-indexA split work index that pins the heading, intro, and a ruled facts list on the left while project tiles scroll on the right.

Three Column Gridportfolio-pro-work-grids-three-column-gridA dense three-column grid of six square project tiles with name and year captions and a full archive link, for breadth-first portfolios.

Two Column Workportfolio-pro-work-grids-two-column-workAn alternating two-column project list pairing a Placeholder image with a paragraph writeup, role, and year for each engagement.

Work Accordionportfolio-pro-work-grids-work-accordionAn accordion work index of ruled project rows that each expand to a thumbnail, summary, deliverables list, and case study link.

Work By Yearportfolio-pro-work-grids-work-by-yearProjects grouped under ruled year headings with an inline project count, each tile showing the project name, client kind, and role.

Work Index Listportfolio-pro-work-grids-work-index-listA numbered text list of projects showing project name, kind, and year with a trailing arrow and no images.

Work With Quotesportfolio-pro-work-grids-work-with-quotesA two-column work grid where every project tile carries a short client quote with named attribution beneath the thumbnail and caption.

Work With Resultsportfolio-pro-work-grids-work-with-resultsA two-column project grid where each tile pairs a thumbnail with a one-line outcome carrying a highlighted tabular figure beneath the name and role.

Work With Tabsportfolio-pro-work-grids-work-with-tabsA work grid with three discipline tabs switching between four-tile project sets via state, for multi-discipline creatives presenting Design, Code, and Writing separately.

Byline Rowportfolio-pro-writing-portfolio-byline-rowA centred wordmark row of publications where work has appeared, with a summary strip counting pieces placed, years active, and average read time.

Clip Gridportfolio-pro-writing-portfolio-clip-gridA three-column card grid of six writing samples each showing publication, headline, a one-line standfirst, and date.

Editor Quotesportfolio-pro-writing-portfolio-editor-quotesA split layout pairing an identity heading and a ruled working record with a stack of testimonial rows from commissioning editors, each with an avatar.

Essay Listportfolio-pro-writing-portfolio-essay-listA ruled-row essays archive with title, publication name, read time, and date per entry for a scannable writing index.

Excerpt Cardsportfolio-pro-writing-portfolio-excerpt-cardsThree writing samples each opened by a pull-quote blockquote before the title, publication, date, and read-full link.

Featured Clipsportfolio-pro-writing-portfolio-featured-clipsThree standout writing pieces as cards with the publication, headline, an excerpt from the argument, and a read link.

Featured Essayportfolio-pro-writing-portfolio-featured-essayA two-column spotlight on one essay with a Placeholder, a pull-quote excerpt, and a detail list naming publication, date, read time, topic, and audience.

Pitch Processportfolio-pro-writing-portfolio-pitch-processA four step walkthrough of how a commission runs from brief to publication, each step a numbered card with a timing line and deliverable.

Publications Wallportfolio-pro-writing-portfolio-publications-wallA dense ruled cell grid of 18 publication names where work has appeared, with a counted heading that distinguishes bylines from mentions.

Published Listportfolio-pro-writing-portfolio-published-listA ruled list of placed articles and essays showing title, publication, date, and a read link for every byline on record.

Topics Coveredportfolio-pro-writing-portfolio-topics-coveredA six-tile grid mapping the subjects a writer covers with a piece count per topic and a link to each archive.

Writing Heroportfolio-pro-writing-portfolio-writing-heroA two-column writer opener combining an identity heading and ruled meta list with a featured piece card showing publication and read time.

Writing Servicesportfolio-pro-writing-portfolio-writing-servicesThree commission cards naming the kinds of work this writer takes on, each with a pitch, a ruled detail list of length, turnaround, and rate.

Year Archiveportfolio-pro-writing-portfolio-year-archivePublished pieces grouped under large year numerals in a two column ruled layout, each entry carrying its title, publication, and month.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information

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

Simple Cardsapplication-application-stats-simple-cardsClean 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.

With Badgesapplication-application-stats-with-badgesStat 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.

With Colored Iconsapplication-application-stats-with-colored-iconsMetric 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.

With Descriptionapplication-application-stats-with-descriptionStat 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.

With Iconsapplication-application-stats-with-iconsMetric cards with a small icon beside every value for quick recognition. Use on overview screens where users skim totals by category very fast.

With Progressapplication-application-stats-with-progressStat 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.

Complex Formapplication-form-layouts-complex-formA dense form with grouped sections, multiple field types, and a sticky action bar. Use it for detailed settings, account creation, or admin record editing.

Stackedapplication-form-layouts-stackedA 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.

Two Columnapplication-form-layouts-two-columnA 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.

Split With Imageapplication-login-split-with-imageA 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.

Simple Centeredapplication-page-headings-simple-centeredA centered page title with optional description text, balanced on the screen. Use it on focused app views like settings or a single record detail.

With Actionsapplication-page-headings-with-actionsA 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.

With Search Filtersapplication-page-headings-with-search-filtersA 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.

With Statsapplication-page-headings-with-statsA 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.

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

With Tabsapplication-page-headings-with-tabsA 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.

A11y Checklist Panelapplication-pro-accessibility-a11y-checklist-panelWCAG 2.1 audit checklist with pass, fail, and manual badges per criterion, an overall score, and per-row links to the W3C understanding docs.

A11y Issue Trendsapplication-pro-accessibility-a11y-issue-trendsStacked bar chart card tracking open accessibility issues by severity across six release audits with a headline count and remediation note.

A11y Preferences Panelapplication-pro-accessibility-a11y-preferences-panelAccessibility settings panel with a text size selector, live sample line, and grouped vision, motion, and screen reader switches with helper text.

Alt Text Review Queueapplication-pro-accessibility-alt-text-review-queueA review list of flagged images, each row pairing a thumbnail, page location, current alt state, and a suggested description to approve or edit.

Assistive Tech Matrixapplication-pro-accessibility-assistive-tech-matrixScreen reader support matrix crossing core app flows with four assistive tech pairings, labeled status cells, and an open findings list.

Conformance Report Cardapplication-pro-accessibility-conformance-report-cardA VPAT style summary with product metadata, one section per WCAG principle showing a segmented support bar and criteria counts, plus notable criterion rows.

Contrast Checker Cardapplication-pro-accessibility-contrast-checker-cardTheme token contrast audit card showing computed ratios and AA and AAA pass badges for normal and large text across four Acme token pairings.

Focus Order Inspectorapplication-pro-accessibility-focus-order-inspectorSplit audit view pairing a dialog blueprint with numbered focus markers beside a stop list showing selectors, roles, and flagged order issues.

Heading Outline Treeapplication-pro-accessibility-heading-outline-treeIndented document heading tree with landmark chips, level tags, and issue badges for skipped levels, empty headings, and a duplicate H1.

Keyboard Nav Guideapplication-pro-accessibility-keyboard-nav-guideKeyboard shortcut reference table covering global browser keys and Acme app shortcuts rendered with Kbd components, action descriptions, and context labels.

Live Region Logapplication-pro-accessibility-live-region-logARIA live region event log with timestamps, politeness badges, source selectors, and flags for duplicate, chatty, and empty announcements.

Media Captions Auditapplication-pro-accessibility-media-captions-auditMedia library audit pairing coverage tiles and progress bars with a per asset table of caption, transcript, and audio description chips.

Reduced Motion Auditapplication-pro-accessibility-reduced-motion-auditAn animation inventory with per effect trigger, a duration bar on a shared scale, and a badge for whether each honors the reduced motion setting.

Screen Reader Labels Tableapplication-pro-accessibility-screen-reader-labels-tableAccessible name audit table listing Acme workspace UI elements with their computed label, ARIA role, labeled or missing status, and an exact fix hint.

Touch Target Auditapplication-pro-accessibility-touch-target-auditInteractive control audit showing hit areas at true scale in 44px frames with measured sizes, AA and AAA badges, and fix hints.

Zoom Reflow Auditapplication-pro-accessibility-zoom-reflow-auditA WCAG reflow report led by two wireframe legends, then a per page table of pass and fail results at 200 and 400 percent zoom.

Activity Calendarapplication-pro-activity-activity-calendarMonth grid calendar with per-day activity dots scaled by event count and a selected-day event list beside it.

Activity Heatmapapplication-pro-activity-activity-heatmapWeekday by hour heatmap of workspace events with intensity cells, a Less to More legend, and peak and quiet window callouts.

Approvals Queueapplication-pro-activity-approvals-queuePending requests with context and age, approve or deny, expiry told to the asker.

Audit Export Cardapplication-pro-activity-audit-export-cardCompliance export form with date range, event count, format selector, and an append-only log disclosure note.

Audit Trail Timelineapplication-pro-activity-audit-trail-timelineThe compliance log grouped by day, mono actions, second precision, source IPs.

Automation Run Logapplication-pro-activity-automation-run-logA card listing scheduled automation runs with a status icon, workflow name and trigger, duration, finish time, an expanded error row, and a next run footer.

Catch Up Digestapplication-pro-activity-catch-up-digestA digest card grouping activity accrued while away by project, each with a total badge, typed summary lines, an avatar cluster, and a review action.

Changelog Feedapplication-pro-activity-changelog-feedIn-app changelog grouped by month with dated entries, type badges for Feature, Fix, Improvement, and Performance.

Comment Mentions Listapplication-pro-activity-comment-mentions-listComment mentions inbox showing each document and section, the quoted comment with your name highlighted, and a jump to reply action.

Comment Thread Panelapplication-pro-activity-comment-thread-panelA thread with one nested reply, a resolved marker with reopen, and the composer.

Deploy Activity Feedapplication-pro-activity-deploy-activity-feedEngineering deploy timeline showing who shipped what service to which environment with status, commit SHA, and one rollback event.

Edit History Diffapplication-pro-activity-edit-history-diffDocument version history with a selectable edit list on the left and an inline before and after diff panel on the right using theme token opacity.

Filtered Activity Logapplication-pro-activity-filtered-activity-logActivity log in a filtered state with type chips, an applied person filter, a clear all action, and the matching events with counts.

Inactivity Watch Cardapplication-pro-activity-inactivity-watch-cardWatchlist of projects gone quiet showing owner avatar, last event summary, a days idle count, and a nudge action per row.

Live Presence Barapplication-pro-activity-live-presence-barRealtime presence strip with stacked avatars, status dots for editing and viewing states, and a plus-overflow count.

Member Activity Panelapplication-pro-activity-member-activity-panelSingle member drill down with an avatar header, three weekly stat columns, and a recent actions list with typed icons and timestamps.

Mention Feedapplication-pro-activity-mention-feedMentions inbox showing author, document context, highlighted snippet, timestamp, and a reply affordance per item.

Pinned Updates Cardapplication-pro-activity-pinned-updates-cardAnnouncements widget showing three pinned workspace updates with author, tag badge, body text, and an unpin action.

Project Activity Breakdownapplication-pro-activity-project-activity-breakdownA card ranking projects by weekly activity volume, each row showing the top member, a proportional bar, the event count, and a trend delta.

Reaction Activity Feedapplication-pro-activity-reaction-activity-feedSocial activity feed showing who reacted to or commented on your work, with emoji badges and inline comment quotes.

Sign In Activity Listapplication-pro-activity-sign-in-activity-listA card listing recent account sessions, each with a device icon tile, browser and OS, location with IP, timestamp, current session badge, and revoke actions.

Status Change Logapplication-pro-activity-status-change-logVertical timeline of status transitions for one entity with actor names, timestamps, and time-in-state durations.

Team Activity Feedapplication-pro-activity-team-activity-feedWorkspace events on a timeline rail with avatars and one expanded comment.

Team Pulse Cardapplication-pro-activity-team-pulse-cardWeekly team activity summary with commit, comment, and task stats, inline sparklines, and a most-active member row.

Version History Listapplication-pro-activity-version-history-listNamed saves with autosaves collapsed, restore always creates, never rewinds.

Who Did What Tableapplication-pro-activity-who-did-what-tableWorkspace activity table with actor avatars, plain-English action verbs, target resources, and result badges.

Audit Search Panelapplication-pro-admin-moderation-audit-search-panelCompliance audit log with actor, action type, and date range filters, monospace action chips, IP column, and CSV export.

Automation Rules Panelapplication-pro-admin-moderation-automation-rules-panelAutomated rule cards in a two column grid with enabled switches, monospace When and Then chips, and match, precision, and overturned stats.

Ban Appeal Panelapplication-pro-admin-moderation-ban-appeal-panelBan appeal review with the original enforcement reason, appellant statement, prior enforcement history, and uphold or reverse actions each requiring a written note.

Bulk Review Tableapplication-pro-admin-moderation-bulk-review-tableA checkbox review table with per row selection, a bulk action bar showing the selection count with approve, escalate, and remove actions, and an audit note.

Content Flags Tableapplication-pro-admin-moderation-content-flags-tableModeration flags overview table with content snippets, flag reasons, sortable flag counts, status badges, and per-row review actions.

Escalation Path Panelapplication-pro-admin-moderation-escalation-path-panelVertical escalation stepper with numbered tiers on a rail showing response SLAs, on call avatars, routed category badges, and auto escalation rules.

Feature Toggle Adminapplication-pro-admin-moderation-feature-toggle-adminFeature flag rows with environment badges, rollout percentage bars, kill-switch toggles, and a callout that kill switches take effect within 10 seconds globally.

IP Blocklist Managerapplication-pro-admin-moderation-ip-blocklist-managerSplit blocklist manager pairing an add rule form with scope and duration choices beside ruled entries showing CIDR chips, hit counts, and expiry.

Keyword Filter Managerapplication-pro-admin-moderation-keyword-filter-managerFiltered terms grouped into three ruled sections by enforcement action, each term a monospace chip with its 7 day match count and an edit control.

Moderation Queueapplication-pro-admin-moderation-moderation-queueReported items as prioritized cards with content snippet, reason, reporter count, age, and Approve, Remove, and Escalate actions per item.

Moderator Performance Boardapplication-pro-admin-moderation-moderator-performance-boardModerator table with focus queues, decision counts, seven day sparklines, median handle time, agreement meters, and overturned counts.

Queue Health Panelapplication-pro-admin-moderation-queue-health-panelFour stat tiles above a ruled queue list with open counts, oldest item age, SLA status badges, load bars, and assigned moderator avatars.

Report Review Cardapplication-pro-admin-moderation-report-review-cardSingle report case with reported content, reporter identity, author flag history, and a decision panel that names the consequence of every action.

Role Permissions Matrixapplication-pro-admin-moderation-role-permissions-matrixA permissions matrix with category grouped rows and four role columns showing member counts and check or minus access marks per cell.

User Admin Tableapplication-pro-admin-moderation-user-admin-tableAdmin member roster with status badges, signup date, last seen, flag counts, and per-row impersonate and suspend actions logged to the audit trail.

User Risk Profileapplication-pro-admin-moderation-user-risk-profileAn identity rail of account facts and linked accounts beside a composite risk score, a segmented meter, weighted signals, and enforcement actions.

Violation Trends Panelapplication-pro-admin-moderation-violation-trends-panelEight weeks of report volume as stacked bars segmented by policy category, beside a category breakdown with totals, four week deltas, and share bars.

Action Approval Cardapplication-pro-ai-assistant-action-approval-cardApproval gate for a proposed assistant bulk change showing sample before and after field values with approve and reject buttons.

Agent Run Traceapplication-pro-ai-assistant-agent-run-traceVertical timeline of agent tool steps with status icons, tool badges, mono query detail lines, durations, and a raw log link.

Ai Usage Cardapplication-pro-ai-assistant-ai-usage-cardAI token usage panel with a monthly progress bar, a per feature breakdown, and the overage policy stated in the same view.

Assistant Chat Panelapplication-pro-ai-assistant-assistant-chat-panelConversation thread with alternating user and assistant bubbles, inline source chips, and regenerate and copy affordances.

Assistant Empty Stateapplication-pro-ai-assistant-assistant-empty-statePre-conversation assistant panel with 4 example prompt chips and plain lists of what the assistant can see and cannot do yet.

Citations Panelapplication-pro-ai-assistant-citations-panelSources side panel listing 4 cited documents with title, matched snippet, relevance chip, and an honest footer note.

Context Sources Panelapplication-pro-ai-assistant-context-sources-panelData access panel listing assistant readable sources with icon, item count, last sync time, and a switch, plus one excluded source.

Conversation History Listapplication-pro-ai-assistant-conversation-history-listChat history sidebar listing past assistant threads grouped by recency with title, snippet, timestamp, and a delete affordance.

Feedback Thumbs Rowapplication-pro-ai-assistant-feedback-thumbs-rowAI response feedback row with thumbs up and down, a copy and regenerate action, and a reason picker revealed on negative feedback.

Guardrails Panelapplication-pro-ai-assistant-guardrails-panelRuled rows pairing each safety rule with an icon, explanation, and switch, above a blocked topics list and an audit logging note.

Inline Suggestion Cardapplication-pro-ai-assistant-inline-suggestion-cardText editor surface showing an AI ghost-text completion with Tab to accept and Esc to dismiss keyboard hints and an authorship notice.

Memory Panelapplication-pro-ai-assistant-memory-panelA header switch and ruled list of remembered facts, each with its source, date, and a forget button, above a permanent deletion note.

Model Picker Cardapplication-pro-ai-assistant-model-picker-cardModel selection card with three rows showing tier, cost per 1k tokens, a one-line tradeoff, and the balanced model pre-selected.

Prompt Composerapplication-pro-ai-assistant-prompt-composerAI input surface with a model chip, attach and slash command buttons, a token counter, and a keyboard hinted send button.

Prompt Library Gridapplication-pro-ai-assistant-prompt-library-gridSaved prompt cards in a filterable grid showing title, description, category badge, and use count with a create prompt affordance.

Response Compareapplication-pro-ai-assistant-response-compareA shared prompt panel above two side by side response cards, each with a model badge, answer body, latency and token stats, and a prefer button.

Scheduled Agents Listapplication-pro-ai-assistant-scheduled-agents-listRuled rows of recurring assistant tasks, each with cadence, delivery target, last run badge, next run time, and a pause switch, plus inline errors.

Thread Summary Cardapplication-pro-ai-assistant-thread-summary-cardAI generated thread summary with an overview paragraph, checked decision list, owner assigned action items, and regenerate and copy controls.

Anchor Nav Shellapplication-pro-app-shells-anchor-nav-shellA full-page docs shell with a slim topbar, a column of anchored section cards, and a sticky On this page rail tracking the active section.

Bottom Panel Shellapplication-pro-app-shells-bottom-panel-shellIDE style shell with a slim run bar, an open canvas, a docked console panel with log tabs, and a pinned status bar.

Breadcrumb Header Shellapplication-pro-app-shells-breadcrumb-header-shellFull-page shell for deep detail views with a breadcrumb trail, page title, meta row, and action buttons above two content panels.

Card Grid Shellapplication-pro-app-shells-card-grid-shellA gallery workspace shell with an icon nav rail, a toolbar with search, sort, and view toggle, and a responsive card grid of projects.

Centered Content Shellapplication-pro-app-shells-centered-content-shellA slim top bar and a max-w-3xl reading column on a muted background for docs, articles, or single settings detail pages.

Checklist Shellapplication-pro-app-shells-checklist-shellAn onboarding home shell with a topbar, welcome header, a setup checklist card with progress and one expanded step, plus a resources rail.

Collapsible Sidebar Shellapplication-pro-app-shells-collapsible-sidebar-shellIcon-only nav rail with an expand affordance, badge count on Projects, and an inline tooltip hint on one item.

Command Bar Shellapplication-pro-app-shells-command-bar-shellShell with a centered command bar in the top header, a keyboard shortcut hint, and a recent commands list below.

Dashboard Home Shellapplication-pro-app-shells-dashboard-home-shellThe assembled overview, greeting header, KPI strip, recent list, one open chart slot.

Document Tabs Shellapplication-pro-app-shells-document-tabs-shellEditor workspace shell with a strip of open document tabs, close buttons, an unsaved dot, and the active document content below.

Dual Sidebar Shellapplication-pro-app-shells-dual-sidebar-shellApp shell with a primary icon nav rail and a grouped contextual sub-nav panel for deep two-level navigation.

Empty State Shellapplication-pro-app-shells-empty-state-shellA sidebar and header frame with a first run canvas: a centered empty state with icon, heading, primary and secondary actions, and a starter template row.

Environment Banner Shellapplication-pro-app-shells-env-banner-shellApp shell with a pinned staging environment banner, a switch action, a topbar, and a deployments page with an environment facts panel.

Focus Mode Shellapplication-pro-app-shells-focus-mode-shellMinimal top bar with back link, document title, save state badge, and a centered max-w content column with no sidebar.

Full Bleed Shellapplication-pro-app-shells-full-bleed-shellEdge-to-edge canvas shell with a floating toolbar for maps, boards, and diagram editors that need every pixel of viewport space.

Icon Sidebar Shellapplication-pro-app-shells-icon-sidebar-shellThe icon only rail with aria labels, maximum width left for dense tool content.

Inbox Shellapplication-pro-app-shells-inbox-shellThree pane mail shell with a labeled folder sidebar, an unread message list, and a reading pane with triage actions and a reply footer.

Nested Nav Sidebar Shellapplication-pro-app-shells-nested-nav-sidebar-shellSidebar with Projects expanded to three indented children, one active.

Right Rail Shellapplication-pro-app-shells-right-rail-shellThree-column shell with an icon nav rail, main content area, and a right context rail showing a live activity list.

Settings Shellapplication-pro-app-shells-settings-shellThree column settings scaffold, icon rail, secondary nav with Danger zone, content column.

Sidebar Shellapplication-pro-app-shells-sidebar-shellThe navigation rail with active state, command hint, and labeled drop zones for your pages.

Split Content Shellapplication-pro-app-shells-split-content-shellFull-page shell with a slim top bar and a 50/50 editor and preview pane split for authoring and live-preview workflows.

Sticky Toolbar Shellapplication-pro-app-shells-sticky-toolbar-shellApp shell with a sticky bulk-actions and filter toolbar that stays pinned above a scrollable data table.

Tabbed Page Shellapplication-pro-app-shells-tabbed-page-shellA full-page shell with a sidebar, a named resource header, and a horizontal tab row delivering sub-view content below.

Topbar Shellapplication-pro-app-shells-topbar-shellHorizontal nav with the Acme lockup, five links, a command hint, and the page below.

Two Pane Shellapplication-pro-app-shells-two-pane-shellMaster-detail layout with a six-row project list pane and a wide detail pane showing the selected item header.

Wizard Shellapplication-pro-app-shells-wizard-shellMulti-step flow shell with a slim header step indicator, centered content column, and sticky back and continue footer.

Accept Invite Pageapplication-pro-auth-pages-accept-invite-pageThe invite named, inviter, role, what it grants, and the days left to accept.

Account Linking Pageapplication-pro-auth-pages-account-linking-pageAn account collision gate showing a Google sign in beside an existing password account, a link action, and a password sign in fallback.

Account Recovery Pageapplication-pro-auth-pages-account-recovery-pageAccount recovery card with an email lookup form and three recovery options listed by speed, plus a plain explanation of why identity review takes up to 3 days.

Approval Pending Pageapplication-pro-auth-pages-approval-pending-pageA workspace join waiting state with a step timeline, the named admins who decide, the typical response time, and a withdraw request action.

Backup Codes Pageapplication-pro-auth-pages-backup-codes-pageRecovery code save step with an eight code grid, download and copy actions, a saved confirmation checkbox, and a one time use warning.

Deactivated Account Pageapplication-pro-auth-pages-deactivated-account-pageAccount deactivation state page naming who deactivated the account and when, listing what reactivation restores, and linking directly to the named admin for recovery.

Device Approval Pageapplication-pro-auth-pages-device-approval-pageNew device verification gate showing device, location, time, and account with approve and deny actions and an honest account-lock security note.

Email Changed Confirmapplication-pro-auth-pages-email-changed-confirmEmail change confirmation page showing the new and old address with timestamp and device, a lock account alarm for unauthorized changes, and a dual address notice.

Forgot Password Pageapplication-pro-auth-pages-forgot-password-pagePassword reset form that openly explains its anti enumeration response and states reset link timing facts.

Join Workspace Pageapplication-pro-auth-pages-join-workspace-pageWorkspace entry page for invited and domain-matched users with a member preview, join or request buttons, and a note that joining is visible to admins immediately.

Locked Account Pageapplication-pro-auth-pages-locked-account-pageAccount lockout page stating the 15-minute duration, a password reset shortcut, and the reassurance that lockouts are never permanent.

Magic Link Pageapplication-pro-auth-pages-magic-link-pagePasswordless sign in showing both the request and sent states with expiry and resend throttle facts.

MFA Enrollment Pageapplication-pro-auth-pages-mfa-enrollment-pageA required two factor enrollment gate with three method rows ranked by strength, the authenticator app preselected, a grace period deadline, and a skip link.

Oauth Callback Pageapplication-pro-auth-pages-oauth-callback-pageOAuth connecting state card with a Spinner, three step rows showing progress for a GitHub org link, and fallback links if the page hangs.

Oauth Consent Pageapplication-pro-auth-pages-oauth-consent-pageThird party app authorization card listing granted scopes and explicit exclusions, the acting account, and authorize or cancel actions with a revoke note.

Passkey Setup Pageapplication-pro-auth-pages-passkey-setup-pageCentered auth card prompting passkey enrollment with three benefit rows, a device save target panel, and a skip fallback that keeps the existing password active.

Password Expired Pageapplication-pro-auth-pages-password-expired-pageA forced password rotation gate with current and new password fields, a policy panel explaining the deadline, and a reset by email fallback.

Reset Password Pageapplication-pro-auth-pages-reset-password-pageNew password form reached from a reset link with a requirements checklist, a session sign out panel, and the note that nothing changes until save.

Session Expired Pageapplication-pro-auth-pages-session-expired-pageCalm session timeout screen that promises local draft restore and prefills the email for one click return.

Sign In Pageapplication-pro-auth-pages-sign-in-pageSSO first sign in with the password fallback and honest reset link timing.

Sign Up Pageapplication-pro-auth-pages-sign-up-pageWorkspace signup with SSO buttons first, slug preview, and plain 14 day read only trial terms.

Sso Error Pageapplication-pro-auth-pages-sso-error-pageSSO failure page with the specific error reason, a named admin contact, numbered steps to resolve, and retry plus password fallback actions.

Sso Login Pageapplication-pro-auth-pages-sso-login-pageSSO-enforced sign in card with org domain shown, a single Continue with SSO button, and a named admin fallback for lockouts.

Two Factor Pageapplication-pro-auth-pages-two-factor-pageTOTP verification with six OTP slots, device trust checkbox, backup code link, and human recovery promise.

Verify Email Pageapplication-pro-auth-pages-verify-email-pageCheck-your-inbox state showing the sent address, a throttled resend button, a change-email link, and the 24-hour expiry note.

Welcome Back Loginapplication-pro-auth-pages-welcome-back-loginReturning user login showing the known account avatar and email with a single password field, passkey option, and a use a different account escape hatch.

Workspace Picker Pageapplication-pro-auth-pages-workspace-picker-pagePost sign in workspace chooser listing memberships with marks, member counts, and role badges, plus a create workspace action and sign out link.

Add-ons Panelapplication-pro-billing-addons-panelAn add-ons panel with active add-on rows and toggles, available add-ons to enable, and a subtotal for the next invoice.

Billing Contacts Cardapplication-pro-billing-billing-contacts-cardWho gets invoices, the add contact field, and the PO number printed on every one.

Billing Cycle Switchapplication-pro-billing-billing-cycle-switchMonthly and annual cycle options side by side with per seat pricing, the yearly saving, and ruled rows stating when the switch takes effect.

Cancel Flow Blueprintapplication-pro-billing-cancel-flow-blueprintCancel subscription dialog showing what you keep until the period ends, what changes after, a downgrade suggestion, and an optional reason select.

Cost Allocation Panelapplication-pro-billing-cost-allocation-panelA cost by team panel with ruled rows of member count, a proportional meter, share percentage, and amount, reconciling to the invoice total.

Coupon Redemption Cardapplication-pro-billing-coupon-redemption-cardActive promotion with mono code, discount terms, per invoice saving, the next discounted total, and a labeled field to apply another code.

Credits Balance Cardapplication-pro-billing-credits-balance-cardPrepaid credits wallet showing current balance, a ruled grants and spends ledger, and the application policy.

Current Plan Usageapplication-pro-billing-current-plan-usageTeam plan header with renewal date and three usage meters each stating the overage policy beneath the bar.

Dunning Bannerapplication-pro-billing-dunning-bannerPayment-failed notice with the card charged, retry schedule, exact access-pause date, and an update payment method action.

Invoice Detail Pageapplication-pro-billing-invoice-detail-pageSingle printable invoice with mono number, from/to addresses, tabular line items, subtotal/tax/total, a Paid badge, and download/print actions.

Invoice History Tableapplication-pro-billing-invoice-history-tableCompact invoice archive with the estimated next invoice previewed at the top.

Pause Subscription Panelapplication-pro-billing-pause-subscription-panelThree pause lengths with exact resume dates, a checklist of what happens while paused, and a pause action beside the cancel alternative.

Payment History Tableapplication-pro-billing-payment-history-tableTransactions ledger with date, description, card brand chip with last four digits, tabular amount, status badge, and a per row receipt link.

Payment Method Panelapplication-pro-billing-payment-method-panelThe saved card, billing email, the optional backup slot, and the token footer.

Plan Change Historyapplication-pro-billing-plan-change-historyDated log of upgrades, seat additions, promotions, and cycle switches, each with a type badge and the teammate who made the change.

Plan Comparison Tableapplication-pro-billing-plan-comparison-tableThree-plan feature matrix with Check and Minus cells, per-plan prices, current plan marker, and a quiet most-popular note.

Proration Preview Cardapplication-pro-billing-proration-preview-cardUpgrade proration preview with credit and charge line items, due-today total, and next renewal amount.

Receipt Cardapplication-pro-billing-receipt-cardSingle payment receipt with amount, date, card, transaction ID, a download PDF action, and a link to the formal tax invoice.

Refund Status Cardapplication-pro-billing-refund-status-cardRefund in progress with amount, dates, returning card, and a four stage pipeline showing current processing state.

Seat Management Panelapplication-pro-billing-seat-management-panelIdle seats listed with last active and the keep or free choice priced per month.

Spend Trend Chartapplication-pro-billing-spend-trend-chartA spend trend panel with three stat columns above a six month stacked bar chart splitting invoices into plan, seats, and usage.

Spending Limit Cardapplication-pro-billing-spending-limit-cardMonthly cap widget showing current spend on a Progress bar with alert threshold markers and an explicit policy for what pauses at the limit.

Tax and Invoice Settingsapplication-pro-billing-tax-and-invoice-settingsVAT and Tax ID panel with VIES validation note, billing address fields, reverse charge callout, and invoice appearance.

Trial Status Cardapplication-pro-billing-trial-status-cardA trial card with a day meter, a ruled list of what the team set up, an end date outcome, and an add payment action.

Upgrade Comparison Cardapplication-pro-billing-upgrade-comparison-cardThe seat limit upsell with the delta priced for your seats and the honest alternative.

Usage Alerts Panelapplication-pro-billing-usage-alerts-panelAlert rules as a ruled list with metric thresholds, recipient emails, and toggles, plus an add alert action and a hard cap caveat.

Usage Breakdown Billapplication-pro-billing-usage-breakdown-billThe period charges line by line with a dated projection and its method stated.

Availability Gridapplication-pro-calendar-scheduling-availability-gridSingle-day slot picker with taken slots disabled, the selected slot highlighted, timezone line, and a buffer note.

Booking Confirmation Cardapplication-pro-calendar-scheduling-booking-confirmation-cardPost-booking summary card with meeting title, attendee avatars, dual-timezone times, add-to-calendar buttons, and a cancellation policy note.

Calendar Sync Statusapplication-pro-calendar-scheduling-calendar-sync-statusConnected calendars panel with per account sync freshness, slot blocking modes, an inline reconnect row for expired auth, and a privacy note.

Event Detail Panelapplication-pro-calendar-scheduling-event-detail-panelFull read view of a calendar event with a header, agenda and attachments column, a guest list with RSVP state, and viewer response buttons.

Event List Dayapplication-pro-calendar-scheduling-event-list-dayDay schedule list with an all-day item pinned at top, ruled timed event rows, and an explicit free-time gap row.

Invite RSVP Cardapplication-pro-calendar-scheduling-invite-rsvp-cardIncoming invitation card showing the organizer, event details, and a conflict warning, closing with accept, maybe, decline, and propose new time actions.

Meeting Poll Panelapplication-pro-calendar-scheduling-meeting-poll-panelGroup scheduling poll with three proposed times, voter avatar stacks, vote share bars, a highlighted leading option, and finalize actions.

Mini Calendar Cardapplication-pro-calendar-scheduling-mini-calendar-cardCompact sidebar month picker with today highlighted, event dots on three dates, and prev and next navigation.

Month Calendarapplication-pro-calendar-scheduling-month-calendarMonth grid for June 2026 with event chips, overflow badges, today highlighted, and muted out-of-month days.

Recurring Event Formapplication-pro-calendar-scheduling-recurring-event-formRecurrence rule builder with interval input, weekday toggle chips, end condition selector, and a plain-English rule summary.

Reschedule Request Panelapplication-pro-calendar-scheduling-reschedule-request-panelReschedule request panel placing the current and proposed slots side by side with the requester reason, an availability line, and accept or counter actions.

Room Booking Timelineapplication-pro-calendar-scheduling-room-booking-timelineRoom picker where each meeting room is a day track with existing bookings drawn as blocks and the requested slot outlined across every row.

Scheduling Link Cardapplication-pro-calendar-scheduling-scheduling-link-cardBooking link share card with a copy chip, three meeting types with buffers, availability hours, and a double-booking note.

Team Availability Heatmapapplication-pro-calendar-scheduling-team-availability-heatmapWeek by hour heat grid of team overlap with day columns, a ring highlighted best slot, density legend, and a propose time callout.

Timezone Compare Rowapplication-pro-calendar-scheduling-timezone-compare-rowProposed meeting time shown side by side across four attendee timezones with local time, offset, and working hours status for each.

Week Agendaapplication-pro-calendar-scheduling-week-agendaWeek view with a vertical time column, five day columns, CSS-positioned event blocks, and a current-time line.

Working Hours Editorapplication-pro-calendar-scheduling-working-hours-editorWeekly availability settings with per day switches, bookable time range chips, a timezone note, weekly total badge, and save actions.

Area With Range Chartapplication-pro-charts-area-with-range-chartAn area chart showing actuals with a muted 80% confidence band and a dashed projection tail for future months.

Bubble Chartapplication-pro-charts-bubble-chartScatterChart plotting accounts by usage score, monthly revenue, and seat count encoded as bubble size.

Bullet KPI Rowsapplication-pro-charts-bullet-kpi-rowsA card panel of five quarterly KPIs as bullet rows, each with qualitative range bands, a quarter to date measure bar, a target tick, and a shared axis.

Cohort Retention Heatmapapplication-pro-charts-cohort-retention-heatmapA CSS grid heatmap of weekly cohort retention shaded by foreground opacity tokens with no chart library.

Conversion Funnel Barsapplication-pro-charts-conversion-funnel-barsThe funnel as horizontal bars with each rate against the prior stage, labeled.

Diverging Survey Barsapplication-pro-charts-diverging-survey-barsLikert survey responses as diverging stacked bars around a center axis with a four segment legend and agree share per question.

Dumbbell Latency Chartapplication-pro-charts-dumbbell-latency-chartDumbbell rows comparing p95 latency per endpoint before and after a release, with connector bars, paired dots, and an axis row.

Gauge Progress Chartapplication-pro-charts-gauge-progress-chartA radial gauge showing a single SLA percentage with the value centred and the target threshold named in the footnote.

Grouped Bar Chartapplication-pro-charts-grouped-bar-chartFeature usage grouped bar chart comparing this billing period against the previous across six categories with a shared legend.

Heatmap Calendar Chartapplication-pro-charts-heatmap-calendar-chartCSS grid calendar heatmap shading daily activity by foreground opacity across a six month window.

Histogram Distribution Chartapplication-pro-charts-histogram-distribution-chartA card panel charting API response times bucketed into 100 ms bins as a single distribution, with a p95 callout and a dashed reference line.

Horizontal Bar Rankingapplication-pro-charts-horizontal-bar-rankingHorizontal bar chart ranking the top 6 pages by view count with inline value labels and a footnote naming the 3x lead of the top page.

Latency Percentile Chartapplication-pro-charts-latency-percentile-chartAPI request latency as p50, p95, and p99 lines over 24 hourly points with ms axis formatting.

Mrr Stacked Barsapplication-pro-charts-mrr-stacked-barsMRR movement as stacked bars with new and expansion above zero and contraction and churn below, last 6 months.

Multi Line Trendapplication-pro-charts-multi-line-trendThree-series line chart tracking monthly active seats across Starter, Growth, and Enterprise plans with a legend and a footnote naming the September crossover.

Pareto Error Chartapplication-pro-charts-pareto-error-chartA Pareto chart pairing error category bars sorted by volume with a cumulative share line on a second percentage axis.

Percent Stacked Barsapplication-pro-charts-percent-stacked-barsA card panel charting monthly signups by acquisition channel as bars normalized to 100 percent, so the chart reads as share of mix over volume.

Plan Mix Donutapplication-pro-charts-plan-mix-donutDonut chart of active workspaces by plan tier with a center total label and a four plan legend.

Radar Chartapplication-pro-charts-radar-chartRadarChart comparing two plans across five feature dimensions with filled polygons and a shared legend.

Radial Usage Ringsapplication-pro-charts-radial-usage-ringsConcentric radial rings showing percent of quota used per storage resource beside a breakdown list with exact allocations.

Revenue Area Chartapplication-pro-charts-revenue-area-chartStacked area chart showing new business and expansion MRR added each month across an 8 month window.

Scatter Plot Chartapplication-pro-charts-scatter-plot-chartAccounts scatter chart plotting monthly API usage against revenue with reference-line quadrants to surface expansion targets.

Signups Bar Chartapplication-pro-charts-signups-bar-chartWeekly new account signups as a single series bar chart over 10 weeks with a labeled launch spike.

Slope Comparison Chartapplication-pro-charts-slope-comparison-chartA card panel joining average active seats per plan across two quarters with slope lines between paired axes, the biggest mover drawn in full ink.

Sparkbar Rowapplication-pro-charts-sparkbar-rowFour compact metric tiles each with a label, headline value, and a mini 8-week bar chart for a glanceable ops comparison strip.

Stacked Category Barsapplication-pro-charts-stacked-category-barsA stacked bar chart of support tickets by category over six weeks with a footnote naming the fastest growing series.

Stepped Area Chartapplication-pro-charts-stepped-area-chartActive seats area chart using stepAfter type so each provisioning event reads as an instantaneous jump, not gradual growth.

Usage Line Chartapplication-pro-charts-usage-line-chartAPI requests per day as two lines separating production and sandbox volume across a 14 day window.

Waterfall Chartapplication-pro-charts-waterfall-chartMRR movement chart with floating bars for new business, expansion, and churn across a billing period.

Weekly Active Users Chartapplication-pro-charts-weekly-active-users-chartDistinct active users per ISO week as a filled area over 12 weeks with a dashed quarter target reference line.

Active Call Panelapplication-pro-chat-messaging-active-call-panelLive huddle surface with elapsed timer, presenting banner, participant tiles showing mute and speaking states, and a call control bar.

Channel Directoryapplication-pro-chat-messaging-channel-directoryA browse and join panel with a create action, labeled search field, sort chips, and rows showing each channel name, description, members, and a join state.

Channel List Sidebarapplication-pro-chat-messaging-channel-list-sidebarWorkspace nav rail with channel and DM sections, unread badges, a muted channel indicator, and per section add affordances.

Channel Settings Panelapplication-pro-chat-messaging-channel-settings-panelChannel settings panel with name and topic fields, public/private radio with consequence notes, a members list, notification level selector, and an archive action.

Conversation Listapplication-pro-chat-messaging-conversation-listInbox rail with six conversation rows showing avatar, preview, timestamp, and unread count badges on two threads.

Dm Thread Panelapplication-pro-chat-messaging-dm-thread-panelComplete 1:1 panel combining a presence header, a grouped message thread with read receipt, and a full composer bar.

Emoji Reactions Blueprintapplication-pro-chat-messaging-emoji-reactions-blueprintStatic open-state emoji picker inline above a message with a recents row, category grid, search input, and existing reaction chips.

Member Profile Drawerapplication-pro-chat-messaging-member-profile-drawerA person panel with a large avatar and presence dot, name and status line, message and huddle actions, contact rows, and shared channels.

Mentions Activity Feedapplication-pro-chat-messaging-mentions-activity-feedAn activity panel with a mark all read header, mentions and reactions filter chips, and rows pairing actor, event, source channel, quoted snippet, and time.

Message Composerapplication-pro-chat-messaging-message-composerChat send bar with attach, emoji, and slash affordances, a typing indicator row, and a Send button with an Enter keyboard hint.

Message Threadapplication-pro-chat-messaging-message-threadChat thread with grouped sender bubbles, a Today day divider, a reaction chip, and a read receipt on the last outgoing message.

Pinned Messages Panelapplication-pro-chat-messaging-pinned-messages-panelChannel pinned messages list showing author, snippet, pinned time and pinner, a jump-to link, and an unpin button per entry.

Poll Message Cardapplication-pro-chat-messaging-poll-message-cardInline thread poll with vote share bars per option, a check on your vote, voter avatar cluster, total count, and close time.

Scheduled Messages Panelapplication-pro-chat-messaging-scheduled-messages-panelQueued outgoing messages list with destination, draft snippet, exact send time, and per row send now, edit, and delete actions.

Search Messages Resultsapplication-pro-chat-messaging-search-messages-resultsChat search results grouped by channel and DM with author, inline highlighted match term, timestamp, and a jump-to-message affordance.

Shared Files Panelapplication-pro-chat-messaging-shared-files-panelConversation files tab with type filter chips and rows showing a file icon, name, size, uploader, share date, and a download action.

Thread Reply Panelapplication-pro-chat-messaging-thread-reply-panelSide panel showing a parent channel message, a reply count divider, four threaded replies, and a scoped reply composer.

Voice Message Threadapplication-pro-chat-messaging-voice-message-threadAn audio thread of chat bubbles, each with a play control, waveform, and duration, plus an active note with elapsed time and a transcript preview.

Annotation Layers Railapplication-pro-comments-annotations-annotation-layers-railA document page mockup where marks from each reviewer form a colored layer, beside a rail of reviewers with color keys, counts, and visibility toggles.

Annotation Toolbar Blueprintapplication-pro-comments-annotations-annotation-toolbar-blueprintStatic open-state blueprint of a text-selection toolbar with comment, highlight, suggest-edit, and link affordances plus a five-color swatch row.

Canvas Pin Commentsapplication-pro-comments-annotations-canvas-pin-commentsDesign canvas mockup with four numbered comment pins and a side rail listing each pin thread with author, note, and resolve actions.

Code Review Threadapplication-pro-comments-annotations-code-review-threadCode diff panel with line numbers, added and removed rows, and a line anchored review thread with replies, composer, and resolve action.

Comment Assignmentsapplication-pro-comments-annotations-comment-assignmentsReview feedback promoted into action items, with filter chips above rows pairing each source quote with an assignee, due date, and status badge.

Comment Composerapplication-pro-comments-annotations-comment-composerStandalone comment composer with a formatting toolbar, file attach, at mention hint, and a Cmd Enter keyboard shortcut hint.

Comment Notification Inboxapplication-pro-comments-annotations-comment-notification-inboxCross document notification feed with mention, reply, and resolve items, unread dots, type filter chips, and a mark all read action.

Comment Sidebarapplication-pro-comments-annotations-comment-sidebarDocument comment sidebar with four threads anchored to quoted text, reply counts, resolve affordances, and one collapsed resolved thread.

Inline Annotation Threadapplication-pro-comments-annotations-inline-annotation-threadHighlighted text excerpt with an attached margin thread showing two comments, a reply composer, emoji reactions, and resolve and delete controls.

Mention Picker Blueprintapplication-pro-comments-annotations-mention-picker-blueprintStatic open state of an at mention picker showing six workspace members with one row highlighted and keyboard navigation hints.

Outdated Comments Panelapplication-pro-comments-annotations-outdated-comments-panelComment threads on a versioned document, split into ones matched to the new version and ones whose anchors broke, with stale quotes and reattach actions.

Pending Review Trayapplication-pro-comments-annotations-pending-review-trayDraft comments held for one review, each with a section anchor, quote, and edit controls, above a summary field, verdict choices, and a submit button.

Reaction Barapplication-pro-comments-annotations-reaction-barEmoji reaction chips with counts showing active and inactive states, an add reaction affordance, and a static hover panel listing who reacted.

Resolved Comments Listapplication-pro-comments-annotations-resolved-comments-listAudit list of closed comment threads with quoted references, resolution attribution, reply counts, a reopen affordance, and an all vs resolved filter.

Spreadsheet Cell Commentsapplication-pro-comments-annotations-spreadsheet-cell-commentsA budget sheet with corner markers on flagged cells beside a rail showing the selected cell thread and a list of other commented cells.

Suggestion Review Rowapplication-pro-comments-annotations-suggestion-review-rowPending edit review rows showing the struck original beside the proposed replacement with author attribution and accept and reject actions per suggestion.

Video Timestamp Commentsapplication-pro-comments-annotations-video-timestamp-commentsVideo review timeline with avatar markers at comment timestamps and a list of time anchored notes with reply and mark done controls.

Audit Log Tableapplication-pro-data-tables-audit-log-tableAppend only security log with mono timestamps, actor avatars, code chip action keys, targets, and source IPs.

Column Visibility Tableapplication-pro-data-tables-column-visibility-tableA customers table beside a checkbox rail that shows and hides columns live, with a locked identity column and a running column count.

Comparison Tableapplication-pro-data-tables-comparison-tablePlan comparison table with features as rows, plans as columns, differing cells highlighted, and a per-column upgrade CTA.

Csv Preview Tableapplication-pro-data-tables-csv-preview-tableCSV import preview with column to field mapping Selects, an unmapped column flag, and a row issue count.

Dense Data Tableapplication-pro-data-tables-dense-data-tableThe compact variant fitting eight webhook rows where a standard table fits five.

Density Toggle Tableapplication-pro-data-tables-density-toggle-tableA deployments table with a segmented comfortable and compact toggle in the header that swaps every row's vertical padding live, above a density note.

Diff Review Tableapplication-pro-data-tables-diff-review-tableA config change review table striking old values beside proposed ones, with change badges, a left rule accent, and approve and reject actions.

Editable Cells Tableapplication-pro-data-tables-editable-cells-tableQuarterly budget grid with one cell in active edit mode, tab navigation hint, and per-row save and cancel actions.

Empty State Tableapplication-pro-data-tables-empty-state-tableProjects table filtered to zero rows keeping active filter chips and the header visible above a centered empty state with recovery actions.

Feature Flags Tableapplication-pro-data-tables-feature-flags-tableFlags with mono keys, environment badges, rollout percentages, a Switch per row.

Grouped Columns Tableapplication-pro-data-tables-grouped-columns-tableAn endpoint latency table with a two tier header spanning grouped metric columns for production and staging, split by vertical rules down the body.

Grouped Rows Tableapplication-pro-data-tables-grouped-rows-tableIssues table with shaded status subheader rows showing group name and count above each set of member rows.

Heatmap Cells Tableapplication-pro-data-tables-heatmap-cells-tableFeature usage matrix with weekday columns, value shaded cells, per row totals, and an intensity legend beneath the table.

Inline Edit Tableapplication-pro-data-tables-inline-edit-tableProjects table with one row in edit mode showing Input and Select cells with save and cancel affordances.

Invoices Tableapplication-pro-data-tables-invoices-tableBilling history with mono invoice ids, status badges, and right aligned amounts.

Multi Select Toolbar Tableapplication-pro-data-tables-multi-select-toolbar-tableContacts table with per row checkboxes, a select all header, and a contextual bulk action toolbar.

Nested Detail Tableapplication-pro-data-tables-nested-detail-tableProjects table where one row expands inline to a key value metadata panel and a recent activity list.

Paginated Tableapplication-pro-data-tables-paginated-tableCustomers table with a working pagination footer showing numbered page buttons, previous and next controls, and a live range summary line.

Pinned Columns Tableapplication-pro-data-tables-pinned-columns-tableWide pipeline table with the name column visually pinned via sticky positioning while remaining columns scroll horizontally.

Row Actions Menu Blueprintapplication-pro-data-tables-row-actions-menu-blueprintStatic blueprint of a documents table with one per-row overflow menu rendered open inline showing Edit, Duplicate, Move, and Delete actions without any Radix portal.

Search Highlight Tableapplication-pro-data-tables-search-highlight-tableAn environment variables table with a filter input that narrows rows live and marks the matched substring inside each key, above a live count line.

Selectable Bulk Tableapplication-pro-data-tables-selectable-bulk-tableRow checkboxes with a select all header and a bulk bar with Remove and Export.

Sortable Header Tableapplication-pro-data-tables-sortable-header-tableProjects table with sort affordance icons on every column header, one column actively sorted descending, and a shift-click secondary sort hint in the footnote.

Sparkline Metrics Tableapplication-pro-data-tables-sparkline-metrics-tableKey metrics table pairing each row with its current value, week over week change, and an inline SVG trend sparkline.

Status Summary Tableapplication-pro-data-tables-status-summary-tableSupport queue with an Open, Blocked, and Done count strip above the ticket rows and a status badge per row.

Sticky Footer Totals Tableapplication-pro-data-tables-sticky-footer-totals-tableInvoice lines table with right-aligned tabular numbers, status badges, and a sticky footer row showing the line item count and running total for billing pages.

Sticky Header Tableapplication-pro-data-tables-sticky-header-tableA background jobs table inside a fixed height scroll viewport with the column header pinned by sticky positioning, so headers stay readable as rows scroll.

Table With Expandable Rowsapplication-pro-data-tables-table-with-expandable-rowsOrders with one row expanded to its line items in a muted inset, statically.

Table With Filtersapplication-pro-data-tables-table-with-filtersProjects with filter chips narrowing rows live, the count updating per click.

Timeline Tableapplication-pro-data-tables-timeline-tableProject schedule table with an inline proportional bar per row showing each project span within a defined date window.

Tree Tableapplication-pro-data-tables-tree-tableHierarchical cost center table with expand chevrons, indented child rows, and rolled-up budget totals per parent.

Users Tableapplication-pro-data-tables-users-tableMembers with role badges, last active times, and the seat math beside the invite button.

Api Consoleapplication-pro-developer-tools-api-consoleREST request builder with a method and path row, query params and headers tabs, a Send affordance, and a JSON response panel.

Build Status Listapplication-pro-developer-tools-build-status-listCI pipeline list with branch, commit message, status Badges, duration, a running progress bar, and a view-logs affordance on failed builds.

Cron Jobs Monitorapplication-pro-developer-tools-cron-jobs-monitorRows with a job name, cron expression, cadence, a dot strip of recent runs, last and next run times, and a status badge.

Dependency Auditapplication-pro-developer-tools-dependency-auditSeverity count tiles above a vulnerability table with package names, advisory ids, installed and patched versions, and an update action.

Deploy Panelapplication-pro-developer-tools-deploy-panelDeployment surface showing the current build steps progress, actor, commit sha, and a recent deploy history list with rollback.

Diff Viewerapplication-pro-developer-tools-diff-viewerA code review diff with a compare header, branch chips, change totals, per file cards, and a unified diff tinting added and removed lines.

Env Vars Managerapplication-pro-developer-tools-env-vars-managerSecrets configuration table with mono keys, sha256 hash chips, a disabled reveal button, target Badges, and a write-only honesty note.

Error Inboxapplication-pro-developer-tools-error-inboxA master list of grouped exceptions with event counts and sparkline bars beside a detail pane showing the selected issue and its stack trace.

Feature Flags Panelapplication-pro-developer-tools-feature-flags-panelAn environment chip row above flag rows with a mono key, rollout meter, kind badge, last editor avatar, and an enable switch.

Log Viewerapplication-pro-developer-tools-log-viewerLive log stream with level Badges, mono timestamps, per-service labeling, level filter chips, and a tail affordance.

Migrations Panelapplication-pro-developer-tools-migrations-panelA database migrations timeline with a header and apply action above a railed list of pending migrations and applied ones with run times.

SDK Quickstartapplication-pro-developer-tools-sdk-quickstartA three step SDK onboarding stepper with package manager install tabs, a client initialization snippet, a first event call, and a live waiting panel.

Secrets Rotation Cardapplication-pro-developer-tools-secrets-rotation-cardSecret rotation panel listing active secrets with age nudges, masked prefixes, and a rotate button that keeps the old secret valid for 24 hours.

SQL Query Editorapplication-pro-developer-tools-sql-query-editorA query workspace pairing a schema sidebar of tables and row counts with a syntax tinted SQL editor and a results table with timing.

Terminal Panelapplication-pro-developer-tools-terminal-panelEmbedded terminal blueprint with a named session tab row, realistic command output, and a blinking prompt cursor.

Trace Waterfallapplication-pro-developer-tools-trace-waterfallA distributed trace waterfall with a header of id, status, and duration above indented span rows whose bars sit on a shared time axis.

Webhook Logs Tableapplication-pro-developer-tools-webhook-logs-tableWebhook delivery log with event name, endpoint, HTTP status badge, duration, attempt ratio, and inline response body for failed rows.

Api Key Created Dialogapplication-pro-dialogs-api-key-created-dialogOne-time API key reveal dialog with a monospaced copy field, a one-time-only warning, scoped permissions, and a checkbox-gated Done button.

Archive Project Dialogapplication-pro-dialogs-archive-project-dialogArchive confirmation dialog with icon rows for what changes, a kept and restorable stats strip, a notify members checkbox, and a restore note.

Bulk Edit Dialogapplication-pro-dialogs-bulk-edit-dialogBulk-edit dialog for 14 selected items with a status Select, a change-preview callout, optional fields, and a 30-second undo-window note.

Cancel Subscription Dialogapplication-pro-dialogs-cancel-subscription-dialogA cancel subscription dialog with a reason radio list, a pause offer panel, a period end access note, and a keep plan primary action.

Confirm Delete Dialogapplication-pro-dialogs-confirm-delete-dialogWhat deleting Apollo destroys and what survives, gated by typing the name.

Connect Account Dialogapplication-pro-dialogs-connect-account-dialogIntegration connect dialog listing exact OAuth scopes, a minimal-scope trust note, and both an OAuth button and an API key path.

Create Webhook Dialogapplication-pro-dialogs-create-webhook-dialogA create webhook dialog with an endpoint URL field, a checklist of subscribable events showing volume estimates, a signing note, and create actions.

Edit Conflict Dialogapplication-pro-dialogs-edit-conflict-dialogEdit conflict dialog with a three column yours versus theirs field diff, a radio list of resolutions, and a version history safety note.

Export Data Dialogapplication-pro-dialogs-export-data-dialogFormat and scope choices with real counts, delivered in minutes, not 30 days.

Feedback Dialogapplication-pro-dialogs-feedback-dialogFeedback dialog with a Bug, Idea, or Other type toggle, a message textarea, an optional screenshot attachment, and honest per-type routing copy.

Import Result Dialogapplication-pro-dialogs-import-result-dialogPost-import report dialog showing created, skipped, and failed row counts with named skip reasons and a download link for the skipped rows.

Invite Members Dialogapplication-pro-dialogs-invite-members-dialogEmails, role, and the seat consequence stated before send, not after.

Keyboard Help Dialogapplication-pro-dialogs-keyboard-help-dialogKeyboard shortcuts reference dialog with two columns of grouped Kbd combos, a search bar, and a roadmap note that remapping is not yet available.

Keyboard Shortcuts Dialogapplication-pro-dialogs-keyboard-shortcuts-dialogTwo columns of Kbd combos with the honest note that remapping is not here yet.

Merge Duplicates Dialogapplication-pro-dialogs-merge-duplicates-dialogA merge dialog pairing two contact records with per field radio picks for the winning value, a retention note, and keep or merge actions.

Move To Project Dialogapplication-pro-dialogs-move-to-project-dialogBulk-move dialog for 8 selected items with a searchable project list, a what-moves callout, and a 30-minute undo window note.

Payment Failed Dialogapplication-pro-dialogs-payment-failed-dialogPayment failed dialog with the invoice in label and value rows, an expired card flagged inline, a dated retry schedule, and card actions.

Remove Member Dialogapplication-pro-dialogs-remove-member-dialogA remove member dialog with the member card, a counted list of what they still own, a reassign select, and a confirm and reassign action.

Request Access Dialogapplication-pro-dialogs-request-access-dialogRequest access dialog with a locked document card, an access level radio list from view to edit, a message field, and a response note.

Restore Version Dialogapplication-pro-dialogs-restore-version-dialogA version history dialog with the current revision pinned above a radio list of prior versions showing authors, timestamps, and change summaries.

Role Change Dialogapplication-pro-dialogs-role-change-dialogRole change confirmation for Maya Chen from Member to Admin with three access gain bullets and an effective immediately note.

Schedule Action Dialogapplication-pro-dialogs-schedule-action-dialogPublish now or schedule for later dialog with a date and time pair, inline timezone, and an offline-safe run note.

Session Expiring Dialogapplication-pro-dialogs-session-expiring-dialogSession expiry warning dialog giving two minutes notice, a stay-signed-in action, and a guarantee that open drafts are saved regardless of choice.

Share Link Dialogapplication-pro-dialogs-share-link-dialogThe link as a copyable chip, access level, expiry, and who already has it.

Sign Out Sessions Dialogapplication-pro-dialogs-sign-out-sessions-dialogA sign out sessions dialog with the current device pinned, a checkbox list of other active sessions, an unfamiliar flag, and a sign out action.

Transfer Ownership Dialogapplication-pro-dialogs-transfer-ownership-dialogTransfer-ownership dialog with a member Select, two named consequence rows, a type-to-confirm input, and the irreversible-without-them note.

Two Factor Setup Dialogapplication-pro-dialogs-two-factor-setup-dialogA two factor setup dialog with a QR mockup beside a copyable manual key, a six cell code entry, and a one time recovery codes note.

Unsaved Changes Dialogapplication-pro-dialogs-unsaved-changes-dialogLeave confirmation dialog listing three specific unsaved field changes with Discard, Keep editing, and Save and leave actions.

Upgrade Plan Dialogapplication-pro-dialogs-upgrade-plan-dialogA plan limit dialog with per resource usage meters, a bordered next tier card listing features and price, and a prorated billing note.

Verify Domain Dialogapplication-pro-dialogs-verify-domain-dialogA verify domain dialog with two copyable DNS record rows showing type and host, a found or pending status each, and a check again action.

Archived Project Stateapplication-pro-empty-states-archived-project-stateRead only archived project page with a preserved banner, a snapshot count grid, an archive record card, and restore and export actions.

Cleared Inbox Stateapplication-pro-empty-states-cleared-inbox-stateInbox zero panel showing 14 handled today, 0 open, and 2 snoozed with a calm no-action-needed message.

Coming Soon Stateapplication-pro-empty-states-coming-soon-stateFeature placeholder naming the section, two capability bullets, a notify-me email form, and an honest no-date timeframe.

Deleted Resource Stateapplication-pro-empty-states-deleted-resource-stateA not found panel for a deleted document with a struck through breadcrumb trail, a deletion record, a restore note, and two recovery actions.

Empty Automations Stateapplication-pro-empty-states-empty-automations-stateEmpty automations panel pairing a build from scratch action with three starter template recipe rows and a facts row on run speed and quota.

Empty Chart Stateapplication-pro-empty-states-empty-chart-stateAnalytics panel keeping the full chart frame and axis ticks, with a zero range message offering wider ranges and their real event counts.

Empty Comments Stateapplication-pro-empty-states-empty-comments-stateEmpty discussion panel with a zero comment header, a watcher avatar row, and an inline composer with a mention hint and visibility note.

Empty Table Stateapplication-pro-empty-states-empty-table-stateMembers table with the real header row visible and an empty body explaining which filters hid all 14 rows.

Empty Uploads Dropzoneapplication-pro-empty-states-empty-uploads-dropzoneAn empty file library with a dashed dropzone, browse and import from URL actions, a facts row for formats and storage, and a privacy note.

Error Boundary Cardapplication-pro-empty-states-error-boundary-cardIn-place panel fallback showing a mono error reference, a section-scoped retry button, and confirmation that the rest of the page is unaffected.

Error Page 404application-pro-empty-states-error-page-404Centered 404 page showing the failed path in mono, three reasons a workspace link goes stale, and search or dashboard as recovery actions.

Error Page 500application-pro-empty-states-error-page-500The 500 with a mono incident id, the team already paged, retry and status links.

First Run Checklist Emptyapplication-pro-empty-states-first-run-checklist-emptyEmpty dashboard state with a 4-step setup checklist, progress bar, and honest note that panels appear as steps are completed.

Import In Progress Stateapplication-pro-empty-states-import-in-progress-stateA panel for a running data import with a three step pipeline, a live progress bar, meta rows for timing, and notify or cancel actions.

Maintenance Pageapplication-pro-empty-states-maintenance-pageFull-page planned maintenance screen with a stated window, estimated time remaining, a do-nothing instruction, and a status-page link.

No Access Yet Stateapplication-pro-empty-states-no-access-yet-statePending-access gate naming the reviewer with avatar and ETA, plus a list of surfaces the user can reach in the meantime.

No Data Yet Stateapplication-pro-empty-states-no-data-yet-stateEmpty panel with a geometric illustration, an events headline, an explanation of when data appears, and a primary API call action.

No Integrations Stateapplication-pro-empty-states-no-integrations-stateEmpty integrations surface with unlock bullets, a browse CTA, and Slack, GitHub, and Jira quick-connect chips.

No Search Results Stateapplication-pro-empty-states-no-search-results-stateThe query kept, three scopes to widen, and what search covers stated.

Offline Stateapplication-pro-empty-states-offline-stateOffline state panel listing what still works locally and what is paused until reconnection, with a guarantee that queued drafts are never lost.

Onboarding Empty Dashboardapplication-pro-empty-states-onboarding-empty-dashboardThe dashboard before data, zeroed KPIs and the five minute fill promise.

Payment Failed Stateapplication-pro-empty-states-payment-failed-statePayment failed billing gate showing the card on file, the exact decline code, a three attempt retry schedule, and update and retry actions.

Permission Denied Stateapplication-pro-empty-states-permission-denied-stateThe 403 that names the role, the owners who grant it, and the request flow.

Rate Limited Stateapplication-pro-empty-states-rate-limited-stateRate limit panel showing the 60 requests per minute cap, the reset time, and upgrade or support paths to increase the limit.

Search No Matchesapplication-pro-empty-states-search-no-matchesZero-result state echoing 3 active filter chips, the count 0 of 124, and per-filter recovery suggestions with item counts.

Session Expired Stateapplication-pro-empty-states-session-expired-stateSession expired screen showing the account for one click resume, a saved draft note, meta rows naming the policy, and sign in actions.

Storage Full Stateapplication-pro-empty-states-storage-full-stateA storage quota panel with a segmented usage bar at capacity, a category breakdown, paused versus working lists, and free space or upgrade actions.

Trial Expired Stateapplication-pro-empty-states-trial-expired-stateTrial expired gate stating the end date, side by side lists of what stays read only versus what is paused, the plan price, and export.

Welcome Back Stateapplication-pro-empty-states-welcome-back-stateReturning-user digest showing three dated workspace changes, a resume link, and an explicit note that nothing was deleted.

File Activity Feedapplication-pro-file-manager-file-activity-feedA folder activity timeline grouping events by day on a vertical rail, each with an action icon, actor avatar, action sentence, and folder path.

File Browser Tableapplication-pro-file-manager-file-browser-tableFolder contents table with file-type icons, owner avatars, tabular sizes, modified times, and per-row actions.

File Conflict Resolverapplication-pro-file-manager-file-conflict-resolverA sync conflict resolver with one card per file comparing the device copy against the cloud copy by radio choice, plus an apply summary bar.

File Detail Panelapplication-pro-file-manager-file-detail-panelFile inspector with a preview, ruled metadata rows, a shareable link chip, version count, and action buttons.

File Grid Galleryapplication-pro-file-manager-file-grid-galleryMedia grid of eight thumbnail tiles with type badges, filename captions, one selected tile, and a view toggle.

File Request Panelapplication-pro-file-manager-file-request-panelA two column file request workspace pairing a create form with title, folder, deadline, and notify switch beside an open requests list with progress.

File Search Resultsapplication-pro-file-manager-file-search-resultsA file search panel with a query field, removable filter chips, a result count, and rows with highlighted matches, paths, size, and dates.

File Version Historyapplication-pro-file-manager-file-version-historyA version history card with the current revision highlighted and earlier versions as ruled rows showing editor, note, size, restore, and download.

Folder Tree Navapplication-pro-file-manager-folder-tree-navRecursive folder tree sidebar with expand chevrons, item counts, one active node, and Trash and Shared rows.

Recent Files Listapplication-pro-file-manager-recent-files-listRecent files list grouped by Today and This week showing file type icon, name, folder path, last editor, and relative time.

Share Permissions Panelapplication-pro-file-manager-share-permissions-panelA file share panel with an invite by email row, a people with access list showing roles, general link access, and footer actions.

Shared Links Tableapplication-pro-file-manager-shared-links-tableA shared links table listing each file, link access badge, creator avatar, download count, and expiry, with per row copy and actions buttons.

Shared With Me Tableapplication-pro-file-manager-shared-with-me-tableShared files table showing owner avatar, shared date, and access level badge per file with an open affordance on each row.

Storage Cleanup Panelapplication-pro-file-manager-storage-cleanup-panelA storage cleanup panel with a reclaimable space summary, checkbox large files and duplicates sections, an old trash row, and a selection bar.

Storage Usage Cardapplication-pro-file-manager-storage-usage-cardStorage quota card showing 142 of 250 GB used with a type breakdown bar and a recoverable trash hint.

Sync Status Panelapplication-pro-file-manager-sync-status-panelA sync status panel with a linked devices list showing per device state, followed by a selective sync section with per folder toggle switches.

Trash Bin Tableapplication-pro-file-manager-trash-bin-tableTrash table listing deleted files with deleter, deletion time, days until permanent removal, and per-row restore and delete-forever actions.

Upload Dropzone Cardapplication-pro-file-manager-upload-dropzone-cardDashed dropzone with accepted types and a transfer list showing uploading, done, and failed states with errors.

Advanced Filter Builderapplication-pro-filters-and-search-advanced-filter-builderThree condition rows with AND OR logic and the live match count.

Applied Filters Summaryapplication-pro-filters-and-search-applied-filters-summaryActive filter summary bar that renders the current filter state as a plain sentence with removable tokens and a result count.

Column Filter Blueprintapplication-pro-filters-and-search-column-filter-blueprintStatic open state of a column header filter popover with a search box, checkbox value list with counts, and apply and clear controls.

Date Range Panelapplication-pro-filters-and-search-date-range-panelPresets beside a two month grid with a highlighted range and the timezone line.

Faceted Filter Barapplication-pro-filters-and-search-faceted-filter-barThree facet chips with removable tokens and the live count per change.

Filter Chips Rowapplication-pro-filters-and-search-filter-chips-rowRemovable filter chips above results with a live match count and a clear all control.

Filter Funnel Panelapplication-pro-filters-and-search-filter-funnel-panelA filter funnel showing active filters as ordered steps, each with a proportional bar and the results remaining, above a clear all footer.

Find In View Barapplication-pro-filters-and-search-find-in-view-barIn panel find bar over a log view with a query input, live match count, previous and next navigation, and case and whole word toggles.

Group By Selectorapplication-pro-filters-and-search-group-by-selectorGrouping control with dimension chips for Status, Assignee, and Priority that previews the resulting group headers with per-group counts and mini progress bars.

Grouped Results Blueprintapplication-pro-filters-and-search-grouped-results-blueprintGlobal search panel in its open state with a query input, results grouped into Projects, People, and Documents, and a keyboard hint footer.

Include Exclude Tagsapplication-pro-filters-and-search-include-exclude-tagsTri state tag filter where each tag cycles from neutral to required to excluded, a summary line, and a demo alert list that responds.

Multi Facet Panelapplication-pro-filters-and-search-multi-facet-panelFaceted filter sidebar with collapsible groups for Status, Owner, Label, and Date, with checkbox value lists and hit counts.

Multi Sort Builderapplication-pro-filters-and-search-multi-sort-builderOrdered sort rules with a field chip, a direction toggle, and remove controls, an add sort button, and a demo issue list that reorders live.

Query Language Barapplication-pro-filters-and-search-query-language-barPower-search bar with a structured query input, token-highlighted echo of parsed filters, a syntax reference panel, and a live result count.

Quick Filter Togglesapplication-pro-filters-and-search-quick-filter-togglesA rail of switch based quick filters above a task queue, a live result count with reset, the filtered list, and an inline empty row.

Range Filter Histogramapplication-pro-filters-and-search-range-filter-histogramA numeric range facet with a distribution histogram, a dual thumb slider, min and max readouts, quick range presets, and a live match count.

Recent And Saved Blueprintapplication-pro-filters-and-search-recent-and-saved-blueprintStatic open state of a search dropdown with recent queries, named saved searches, and a keyboard hint footer.

Results Density Toggleapplication-pro-filters-and-search-results-density-toggleView-controls toolbar with independent density and layout toggles wired to a demo list that visibly responds with changed padding and grid or list arrangement.

Saved Filter Pillsapplication-pro-filters-and-search-saved-filter-pillsNamed saved-search pills row with active state inversion, per-pill result counts, a star save affordance, and a pencil edit control.

Saved Searches Managerapplication-pro-filters-and-search-saved-searches-managerA saved searches panel listing each search with its query, visibility, owner, and last used time, plus default, edit, and delete row actions.

Saved Views Tabsapplication-pro-filters-and-search-saved-views-tabsNamed queries as tabs, the active view spelling out its query in plain text.

Scope Selector Barapplication-pro-filters-and-search-scope-selector-barSearch scope chip switcher showing result counts per scope alongside a query input that updates its placeholder to match the active scope.

Search Preview Paneapplication-pro-filters-and-search-search-preview-paneA master detail search view with a hit list beside a live preview pane that shows the selected result body with every query match highlighted.

Search Results Highlightsapplication-pro-filters-and-search-search-results-highlightsA search results list with matched query terms highlighted in every title and snippet, entity type tabs with counts, and per result meta lines.

Search With Recentapplication-pro-filters-and-search-search-with-recentSearch input with its suggestion panel open showing recent searches, suggested filter shortcuts, and a prefix tip.

Sort Density Toolbarapplication-pro-filters-and-search-sort-density-toolbarWorking sort and density controls wired to a demo table that responds.

Sort Menu Blueprintapplication-pro-filters-and-search-sort-menu-blueprintStatic open-state sort popover with four sort options, an active checkmark, and a Desc/Asc direction toggle rendered inline without a Radix portal.

View Changes Barapplication-pro-filters-and-search-view-changes-barA saved view change bar listing unsaved edits as rows with per row undo, the resulting query, and update, save as new, and discard actions.

Zero Results Panelapplication-pro-filters-and-search-zero-results-panelA zero results search state with the failed query, a spelling suggestion, the active filters that may hide matches, and tips for broadening.

Address Form Cardapplication-pro-forms-address-form-cardAddress form with country Select first, locale aware field order and labels, and an autofill correction tip.

API Token Create Formapplication-pro-forms-api-token-create-formAPI token form with scope checkboxes, an admin warning line, expiry select, and a shows once footer notice.

Bulk Import CSV Cardapplication-pro-forms-bulk-import-csv-cardDrop zone, column mapping with one flagged field, and the dry run promise.

Conditional Fields Formapplication-pro-forms-conditional-fields-formAlert rule form where a channel Select reveals dependent fields, with the email branch shown expanded.

Create Project Formapplication-pro-forms-create-project-formName with slug preview, the immutable region warning, framework tiles, visibility.

Cron Schedule Formapplication-pro-forms-cron-schedule-formRecurring schedule builder with a frequency select, day-of-week toggle chips, time and timezone selects, and a summary listing the next three runs.

Danger Zone Formapplication-pro-forms-danger-zone-formDestructive delete form with an itemized consequence list, two acknowledgment checkboxes, and a type-to-confirm input that gates the delete button.

Date Range Formapplication-pro-forms-date-range-formDate range input with preset chips, from and to fields, a resolved range summary, and a workspace timezone note.

Feedback Form Cardapplication-pro-forms-feedback-form-cardCompact feedback card with Bug, Idea, and Praise kind chips and honest routing copy in the footer.

File Field Formapplication-pro-forms-file-field-formForm with a dropzone stating accepted types and size limit, an uploaded file chip with remove, and an honest note about decoupled upload timing.

Inline Edit Formapplication-pro-forms-inline-edit-formProfile card where each row shows its saved value with an Edit action that swaps a single row into an input with Save and Cancel.

Inline Validation Fieldsapplication-pro-forms-inline-validation-fieldsForm showing all three live validation states side by side: a valid field with a checkmark, a checking field with a spinner, and an error field with a corrective message.

Managed Fields Formapplication-pro-forms-managed-fields-formA profile form where a policy banner explains directory sync, identity fields render locked with a synced marker, and other fields stay editable.

Multi Step Form Panelapplication-pro-forms-multi-step-form-panelThree step form shown mid flight at the Configuration step with autosave reassurance in the footer.

Notification Matrix Formapplication-pro-forms-notification-matrix-formNotification matrix with event rows crossed against email, push, and Slack checkbox columns, a locked security row, and an email frequency select.

Password Strength Formapplication-pro-forms-password-strength-formChange password card with current and new fields, a live requirement checklist, a four segment strength meter, a confirm field, and a footer action.

Payment Details Formapplication-pro-forms-payment-details-formCard payment form with number, expiry, CVC, postal code, a save card toggle, and a processor security note.

Query Builder Formapplication-pro-forms-query-builder-formA segment builder with a match mode select, condition rows pairing field, operator, and value controls, plus a live estimate of matching contacts.

Repeatable Rows Formapplication-pro-forms-repeatable-rows-formDynamic line-item form with editable description, quantity, and unit price columns, a remove button per row, an add row affordance, and a live running total.

Review and Submit Cardapplication-pro-forms-review-and-submit-cardMulti-section form summary with inline edit links per section, a terms acceptance checkbox, and a submit button that stays disabled until the user confirms.

Rich Text Formapplication-pro-forms-rich-text-formA compose form with a title field and an editor toolbar of formatting actions, a write and preview toggle, plus attach, mention, and publish controls.

Searchable Select Blueprintapplication-pro-forms-searchable-select-blueprintStatic open combobox blueprint with a search input, grouped options, one highlighted and one checked, and a create new row.

Settings Form Two Colapplication-pro-forms-settings-form-two-colTwo column settings form with label and helper text on the left and the field on the right, with a save bar.

Stepper Wizard Reviewapplication-pro-forms-stepper-wizard-reviewFinal review step of a multi-step wizard with a checked stepper, per-step value summaries with Edit links, and a confirm button.

Tag Input Formapplication-pro-forms-tag-input-formForm with a tag input showing existing chips, an inline suggestion list on partial match, a create new tag option, and a per-project tag limit note.

Threshold Slider Formapplication-pro-forms-threshold-slider-formAlert threshold form with paired warning and critical sliders, live readouts, a zone bar that redraws as thumbs move, and a duration select.

Unsaved Changes Formapplication-pro-forms-unsaved-changes-formA settings form in its dirty state with per field edited markers, revert actions, saved values, and a footer counting unsaved changes beside save.

Validation States Formapplication-pro-forms-validation-states-formBlueprint showing valid, invalid, and warning field states side by side with actionable error copy guidance.

View Only Formapplication-pro-forms-view-only-formRead only form state with a permission banner, every field disabled at its saved value, and a footer explaining why save is off.

Weekly Hours Formapplication-pro-forms-weekly-hours-formWeekly availability editor with one row per day, an on/off switch, from and to time selects for open days, and an apply-to-weekdays shortcut.

Article Readerapplication-pro-help-support-article-readerHelp article layout with a breadcrumb, sectioned body, a sticky table-of-contents rail, and a was-this-helpful feedback row.

Canned Responses Blueprintapplication-pro-help-support-canned-responses-blueprintStatic open-state blueprint of a saved replies picker beside a reply composer, with a searchable snippet list and one highlighted row ready to insert.

Community Q&A Threadapplication-pro-help-support-community-qa-threadA voted community question card with author meta and tags above an answers list, an accepted staff answer pinned first, and a reply footer.

Contact Support Panelapplication-pro-help-support-contact-support-panelSupport contact page with three channel cards and an email form that states the honest no priority queue policy.

Contextual Help Drawerapplication-pro-help-support-contextual-help-drawerA contextual help layout pairing a dimmed billing settings canvas with a docked help drawer of matched articles, a walkthrough card, and contact actions.

CSAT Survey Panelapplication-pro-help-support-csat-survey-panelPost resolution survey card with solved ticket context, a 1 to 5 rating scale, a what stood out checklist, comment field, and submit row.

Diagnostics Report Panelapplication-pro-help-support-diagnostics-report-panelA diagnostics report with a rerun action, automatic checks in pass, warn, and fail states, an environment rail, and copy or attach actions.

Faq Accordion Panelapplication-pro-help-support-faq-accordion-panelIn-app FAQ card with six common questions in an accordion, first item open, and a link to open a support ticket.

Getting Started Checklistapplication-pro-help-support-getting-started-checklistAn onboarding setup card with a completion count, a segmented progress bar, completed steps, an expanded current step with actions, and upcoming numbered steps.

Guided Troubleshooterapplication-pro-help-support-guided-troubleshooterA troubleshooting wizard with a progress bar, an answered steps summary, the current question as selectable option rows, and step actions.

Help Center Homeapplication-pro-help-support-help-center-homeHelp center landing with a search bar, six icon category tiles with article counts, and a popular articles list.

Help Search Resultsapplication-pro-help-support-help-search-resultsA help center search field and facet rail beside a results list of breadcrumbs, excerpts, and meta badges, with a support fallback strip.

Known Issues Boardapplication-pro-help-support-known-issues-boardA known issues board with a page header, status filter chips with counts, and a list of confirmed issues showing area, reports, and workarounds.

Product Glossaryapplication-pro-help-support-product-glossaryA glossary filter field, an A to Z index strip, and letter sections listing terms with definitions, area tags, and cross links.

Shortcuts Referenceapplication-pro-help-support-shortcuts-referenceA keyboard shortcuts panel with a platform toggle, a two column grid of categories pairing action labels with keycap combinations, and a customize footer.

SLA Response Matrixapplication-pro-help-support-sla-response-matrixA support SLA panel with a plan header, a severity by plan matrix of first response targets with your plan highlighted, and coverage notes.

Submit Request Formapplication-pro-help-support-submit-request-formA support ticket form with subject, area, severity, description, and attachments beside a rail of suggested articles and response time targets.

Ticket Detailapplication-pro-help-support-ticket-detailSupport ticket view with a header, customer and agent conversation thread, internal notes, and a reply composer.

Ticket Listapplication-pro-help-support-ticket-listAgent support queue showing ticket subject, requester avatar, status and priority badges, last update time, and assigned agent with a filter strip.

Ticket Status Trackerapplication-pro-help-support-ticket-status-trackerCustomer ticket page with a five stage progress timeline, latest agent update card, reply button, and a details rail with next update time.

Video Tutorials Libraryapplication-pro-help-support-video-tutorials-libraryA tutorials header with topic chips, a continue watching card with progress and an up next list, and a browse grid of video cards.

Attachment Galleryapplication-pro-inbox-email-attachment-galleryA mailbox files view with type filter chips, month grouped cards showing a file icon, sender, and size, plus a storage usage footer.

Bulk Actions Toolbarapplication-pro-inbox-email-bulk-actions-toolbarEmail list with a contextual toolbar showing Archive, Mark read, Label, Snooze, and Delete when messages are selected.

Compose Blueprintapplication-pro-inbox-email-compose-blueprintStatic blueprint of a bottom-right docked compose window with To, Cc, and Subject fields, a body area, formatting affordances, and a Send button with a keyboard shortcut hint.

Delivery Statusapplication-pro-inbox-email-delivery-statusSent message tracking pane with an engagement summary and recipient rows pairing each status badge with a last activity detail line.

Email Filters Rulesapplication-pro-inbox-email-email-filters-rulesEmail rules manager with ruled rows describing each rule in plain English, action badges, a toggle switch, and an add-rule affordance.

Email Listapplication-pro-inbox-email-email-listInbox message list with sender avatars, subjects, snippets, unread indicators, star toggles, and attachment markers per row.

Email Readerapplication-pro-inbox-email-email-readerFull message reading pane with sender row, body paragraphs, attachment chip, collapsed quoted reply, and reply or forward actions.

Inbox Sidebarapplication-pro-inbox-email-inbox-sidebarMail navigation sidebar with a Compose button, standard folders with unread counts, and a labeled section of color-coded labels with message counts.

Label Managerapplication-pro-inbox-email-label-managerLabel settings panel with a ruled table of color-swatched labels, message counts, rename and delete actions, an inline create row, and a drag-to-nest note.

Quick Reply Blueprintapplication-pro-inbox-email-quick-reply-blueprintStatic open-state blueprint of a compact inline reply composer with canned-reply chips and an edit-before-sending note.

Scheduled Send Queueapplication-pro-inbox-email-scheduled-send-queueAn outbox pane grouping queued messages by send window, each row showing recipient, subject, snippet, send time, and edit and send actions.

Search Resultsapplication-pro-inbox-email-search-resultsA mail search pane with a token filled search bar, folder scope chips, ruled result rows highlighting the matched term, and a result count footer.

Sender Profile Railapplication-pro-inbox-email-sender-profile-railContact detail rail beside an open message with an identity header, quick actions, relationship stats, recent conversations, and shared files.

Shared Inbox Triageapplication-pro-inbox-email-shared-inbox-triageA shared support mailbox with queue tabs, conversation rows showing customer, subject, and status, and an assignee chip or Assign action.

Signature Editorapplication-pro-inbox-email-signature-editorA left rail of saved signatures and default pickers beside a main pane with a formatting toolbar, source editor, and rendered message preview.

Snooze Email Blueprintapplication-pro-inbox-email-snooze-email-blueprintStatic open snooze popover beside a message row with four preset return times and a pick-a-date option.

Spam Quarantineapplication-pro-inbox-email-spam-quarantineA quarantine pane listing held messages with a monogram, sender, subject, a detection reason badge, an auto delete countdown, and per row actions.

Split Inboxapplication-pro-inbox-email-split-inboxSplit inbox pane that sorts mail into labeled sections, each with an unread count, a view all link, and compact sender rows.

Template Libraryapplication-pro-inbox-email-template-libraryCanned reply template library with category filter chips and a card grid showing each template name, body preview, slash shortcut, and usage count.

Thread Collapsedapplication-pro-inbox-email-thread-collapsedEmail thread view with earlier messages collapsed to one-line summaries and the latest message fully expanded with body, attachment chip, and a reply prompt.

Unsubscribe Managerapplication-pro-inbox-email-unsubscribe-managerRuled rows of low engagement senders, each with a monogram, address, weekly volume, last opened stat, and unsubscribe or keep actions.

Vacation Responderapplication-pro-inbox-email-vacation-responderAn out of office settings panel with a master switch, date range fields, subject and message inputs, audience checkboxes, and a save footer.

Api Explorer Panelapplication-pro-integrations-api-explorer-panelIn-app REST console with an endpoint row, editable query parameter rows, a Send button, and a response area showing a JSON snippet with a status badge and timing.

API Keys Panelapplication-pro-integrations-api-keys-panelA one time reveal banner for a freshly created key, then rows of active keys with environment, masked prefix, scopes, and revoke actions.

Api Usage Cardapplication-pro-integrations-api-usage-cardUsage against allowance, top endpoints, and the observed rate limit peak.

API Version Panelapplication-pro-integrations-api-version-panelA version summary card with an upgrade action above a list of date named API versions with status badges, change highlights, and sunset warnings.

Connected Accounts Listapplication-pro-integrations-connected-accounts-listOAuth accounts with scopes and the guard rail on the only sign in method.

Connected Services Statusapplication-pro-integrations-connected-services-statusProvider status board where each connected service shows live status, response time, and last incident, plus an impact note on the degraded provider.

Field Mapping Panelapplication-pro-integrations-field-mapping-panelSource CRM fields on the left mapped to destination fields on the right, with transform badges, one unmapped row flagged, and a save footer.

Github Repo Pickerapplication-pro-integrations-github-repo-pickerGitHub repo selection panel with a searchable repository list, per-repo checkboxes, private badges, a minimal-scope note, and a save action.

Incoming Webhook Setupapplication-pro-integrations-incoming-webhook-setupIncoming webhook setup panel with a generated endpoint URL, masked signing secret, accepted event types, and a JSON payload sample.

Integration Detail Panelapplication-pro-integrations-integration-detail-panelGitHub integration page with connected account, permissions list, configure rows, and disconnect consequence.

Integration Health Cardapplication-pro-integrations-integration-health-cardPer-integration health panel showing connected status, last sync time, sync frequency, error count, and a five-run sync history.

Integration Logs Tableapplication-pro-integrations-integration-logs-tableIntegration event log with timestamp, direction, event name, HTTP status badge, duration, and an expanded error detail row for failed events.

Integration Marketplaceapplication-pro-integrations-integration-marketplaceBrowseable integration directory with category chips, a search field, and six cards showing brand name, one-line description, Install or Installed state, and a verified trust line.

Integration Request Boardapplication-pro-integrations-integration-request-boardRequest board for missing integrations with a submission form, then top requested tools ranked by votes with upvote buttons and roadmap status badges.

Integration Setup Wizardapplication-pro-integrations-integration-setup-wizardA guided setup wizard with a vertical step rail beside a pane of sync direction cards, a conflict rule note, and Back and Continue actions.

Integrations Galleryapplication-pro-integrations-integrations-gallerySix integration tiles with category chips, Connected badges on active connections, and a support footer.

IP Allowlist Panelapplication-pro-integrations-ip-allowlist-panelAn allowlist panel with an enforcement badge, a current address warning, an add form, and rows of CIDR ranges with owners and last match times.

Oauth Consent Blueprintapplication-pro-integrations-oauth-consent-blueprintOAuth grant screen listing exact permissions granted and a cannot list, connecting as a named account, with Authorize and Cancel actions.

Oauth Scopes Reviewapplication-pro-integrations-oauth-scopes-reviewOAuth permissions audit panel listing each app scope with a plain-English description, risk level, and a per-scope revoke affordance.

Rate Limit Cardapplication-pro-integrations-rate-limit-cardAPI rate limit card showing current rpm usage against the plan cap with a progress bar, rolling window details, and the queue-not-drop policy.

SDK Quickstart Panelapplication-pro-integrations-sdk-quickstart-panelA quickstart panel with a language tab strip, three numbered steps for install, auth, and a first request with copyable code, and reference links.

Slack Connect Panelapplication-pro-integrations-slack-connect-panelSlack integration config panel showing the connected workspace, a channel selector, per-event notification toggles, a test-message affordance, and a disconnect section.

Sync Conflict Resolverapplication-pro-integrations-sync-conflict-resolverConflict queue where two systems changed one field, shown as side by side value panels with per side keep actions and a default rule note.

Sync Dry Run Previewapplication-pro-integrations-sync-dry-run-previewPre sync dry run report with create, update, skip, and conflict summary tiles, a sample of exact field changes, and a gated enable action.

Sync Status Panelapplication-pro-integrations-sync-status-panelIntegration sync health panel with per object type record counts, last success times, one error row with the exact message and retry countdown.

Webhook Settings Panelapplication-pro-integrations-webhook-settings-panelEndpoints with delivery status, the failing one shown as ops, not shame.

Webhook Test Consoleapplication-pro-integrations-webhook-test-consoleWebhook debugging surface with an event-type selector, a JSON sample payload, a send-test action, and a recent-deliveries strip with inline failure responses.

Blocked Cards Boardapplication-pro-kanban-boards-blocked-cards-boardKanban release board where blocked cards take a tinted border and Blocked chip, column headers count blockers, and the board totals every blocker.

Board Automation Panelapplication-pro-kanban-boards-board-automation-panelA board automation surface pairing a rules list with enable switches and run counts beside a When, If, Then rule editor and save actions.

Board Column Cardapplication-pro-kanban-boards-board-column-cardIsolated kanban column with header count, add affordance, and cards showing label, assignee, due date, and subtask progress.

Board Filters Barapplication-pro-kanban-boards-board-filters-barBoard toolbar with assignee avatar toggles, label chips, a group-by control, search, and a visible filtered card count.

Board Header Toolbarapplication-pro-kanban-boards-board-header-toolbarBoard name, Board and Table and Timeline view switcher, member avatar filters, an active filter badge, group-by selector, and a share button.

Board Template Pickerapplication-pro-kanban-boards-board-template-pickerBoard creation grid of workflow templates, each with a mini column mockup, a description, and a columns and automations meta line; one is selected.

Card Aging Boardapplication-pro-kanban-boards-card-aging-boardA kanban board where each card carries a days in column chip tiered fresh, aging, or stale, with stale cards flagged and a threshold legend.

Card Checklist Panelapplication-pro-kanban-boards-card-checklist-panelSubtask checklist inside an open kanban card with a progress bar, five items, two pre-checked, and an add-item affordance.

Card Composer Columnapplication-pro-kanban-boards-card-composer-columnKanban board with an open inline card composer in the first column, offering a title field, label, owner, due date, and estimate chips.

Card Detail Blueprintapplication-pro-kanban-boards-card-detail-blueprintStatic open-card panel over a scrim showing status, assignee, description, a checklist with progress, and comment count.

Collapsed Columns Boardapplication-pro-kanban-boards-collapsed-columns-boardA kanban board where quiet stages collapse into slim vertical rails showing name and count, while active stages stay expanded with cards.

Column Policy Boardapplication-pro-kanban-boards-column-policy-boardKanban board where every column carries a dashed entry policy panel listing the criteria a card must meet before it can move into that stage.

Drag State Boardapplication-pro-kanban-boards-drag-state-boardA kanban board frozen mid drag with a dashed pickup ghost, a tilted lifted card over an insertion indicator, and a move status line.

Kanban Boardapplication-pro-kanban-boards-kanban-boardFull four-column product board with issue cards showing label badges, assignee avatars, and muted Done column.

Swimlane Boardapplication-pro-kanban-boards-swimlane-boardKanban grid with two assignee lanes crossing three workflow columns and dashed empty-cell placeholders.

WIP Limit Boardapplication-pro-kanban-boards-wip-limit-boardA kanban board with per column work in progress limits, count against limit chips, an over limit column flagged, and story point totals per stage.

Format Settingsapplication-pro-localization-format-settingsFormat settings panel with date, time, week start, number, and currency Selects each showing a live preview value and an auto-detect from locale toggle.

Glossary Managerapplication-pro-localization-glossary-managerA master detail glossary pairing a term list with the selected term's definition, usage rules, banned variants, and approved translations per locale.

Language Switcher Blueprintapplication-pro-localization-language-switcher-blueprintStatic open language picker panel with 10 locales in their native scripts, the current selection checked, and partial coverage notes on two languages.

Locale Coverage Matrixapplication-pro-localization-locale-coverage-matrixCoverage grid crossing string namespaces with target locales, percent cells with banded square indicators, a totals row, and a legend.

Locale Fallback Chainapplication-pro-localization-locale-fallback-chainA locale fallback chain with an ordered resolution list, coverage bars, and role badges, plus a trace showing a key served by the next locale.

Locale Preview Cardapplication-pro-localization-locale-preview-cardSide-by-side locale comparison card showing how dates, numbers, currency, and a sample sentence render in English versus the selected target locale.

Pseudo Locale Testerapplication-pro-localization-pseudo-locale-testerA pseudo locale tester with a strategy switch and ruled rows pairing each English string with its accented render, growth percentage, and fit badge.

RTL Preview Panelapplication-pro-localization-rtl-preview-panelA right to left preview mocking a settings screen in English beside Arabic, plus a bidi checklist marking each check pass or issue.

String Editor Panelapplication-pro-localization-string-editor-panelSingle string translation editor with source text, placeholder chip, machine suggestion row, target textarea with counters, and queue navigation.

Translation Progress Cardapplication-pro-localization-translation-progress-cardTranslation progress panel listing each language with a percent complete bar, exact string counts, and a Live, Preview, or Draft status badge.

Translation Tableapplication-pro-localization-translation-tableTranslation string table with mono keys, source English, French target, and Translated, Fuzzy, and Missing status badges with a per-row edit action.

Address Cardapplication-pro-maps-location-address-cardSaved address card with a static map thumbnail, edit and copy actions, coordinate line, and a default-address toggle with an invoice caveat.

Distance Radius Cardapplication-pro-maps-location-distance-radius-cardStatic map blueprint with a dashed SVG radius circle, a stepped radius control, and a count of locations within the selected distance.

Geofence Zonesapplication-pro-maps-location-geofence-zonesStatic map blueprint with polygon and radius zones above ruled rows pairing each zone with its trigger rule, event count, and toggle.

IP Lookup Panelapplication-pro-maps-location-ip-lookup-panelA query field and lookup action above a result card that pairs resolved detail rows with a static map blueprint and a reputation footer strip.

Location Historyapplication-pro-maps-location-location-historyA visit timeline listing each place with arrival window, time spent, and travel between stops, beside a breadcrumb map and a totals strip.

Location Pickerapplication-pro-maps-location-location-pickerAddress search input with an open suggestion list and a static map preview blueprint showing the resolved pin and coordinates.

Location Sharing Settingsapplication-pro-maps-location-location-sharing-settingsA master sharing switch, a precision choice between precise and approximate, a list of people who can see you, and a history retention row.

Map With Pins Blueprintapplication-pro-maps-location-map-with-pins-blueprintStatic office locations map with an SVG grid surface, five absolutely-positioned pins, zoom controls, and a side list of pinned locations.

Region Selectorapplication-pro-maps-location-region-selectorData-residency region picker with latency indicators, compliance notes per region, and a footer stating region is set once at workspace creation.

Route Plannerapplication-pro-maps-location-route-plannerOrdered stop timeline with per leg distances and ETAs beside a static map tracing the route with numbered markers and a vehicle dot.

Territory Listapplication-pro-maps-location-territory-listSales territory table with static map thumbs, assigned rep avatars, account counts, and an assign affordance for unassigned rows.

Timezone Overlapapplication-pro-maps-location-timezone-overlapA teammate list showing avatar, city, and local time beside a 24 hour UTC strip of working hour cells, with a legend and best window footer.

Album Listapplication-pro-media-gallery-album-listCollection organizer listing albums with a cover thumbnail, item count, last updated date, and a create album affordance.

Asset Detail Panelapplication-pro-media-gallery-asset-detail-panelAsset inspector with a preview, ruled metadata rows for dimensions and usage, a copy URL chip, and replace, download, and delete actions.

Asset Version Historyapplication-pro-media-gallery-asset-version-historyA file version history with a header, then ruled rows per version showing a thumbnail, change note, uploader, timestamp, size, and restore action.

Bulk Media Actionsapplication-pro-media-gallery-bulk-media-actionsMedia bulk-ops toolbar showing selection count with Move, Tag, Download, and Delete actions and a clear-selection affordance.

Folder Breadcrumb Barapplication-pro-media-gallery-folder-breadcrumb-barMedia folder toolbar with a clickable path, grid and list view toggle, sort picker, and New Folder and Upload actions.

Image Crop Blueprintapplication-pro-media-gallery-image-crop-blueprintStatic crop tool blueprint with a Placeholder canvas, rule of thirds grid, corner handles, aspect ratio chips, and apply and cancel actions.

Lightbox Blueprintapplication-pro-media-gallery-lightbox-blueprintStatic open state lightbox with a centered image, prev and next controls, a caption strip, and a five thumbnail filmstrip.

Media Library Gridapplication-pro-media-gallery-media-library-gridAsset browser grid with filename, type badge, and size captions, plus a toolbar with search, filter, view toggle, and upload.

Media List Viewapplication-pro-media-gallery-media-list-viewA dense asset table with select checkboxes, a thumbnail and filename column, type badge, size, modified date, uploader avatar, and per row actions.

Storage Usage Panelapplication-pro-media-gallery-storage-usage-panelA storage quota panel with a used versus quota headline, a segmented usage bar by type, per type breakdown rows, and a trash reclaim row.

Upload Queue Panelapplication-pro-media-gallery-upload-queue-panelBatch upload tracker with per file progress bars, a cancel button, a completed row, and a failed row showing the size limit error.

Video Trim Blueprintapplication-pro-media-gallery-video-trim-blueprintA static video trim tool with a preview frame and timecode, a transport row, a filmstrip timeline with trim handles and playhead, and readout chips.

App Switcher Gridapplication-pro-navigation-app-switcher-gridStatic open product suite switcher panel with six app tiles, a current badge, and a manage apps footer row.

Breadcrumb Dropdown Blueprintapplication-pro-navigation-breadcrumb-dropdown-blueprintBreadcrumb bar with the middle segment expanded into a sibling-project switcher panel showing the current item checked.

Breadcrumbs With Actionsapplication-pro-navigation-breadcrumbs-with-actionsThe detail page header, breadcrumb trail, title, and right aligned actions.

Command Palette Openapplication-pro-navigation-command-palette-openStatic open command palette with grouped Pages, Actions with Kbd shortcuts, and People results with avatars.

Context Menu Blueprintapplication-pro-navigation-context-menu-blueprintStatic open-state context menu over a document row with grouped actions, keyboard hints, a submenu arrow on Move to, and Delete in muted weight.

Global Search Resultsapplication-pro-navigation-global-search-resultsFull in-app search results page with grouped Projects, People, and Files sections, counts, and a filter rail.

Help Menu Blueprintapplication-pro-navigation-help-menu-blueprintStatic open-state help menu with a docs search field, five action rows including keyboard shortcuts and a changelog unread dot, and a status footer.

Jump To Blueprintapplication-pro-navigation-jump-to-blueprintStatic open-state jump-to bar with a typed query, matching destinations grouped and one highlighted, and keyboard navigation hints in the footer.

Mega Menu Blueprintapplication-pro-navigation-mega-menu-blueprintStatic open mega-menu with three grouped link columns and a featured announcement panel, rendered without a Radix portal.

Page Outline Railapplication-pro-navigation-page-outline-railA sticky on this page outline rail listing document anchors along a guide line with the active section marked, beside doc content with a code sample.

Pagination Barapplication-pro-navigation-pagination-barTable footer pagination in two densities: a numbered bar with a row range and rows per page control, plus a compact prev and next variant.

Pinned Items Railapplication-pro-navigation-pinned-items-railIcon-only sidebar rail with a pinned shortcuts section above the main nav, inline tooltip labels, and an add-pin affordance.

Recent History Menu Blueprintapplication-pro-navigation-recent-history-menu-blueprintStatic open recents menu grouped into Today and Yesterday with item type chips, visit times, and a clear history action.

Record Pager Headerapplication-pro-navigation-record-pager-headerA record detail header with a back link, a prev and next position counter with keyboard hints, and a title row with a status badge and actions.

Secondary Settings Navapplication-pro-navigation-secondary-settings-navThe settings nav column with grouped links and the Danger zone last and muted.

Section Switcherapplication-pro-navigation-section-switcherPill-style segmented toggle for switching in-page views with a per-segment item count, shown in mailbox and calendar range examples.

Sidebar Footer Menu Openapplication-pro-navigation-sidebar-footer-menu-openStatic open user menu at the sidebar foot with profile, settings, theme toggle, command shortcut, and sign out.

Sidebar Nav Treeapplication-pro-navigation-sidebar-nav-treeAn expanded workspace sidebar with flat items, a Projects group opened to indented children along a guide line, and two collapsed groups with counts.

Sidebar Search Resultsapplication-pro-navigation-sidebar-search-resultsSidebar in its active filter state with the query filled, matching nav items highlighted and non-matches hidden, and a clear button to restore the full list.

Tab Bar Mobileapplication-pro-navigation-tab-bar-mobileMobile bottom tab bar with five thumb-sized tabs, one active indicator, and a notification badge rendered in a phone frame context strip.

Tab Navigation Panelapplication-pro-navigation-tab-navigation-panelUnderline tab row for within-page navigation with counts on two tabs and an active panel content area.

Topbar With Command Hintapplication-pro-navigation-topbar-with-command-hintPersistent app topbar with breadcrumb trail, centered search with Kbd hint, notifications, and avatar.

Workspace Switcher Openapplication-pro-navigation-workspace-switcher-openStatic open workspace switcher showing three workspaces with plan badges, member counts, and a create row.

Activity Digest Email Previewapplication-pro-notifications-activity-digest-email-previewIn-app framed preview of the daily activity digest email with grouped Mentions, Assignments, and Comments sections and a preference footer.

Alert Banner Stackapplication-pro-notifications-alert-banner-stackThree calm ops banners, maintenance, expiring card, and the resolved incident.

Banner With Actionsapplication-pro-notifications-banner-with-actionsPersistent workspace notice card with a titled message, consequence body, two action buttons, and a dismiss control.

Digest Settings Cardapplication-pro-notifications-digest-settings-cardActivity digest frequency picker with an include list and the note that digests pause while you are active.

Escalation Policy Cardapplication-pro-notifications-escalation-policy-cardAn escalation policy panel with a named header, a numbered timeline of timed steps naming recipients and channels, and footer behavior notes.

In App Message Cardapplication-pro-notifications-in-app-message-cardFeature announcement card with a badge, title, body, illustration slot, primary CTA, and a permanent dismiss action.

Inbox List Paneapplication-pro-notifications-inbox-list-paneThe full inbox grouped under Today and Earlier, read rows muted.

Mute Thread Rowapplication-pro-notifications-mute-thread-rowMuted threads manager listing silenced threads with their context, muted date, expiry or forever status, and a per row unmute action.

Notification Center Openapplication-pro-notifications-notification-center-openThe bell panel open, tabs, four notifications, one unread, mark all read.

Notification Empty Stateapplication-pro-notifications-notification-empty-stateNotifications inbox zero view with a today tally of cleared, snoozed, and archived counts plus a settings link.

Notification Grouping Listapplication-pro-notifications-notification-grouping-listInbox panel collapsing notifications by source with inline thread expansion and unread count badges.

Notification Rules Listapplication-pro-notifications-notification-rules-listAn ordered rules list where each row names a rule, shows its conditions as chips, points to delivery channels, and carries an enable switch.

Notification Settings Inlineapplication-pro-notifications-notification-settings-inlineFive notification type rows with email, push, and in-app channel switches grouped into Account and Workspace sections.

Priority Inbox Listapplication-pro-notifications-priority-inbox-listPriority sorted notification inbox with a Needs You section for mentions and assignments and a FYI section for everything else.

Push Preview Settingsapplication-pro-notifications-push-preview-settingsPush appearance settings beside a live lock screen mockup, three preview visibility options, sound and grouping switches, and a test push action.

Quiet Hours Scheduleapplication-pro-notifications-quiet-hours-scheduleA do not disturb panel with a master quiet hours switch, seven per day toggle rows, and a card of alerts that always break through.

Realtime Toast Blueprintapplication-pro-notifications-realtime-toast-blueprintStatic blueprint of a live comment toast with avatar, quoted body, view action, and an auto-dismiss timer track.

Snooze Options Blueprintapplication-pro-notifications-snooze-options-blueprintStatic blueprint of an open snooze menu with four preset options and resolved wall-clock times per option.

Subscription Preferencesapplication-pro-notifications-subscription-preferencesFollowed items panel listing subscribed projects, people, and labels as ruled rows with per-row unfollow actions.

Toast Stackapplication-pro-notifications-toast-stackThree transient toasts: a success, an undoable deletion with a timer track, and a loading export state.

Unread Digest Cardapplication-pro-notifications-unread-digest-cardWhile you were away, grouped counts since yesterday, paused when you are active.

Whats New Panelapplication-pro-notifications-whats-new-panelThe changelog panel, three dated releases badged, no marketing allowed in it.

Checklist Widgetapplication-pro-onboarding-checklist-widgetCorner card onboarding widget with a progress ring, five setup tasks, two complete, the next step highlighted, and an honest dismiss note.

Choose Plan Stepapplication-pro-onboarding-choose-plan-stepThree plan cards with real limits stated, Free preselected, and a no sales call promise for Team.

Connect Source Cardapplication-pro-onboarding-connect-source-cardFour source tiles including a no engineering CSV option and a read only credentials promise in the footer.

Connect Tools Stepapplication-pro-onboarding-connect-tools-stepOnboarding integrations step with Slack, GitHub, Calendar, and Drive tiles showing one pre-connected state.

Data Source Statusapplication-pro-onboarding-data-source-statusOnboarding panel showing three data source connection rows with connected, connecting, and failed states including an actionable error and continue-anyway link.

Feature Spotlight Blueprintapplication-pro-onboarding-feature-spotlight-blueprintStatic open-state coach-mark that highlights a new bulk-actions toolbar with a callout card, New badge, and a Got it dismiss button.

Finish Setup Cardapplication-pro-onboarding-finish-setup-cardSetup complete card with a personalized header, a three item onboarding recap, and a single suggested next action.

First Project Empty Stateapplication-pro-onboarding-first-project-empty-stateDay one empty dashboard with two create paths, a three step next preview, and a sample project offer.

Goal Selection Stepapplication-pro-onboarding-goal-selection-stepOnboarding step with four goal tiles that order the sidebar, one pre-selected, and a note that every feature stays available regardless of the choice.

Import Data Stepapplication-pro-onboarding-import-data-stepOnboarding import step with CSV dropzone, tool and API source tiles, a dry-run preview promise, and a skip link.

Install CLI Stepapplication-pro-onboarding-install-cli-stepA developer install step with per platform commands behind tabs, numbered login and test commands, and a live row waiting for the first event.

Invite Preview Cardapplication-pro-onboarding-invite-preview-cardShows the rendered invite email teammates will receive above an editable personal message field, with recipient chips and a send button.

Invite Team Panelapplication-pro-onboarding-invite-team-panelThree email and role rows with the retention stat that explains why the invite ask happens at onboarding.

Notification Defaults Stepapplication-pro-onboarding-notification-defaults-stepA notification setup step with four channel toggle rows, a recommended badge, an email digest chooser, and a note that defaults apply per user.

Product Tour Tooltipapplication-pro-onboarding-product-tour-tooltipInline product-tour step blueprint with a highlighted target, coach-mark card, step 2 of 5 badge, and progress dots.

Role Selection Stepapplication-pro-onboarding-role-selection-stepOnboarding role picker with three tiles showing what each role changes in the default layout, one selected.

Sample Data Bannerapplication-pro-onboarding-sample-data-bannerBanner notifying users they are viewing sample data, with connect and clear actions and demo KPI cards below.

Setup Progress Stepperapplication-pro-onboarding-setup-progress-stepperFour step horizontal stepper with dot states and an open invite panel under the current step.

Team Onboarding Trackerapplication-pro-onboarding-team-onboarding-trackerAn admin tracker with invited, finished, and stalled counts above per person rows showing avatar, setup progress, next step, and a nudge action.

Template Gallery Stepapplication-pro-onboarding-template-gallery-stepOnboarding step with six template cards showing what each pre-wires, a start-blank tile, and a search bar for fast workspace setup.

Welcome Checklistapplication-pro-onboarding-welcome-checklistSetup checklist with 5 tasks, time estimates, a progress bar, and a one time dismiss promise.

Welcome Modal Blueprintapplication-pro-onboarding-welcome-modal-blueprintStatic first-login welcome dialog over a scrim: greeting by name, three things to try, and start or tour actions.

Workspace Profile Stepapplication-pro-onboarding-workspace-profile-stepA workspace setup step with name, URL slug, logo upload, and data region on the left beside a live app chrome preview on the right.

Admin Pageapplication-pro-prebuilt-pages-admin-pageStaff admin console composing a sidebar shell, content moderation queue, and user admin table.

Analytics Pageapplication-pro-prebuilt-pages-analytics-pageAnalytics dashboard composing a sidebar shell, KPI row, revenue area chart, usage line chart, and users table.

Auth Flow Pageapplication-pro-prebuilt-pages-auth-flow-pageAuth sequence showcase composing the sign-in page and two-factor page stacked for end-to-end flow review.

Billing Pageapplication-pro-prebuilt-pages-billing-pageBilling page composing the settings shell, current plan usage, invoice history, and payment method panel.

Dashboard Pageapplication-pro-prebuilt-pages-dashboard-pageOverview dashboard composing the sidebar shell, KPI cards row, revenue area chart, and team activity feed.

Help Center Pageapplication-pro-prebuilt-pages-help-center-pageSelf-service help page composing a topbar shell, category search home, and FAQ accordion panel.

Inbox Pageapplication-pro-prebuilt-pages-inbox-pageThree-pane email inbox composing a folder sidebar, thread list, and message reader with reply controls.

Members Pageapplication-pro-prebuilt-pages-members-pageWorkspace members admin page composing the sidebar shell, users table, and member roles table.

Onboarding Pageapplication-pro-prebuilt-pages-onboarding-pageShellless new user activation flow composing a progress stepper, welcome checklist, and connect source card.

Project Detail Pageapplication-pro-prebuilt-pages-project-detail-pageFull project detail view composing a sidebar shell, KPI cards row, kanban board, and team activity feed.

Reports Pageapplication-pro-prebuilt-pages-reports-pageAnalytics page composing the sidebar shell, KPI cards, conversion funnel bars, usage line chart, and invoices table.

Settings Pageapplication-pro-prebuilt-pages-settings-pageFull settings page composing the settings shell, profile, security, API keys, and danger zone sections.

Addon Selectorapplication-pro-pricing-plans-addon-selectorRuled add-on rows for extra seats, priority support, and advanced security each with a toggle and a live running monthly total.

Billing Period Toggleapplication-pro-pricing-plans-billing-period-toggleBilling period switcher with monthly and yearly cards showing effective monthly price, a savings badge on yearly, and the selected state highlighted.

Feature Gate Cardapplication-pro-pricing-plans-feature-gate-cardLocked feature placeholder card naming the required plan, describing the feature, listing plan highlights, and offering an upgrade CTA or an ask your admin note.

Plan Comparison Tableapplication-pro-pricing-plans-plan-comparison-tableA dense feature matrix comparing Free, Team, and Business plans by category, with checks, values, a current plan badge, and per column actions.

Plan Downgrade Warningapplication-pro-pricing-plans-plan-downgrade-warningDowngrade confirmation panel listing features lost, named members made read-only, what is kept, and confirm or keep plan actions.

Plan Limits Overviewapplication-pro-pricing-plans-plan-limits-overviewCurrent plan usage meters for members, workspaces, events, and storage against Team limits, a near limit flag, and an upgrade prompt.

Plan Picker Cardsapplication-pro-pricing-plans-plan-picker-cardsIn-app upgrade surface with Free, Team, and Business plan cards, a monthly/yearly billing toggle, feature lists, and current plan indicator.

Seat Management Panelapplication-pro-pricing-plans-seat-management-panelPurchased seats with an occupancy meter, a breakdown of active members and pending invites, a seat stepper, and a live next invoice preview.

Trial Banner Cardapplication-pro-pricing-plans-trial-banner-cardTrial status card showing days remaining, what happens at expiry, an add payment method CTA, and an explicit no silent charge pledge.

Upgrade Proration Summaryapplication-pro-pricing-plans-upgrade-proration-summaryAn upgrade confirmation showing the plan change, prorated line items with credit, the amount due today, next renewal, and confirm actions.

Usage Tier Selectorapplication-pro-pricing-plans-usage-tier-selectorStepped chip selector for event volume tiers from 10k to 2 million per month with a live price summary and proration note.

Account Overview Cardapplication-pro-profile-account-account-overview-cardAccount home card showing plan, role, key dates, connected identity, and settings quick links.

Account Switcher Blueprintapplication-pro-profile-account-account-switcher-blueprintStatic open-state blueprint of an account switcher panel listing three accounts with the current one checked and an add-account row.

Activity Summary Cardapplication-pro-profile-account-activity-summary-cardActivity card with an inline SVG contribution heatmap, monthly event count, and three recent items.

Away Status Cardapplication-pro-profile-account-away-status-cardStatus setter card with four presence options, a custom message field, a clear-after duration picker, and a note on when Do Not Disturb actually silences alerts.

Change Password Cardapplication-pro-profile-account-change-password-cardA three field password form beside a live requirements checklist, a segmented strength meter, the last changed date, and a passkey suggestion.

Connected Identities Cardapplication-pro-profile-account-connected-identities-cardSign-in identities panel listing Google, GitHub, and SSO rows with connected dates, a primary badge, and a disconnect guard.

Danger Zone Cardapplication-pro-profile-account-danger-zone-cardRuled destructive rows for transfer, deactivate, and delete, each with its consequence, a sole owner guard, and an export reminder above.

Data Download Cardapplication-pro-profile-account-data-download-cardPersonal data export card listing exactly what is included, the zip plus JSON delivery format, a minutes-not-days timing promise, and a not-collected reassurance section.

Edit Profile Formapplication-pro-profile-account-edit-profile-formSettings form with avatar change, name and headline inputs, bio with char count, and a save bar.

Email Addresses Cardapplication-pro-profile-account-email-addresses-cardRuled rows for each account email with primary and verification badges, resend and remove actions, and an inline add address form below.

Login History Tableapplication-pro-profile-account-login-history-tableA sign-in audit table with timestamp, method, device, location, IP, and a result badge, plus a failed-attempt callout and a CSV export action.

Notification Badge Rowapplication-pro-profile-account-notification-badge-rowProfile notification summary strip with linked cards for Mentions, Assigned, and Reviews showing unread counts derived from a single array and a digest timing note.

Preferences Summaryapplication-pro-profile-account-preferences-summaryRead-only ruled summary of six personal settings including theme, language, timezone, and notification level with inline edit links.

Profile Completion Cardapplication-pro-profile-account-profile-completion-cardProfile setup progress card with a 70% bar, three remaining steps with quick-action buttons, and completed steps struck through.

Profile Headerapplication-pro-profile-account-profile-headerProfile header band with avatar, name, role, bio, fact chips, and Message and Edit profile actions.

Public Profile Cardapplication-pro-profile-account-public-profile-cardCompact profile card with avatar, name, headline, a three stat strip, and a Follow button.

Sessions List Cardapplication-pro-profile-account-sessions-list-cardActive sessions card listing every signed-in device with browser, location, last active time, per-row revoke, and a sign-out-everywhere action.

Two Factor Status Cardapplication-pro-profile-account-two-factor-status-cardTwo-factor authentication status panel showing the active method, backup codes remaining, and an enrollment prompt with the security case for new accounts.

Cohort Retention Gridapplication-pro-reports-cohort-retention-gridA retention heatmap with weekly signup cohorts as rows, weeks since signup as columns, shaded cells, a shade legend, and a methodology note.

Dashboard Grid Layoutapplication-pro-reports-dashboard-grid-layoutEditable dashboard canvas with a KPI tile, bar chart frame, plan revenue list, stat tile, and an add widget affordance.

Export Options Cardapplication-pro-reports-export-options-cardExport settings card with format radio rows, a current view versus all rows scope choice, a headers toggle, and a button that labels the exact row count and format.

Metric Detail Drilldownapplication-pro-reports-metric-detail-drilldownDrill-in view for a KPI click showing a headline metric, period context, and a segment breakdown table with share bars.

Report Annotations Panelapplication-pro-reports-report-annotations-panelAn annotated trend chart with numbered markers pinned to dates beside a side rail listing each annotation with author, date, note, and an add control.

Report Builderapplication-pro-reports-report-builderSelf-serve report panel with metric and dimension selects, a date-range chip, visualization toggle, and a live stub preview area.

Report Comparison Viewapplication-pro-reports-report-comparison-viewA period over period comparison with two period chips, a swap control, a metrics summary line, and a table of current, previous, and change values.

Report Filters Barapplication-pro-reports-report-filters-barReport filter strip with a removable date-range chip, three dimension selects, a compare to previous period toggle, and an apply button showing the live matching row count.

Report Run Historyapplication-pro-reports-report-run-historyA run history log with a summary strip above a table of runs showing status badges, start times, durations, row counts, and trigger sources.

Report Summary Headerapplication-pro-reports-report-summary-headerSaved report header showing the title, removable filter chips echoing active date range and dimensions, last-refreshed time, and export and share actions.

Saved Reports Listapplication-pro-reports-saved-reports-listTable of saved reports with creator, last run time, a schedule chip when scheduled, and per-row run, share, and options actions.

Scheduled Report Formapplication-pro-reports-scheduled-report-formForm to schedule a report delivery with frequency, run time, a tag-style recipient list, format radios, and a no-reply address notice.

Scheduled Reports Tableapplication-pro-reports-scheduled-reports-tableTable of workspace delivery schedules with recurrence, recipient avatar stacks, format badges, last sent times, and run or edit actions per row.

Api Keys Panelapplication-pro-settings-pages-api-keys-panelAPI keys list with prefix-masked values, environment badges, created and last used dates, and a Revoke action.

Appearance Settingsapplication-pro-settings-pages-appearance-settingsTheme tile selector, accent color swatches, interface density toggle, and a reduce-motion Switch for personal look-and-feel.

Audit Log Settingsapplication-pro-settings-pages-audit-log-settingsAudit log configuration with a retention period select, an admins-only access note, a CSV export with recent export history, and an immutability callout.

Billing Alerts Settingsapplication-pro-settings-pages-billing-alerts-settingsSpend alert switches at 80 and 100 percent of plan, a hard-cap option with stated consequence, and a recipient email field.

Branding Settingsapplication-pro-settings-pages-branding-settingsWorkspace branding panel with logo upload, accent color swatches, a subdomain field, and an honest note on where branding actually appears.

Connected Apps Settingsapplication-pro-settings-pages-connected-apps-settingsRuled list of OAuth apps with scope badges, connected date, authorizing member, and an instant Revoke action per row.

Danger Zone Cardapplication-pro-settings-pages-danger-zone-cardThree escalating workspace actions stating exactly what each destroys and what survives, with outline buttons.

Data Retention Settingsapplication-pro-settings-pages-data-retention-settingsPer-data-type retention period Selects with export and deletion consequence panels, a legal hold note, and a save bar.

Email Domain Settingsapplication-pro-settings-pages-email-domain-settingsSending domain panel with a monospace DNS record grid, per-record verified badges, a from-address field, and a deliverability fallback note for unverified domains.

Guest Access Settingsapplication-pro-settings-pages-guest-access-settingsA guest access panel with an allow guests switch, a permitted email domain list, default permission options, and an active guest count row.

Import Export Settingsapplication-pro-settings-pages-import-export-settingsData portability panel with an export card listing every included data type and an import dropzone with a dry-run promise before any write.

IP Allowlist Settingsapplication-pro-settings-pages-ip-allowlist-settingsAn IP allowlist panel with an enforcement switch, a list of CIDR ranges with owners and last match times, and an add range form.

Language Region Settingsapplication-pro-settings-pages-language-region-settingsLanguage and timezone selects with a live date and number format preview row and a first-day-of-week toggle.

Member Roles Tableapplication-pro-settings-pages-member-roles-tableSix permissions across three roles, with the honest custom roles roadmap note.

Notification Preferencesapplication-pro-settings-pages-notification-preferencesThe email and in app switch matrix with the billing row locked on, honestly.

Plan and Usage Settingsapplication-pro-settings-pages-plan-usage-settingsA plan and usage panel with a current plan row, metered usage bars with per limit notes, a near limit badge, and a policy note.

Profile Settingsapplication-pro-settings-pages-profile-settingsProfile panel with avatar upload, name and email inputs, a read-only timezone row, and a save bar.

SCIM Provisioning Settingsapplication-pro-settings-pages-scim-provisioning-settingsA SCIM provisioning panel with sync stats, the base URL and masked bearer token, an attribute mapping grid, and deprovisioning options.

Security Settingsapplication-pro-settings-pages-security-settingsSecurity panel with password row, two factor status, and a ruled active sessions list with per device revoke.

Session Timeout Settingsapplication-pro-settings-pages-session-timeout-settingsSession control panel with an idle timeout selector, a remember this device toggle, and a sign out all sessions action with its consequences listed.

Sso And Domain Settingsapplication-pro-settings-pages-sso-and-domain-settingsVerified domain, IdP metadata, and the enforce switch with its full consequence.

Team Settingsapplication-pro-settings-pages-team-settingsTeam identity panel with name and identifier fields, a default member role Select, who-can-invite radio rows, and a discoverable toggle with its privacy consequence spelled out.

Two Factor Settingsapplication-pro-settings-pages-two-factor-settings2FA settings panel with authenticator app, SMS fallback, and backup codes rows plus a workspace-wide require 2FA toggle.

Webhooks Settingsapplication-pro-settings-pages-webhooks-settingsWebhook endpoint list with mono URLs, event Badges, per-row delivery status, a masked signing secret with reveal and roll actions, and retry policy prose.

Workspace General Settingsapplication-pro-settings-pages-workspace-general-settingsWorkspace identity panel with name, slug, URL preview, rename warning, logo upload, and default role select.

Big Number Tilesapplication-pro-stat-cards-big-number-tilesFour oversized tiles for wallboards, deploys, incidents, latency, queue depth.

Bullet Chart Cardsapplication-pro-stat-cards-bullet-chart-cardsThree stat cards, each with a label, value, delta, and a bullet chart bar showing actual against qualitative bands and a target tick.

Comparison Stat Cardsapplication-pro-stat-cards-comparison-stat-cardsThree cards comparing This month and Last month side by side with a computed delta footer per metric.

Delta List Cardapplication-pro-stat-cards-delta-list-cardCompact card listing five metrics as ruled rows each with a tabular value and an up or down delta chip for a multi-metric movers panel.

Donut Stat Cardapplication-pro-stat-cards-donut-stat-cardStat card with an inline SVG donut showing a 2 to 3 part breakdown beside the headline number and a ruled legend, no chart library.

Forecast Stat Cardapplication-pro-stat-cards-forecast-stat-cardA forecast card with the month to date value, a cumulative line turning dashed past today, and a footer of close, target, and range.

Funnel Stat Cardapplication-pro-stat-cards-funnel-stat-cardAcquisition funnel card with four shrinking horizontal bars, step conversion percentages, and an end-to-end rate headline.

Goal Progress Cardsapplication-pro-stat-cards-goal-progress-cardsThree Q2 goal cards each with a progress bar, current vs target value, and a projected pace line.

Heatmap Stat Cardapplication-pro-stat-cards-heatmap-stat-cardActivity heatmap card with a CSS grid of cells shaded by foreground opacity across hours and days, no chart lib.

Kpi Cards Rowapplication-pro-stat-cards-kpi-cards-rowFour headline metrics with deltas and the context line that stops misreadings.

Live Counter Cardapplication-pro-stat-cards-live-counter-cardAn active user counter with a pulsing dot, a static sparkline, and an honest refresh cadence footnote.

Metric With Target Cardapplication-pro-stat-cards-metric-with-target-cardA single metric versus its target on a horizontal progress track with the gap and pace stated plainly.

Multi Metric Cardapplication-pro-stat-cards-multi-metric-cardOne card holding three related metrics in a row with vertical dividers, each showing a value, label, and small delta.

North Star Metric Cardapplication-pro-stat-cards-north-star-metric-cardOne hero metric with a sparkline and a versioned definition against drift.

Percentile Stat Cardapplication-pro-stat-cards-percentile-stat-cardA latency card with the p95 headline, a distribution track marking each percentile, and a ruled row per percentile with a magnitude bar and value.

Progress Ring Cardapplication-pro-stat-cards-progress-ring-cardStat card with a centered inline SVG progress ring showing a single percentage, a used of total sub-line, and a plan limit footer row.

Segmented Stat Cardapplication-pro-stat-cards-segmented-stat-cardA headline total with a stacked horizontal bar and legend showing the breakdown by source or category.

Sparkline Grid Cardapplication-pro-stat-cards-sparkline-grid-cardA card with a 2x2 grid of compact metrics each paired with an inline SVG sparkline, no chart library.

Stat With Breakdown Listapplication-pro-stat-cards-stat-with-breakdown-listOne wide card with a headline user count and a ruled breakdown list by plan with counts and share percentages.

Stats With Sparklinesapplication-pro-stat-cards-stats-with-sparklinesFour stat cards with decorative inline SVG sparklines showing value, delta, and trailing 7 week trend.

Status Tiles Rowapplication-pro-stat-cards-status-tiles-rowOps summary strip of four Badge-styled status tiles showing service counts for Operational, Degraded, Partial outage, and Maintenance.

Streak Cardapplication-pro-stat-cards-streak-cardA consistency card showing a current streak count, an inline SVG week-row of filled and empty day cells, and supporting stats.

Team Leaderboard Statsapplication-pro-stat-cards-team-leaderboard-statsFive teammates ranked by tickets closed, equal styling, a quality caveat footer.

Threshold Alert Cardapplication-pro-stat-cards-threshold-alert-cardA stat card in breach state showing a live metric against its configured threshold with a calm next-action line.

Trend Comparison Tilesapplication-pro-stat-cards-trend-comparison-tilesTwo side by side tiles comparing the same metric across two segments with values, deltas, and a summary read.

Waterfall Stat Cardapplication-pro-stat-cards-waterfall-stat-cardAn MRR movement card with a headline total, offset horizontal bars for each gain and loss, a color legend, and an axis note.

Component Status Listapplication-pro-status-health-component-status-listEditable internal status list with a per-row Select for Operational, Degraded, Partial outage, or Down and a publish to status page action.

Dependency Map Blueprintapplication-pro-status-health-dependency-map-blueprintStatic architecture health map with service nodes on an SVG grid, connecting lines, and a degraded dependency highlighted.

Error Budget Burndownapplication-pro-status-health-error-budget-burndownAn SLO panel with a header badge, a four stat budget and burn rate row, and a line chart tracking remaining budget against ideal burn.

Incident Bannerapplication-pro-status-health-incident-bannerSlim dismissible incident alert bar with the incident start time, a status page link, and a subscribe affordance.

Incident Timelineapplication-pro-status-health-incident-timelineIncident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.

Incident Update Composerapplication-pro-status-health-incident-update-composerAn incident update form with a header, a status phase radio group, a message field, component checkboxes, notification switches, and post actions.

Maintenance Window Cardapplication-pro-status-health-maintenance-window-cardScheduled maintenance notice showing the UTC window, timezone conversions, affected services, and a remind-me email affordance.

Past Incidents Listapplication-pro-status-health-past-incidents-listResolved incidents grouped by month with duration, impact summary, and a postmortem link per row.

Regional Status Matrixapplication-pro-status-health-regional-status-matrixA table matrix with services as rows and four regions as columns, each cell showing a status dot and latency, with a legend below.

Service Health Tableapplication-pro-status-health-service-health-tableInternal ops table listing services with status badges, p95 latency, error rate, last incident time, and the on-call engineer avatar.

Sla Summary Cardapplication-pro-status-health-sla-summary-cardSLA card showing the uptime target, actual this period, error budget bar, and the last published breach record.

Status Pageapplication-pro-status-health-status-pagePublic status page with an overall operational banner, per-service uptime badges, 90-day tick strips, and a subscribe affordance.

Synthetic Checks Panelapplication-pro-status-health-synthetic-checks-panelA panel listing probe rows, each with a status dot, check name and target, type badge, region, interval, median latency, and a run result strip.

Uptime Gridapplication-pro-status-health-uptime-grid30-day per-service reliability grid with each cell shaded by status using foreground opacity tokens and a per-row uptime figure.

Assigned To Me Listapplication-pro-tasks-todos-assigned-to-me-listPersonal task queue grouped by Overdue, Today, and This week, each row showing a project badge, checkbox, and due date.

Assignee Workloadapplication-pro-tasks-todos-assignee-workloadA team workload panel with one row per teammate showing avatar, open task count, a capacity bar, scheduled hours, and a load badge.

Blocked Tasks Panelapplication-pro-tasks-todos-blocked-tasks-panelA blocked tasks panel where each row shows a waiting task with priority and due date, then an indented blocker line and a ready action.

Checklist Cardapplication-pro-tasks-todos-checklist-cardCompact checklist card with six items, a Progress bar at 3 of 6, and a note that checklists do not block task completion.

Completed Logapplication-pro-tasks-todos-completed-logA completed tasks log grouped by day, each row with a check icon, title, project badge, completer avatar, and time, beside a weekly bar strip.

My Day Panelapplication-pro-tasks-todos-my-day-panelPersonal daily plan card grouped into Morning, Afternoon, and No time sections with time chips and a free gap callout.

Priority Matrixapplication-pro-tasks-todos-priority-matrixEisenhower-style 2x2 grid with task chips in each urgency and importance quadrant, per-quadrant counts, and a note that Do Now should be the emptiest column.

Recurring Task Rowapplication-pro-tasks-todos-recurring-task-rowRecurring task list showing each rule summary badge, the next three occurrence dates, and a note that past occurrences are never retroactively changed.

Subtask Treeapplication-pro-tasks-todos-subtask-treeNested subtask view with two levels of indented checkboxes, expand chevrons on parent nodes, and a progress bar that rolls up only leaf-node completion.

Task Board Compactapplication-pro-tasks-todos-task-board-compactDense three column task board with one line cards showing a checkbox dot, truncated title, and assignee avatar for sidebar or split pane use.

Task Comments Panelapplication-pro-tasks-todos-task-comments-panelTask discussion thread with avatar bubbles, timestamps, emoji reactions, an inline status-change event, and a composer with mention and task-link hints.

Task Detail Blueprintapplication-pro-tasks-todos-task-detail-blueprintStatic blueprint of an open task detail panel with meta rows, a subtask checklist with Progress, an activity strip, and a comment composer.

Task Filters Barapplication-pro-tasks-todos-task-filters-barInteractive filter toolbar with assignee, status, priority, and due chips, active-filter tokens, a saved-view dropdown, and a live task count.

Task Listapplication-pro-tasks-todos-task-listRuled task list with label badges, assignee avatars, due dates, a done count header, and muted overdue signaling.

Task Quick Addapplication-pro-tasks-todos-task-quick-addQuick add composer with a highlighted capture line, a parsed chip row for due date, project, priority, and assignee, and a keyboard hint footer.

Domain Verification Cardapplication-pro-teams-orgs-domain-verification-cardA verified domains card showing each domain's auto join behavior and member count, with a pending domain that expands into a DNS record panel.

Guest Access Panelapplication-pro-teams-orgs-guest-access-panelA guest access panel listing external collaborators with avatar and email, the projects they can reach, an expiry date, and convert or remove actions.

Invite Members Formapplication-pro-teams-orgs-invite-members-formBulk invite form with a tag email input, role select, optional message, and seat consequence note before sending.

Member Offboarding Panelapplication-pro-teams-orgs-member-offboarding-panelA member offboarding card with the departing member, a transfer ownership selector, a checklist of owned items to reassign, and a deactivate action.

Membership Activity Logapplication-pro-teams-orgs-membership-activity-logA day grouped membership timeline of joins, role changes, invites, and removals, each with an event icon, actor avatar, detail line, and timestamp.

Org Chartapplication-pro-teams-orgs-org-chartAn org chart showing two levels of the Engineering hierarchy with avatar cards and border connectors, no chart library required.

Pending Invites Listapplication-pro-teams-orgs-pending-invites-listTable of outstanding invites with email, role, sent date, sender avatar, days until expiry, and per row resend and revoke actions.

Permissions Matrixapplication-pro-teams-orgs-permissions-matrixRole permissions table with Check and Minus cells across Viewer, Member, Admin, and Owner columns and the current role highlighted.

Role Assignment Panelapplication-pro-teams-orgs-role-assignment-panelA panel for editing a workspace member role with a role selector listing permission descriptions, a scope list, and an effective immediately callout.

Seat Allocation Cardapplication-pro-teams-orgs-seat-allocation-cardSeat usage panel showing total, used, and free seats with a per-team breakdown and an honest end-of-cycle removal note.

Team Detail Cardapplication-pro-teams-orgs-team-detail-cardA team profile card with purpose statement, lead avatar, member avatar stack with overflow count, quick links, and a join request action.

Team Directoryapplication-pro-teams-orgs-team-directoryA searchable grid of member cards with avatar, role, team badge, and online status dot for finding people across the workspace.

Team Switcher Blueprintapplication-pro-teams-orgs-team-switcher-blueprintA static open state blueprint of a team switcher panel listing four teams with role and member count, rendered as plain markup for stable preview screenshots.

Changelog Feedapplication-pro-timeline-roadmap-changelog-feedA vertical changelog timeline grouped by month, each entry showing a type badge, a title, a summary line, and the date with affected area.

Dependency Listapplication-pro-timeline-roadmap-dependency-listRoadmap item dependency panel with blocked-by and blocking sections, each row showing status and an inline blocking note.

Gantt Rowsapplication-pro-timeline-roadmap-gantt-rowsCSS-grid Gantt chart with a task-name column, week-column timeline, positioned duration bars with in-progress fills, and a today line.

Launch Planapplication-pro-timeline-roadmap-launch-planA launch countdown with a summary header and a two column grid of T minus phases, each a checklist of tasks with owners and states.

Milestone Trackerapplication-pro-timeline-roadmap-milestone-trackerVertical stepper of four milestones with done, in-progress, and upcoming status, owner avatars, target dates, and progress bars.

Now Next Laterapplication-pro-timeline-roadmap-now-next-laterCompact roadmap list with three sections each showing initiative rows with a confidence chip and an honest status note per item.

Plan Vs Actualapplication-pro-timeline-roadmap-plan-vs-actualTwin planned and actual bars for each initiative on a shared six month grid, each with a slip badge, above on time and late totals.

Quarter Plannerapplication-pro-timeline-roadmap-quarter-plannerQ3 roadmap grid with CSS span bars, capacity hints, and status badges for 8 initiatives across 5 teams.

Release Timelineapplication-pro-timeline-roadmap-release-timelineHorizontal release rail showing shipped, current, and upcoming version markers each with a date and a one-line scope note.

Roadmap Boardapplication-pro-timeline-roadmap-roadmap-boardProduct roadmap board with Now, Next, and Later columns showing initiative cards with team badges, quarter chips, and progress bars.

Sprint Timelineapplication-pro-timeline-roadmap-sprint-timelineSprint at-a-glance panel with a capacity versus committed summary, a ten-day CSS-grid task board, and a today line across all rows.

Theme Lanesapplication-pro-timeline-roadmap-theme-lanesThree strategic themes as stacked lanes, each with an owner, a progress bar, and initiative rows carrying a status dot, quarter chip, and note.

Approval Queueapplication-pro-workflow-automation-approval-queueA human approval queue where each card names the automation, the action awaiting sign off, context chips, the requester, and approve or decline actions.

Automation Builderapplication-pro-workflow-automation-automation-builderVertical trigger, filter, and action step editor with dashed connectors, a Draft badge, and Save automation for a single linear flow.

Automation Error Cardapplication-pro-workflow-automation-automation-error-cardFailed automation card with the error in plain words, a retry meter showing attempts used and remaining, and a payload replay affordance.

Automation Templates Gridapplication-pro-workflow-automation-automation-templates-gridTemplate gallery with six categorised automation cards, use counts, a search field, and a start-from-scratch tile.

Automation Usage Statsapplication-pro-workflow-automation-automation-usage-statsAn automation analytics panel with four stat tiles for runs, success rate, time saved, and active count above a runs per day bar chart.

Condition Branch Cardapplication-pro-workflow-automation-condition-branch-cardBranch decision panel with an If row of field, operator, and value chips, Then and Else path summaries, and an add condition affordance.

Connection Health Panelapplication-pro-workflow-automation-connection-health-panelA connected apps panel where each row shows the account, a status badge, dependent automation count, and a reconnect action for broken connections.

Run Detail Panelapplication-pro-workflow-automation-run-detail-panelAutomation run debugger showing the run header, a per step status list, and the input and output of the failed step expanded.

Run History Tableapplication-pro-workflow-automation-run-history-tableAutomation execution log with timestamp, automation name, status badge, duration, items affected, and inline error text on failed rows.

Schedule Trigger Panelapplication-pro-workflow-automation-schedule-trigger-panelA schedule trigger configuration card with frequency chips, day of week toggles, time and timezone rows, and a preview of the next queued runs.

Trigger Action Rowapplication-pro-workflow-automation-trigger-action-rowAutomations index with ruled rows summarising each automation as trigger to action text, a live Switch, last run time, and run count.

Workflow Canvas Blueprintapplication-pro-workflow-automation-workflow-canvas-blueprintStatic node-graph canvas with four positioned cards connected by dashed SVG lines, parallel branches, a merge node, and a zoom toolbar.

Email OTP Resetapplication-reset-password-email-otp-resetA 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.

Security Question Resetapplication-reset-password-security-question-resetA reset password form that verifies identity with a saved security question and answer before allowing a new password. Use as a passwordless recovery path.

Simple Resetapplication-reset-password-simple-resetA 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.

Token Resetapplication-reset-password-token-resetA 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.

Billingapplication-user-profiles-billingA profile billing view with current plan, payment method, invoice history, and an upgrade prompt. Use it where members manage subscriptions and receipts.

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

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

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

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

Security Logsapplication-user-profiles-security-logsA profile security view showing recent sign ins, devices, locations, and times. Use it so members can spot odd activity and protect their account.

Simpleapplication-user-profiles-simpleA 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.

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

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

With Statsapplication-user-profiles-with-statsA profile header paired with metrics like followers, posts, and reputation. Use it on social or community pages to show a member at a glance.

Border Fade Accordioncomponents-accordions-border-fade-accordionAn accordion where each item border softly fades on open. Adds a quiet visual cue for active panels in FAQs and settings without loud styling.

Card Accordioncomponents-accordions-card-accordionAn accordion built from separated cards, each panel raised on its own surface. Good for FAQs or feature details that need clear visual separation.

Dash Line Accordioncomponents-accordions-dash-line-accordionAn accordion divided by dashed lines between items. The light dashed rhythm keeps long FAQ lists readable while staying subtle and unobtrusive.

Dotted Border Accordioncomponents-accordions-dotted-border-accordionAn accordion framed by a dotted border around each panel. The playful dotted outline suits informal FAQs, help docs, and friendly onboarding tips.

Double Border Accordioncomponents-accordions-double-border-accordionAn accordion with a double line framing every item. The layered borders add clear structure for FAQs and specs where rows need firm definition.

Fade In Content Accordioncomponents-accordions-fade-in-content-accordionAn 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.

Floating Label Accordioncomponents-accordions-floating-label-accordionAn accordion where the question label lifts up as the panel opens. The floating title keeps context visible while reading through long FAQ answers.

Glow Border Accordioncomponents-accordions-glow-border-accordionAn 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.

Highlight Active Accordioncomponents-accordions-highlight-active-accordionAn accordion that tints the background of the open item. The highlighted row keeps your place in long FAQ lists and dense product documentation.

Minimal Line Accordioncomponents-accordions-minimal-line-accordionAn accordion with thin divider lines and no boxes at all. The stripped back style fits clean FAQs, sidebars, and content heavy marketing pages.

Nested Border Accordioncomponents-accordions-nested-border-accordionAn accordion supporting nested items inside bordered panels. Use it for layered FAQs, docs, and settings where topics branch into subtopics.

Numbered Accordioncomponents-accordions-numbered-accordionAn accordion with a number beside every question. The counted order suits step guides, ranked FAQs, and any sequence readers follow in turn.

Shadow Reveal Accordioncomponents-accordions-shadow-reveal-accordionAn accordion that lifts each item with a soft shadow on open. The raised panel clearly signals the active answer in FAQs and feature breakdowns.

Stepped Accordioncomponents-accordions-stepped-accordionAn accordion styled as numbered steps with connecting markers. Ideal for setup flows, tutorials, and any process that readers complete in order.

Thick Side Border Accordioncomponents-accordions-thick-side-border-accordionAn 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.

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

Accent Border Alertscomponents-alerts-accent-border-alertsAlerts 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.

All Sides Accent Alertscomponents-alerts-all-sides-accent-alertsAlerts 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.

Basic Alertscomponents-alerts-basic-alertsPlain alerts with an icon, title, and message in a soft container. Use for everyday notices like saved changes, confirmations, and short tips.

Bottom Accent Alertscomponents-alerts-bottom-accent-alertsAlerts 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.

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

Dashed Border Alertscomponents-alerts-dashed-border-alertsAlerts outlined with a dashed border for a lighter, sketch like feel. Use for draft notices, placeholders, or optional tips in a quiet tone.

Dismissible Alertscomponents-alerts-dismissible-alertsAlerts with a close button so users can clear a notice once read. Use for cookie banners, promotions, and warnings that should not stay forever.

Dotted Border Alertscomponents-alerts-dotted-border-alertsAlerts wrapped in a dotted border for a soft, playful outline. Use for casual reminders, tips, or low priority notes in friendly interfaces.

Double Border Alertscomponents-alerts-double-border-alertsAlerts with a layered double border for a refined, framed look. Use to highlight important notices that deserve extra visual weight on a page.

Elevated Alertscomponents-alerts-elevated-alertsAlerts raised with a soft shadow so they lift off the surface. Use for floating notifications or messages that should feel above the content.

Frosted Glass Alertscomponents-alerts-frosted-glass-alertsAlerts with a blurred, translucent backdrop that reveals content behind. Use over images or hero sections where a glassy notice fits the design.

Glow Border Alertscomponents-alerts-glow-border-alertsAlerts ringed by a soft glowing border that draws the eye gently. Use for promotions or new feature notices that need a warm, inviting accent.

Icon Only Alertscomponents-alerts-icon-only-alertsCompact 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.

Inset Alertscomponents-alerts-inset-alertsAlerts with an inset shadow that sinks slightly into the surface. Use for grouped notices inside cards or panels that feel part of the layout.

Monospace Alertscomponents-alerts-monospace-alertsAlerts set in a monospace typeface for a technical, code style tone. Use for build output, terminal messages, or warnings aimed at developers.

Outlined Alertscomponents-alerts-outlined-alertsAlerts 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.

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

Pulse Border Alertscomponents-alerts-pulse-border-alertsAlerts with a border that gently pulses to catch attention over time. Use for live updates, countdowns, or urgent notices that should not be missed.

Right Accent Alertscomponents-alerts-right-accent-alertsAlerts 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.

Top Accent Alertscomponents-alerts-top-accent-alertsAlerts 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.

3D Badgecomponents-badges-3d-badgeA 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.

Bounce Badgecomponents-badges-bounce-badgeA 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.

Dot Indicator Badgecomponents-badges-dot-indicator-badgeA 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.

Elevated Badgecomponents-badges-elevated-badgeA 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.

Extra Large Badgecomponents-badges-extra-large-badgeAn 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.

Gradient Border Badgecomponents-badges-gradient-border-badgeA 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.

Hover Scale Badgecomponents-badges-hover-scale-badgeA 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.

Icon Badgecomponents-badges-icon-badgeA 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.

Large Badgecomponents-badges-large-badgeA roomy badge with extra padding and larger text for clear reading. Use it to highlight a plan tier, count, or status across busy interfaces.

Pulse Badgecomponents-badges-pulse-badgeA 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.

Ribbon Badgecomponents-badges-ribbon-badgeA 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.

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

Background Breadcrumbcomponents-breadcrumbs-background-breadcrumbA breadcrumb trail wrapped in a soft tinted background bar. Anchors the top of a page and keeps navigation links readable above busy content.

Bordered Breadcrumbcomponents-breadcrumbs-bordered-breadcrumbA breadcrumb sitting inside a thin outlined container. Frames the navigation path cleanly on a dashboard header or any content section toolbar.

Card Breadcrumbcomponents-breadcrumbs-card-breadcrumbA breadcrumb housed in a rounded card with a subtle shadow. Lifts the navigation path off the page for detail views and account settings screens.

Compact Breadcrumbcomponents-breadcrumbs-compact-breadcrumbA tight breadcrumb with reduced spacing between its links. Fits crowded toolbars and mobile headers where horizontal room is in short supply.

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

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

Numbered Breadcrumbcomponents-breadcrumbs-numbered-breadcrumbA breadcrumb that numbers each step in the path. Clarifies order for sequential flows such as checkout, onboarding, or a multi step setup wizard.

Pill Breadcrumbcomponents-breadcrumbs-pill-breadcrumbA breadcrumb where each link sits inside a rounded pill shape. Adds a friendly, tappable feel to navigation on dashboards and profile pages.

Progress Breadcrumbcomponents-breadcrumbs-progress-breadcrumbA breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.

Slash Breadcrumbcomponents-breadcrumbs-slash-breadcrumbA breadcrumb that divides its links with a forward slash. Mirrors a file path style for code tools, documentation, and folder browsing screens.

Sticky Breadcrumbcomponents-breadcrumbs-sticky-breadcrumbA 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.

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

Border Animation Buttonscomponents-buttons-border-animation-buttonsButtons with borders that animate and trace around the edge on hover. Draw attention to a primary action without changing the button fill at rest.

Cut Corners Buttonscomponents-buttons-cut-corners-buttonsButtons with angled, clipped corners for a sharp geometric look. Fits gaming, tech, or editorial interfaces that want an edgy call to action.

Extra Large Buttonscomponents-buttons-extra-large-buttonsOversized buttons with generous padding and large type. Use them as the main hero call to action where one tap should be impossible to miss.

Extra Small Buttonscomponents-buttons-extra-small-buttonsCompact, low height buttons with tight padding and small type. Ideal for dense toolbars, table rows, and inline controls where space is limited.

Grow Buttonscomponents-buttons-grow-buttonsButtons that scale up smoothly on hover to feel responsive. Add a touch of motion feedback to cards, pricing tiers, and primary form actions.

Interactive Buttonscomponents-buttons-interactive-buttonsButtons that react to hover and click with motion and state changes. Make signups, downloads, and key actions feel alive and worth clicking.

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

Morphing Buttonscomponents-buttons-morphing-buttonsButtons that morph their shape, size, or label between states. Use for loading, success, and submit flows that confirm progress to the user.

Pixel Buttonscomponents-buttons-pixel-buttonsButtons with a blocky pixel art finish and retro styling. Perfect for games, indie projects, and brands that lean on a nostalgic visual theme.

Pulse Buttonscomponents-buttons-pulse-buttonsButtons 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.

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

Shadow Buttonscomponents-buttons-shadow-buttonsButtons with layered shadows that lift or shift on hover. Give actions a tactile, raised feel across cards, forms, and toolbars in any layout.

Skew Buttonscomponents-buttons-skew-buttonsButtons with a skewed, slanted shape for a sense of dynamic energy. Suits sports, fitness, and bold marketing pages that want forward momentum.

Slide Buttonscomponents-buttons-slide-buttonsButtons 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.

Social Buttonscomponents-buttons-social-buttonsButtons branded for Google, GitHub, Apple, and more providers. Drop them into sign in and sign up screens for fast one click authentication.

Squeeze Buttonscomponents-buttons-squeeze-buttonsButtons that squeeze inward on press for satisfying tactile feedback. Use on mobile flows and forms where every tap should feel confirmed fast.

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

Border Accent Cardcomponents-cards-border-accent-cardA 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.

Border Animation Cardcomponents-cards-border-animation-cardA 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.

Border Gradient Animation Cardcomponents-cards-border-gradient-animation-cardA 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.

Border Highlight Cardcomponents-cards-border-highlight-cardA 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.

Corner Ribbon Cardcomponents-cards-corner-ribbon-cardA 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.

Cutout Border Cardcomponents-cards-cutout-border-cardA 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.

Dashed Border Cardcomponents-cards-dashed-border-cardA 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.

Double Border Cardcomponents-cards-double-border-cardA card wrapped in two stacked outlines for a framed, formal look. Use it for certificates, awards, or quotes that deserve emphasis on the page.

Expandable Cardcomponents-cards-expandable-cardA 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.

Gradient Border Cardcomponents-cards-gradient-border-cardA 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.

Hover Effect Cardcomponents-cards-hover-effect-cardA 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.

Hover Reveal Cardcomponents-cards-hover-reveal-cardA 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.

Icon Cardcomponents-cards-icon-cardA 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.

Magnetic Cardcomponents-cards-magnetic-cardA 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.

Neon Border Cardcomponents-cards-neon-border-cardA 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.

Perspective Hover Cardcomponents-cards-perspective-hover-cardA 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.

Progress Cardcomponents-cards-progress-cardA 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.

Pulse Border Cardcomponents-cards-pulse-border-cardA 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.

Shimmer Effect Cardcomponents-cards-shimmer-effect-cardA 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.

Stacked Cardcomponents-cards-stacked-cardA 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.

Status Cardcomponents-cards-status-cardA 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.

Tilt Effect Cardcomponents-cards-tilt-effect-cardA card that tilts under the cursor to follow its position closely. Use it for interactive feature tiles or showcases where slight motion adds polish.

Card Collapsiblecomponents-collapsible-card-collapsibleA 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.

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

Icon Collapsiblecomponents-collapsible-icon-collapsibleA 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.

Shadowed Collapsiblecomponents-collapsible-shadowed-collapsibleA 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.

Side Bordered Collapsiblecomponents-collapsible-side-bordered-collapsibleA 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.

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

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

Card Paginationcomponents-pagination-card-paginationPagination wrapped in a raised card surface with page numbers and prev next controls. Groups navigation neatly below a list or grid of cards.

Compact Paginationcomponents-pagination-compact-paginationA 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.

Dot Indicator Paginationcomponents-pagination-dot-indicator-paginationPagination shown as a row of dots, with the active page filled. Ideal for image carousels, onboarding steps, and short sequences where numbers feel heavy.

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

Icon Only Paginationcomponents-pagination-icon-only-paginationPagination built from chevron icons for previous and next, with no page numbers. Keeps mobile toolbars and image viewers clean when only direction matters.

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

Responsive Paginationcomponents-pagination-responsive-paginationPagination that shows full page numbers on desktop and collapses to arrows on mobile. Keeps navigation usable across phones, tablets, and wide screens.

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

Shadow Paginationcomponents-pagination-shadow-paginationPagination with subtle drop shadows on each button for depth. The lifted look helps the controls stand out over busy backgrounds and image grids.

Split Paginationcomponents-pagination-split-paginationPagination with prev and next pushed to opposite edges and page numbers centered. Spreads controls across wide footers and full width content areas.

Card Tabscomponents-tabs-card-tabsTabs styled as raised cards, where the active panel lifts above the rest. Great for settings pages or dashboards that group related content into sections.

Gradient Tabscomponents-tabs-gradient-tabsTabs 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.

Icon Tabscomponents-tabs-icon-tabsTabs 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.

Minimal Tabscomponents-tabs-minimal-tabsClean 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.

Outline Tabscomponents-tabs-outline-tabsTabs 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.

Pill Tabscomponents-tabs-pill-tabsTabs 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.

Shadow Tabscomponents-tabs-shadow-tabsTabs 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.

Vertical Tabscomponents-tabs-vertical-tabsTabs stacked in a sidebar column with panels rendered to the right. Built for settings, account, and documentation pages with many sections to navigate.

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

Filter Drawerecommerce-category-filters-filter-drawerA 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.

Horizontal Filtersecommerce-category-filters-horizontal-filtersA row of filter dropdowns and chips sitting above the product grid. Lets shoppers narrow by category, price, and brand without giving up vertical space.

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

Expandable Previewecommerce-category-preview-expandable-previewA 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.

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

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

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

Split Previewecommerce-category-preview-split-previewA 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.

Three Column Previewecommerce-category-preview-three-column-previewA category preview laid out in three balanced columns of image tiles, sorting collections into clear groups for a wide ecommerce navigation page.

Builderecommerce-ecommerce-bundle-upsells-builderA 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.

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

Minimalist Gridecommerce-ecommerce-bundle-upsells-minimalist-gridA 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.

Side By Sideecommerce-ecommerce-bundle-upsells-side-by-sideTwo 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.

Stackecommerce-ecommerce-bundle-upsells-stackA 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.

Feature Iconsecommerce-ecommerce-cross-sells-feature-iconsRecommended products laid out with an icon, short benefit, and price for each item. Highlights why shoppers should add a related pick to the cart.

Simple Gridecommerce-ecommerce-cross-sells-simple-gridA 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.

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

With Badgesecommerce-ecommerce-cross-sells-with-badgesRelated 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.

With Ratingsecommerce-ecommerce-cross-sells-with-ratingsRecommended products shown with star ratings and review counts beside each price. Uses social proof to push complementary items into the cart.

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

Compact Review Listecommerce-ecommerce-customer-reviews-compact-review-listA tight vertical list of reviews with star ratings and short quotes. Fits narrow sidebars or product pages where space for feedback is limited.

Review Cards Gridecommerce-ecommerce-customer-reviews-review-cards-gridA 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.

Review Comparisonecommerce-ecommerce-customer-reviews-review-comparisonA 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.

Review Stats Overviewecommerce-ecommerce-customer-reviews-review-stats-overviewA 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.

Social Proof Reviewsecommerce-ecommerce-customer-reviews-social-proof-reviewsFeatured customer quotes paired with ratings and verified buyer badges. Builds confidence near the buy button to encourage shoppers to checkout.

Multi Columnecommerce-ecommerce-footers-muti-columnA footer with several columns of grouped links for shop, support, company, and legal. Organizes a large storefront so customers find any page fast.

Simple Linksecommerce-ecommerce-footers-simple-linksA 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.

With Newsletterecommerce-ecommerce-footers-with-newsletterA footer pairing link columns with an email signup field and button. Captures subscribers for promotions and offers while customers browse your store.

With Paymentsecommerce-ecommerce-footers-with-paymentsA footer that displays accepted card and wallet badges beside the usual store links. Reassures shoppers about secure checkout right before they buy.

With Socialsecommerce-ecommerce-footers-with-socialsA 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.

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

Checklistecommerce-ecommerce-shipping-returns-checklistA checklist that lays out shipping steps and return conditions as ticked items. Helps buyers confirm eligibility before they start a refund request.

Full Textecommerce-ecommerce-shipping-returns-full-textA 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.

Split Columnsecommerce-ecommerce-shipping-returns-split-columnsA 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.

With Iconsecommerce-ecommerce-shipping-returns-with-iconsAn icons layout pairing each shipping and returns point with a small symbol. Makes delivery speed, free returns, and refund windows scannable at a glance.

Badge Rowecommerce-ecommerce-trust-guarantee-badge-rowA horizontal row of trust badges showing secure payment, returns, and warranty icons. Place under an add to cart button to calm buyer worry.

Checklistecommerce-ecommerce-trust-guarantee-checklistA 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.

Highlighted Quoteecommerce-ecommerce-trust-guarantee-highlighted-quoteA 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.

Icon Listecommerce-ecommerce-trust-guarantee-icon-listA 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 Pillarsecommerce-ecommerce-trust-guarantee-three-pillarsThree equal columns, each with an icon, heading, and a line on quality, security, and support. Builds buyer confidence across the full storefront.

Accessibility Feature Filtersecommerce-pro-accessibility-sections-accessibility-feature-filtersA shop filter panel of verified accessibility checkboxes and counts, beside product rows carrying feature tags, a reason line, and the price.

Accessibility Feedback Cardecommerce-pro-accessibility-sections-accessibility-feedback-cardA dated changelog of real fixes credited by first name, with a two day reply promise and a report button.

Accessibility Statementecommerce-pro-accessibility-sections-accessibility-statementDated statement pairing what works with three named gaps, quarter targets, and the next review date.

Accessible Delivery Preferencesecommerce-pro-accessibility-sections-accessible-delivery-preferencesA list of four courier instructions you set once, beside a reproduction of the driver instruction screen, over a strip noting reorders inherit them.

Accessible Packaging Cardecommerce-pro-accessibility-sections-accessible-packaging-cardBox opens without tools, large print and braille care cards on request, for four named products in stock.

Accessible Returns Flowecommerce-pro-accessibility-sections-accessible-returns-flowFour numbered return steps covering keyboard start, label free drop off, courier pickup, and readable refund emails, over a paused window strip.

Alternative Format Documentsecommerce-pro-accessibility-sections-alternative-format-documentsA two by two card grid of large print, braille, audio, and tagged text formats with turnaround badges, over a strip for setting one default.

Assisted Ordering Optionsecommerce-pro-accessibility-sections-assisted-ordering-optionsThree bordered channel cards for phone, email, and relay ordering with hours and reply promises, above a parity strip naming the team.

Assistive Tech Compatibilityecommerce-pro-accessibility-sections-assistive-tech-compatibilityA published table of screen reader, voice, and magnifier pairings with status and last tested date, beside a card defining what a pass means.

Captioned Product Videosecommerce-pro-accessibility-sections-captioned-product-videosVideo player mockup with caption bar and timestamped transcript rows beside four checked standards for captions, transcripts, and audio description.

Checkout Without Time Limitsecommerce-pro-accessibility-sections-checkout-without-time-limitsThree checked promises that nothing expires mid checkout beside a static session panel showing saved rows after an overnight pause.

Display Preferences Panelecommerce-pro-accessibility-sections-display-preferences-panelStatic display settings card with text size, motion, contrast, and link underline rows beside three checked promises about persistence.

In Store Accessibilityecommerce-pro-accessibility-sections-in-store-accessibilityDivided list of three stores with checked access features beside an assisted visit booking card, over a corrections strip.

Independent Audit Resultsecommerce-pro-accessibility-sections-independent-audit-resultsAudit method card with firm, testers, scope, and totals beside four WCAG principle rows of found and fixed counts, over a retest strip.

Keyboard And Screen Reader Guideecommerce-pro-accessibility-sections-keyboard-and-screen-reader-guideReal keyboard paths for search, cart, and checkout, rough edges named, and a direct developer inbox.

Written Product Descriptionsecommerce-pro-accessibility-sections-written-product-descriptionsFour written description standards in a divided list beside an annotated product panel printing its alt text and spec rows in full.

Account Overview Dashboardecommerce-pro-account-sections-account-overview-dashboardNext delivery, guarantee clocks, credit balance, and subscription as four linked cards, none a feed.

Account Overview Tilesecommerce-pro-account-sections-account-overview-tilesThe account dashboard where every tile reports a live fact instead of a label.

Account Security Cardecommerce-pro-account-sections-account-security-cardPasskey first, password demoted, sessions visible with sign out everywhere.

Data Privacy Controlsecommerce-pro-account-sections-data-privacy-controlsView, download, and delete as buttons, generated on the spot, no support form.

Download Your Data Cardecommerce-pro-account-sections-download-your-data-cardOne button, the export by email in minutes, with contents and absences listed honestly.

Email History Logecommerce-pro-account-sections-email-history-logEvery email sent to this account as a dated list, each row naming the reason it was sent.

Fit Profile Cardecommerce-pro-account-sections-fit-profile-cardConfirmed sizes per category with fit notes in a panel, beside plain rules on what the profile changes and never touches.

Gift Cards Panelecommerce-pro-account-sections-gift-cards-panelGift cards account panel with balance cards for held cards, a redeem row for paper codes, and a list of sent cards showing delivery status.

Guarantee Registrations Listecommerce-pro-account-sections-guarantee-registrations-listEvery owned product with its guarantee clock, expired ones kept for the bench.

Household Accounts Cardecommerce-pro-account-sections-household-accounts-cardTwo adults, one address, separate logins and wishlists, shared history by consent, one membership.

Invoices and Documents Panelecommerce-pro-account-sections-invoices-documents-panelInvoices, a credit note, and a yearly statement as download rows, with editable billing details that print on every future invoice.

Loyalty Points Cardecommerce-pro-account-sections-loyalty-points-cardStore credit in dollars with a plain ledger, money not points, never expires.

Membership Value Cardecommerce-pro-account-sections-membership-value-cardMembership value card weighing what the plan cost against what it returned, benefits priced from real usage, with the renewal date and cancel button.

Notification Preferencesecommerce-pro-account-sections-notification-preferencesEvery email type on a working switch with honest cadence, locked rows explained.

Notification Preferences Panelecommerce-pro-account-sections-notification-preferences-panelTopic and channel checkboxes with marketing off by default and order updates locked on with the reason.

Order Again Gridecommerce-pro-account-sections-order-again-gridConsumables sorted by what runs out, the bag listed with anti rebuy advice.

Order History Listecommerce-pro-account-sections-order-history-listPast orders with state matched actions, track, buy again, and the return kept visible.

Payment Methods Listecommerce-pro-account-sections-payment-methods-listSaved cards with expiry warnings and the storage honesty line up front.

Product Reviews Panelecommerce-pro-account-sections-product-reviews-panelDelivered items waiting on a review beside published ones with stars, edit and delete in your hands, no coupons for praise.

Referral Dashboard Cardecommerce-pro-account-sections-referral-dashboard-cardBoth get $15 in dollars, not points, with a ledger including the honest zero.

Returns and Refunds Trackerecommerce-pro-account-sections-returns-refunds-trackerOpen returns as cards with a four stage progress line, refund amount and destination named, and the carrier scan clock explained.

Saved Addresses Cardsecommerce-pro-account-sections-saved-addresses-cardsLabeled address cards with courier notes that travel with every order.

Saved Payment Methods Panelecommerce-pro-account-sections-saved-payment-methods-panelSaved cards as token rows with the processor architecture explained and the no silent save footer.

Store Credit Walletecommerce-pro-account-sections-store-credit-walletBalance, dated ledger, and the three rules that make credit behave like cash the store owes you.

Subscription Managementecommerce-pro-account-sections-subscription-managementSkip, pause, swap at equal weight, cancel visible, no exit interview.

Support Conversations Listecommerce-pro-account-sections-support-conversations-listSupport conversations account list with each question as a row showing subject, last reply, and a status badge, plus a reply time promise below.

Trade In Offers Gridecommerce-pro-account-sections-trade-in-offers-gridTrade in offers grid of owned products with a standing quote on each, one trade already in progress, and three grading rules printed below.

Wishlist Gridecommerce-pro-account-sections-wishlist-gridSaved items with price drop and restock notes, a wishlist that watches for you.

Your Impact Cardecommerce-pro-account-sections-your-impact-cardThe personal ledger of seven years with us: bags, repairs, a trade in, and zero replacements bought.

Archive In Numbersecommerce-pro-archive-sections-archive-in-numbersA section heading, a four card ledger stat grid, and a year by year bar strip of units shipped with a labelled baseline axis.

Archive Wall Pageecommerce-pro-archive-sections-archive-wall-pageThe physical archive wall at the workshop: 64 pieces, Friday visits, and nothing on it for sale.

Bring Back Ballotecommerce-pro-archive-sections-bring-back-ballotAn interactive reissue ballot with three retired candidates, honest retirement notes, live vote bars, and a single vote button per row.

Catalog Scans Galleryecommerce-pro-archive-sections-catalog-scans-galleryFour dated pieces of printed matter across eleven years, the price rise letter kept public among them.

Colorway Indexecommerce-pro-archive-sections-colorway-indexAn archive table of every colorway ever sold with years, units made, live or retired badges, and the honest note behind each retirement.

Discontinued Graveyardecommerce-pro-archive-sections-discontinued-graveyardThree retired products with the honest reason each died and the parts pledge that outlives them.

Fabric Shelfecommerce-pro-archive-sections-fabric-shelfSection heading over a three column grid of swatch cards, each with a placeholder swatch, status badge, mill spec, note, and years.

First Bag Storyecommerce-pro-archive-sections-first-bag-storyA 2015 origin letter: eight bags sewn at a kitchen table with 90 percent of that pattern unchanged today.

Guarantee Transferecommerce-pro-archive-sections-guarantee-transferA two column split with three numbered transfer promises beside a serial registration card that reveals the transferred record on submit.

Pattern Changelogecommerce-pro-archive-sections-pattern-changelogA ruled revision timeline of the flagship pattern with version chips, beside a bordered panel listing everything unchanged since the first batch.

Prototype Museumecommerce-pro-archive-sections-prototype-museumFour failed prototypes kept on purpose, each photographed with the failure and the lesson it left.

Reissue Runecommerce-pro-archive-sections-reissue-runA two column split with a placeholder image on one side and a heading, details list, numbered change notes, and reserve buttons on the other.

Serial Lookup Cardecommerce-pro-archive-sections-serial-lookup-cardType a bag serial and its full history appears: made date, repairs, resale, and guarantee status.

Still in Serviceecommerce-pro-archive-sections-still-in-serviceThree registry cards for the oldest bags in daily use, each led by a big years count with serial, service rows, and an owner line.

Announcement With Detailsecommerce-pro-banners-and-alerts-announcement-with-detailsA headline band with a static open details row for announcements that one line cannot contain honestly.

Back In Stock Bannerecommerce-pro-banners-and-alerts-back-in-stock-bannerThe June batch landed, 140 units live, and an honest pace estimate so buyers know the real window.

Cookie Consent Barecommerce-pro-banners-and-alerts-cookie-consent-barTwo cookies named, zero tracking confirmed, with Accept and Decline at equal visual weight.

Counterfeit Warning Bannerecommerce-pro-banners-and-alerts-counterfeit-warning-bannerA card splitting the three places we actually sell against the channels that are never us, plus the serial check link.

Customs Duties Noticeecommerce-pro-banners-and-alerts-customs-duties-noticeA slim notice band with a heading that rules out surprise charges, then one row per region stating who collects which duties and taxes.

Extended Returns Bannerecommerce-pro-banners-and-alerts-extended-returns-bannerA card band explaining a longer holiday returns window, with three fact columns for the purchase window, standard policy, and extended deadline.

Free Shipping Threshold Barecommerce-pro-banners-and-alerts-free-shipping-threshold-barThe $6 flat rate and $75 free line stated as the entire rule, with a slim progress track showing the cart at $62.

Holiday Cutoff Bannerecommerce-pro-banners-and-alerts-holiday-cutoff-bannerDecember 24 delivery cutoffs as plain calendar dates for two service levels, no countdown timers.

Payment Methods Update Bannerecommerce-pro-banners-and-alerts-payment-methods-update-bannerA slim edge band announcing a payment methods change in one sentence, with a chip row naming the two methods arriving and the one retiring.

Phishing Alert Bannerecommerce-pro-banners-and-alerts-phishing-alert-bannerA card band pairing a phishing warning and a never-asked list against a panel showing how a genuine order email reads.

Price Error Apology Bannerecommerce-pro-banners-and-alerts-price-error-apology-bannerA June 8 mispricing owned in the headline, a three row timestamped account, and all 23 wrong price orders shipping as placed.

Price Rise Preannounce Bannerecommerce-pro-banners-and-alerts-price-rise-preannounce-bannerFour canvas products repricing July 1 announced three weeks early as a courtesy window, not a sales push.

Product Recall Noticeecommerce-pro-banners-and-alerts-product-recall-noticeA recall card naming the valve fault, affected batch codes as mono pills, the unaffected batches, and return label actions.

Service Status Bannerecommerce-pro-banners-and-alerts-service-status-bannerRepair bench paused until June 15 with the mechanical reason published and the full scope of what holds.

Shipping Delay Bannerecommerce-pro-banners-and-alerts-shipping-delay-bannerA carrier disruption dated and scoped, standard delayed two days this week with express confirmed unaffected.

Brand Timelineecommerce-pro-brand-story-sections-brand-timelineThe company history as dated rows, the near collapse year kept in.

Complaints Changelogecommerce-pro-brand-story-sections-complaints-changelogFour full customer complaint quotes, each paired with the product change it shipped and the date it landed, laid out as a release log.

Decade Timelineecommerce-pro-brand-story-sections-decade-timelineEleven years in ruled rows, bad years kept in, because a timeline of only wins is marketing.

Design Principles Listecommerce-pro-brand-story-sections-design-principles-listFour product rules, each proven by the decision it most recently forced.

Factory Partners Listecommerce-pro-brand-story-sections-factory-partners-listWho makes what, where, with maker counts, median tenure, and audit dates.

First Product Storyecommerce-pro-brand-story-sections-first-product-storyThe catalog's first product beside every dated revision it survived, each row naming the failure that forced it.

Founder Interview Q&Aecommerce-pro-brand-story-sections-founder-interview-qaA transcript card of five hard questions answered on the record by the founder, each with an avatar byline and a checkable number.

Founder Letterecommerce-pro-brand-story-sections-founder-letterThe origin story as signed prose with one number per claim and a dated signature.

Made In Numbersecommerce-pro-brand-story-sections-made-in-numbersThe brand as six stat tiles, including the numbers a conventional brand would hide.

Makers Rosterecommerce-pro-brand-story-sections-makers-rosterSix named makers with avatars, bench, city, and tenure, each owning one checkable fact about the work they do.

Making Process Stepsecommerce-pro-brand-story-sections-making-process-stepsA numbered process stepper of six making stations, each showing its duration, the hands on it, a detail paragraph, and the check it must pass.

Materials Provenance Rowsecommerce-pro-brand-story-sections-materials-provenance-rowsFour inputs with suppliers named to the city, tenure, and one audit grade fact each.

Numbers We Track Cardecommerce-pro-brand-story-sections-numbers-we-track-cardFour KPIs published with the reason each earns its place, including the one the store refuses to optimize.

Open Questions Cardecommerce-pro-brand-story-sections-open-questions-cardThree unresolved decisions posted publicly with where the thinking sits.

Ownership Split Rowsecommerce-pro-brand-story-sections-ownership-split-rowsA cap table shown as a stacked proportion bar and holder rows with share and note, plus what is deliberately absent from it.

Plain Words Glossaryecommerce-pro-brand-story-sections-plain-words-glossaryA definition list of six store terms, each pinned to a checkable meaning and the claim the word will never be stretched to cover.

Price Breakdown Rowsecommerce-pro-brand-story-sections-price-breakdown-rowsOne product's retail price split into cost rows with proportion bars, a note per line, and the margin admitted.

Refusals Gridecommerce-pro-brand-story-sections-refusals-gridSix standing refusals of common store tactics in a card grid, each dated and priced with what holding the line costs.

Repairs Ledgerecommerce-pro-brand-story-sections-repairs-ledgerA repair promise shown as running totals beside a signed log of last week at the bench, so the warranty reads as bookkeeping.

Retired Products Rowsecommerce-pro-brand-story-sections-retired-products-rowsA discontinued products archive in rows, each with lifespan, units made, the honest reason it was pulled, and what owners kept.

Supply Chain Listecommerce-pro-brand-story-sections-supply-chain-listEvery supplier named with place and tenure, plus the one we left and why.

Then Vs Now Columnsecommerce-pro-brand-story-sections-then-vs-now-columnsA founding year and today set side by side across the same measured rows, including the number that moved in the wrong direction.

Why We Exist Proseecommerce-pro-brand-story-sections-why-we-exist-proseThe manifesto with its thesis at display weight and one number per argument.

Workshop Photo Essayecommerce-pro-brand-story-sections-workshop-photo-essaySix workshop frames in a 3x2 grid, each captioned like a photo essay, no people, just the room.

Workshop Tour Galleryecommerce-pro-brand-story-sections-workshop-tour-galleryFive captioned frames from the making floor where the captions are the tour.

Year In Review Letterecommerce-pro-brand-story-sections-year-in-review-letterThe founder's annual letter with the bad paragraph priced and signed.

Advice Inboxecommerce-pro-buying-advice-sections-advice-inboxThree real buying questions laid out as correspondence, the quoted question and sender on the left, the honest reply and staffer on the right.

Ask Before You Buyecommerce-pro-buying-advice-sections-ask-before-you-buyAccordion of five honest questions asked before checkout, first item opened, each answer printed even where it costs the sale.

Break In Expectationsecommerce-pro-buying-advice-sections-break-in-expectationsFour ruled stage columns walk week one through year five of canvas break in, closed by a straight note on the return window.

Buy Once Math Cardecommerce-pro-buying-advice-sections-buy-once-math-cardTwo mono ledgers show the decade math at $21.50 a year versus $36, caveats printed beside the sums.

Checkout Extras Adviceecommerce-pro-buying-advice-sections-checkout-extras-adviceA verdict table for five checkout add ons, each row naming the item and price, a badge, and an honest reason to buy or skip.

Colorway Adviceecommerce-pro-buying-advice-sections-colorway-adviceTwo framed colorway panels side by side, each with a swatch, share stat, and honest wear rows, closed by an exchange ledger note.

Do You Need It Checklistecommerce-pro-buying-advice-sections-do-you-need-it-checklistThree numbered honest questions before the buy, boredom named, the bench ready to talk you out of it.

Honest Alternatives Guideecommerce-pro-buying-advice-sections-honest-alternatives-guideFour jobs the store loses at, each card naming the winner and the reason, closed by what is left.

Repair Or Replace Pathecommerce-pro-buying-advice-sections-repair-or-replace-pathThree numbered failure questions each branch into yes and no outcomes, closed by the bench's photo triage counts from last year.

Second Bag Advice Cardecommerce-pro-buying-advice-sections-second-bag-advice-cardThree verdict rules backed by support log counts, 184 of 312 second bag inquiries routed to a repair.

Secondhand Buying Guideecommerce-pro-buying-advice-sections-secondhand-buying-guideFour numbered inspection cards for buying a used bag, each showing good wear and a walk away sign, closed by a fair price ledger.

What Fits Insideecommerce-pro-buying-advice-sections-what-fits-insideA capacity guide listing four real packed loads, each with its contents, a fill bar showing how full the bag runs, and a plain verdict.

What The Bench Carriesecommerce-pro-buying-advice-sections-what-the-bench-carriesThree repair bench staff cards with avatar headers, the size each carries, the reason, and a ruled wear report footer.

When Not To Buy From Usecommerce-pro-buying-advice-sections-when-not-to-buy-from-usFour ruled rows naming who wins instead, each a genuine disqualifier with the better option printed.

When To Buy Timelineecommerce-pro-buying-advice-sections-when-to-buy-timelineVertical timeline of four honest purchase windows, each with a bordered price pill and straight advice, closed by a printed footnote.

Which Size To Buyecommerce-pro-buying-advice-sections-which-size-to-buyTwo size columns compare specs, weight, and honest use cases, closed by an exchange ledger verdict favoring the smaller pack.

Alphabetical Indexecommerce-pro-category-sections-alphabetical-indexThe whole catalog as a lettered text directory for visits that know the name.

Alternating Category Bandsecommerce-pro-category-sections-alternating-category-bandsTwo full width category bands with images on alternating sides, each pairing a written lead with ruled subcategory rows and a shop all link.

Archive And Seconds Bandecommerce-pro-category-sections-archive-and-seconds-bandTwo outlet tiles, seconds with named flaws and resale archive graded, each with an honest count.

Bestsellers By Categoryecommerce-pro-category-sections-bestsellers-by-categoryFour aisle cards each led by the single item bought first most often, with units shipped, a price, and one honest line.

Capacity Ladder Bandecommerce-pro-category-sections-capacity-ladder-bandPacks sorted by liters on proportional bars, four ruled rungs with counts and one line on what each size swallows.

Category Comparison Tableecommerce-pro-category-sections-category-comparison-tableThree bag families compared in one table across price, fabric, weight, and laptop room, since shape is the real decision.

Category Ratings Bandecommerce-pro-category-sections-category-ratings-bandThree category columns each led by a large average rating, a five star row, review count, price floor, and one quoted customer line.

Category Stats Tilesecommerce-pro-category-sections-category-stats-tilesAisles as stat tiles with counts, price ranges, and one verifiable fact each.

Category Tiles Gridecommerce-pro-category-sections-category-tiles-gridSix aisles as image tiles with caption bars carrying counts and price floors.

Category With Buying Guide Bandecommerce-pro-category-sections-category-with-buying-guide-bandA category grid with an inline buying guide that names which bag to buy first, by job, by name.

Circle Category Rowecommerce-pro-category-sections-circle-category-rowAisles as round image chips in one scannable strip, the mobile commerce pattern.

Collection List Rowsecommerce-pro-category-sections-collection-list-rowsCapsules as ruled editorial rows with one written sentence and a piece count each.

Gifting Tiles Rowecommerce-pro-category-sections-gifting-tiles-rowThree recipient cuts with counts, and the gift card named as the no guess option.

Material Tiles Rowecommerce-pro-category-sections-material-tiles-rowBrowse by material, each tile with its source and product count.

New Vs Classics Bandecommerce-pro-category-sections-new-vs-classics-bandThe drop against the permanent range, two kinds of buying explained.

Occasion Tilesecommerce-pro-category-sections-occasion-tilesThe catalog cut by life situation, categories are for warehouses.

Portrait Category Scrollerecommerce-pro-category-sections-portrait-category-scrollerEight tall portrait category tiles in one horizontally snapping strip, each with a caption bar carrying its name, style count, and price floor.

Seasonal Category Bandecommerce-pro-category-sections-seasonal-category-bandOne card, one season, a wide image beside the edit with a credible curator named.

Seasonal Rotation Bandecommerce-pro-category-sections-seasonal-rotation-bandThe two drop calendar with March batches, September heavy canvas, and the permanent range constant below.

Shop All Bandecommerce-pro-category-sections-shop-all-bandThe whole catalog on one ruled band with counts and price ranges.

Shop By Price Bandecommerce-pro-category-sections-shop-by-price-bandThree wide tiles cutting the range by budget with real item counts and one line of what lives in each band.

Shop By Price Bandsecommerce-pro-category-sections-shop-by-price-bandsBudget as navigation, three bands with counts and the same guarantee at every price.

Split Category Navecommerce-pro-category-sections-split-category-navA two column split pairing the full aisle list as a ruled nav with one large featured category panel and its caption bar.

Subcategory Accordionecommerce-pro-category-sections-subcategory-accordionA ruled accordion of category rows that each expand into a columned grid of subcategory links, every one carrying a style count and price floor.

Tabbed Category Previewecommerce-pro-category-sections-tabbed-category-previewOne tab per aisle, each panel previewing three products with prices, an honest aisle line, and a shop all link.

Three Tile Featureecommerce-pro-category-sections-three-tile-featureOne tall lead category beside two stacked tiles, traffic steered by area.

Use Case Category Bandecommerce-pro-category-sections-use-case-category-bandThree job tiles with counts and one honest line each plus the admission that most bags do two jobs fine.

With Banner Tileecommerce-pro-category-sections-with-banner-tileFour category tiles plus one solid banner tile carrying the month's single message.

Address Validation Helperecommerce-pro-checkouts-address-validation-helperYour spelling beside the database's, differences bolded, keep mine respected.

Billing Address Toggleecommerce-pro-checkouts-billing-address-toggleA working switch keeps billing matched to shipping or reveals the full billing form, with the decline warning that explains why banks care.

Business Purchase Checkoutecommerce-pro-checkouts-business-purchase-checkoutCompany, VAT, and invoice fields with the EU reverse charge mechanics and VIES fallback stated honestly.

Delivery Date Pickerecommerce-pro-checkouts-delivery-date-pickerPick the arrival day from real options, same price any day, holidays shown honestly.

Delivery Notes Stepecommerce-pro-checkouts-delivery-notes-stepDriver note field with safe place chips and the honest limit that notes land about 90% of the time.

Duties And Taxes Stepecommerce-pro-checkouts-duties-and-taxes-stepInternational checkout choosing prepaid import charges or courier collection at the door, both totals shown and the handling fee stated honestly.

Express Checkout Wallecommerce-pro-checkouts-express-checkout-wallWallet buttons stacked full width first with the measured 40 second reason stated, card form collapsed below.

Express Pay Buttonsecommerce-pro-checkouts-express-pay-buttonsThe wallet stack above an equal card path, same price either way stated plainly.

Gift Receipt Toggle Stepecommerce-pro-checkouts-gift-receipt-toggle-stepA working switch flips the order to gift mode and re-renders both slip states as a live checklist.

Guest Or Account Choiceecommerce-pro-checkouts-guest-or-account-choiceThe fork without a thumb on the scale, guest first, account earning its column with perks.

Installment Plan Choiceecommerce-pro-checkouts-installment-plan-choicePay in full, four payments, or twelve months as selectable rows, the written schedule re-renders live and the costlier option admits it.

Invoice Details Formecommerce-pro-checkouts-invoice-details-formCompany, VAT with reverse charge, PO, and cost center, asked once for the PDF.

Multi Step Checkoutecommerce-pro-checkouts-multi-step-checkoutThe three stage flow mid journey with editable recaps and a stepper without color dependence.

One Page Checkoutecommerce-pro-checkouts-one-page-checkoutContact, shipping, and payment in one visible column, nine fields, no account required.

Order Confirmation Pageecommerce-pro-checkouts-order-confirmation-pageThe thank you with the window, a live cancel countdown, and the account ask after.

Order For Someone Else Stepecommerce-pro-checkouts-order-for-someone-else-stepTheir address and phone, your payment, every email routed per line and the gift flag consequences listed.

Order Review Stepecommerce-pro-checkouts-order-review-stepThree editable ruled sections plus a pay button that promises to charge exactly the number printed on it.

Order Summary Sidebarecommerce-pro-checkouts-order-summary-sidebarThe checkout companion panel with quantity badges and totals that explain themselves.

Payment Failed Recoveryecommerce-pro-checkouts-payment-failed-recoveryThe decline without shame, three ways forward and the cart held.

Payment Form Sectionecommerce-pro-checkouts-payment-form-sectionCard fields beside a panel answering where the numbers actually go.

Pickup Point Selectorecommerce-pro-checkouts-pickup-point-selectorHome, locker, or shop with real prices, the courier saving passed on.

Promo Code Stepecommerce-pro-checkouts-promo-code-stepA working code field that applies live, adds the discount line, reprices the pay button, and states plainly what codes exclude.

Quote To Checkoutecommerce-pro-checkouts-quote-to-checkoutTrade quote as a review screen with locked prices honored, Net 30 or card, a PO field and one button.

Returning Customer Checkoutecommerce-pro-checkouts-returning-customer-checkoutPrefilled address, delivery, and card from the last order as review rows with one pay button.

Review And Place Orderecommerce-pro-checkouts-review-and-place-orderFour editable recap cards above a button that says what it does and what it costs.

Shipping Options Listecommerce-pro-checkouts-shipping-options-listThree speeds as selectable rows with real date windows, including the no rush option.

Accessory Fit Matrixecommerce-pro-comparison-tables-accessory-fit-matrixCompatibility matrix of five accessories against three bags with fits, fits with a named caveat, and no states plus a legend.

Bag Size Side By Sideecommerce-pro-comparison-tables-bag-size-side-by-sideFour bags drawn to one scale with SVG silhouettes and spec rows, the size answer photos never give.

Canvas Weight Comparisonecommerce-pro-comparison-tables-canvas-weight-comparisonThree canvas weights judged row by row, the check moves, and the verdict row refuses to name a winner.

Cost Per Year Tableecommerce-pro-comparison-tables-cost-per-year-tableCumulative ten year spend on a cheap bag replaced against one bag repaired, ending in per year math and a caveat.

Good Better Best Cardsecommerce-pro-comparison-tables-good-better-best-cardsThree material tiers with what the extra money buys stated per step.

Leather Vs Vegan Tableecommerce-pro-comparison-tables-leather-vs-vegan-tableBridle leather against waxed cotton across six rows where each column wins real rows and one is a draw.

Material Comparison Tableecommerce-pro-comparison-tables-material-comparison-tableThree materials judged row by row with the check moving and the verdict refusing to crown any one winner.

Model Comparison Tableecommerce-pro-comparison-tables-model-comparison-tableThe product family side by side with four number rows and a best for verdict.

New Vs Refurb Vs Seconds Tableecommerce-pro-comparison-tables-new-vs-refurb-vs-seconds-tableOne bag at three honest price points, new, refurbished, and second, with the guarantee row identical.

Old Vs New Generationecommerce-pro-comparison-tables-old-vs-new-generationThe v2 against the v1 including what did not change, upgrade advice, no mostly.

Size Variant Comparisonecommerce-pro-comparison-tables-size-variant-comparisonThree sizes with relatively scaled images and packed lists instead of liters.

Spec Side By Sideecommerce-pro-comparison-tables-spec-side-by-sideTwo products dueled with differences emphasized and sameness admitted.

Upkeep Comparison Cardsecommerce-pro-comparison-tables-upkeep-comparison-cardsThree materials compared by minutes of care per year, the ritual itself with cadences, and what skipping it costs.

Us Vs Them Tableecommerce-pro-comparison-tables-us-vs-them-tableOur pack against the big label equivalent in grouped rows, losses printed first, wins second, and one honest draw.

Which One Guideecommerce-pro-comparison-tables-which-one-guideThe decision written like advice, four situations routed to products with reasons.

Contact Form Splitecommerce-pro-contact-sections-contact-form-splitThe form beside who reads it, per topic reply times, and no ticket numbers.

Contact Routes Pageecommerce-pro-contact-sections-contact-routes-pageFour named inboxes with reply medians and the no phone line explained honestly.

Damaged Item Flowecommerce-pro-contact-sections-damaged-item-flowThe photo is the claim, cheap items are replaced and kept, the 0.4% rate published.

How To Complain Cardecommerce-pro-contact-sections-how-to-complain-cardThe complaints route in three plain steps, plus the quarterly ledger of every complaint received and what each one changed.

Live Chat Honesty Cardecommerce-pro-contact-sections-live-chat-honesty-cardWhy there is no chat bubble, in two paragraphs, with the one condition that could change the answer.

Missing Parcel Flowecommerce-pro-contact-sections-missing-parcel-flowMarked delivered, not there, in three steps with base rates and reship or refund.

Response Times Bandecommerce-pro-contact-sections-response-times-bandSupport numbers published like specs, median reply, resolution rate, slowest day named.

Send It To The Bench Cardecommerce-pro-contact-sections-send-it-to-the-bench-cardRepairs by post with no forms: a packing checklist beside a shipping label mockup where the note in the box is the ticket.

Skip The Queue FAQecommerce-pro-contact-sections-skip-the-queue-faqThe five questions that filled half of June's inbox as an accordion with ask counts, beside the case for writing anyway.

Visit The Workshop Cardecommerce-pro-contact-sections-visit-the-workshop-cardFriday hours, one address, and the warning that it is a working workshop.

Who Has The Inbox Cardecommerce-pro-contact-sections-who-has-the-inbox-cardThe weekly support rota as a three person card, this week highlighted, with the handover ritual that keeps threads intact.

Write To The Founder Cardecommerce-pro-contact-sections-write-to-the-founder-cardThe elena@ inbox as a real channel: when it is read, what to send, and what the bench does with it.

Canvas Run Splitsecommerce-pro-custom-orders-sections-canvas-run-splitsThe 80 meter mill minimum drawn as a two segment bar, your bags against the shelf run, over three past runs listed.

Custom Build Logecommerce-pro-custom-orders-sections-custom-build-logFour finished custom builds with placeholder thumbs, the ask, an owner line, and a work, weeks, and paid meta row each.

Custom Or Shelfecommerce-pro-custom-orders-sections-custom-or-shelfThree qualifying question cards with a shelf answer and a custom answer each, closed by the half of intake ends at the shelf bar.

Custom Order Intakeecommerce-pro-custom-orders-sections-custom-order-intakeIntake gate with three yes types, three decline types, and a published one in three acceptance rate.

Custom Orders Faqecommerce-pro-custom-orders-sections-custom-orders-faqFive intake inbox questions with the schedule and multiplier in them, first item opened.

Custom Pricing Tableecommerce-pro-custom-orders-sections-custom-pricing-tableFour custom work types priced in public, fleet runs at standard price, one off argued against.

Custom Queue Statusecommerce-pro-custom-orders-sections-custom-queue-statusThe custom bench queue published live, the current build named, scarcity stated as a schedule.

Made To Measure Explainerecommerce-pro-custom-orders-sections-made-to-measure-explainerFour steps with real durations, the 1.6x multiplier itemized, and no return caveat before any form.

Monogram Galleryecommerce-pro-custom-orders-sections-monogram-galleryThree initials styles priced by longevity, closed by the three character rule and its reason.

Pattern Remake Fileecommerce-pro-custom-orders-sections-pattern-remake-fileSplit section pairing remake pricing at 1.1x with a static pattern record card of measurements, materials, and builds to date.

Back In Stock Captureecommerce-pro-email-capture-sections-back-in-stock-captureWatch any sold out item, one email when it lands, then the address is deleted.

Cart Reminder Opt Inecommerce-pro-email-capture-sections-cart-reminder-opt-inA centered consent card spelling out the single cart reminder as a four step timeline, from saved cart to deletion, above the email form.

Drop Alerts Captureecommerce-pro-email-capture-sections-drop-alerts-captureThe release list sold on access, 48 hours early, four to six emails a year.

Drop List Signupecommerce-pro-email-capture-sections-drop-list-signupThe 48 hour head start explained as sequence not exclusivity, beside the last drop counted in four stats.

First Order Offer Captureecommerce-pro-email-capture-sections-first-order-offer-captureThe welcome discount as a page, not a popup, with terms in the open.

Newsletter Signup Bandecommerce-pro-email-capture-sections-newsletter-signup-bandThe monthly letter pitched with cadence, open rate, and unsubscribe speed.

Newsletter With Archiveecommerce-pro-email-capture-sections-newsletter-with-archiveThe last three issues readable before sign up with both subscriber and unsubscribe counts published live.

One Email A Season Signupecommerce-pro-email-capture-sections-one-email-a-season-signupThe four email contract published above the field, with the open rate that earns it.

Preferences First Signupecommerce-pro-email-capture-sections-preferences-first-signupThree topic checkboxes before the email field so consent is specific from the first send.

Price Drop Watchecommerce-pro-email-capture-sections-price-drop-watchA split price watch capture with a labeled email form beside a product card listing every price the item has ever held.

Sample Email Previewecommerce-pro-email-capture-sections-sample-email-previewA card band pairing the signup form with last month's issue rendered as a static email, header rows, body, and footer included.

Sms Alerts Cardecommerce-pro-email-capture-sections-sms-alerts-cardThree texts we send, the never list sworn, median 4 texts a year.

Unsubscribe Promise Cardecommerce-pro-email-capture-sections-unsubscribe-promise-cardFive email commitments naming the industry practices they refuse.

Zero Tracking Signupecommerce-pro-email-capture-sections-zero-tracking-signupA capture section printing the entire stored record beside the list of tracking data never collected, with the labeled form beneath.

Account Signed Out Stateecommerce-pro-empty-states-account-signed-out-stateThe signed out account page selling sign in by what it unlocks.

Category Sold Out Stateecommerce-pro-empty-states-category-sold-out-stateThe whole category gone, the restock batch dated, and the alert signup.

Compare List Emptyecommerce-pro-empty-states-compare-list-emptyAn empty compare page blueprint with three dashed product slots above skeleton spec rows, a headline, and a primary action to add products.

Empty Cart Stateecommerce-pro-empty-states-empty-cart-stateThe guilt free empty cart with three honest starting points.

Empty Wishlist Stateecommerce-pro-empty-states-empty-wishlist-stateThe unused wishlist explained by what saving actually does, then two routes in.

Filter No Resultsecommerce-pro-empty-states-filter-no-resultsZero matches diagnosed, the one filter to loosen named with its count.

Notifications Empty Stateecommerce-pro-empty-states-notifications-empty-stateAn empty notifications inbox with a muted bell icon, a headline, and the full alert menu listed with live switches, all off until asked.

Order History Empty Stateecommerce-pro-empty-states-order-history-empty-stateTwo honest reasons for an empty history, a guest order claim form inline, and no shopping push.

Reviews Empty Stateecommerce-pro-empty-states-reviews-empty-stateThe no reviews yet state for a new product with a bench take and the promise that critical ones stay.

Rewards Empty Stateecommerce-pro-empty-states-rewards-empty-stateA two column rewards layout with a zero balance headline, four ways to earn with point values, and a panel showing the reward ladder.

Search No Resultsecommerce-pro-empty-states-search-no-resultsA search dead end with a spelling correction and result count, three near miss product rows, and a footer to report a missing search.

Store 404ecommerce-pro-empty-states-store-404The missing page owned plainly with search and the four most wanted routes.

Event Recap Galleryecommerce-pro-events-sections-event-recap-galleryLast clinic counted, including the two bags pronounced beyond saving.

Event RSVP Formecommerce-pro-events-sections-event-rsvp-formA two column RSVP split pairing event facts and context on one side with a labeled form, slot picker, and opt in on the other.

Fitting Appointment Cardecommerce-pro-events-sections-fitting-appointment-cardBook a 30 minute fitting with the do not buy verdict promised up front and three next slots as plain buttons.

Host An Event Cardecommerce-pro-events-sections-host-an-event-cardHost a care clinic, the responsibilities split and past hosts listed plainly.

Know Before You Goecommerce-pro-events-sections-know-before-you-goA split layout pairing an intro column with an icon led two column grid of plain logistics answers from transport to rain plan.

Open Day Scheduleecommerce-pro-events-sections-open-day-scheduleA vertical timeline laying out an open day hour by hour with a time rail, dot markers, titled rows, and a closing note.

Past Events Archiveecommerce-pro-events-sections-past-events-archiveDated ruled rows with attendance and the one thing each event changed at the company afterward.

Repair Clinic Dayecommerce-pro-events-sections-repair-clinic-dayThe free clinic with timed fixes by type, any brand welcome, the business case stated.

Tour Stops Gridecommerce-pro-events-sections-tour-stops-gridA responsive grid of city tour stops, each tile carrying a venue, date, and booking status badge, beside a heading, button, and footer note.

Trunk Show Bannerecommerce-pro-events-sections-trunk-show-bannerTwo days at a stockist announced as a wide bordered band with what is coming stated as three plain tile facts.

Workshop Calendar Listecommerce-pro-events-sections-workshop-calendar-listUpcoming events as dated rows with real seat counts and next dates over waitlists.

Customer Questions FAQecommerce-pro-faq-sections-customer-questions-faqA feed of dated buyer questions, each with an avatar and an indented reply signed by its maker, closing with an invite to ask.

FAQ Tabsecommerce-pro-faq-sections-faq-tabsA tabbed FAQ split into four shopper moments, ordering, delivery, returns, and product, with three open answers per tab and a contact line below.

Faq Topics Indexecommerce-pro-faq-sections-faq-topics-indexSix help topics with counts, the most asked question linked from each tile.

Faq With Contact Cardecommerce-pro-faq-sections-faq-with-contact-cardThe month's top questions beside the human exit with measured response times.

Guarantee Faqecommerce-pro-faq-sections-guarantee-faqFive answers drawing the defect versus wear line in examples, lifetime answered honestly.

Most Asked FAQecommerce-pro-faq-sections-most-asked-faqA ranked list of the top eight support questions, each row showing its rank, ticket share, a short answer, and a small distribution bar.

Ordering Faqecommerce-pro-faq-sections-ordering-faqSix order flow questions answered with mechanisms: the change window, base rate, and no phone explained.

Ordering Faq Listecommerce-pro-faq-sections-ordering-faq-listSix buying mechanics stated plainly, charge timing, cancels, and combined orders.

Policies Changelogecommerce-pro-faq-sections-policies-changelogEvery policy change as dated rows with the reason, the receipt that outlives announcements.

Preorder Faqecommerce-pro-faq-sections-preorder-faqSix made to order questions answered with dates, written from the inbox.

Product Care Faqecommerce-pro-faq-sections-product-care-faqCare rituals as accordion answers beside a sticky image, prevention as content.

Returns Faq Two Colecommerce-pro-faq-sections-returns-faq-two-colThe whole returns policy as eight open answers, no accordion for anxious readers.

Secondhand Buyers Faqecommerce-pro-faq-sections-secondhand-buyers-faqFive answers for the used buyer, serial checks, guarantee transfer, first repair free.

Shipping Faqecommerce-pro-faq-sections-shipping-faqSix shipping questions answered with cutoffs by day, couriers named, and the misdrop and locker rules.

Shipping Faq Accordionecommerce-pro-faq-sections-shipping-faq-accordionThe six shipping questions support actually receives, answered with real numbers.

Sizing Faq Compactecommerce-pro-faq-sections-sizing-faq-compactThe four sizing answers as one band, each sentence ending its question.

Straight Answers FAQecommerce-pro-faq-sections-straight-answers-faqA verdict first FAQ where a bold answer leads each row, Yes, Free, 60 days, with the question and one line of mechanics trailing.

Corporate Gift Cards Cardecommerce-pro-gift-card-sections-corporate-gift-cards-cardBulk gift cards for teams of ten or more, no discount, no logo, free letterpress, invoice accepted.

Corporate Gifting Cardecommerce-pro-gift-card-sections-corporate-gifting-cardTeam gifting as logistics solved, one CSV, one invoice, and a charity swap option.

Gift A Repair Cardecommerce-pro-gift-card-sections-gift-a-repair-cardThe $40 repair credit card for the friend with the beloved dying bag, delivered as a letterpress card.

Gift Card Amount Guideecommerce-pro-gift-card-sections-gift-card-amount-guideThree denomination columns map each amount to catalog items it covers, with product thumbnails, prices, and a covers line under each.

Gift Card Balance Checkecommerce-pro-gift-card-sections-gift-card-balance-checkCode in, balance out, with the three balance anxieties answered beneath.

Gift Card Balance Checkerecommerce-pro-gift-card-sections-gift-card-balance-checkerCard number in, balance out, no account needed and no expiry to fear.

Gift Card Design Pickerecommerce-pro-gift-card-sections-gift-card-design-pickerFour occasion design tiles drive a live full size card preview, beside a picker column and rows listing what the design changes.

Gift Card Faqecommerce-pro-gift-card-sections-gift-card-faqGift card questions answered like money questions, five rows, no asterisks.

Gift Card Heroecommerce-pro-gift-card-sections-gift-card-heroThe gift card reframed as respect for their taste, with three term tiles.

Gift Card How It Worksecommerce-pro-gift-card-sections-gift-card-how-it-worksThree numbered step tiles trace the path from checkout to redemption, each grounded by a small interface chip, above a send button.

Gift Card Purchaseecommerce-pro-gift-card-sections-gift-card-purchaseAmount chips updating a live card preview, with delivery date and no expiry terms.

Last Minute Gift Cardecommerce-pro-gift-card-sections-last-minute-gift-cardDelivery timing facts sit beside a static blueprint of the exact email the recipient receives, with card art, a personal note, and code row.

Physical Gift Cardecommerce-pro-gift-card-sections-physical-gift-cardThe letterpress card you can wrap, no expiry, value reissued if lost.

Corporate Gifting Tiersecommerce-pro-gifting-sections-corporate-gifting-tiersA corporate gifting section with four order size tiers in a table of discounts and lead times, three coordinator facts, and an email handoff.

Egift Card Builderecommerce-pro-gifting-sections-egift-card-builderA gift card builder with amount chips and timing facts beside a live preview panel showing the card, delivery details, and a spam fallback note.

Gift Concierge Cardecommerce-pro-gifting-sections-gift-concierge-cardEmail three facts and a budget, a human replies with one pick and one alternative within a day.

Gift Finder Quizecommerce-pro-gifting-sections-gift-finder-quizA gift finder quiz with three question chip rows beside the match panel it produces, showing the pick, its reasoning, and a cheaper backup.

Gift Note Previewecommerce-pro-gifting-sections-gift-note-previewA gift note section pairing the rules a handwritten note follows and three starter lines with a serif stationery preview and a blank card option.

Gift Reminder Serviceecommerce-pro-gifting-sections-gift-reminder-serviceA split pairing a three email reminder timeline and save a date button with an example saved dates panel showing budgets and statuses.

Gift Returns Promise Bandecommerce-pro-gifting-sections-gift-returns-promise-bandFour facts that cover the recipient through January 31 with the buyer never told about a return.

Gift Wrapping Galleryecommerce-pro-gifting-sections-gift-wrapping-galleryThree bench photos of the actual wrap with the $6 broken into paper, ribbon, and four bench minutes.

Group Gift Explainerecommerce-pro-gifting-sections-group-gift-explainerOne person starts it, others chip in by link, with three honest rules stated before it goes wrong.

Last Minute Gifts Gridecommerce-pro-gifting-sections-last-minute-gifts-gridThree tiers ordered by certainty for December 23, the e gift card first and bags honestly ruled out.

Occasion Gift Guideecommerce-pro-gifting-sections-occasion-gift-guideFour occasion cards with a photo, plain reasoning, the pick with price, and a smaller pick, closing with a gift desk handoff.

About Our Pricesecommerce-pro-incentives-sections-about-our-pricesThe bestseller's tag itemized to the margin, a price defended, not apologized for.

Bulk Pricing Tiersecommerce-pro-incentives-sections-bulk-pricing-tiersA volume pricing section showing four quantity tiers as a card row with per unit prices, then three ruled rules that govern bulk orders.

Community Discount Gridecommerce-pro-incentives-sections-community-discount-gridAn eligibility discount grid of four groups as icon cards stating the proof required and how long it lasts, plus a document privacy footer band.

Duties Included Bandecommerce-pro-incentives-sections-duties-included-bandThe checkout price is the last number, with the refuse and email us record.

Financing Explainerecommerce-pro-incentives-sections-financing-explainerPay in three with worked math, return mechanics, and who should skip it.

First Repair Free Cardecommerce-pro-incentives-sections-first-repair-free-cardFirst repair free even secondhand, the mechanics ruled and the commercial reasoning published.

Free Adjustments Cardecommerce-pro-incentives-sections-free-adjustments-cardStrap, holes, and handles adjusted free forever on any product with bench minutes and the cost honest.

Free Shipping Threshold Barecommerce-pro-incentives-sections-free-shipping-threshold-barThe $75 threshold with the real $7 cost, advising against padding the cart.

Gift Wrapping Calloutecommerce-pro-incentives-sections-gift-wrapping-calloutThe wrap pictured with three gifting promises, free paper wrap and priceless receipts.

Guarantee Bandecommerce-pro-incentives-sections-guarantee-bandThe ten year promise in a primary band with honored, declined, and median repair time.

Holiday Returns Extensionecommerce-pro-incentives-sections-holiday-returns-extensionGift returns through January 31, automatic, with the unchanged rules listed.

Lifetime Guarantee Spotlightecommerce-pro-incentives-sections-lifetime-guarantee-spotlightHardware covered for the life of the bag with five things that do not void it and one thing that does.

Loyalty Not Points Explainerecommerce-pro-incentives-sections-loyalty-not-points-explainerWhy there is no points program, the breakage math stated, and the three real alternatives listed.

Packaging Explainerecommerce-pro-incentives-sections-packaging-explainerThe parcel layer by layer, material and disposal route, one bin.

Payment Options Rowecommerce-pro-incentives-sections-payment-options-rowAccepted methods as text chips with the three payment facts that actually reassure.

Price Match Promiseecommerce-pro-incentives-sections-price-match-promiseAutomatic refunds on our own price drops, with last year's count and no asterisk.

Price Match Promise Cardecommerce-pro-incentives-sections-price-match-promise-cardOwn-price match only, with the nightly diff mechanic and a worked example showing $27 back automatically.

Referral Give Getecommerce-pro-incentives-sections-referral-give-getA referral section pairing the give and get amounts as twin cards, then a ruled list of payout timing, the cap, and what it skips.

Returns Rate Transparencyecommerce-pro-incentives-sections-returns-rate-transparencyThe published 6.2 percent return rate with its category context, named culprit, and named fix.

Shipping Protection Cardecommerce-pro-incentives-sections-shipping-protection-cardProtection included free with three plain claim rules and the 0.4% rate.

Shipping Returns Rowecommerce-pro-incentives-sections-shipping-returns-rowThe three column trust band where every policy claim carries a number.

Sustainability Notesecommerce-pro-incentives-sections-sustainability-notesFour numbered environmental facts with the unfinished one stated as a percentage.

Warranty Tableecommerce-pro-incentives-sections-warranty-tableCoverage by failure type, including what is not covered and what happens anyway.

Welcome Code Explainerecommerce-pro-incentives-sections-welcome-code-explainerA welcome offer split pairing the signup discount and its three plain rules with a dated archive of every email actually sent this year.

Country Shipping Tableecommerce-pro-international-sections-country-shipping-tableSix regions with real day ranges, a duties column naming the collector, and tracking confirmed on every row.

Cross Border Delivery Timelineecommerce-pro-international-sections-cross-border-delivery-timelineA vertical rail walking a parcel through five international shipping stages, each with an honest day range and the customs stage called out.

Currency And Duties Toggleecommerce-pro-international-sections-currency-and-duties-toggleOne product repriced across three currencies with the bank rate disclosure inside the card.

Customs Paperwork Explainerecommerce-pro-international-sections-customs-paperwork-explainerThe customs form field by field, and the gift undervalue request declined as the fraud it is.

Duties Calculator Cardecommerce-pro-international-sections-duties-calculator-cardCountry chips reveal landed cost, with who collects duties stated per region.

Global Fulfillment Hubsecommerce-pro-international-sections-global-fulfillment-hubsA network stat strip above three dispatch hub cards, each naming the regions it serves, its dispatch promise, and what it keeps in stock.

International Orders Faqecommerce-pro-international-sections-international-orders-faqFive cross border questions answered, duties first, the customs delay named honestly.

International Returns Stepsecommerce-pro-international-sections-international-returns-stepsA split layout pairing the returns promise and money facts with a numbered four step card covering label, duties, drop off, and refund.

Landed Cost Comparisonecommerce-pro-international-sections-landed-cost-comparisonTwo side by side receipts pricing the same international order both ways, duties prepaid at checkout versus collected at the door.

Where We Ship Listecommerce-pro-international-sections-where-we-ship-listWhere we ship with per region notes, and the refusal list with reasons published.

Article List Rowsecommerce-pro-journal-sections-article-list-rowsThe journal as dated rows, category, read time, and a one line standfirst each.

Care Column Splitecommerce-pro-journal-sections-care-column-splitThe care column with a routine readers can finish, five minutes a month.

Field Notes Gridecommerce-pro-journal-sections-field-notes-gridA heading and intro over a responsive grid of reader dispatch cards, each showing a location, a quoted note, the reader name, and years carried.

From The Bench Columnecommerce-pro-journal-sections-from-the-bench-columnThree repair cases told as what failed and the lesson, written by the bench.

From The Floor Qaecommerce-pro-journal-sections-from-the-floor-qaThree inbox questions answered by whoever actually knows, name and job on every answer.

Guide Cards Gridecommerce-pro-journal-sections-guide-cards-gridSix evergreen guides as cards, each promising a decision rather than content.

How To Steps Articleecommerce-pro-journal-sections-how-to-steps-articleOne repair taught in four numbered steps with the bail out point marked.

Issue Archive Timelineecommerce-pro-journal-sections-issue-archive-timelineA centered heading and intro above back issues grouped by year, each row linking an issue title with its number, month, and a read cue.

Journal Hero Featureecommerce-pro-journal-sections-journal-hero-featureThe lead story big with a placeholder, three secondary headlines stacked beside it.

Journal Newsletter Signupecommerce-pro-journal-sections-journal-newsletter-signupA two column split pairing an email signup form with a list of recent issue subject lines, each showing a date and reading time.

Journal Topics Indexecommerce-pro-journal-sections-journal-topics-indexThe journal mapped by topic with article counts and the best first read.

Materials Deep Dive Articleecommerce-pro-journal-sections-materials-deep-dive-articleThe 18 oz canvas argued by the buyer who picks it, the contract spec callout, and the trade offs named.

Workshop Film Chaptersecommerce-pro-journal-sections-workshop-film-chaptersA heading and intro above a wide video still with a play button and runtime, then a two column list of timestamped chapters with notes.

Year Of Wear Photo Logecommerce-pro-journal-sections-year-of-wear-photo-logSix months from twelve, the same bag photographed with no wax touch ups, the honest aging record.

Archive Lookbooks Indexecommerce-pro-lookbook-sections-archive-lookbooks-indexEvery season kept online, each tile counting what is still made.

Behind The Scenes Rowecommerce-pro-lookbook-sections-behind-the-scenes-rowFour outtakes with captions from the actual shoot day, the seams shown.

Behind The Shoot Notesecommerce-pro-lookbook-sections-behind-the-shoot-notesThree lookbook frames with honest production captions and the full shoot budget published at the footer.

Campaign Strip Bandecommerce-pro-lookbook-sections-campaign-strip-bandThree campaign frames with an offset middle and one button to the full lookbook.

Contact Sheet Selectsecommerce-pro-lookbook-sections-contact-sheet-selectsA dense numbered grid of shoot frames with the selects that made the book marked, closed by a tally of shot, published, and chosen counts.

Customer Styled Lookbookecommerce-pro-lookbook-sections-customer-styled-lookbookSix owner photos, unretouched, paid in store credit and disclosed.

Editorial Spread Splitecommerce-pro-lookbook-sections-editorial-spread-splitOne magazine spread, a large frame beside styling notes and the itemized pieces.

Lookbook Cover Creditsecommerce-pro-lookbook-sections-lookbook-cover-creditsA centered lookbook cover with title, standfirst, and two actions over one wide frame, closed by a masthead credits row of four roles.

Lookbook Film Chaptersecommerce-pro-lookbook-sections-lookbook-film-chaptersA lookbook film player blueprint with a chapter marked progress bar beside a timestamped chapter list, each row naming the pieces on screen.

Numbered Look Listecommerce-pro-lookbook-sections-numbered-look-listThe outfit image beside numbered pieces in dressing order, no overlaid pins.

One Piece Three Waysecommerce-pro-lookbook-sections-one-piece-three-waysThree captioned frames in a row showing one overshirt styled three ways, each with its supporting pieces, closed by a constant piece anchor row.

Seasonal Gallery Gridecommerce-pro-lookbook-sections-seasonal-gallery-gridThe lookbook as mixed ratio frames with shopping in the captions, not on the photos.

Seasonal Lookbook Spreadecommerce-pro-lookbook-sections-seasonal-lookbook-spreadThe AW26 spread: one large frame, three supporting squares, and the pieces in the photos as priced rows.

Shop The Shoot Gridecommerce-pro-lookbook-sections-shop-the-shoot-gridOne lookbook frame with every item in it priced or declared not for sale, nothing in frame left unnamed.

Gift Membership Panelecommerce-pro-membership-sections-gift-membership-panelA two column layout with numbered how it works steps beside a gift certificate card listing benefits and a sample redemption code.

Join Flow Cardecommerce-pro-membership-sections-join-flow-cardThe signup card with cancel mechanics spelled out before the button, not after.

Member Early Access Calendarecommerce-pro-membership-sections-member-early-access-calendarThe next drops with member and everyone dates side by side, sequence not exclusivity.

Member Number Cardecommerce-pro-membership-sections-member-number-cardThe member number framed as a birthday not a rank, with renewal date and a two click cancel path.

Member Price Stripecommerce-pro-membership-sections-member-price-stripA heading and intro above a four column product grid, each card showing the everyone price beside the member price with a savings line.

Member Savings Chartecommerce-pro-membership-sections-member-savings-chartA two column split with heading and copy beside a card holding a line chart of cumulative member savings crossing a flat fee reference line.

Member Stories Rowecommerce-pro-membership-sections-member-stories-rowThree members quoted on their own verified math rather than enthusiasm.

Member Year Recapecommerce-pro-membership-sections-member-year-recapA centered heading and intro above an itemized recap card totaling one membership year down to the net, with the negative net policy stated below.

Membership Benefits Tableecommerce-pro-membership-sections-membership-benefits-tableGuest, free account, and member side by side, nothing free ever moves paid.

Membership Faqecommerce-pro-membership-sections-membership-faqFive membership questions including the one that says do not join and the honest early access caveat.

Membership Landing Heroecommerce-pro-membership-sections-membership-landing-heroThe program as a calculator, not a club, with the breakeven stated against the sale.

Membership Math Explainerecommerce-pro-membership-sections-membership-math-explainerThe fee worked three ways, including the spender who is told not to join.

All Orders Timelineecommerce-pro-order-tracking-all-orders-timelineEvery open order as a compact row with its one line status and link, one page, every parcel, no tabs.

Carrier Handoff Cardecommerce-pro-order-tracking-carrier-handoff-cardTwo stacked carrier legs, each with its own tracking number and status badge, joined by a handoff marker that explains the switch.

Courier Contact Cardecommerce-pro-order-tracking-courier-contact-cardThe courier for the van, the store for everything else, split honestly.

Delivery Day Timelineecommerce-pro-order-tracking-delivery-day-timelineThe day-of courier scan feed: stop count, firming window, and the driver note shown verbatim.

Delivery Instructions Cardecommerce-pro-order-tracking-delivery-instructions-cardRanked fallbacks with honor rates from real delivery data and the keep it short finding.

Delivery Photo Confirmationecommerce-pro-order-tracking-delivery-photo-confirmationThe courier's proof photo with privacy terms and the that is not my door path.

Delivery Route Mapecommerce-pro-order-tracking-delivery-route-mapA static street grid with the traveled route solid and remaining route dotted, beside a live stops away count, driver card, and stop list.

Delivery Window Cardecommerce-pro-order-tracking-delivery-window-cardThe window as the headline with the narrowing schedule and day of options.

Guest Order Lookupecommerce-pro-order-tracking-guest-order-lookupTwo column lookup with a headline, three hints on where the order number lives, and a card form for order number and email.

International Tracking Viewecommerce-pro-order-tracking-international-tracking-viewFive stage tracker with the customs stage annotated honestly and the filing threshold stated.

Late Order Compensation Cardecommerce-pro-order-tracking-late-order-compensation-cardThe automatic shipping refund when the miss is ours, help not compensation when it is the courier.

Order Issues Cardecommerce-pro-order-tracking-order-issues-cardThe three delivery failures with paths that never start with prove it.

Order Status Cardecommerce-pro-order-tracking-order-status-cardOne order as a compact card with status chip, delivery window, and two actions.

Pickup Instructions Cardecommerce-pro-order-tracking-pickup-instructions-cardLocker collection with the code at display size and the deadline policy stated.

Pickup Ready Statusecommerce-pro-order-tracking-pickup-ready-statusPickup code shown large, hold date in calendar not a countdown, and the ID rules by pickup type.

Preorder Progress Trackerecommerce-pro-order-tracking-preorder-progress-trackerFive dated production stages, yours is bag 14 of 32 in the batch.

Reschedule Delivery Cardecommerce-pro-order-tracking-reschedule-delivery-cardA centered card with a tappable week of day chips, three arrival windows as radio rows, and a confirm button naming the chosen slot.

Return Status Trackerecommerce-pro-order-tracking-return-status-trackerThe return as a refund tracker, every stage says where the money is.

Shipment Updates Listecommerce-pro-order-tracking-shipment-updates-listCourier scan codes translated into human sentences, the raw code kept visible.

Split Shipment Trackerecommerce-pro-order-tracking-split-shipment-trackerTwo parcels, one order, the split explained and shipping charged once.

Tracking Faq Stripecommerce-pro-order-tracking-tracking-faq-stripThe four questions people ask while staring at tracking, answered in one band.

Tracking Timelineecommerce-pro-order-tracking-tracking-timelineFour stages on a vertical line with timestamps, the current one pulsing.

Weather Delay Noticeecommerce-pro-order-tracking-weather-delay-noticeStorm pause with the courier reasoning published, the new date stated, and nothing to do.

Accepted Methods Rowecommerce-pro-payment-sections-accepted-methods-rowPayment options in three named groups as italic chips with one honest line each and two absences stated.

Bank Transfer Invoice Cardecommerce-pro-payment-sections-bank-transfer-invoice-cardInvoice payment for orders over 500 in three numbered rows with the speed caveat printed at the bottom.

Declined Card Playbookecommerce-pro-payment-sections-declined-card-playbookA four step vertical timeline of what happens when a card declines, from the same second through the 48 hour hold to release, with common causes named.

Installments Honest Mathecommerce-pro-payment-sections-installments-honest-mathThe BNPL split printed in mono arithmetic with the late fee row and the cheaper lookalike named openly.

Multi Currency Pricing Tableecommerce-pro-payment-sections-multi-currency-pricing-tableOne product priced across three regions with the tax content of each price written into the table.

No Surcharge Receiptecommerce-pro-payment-sections-no-surcharge-receiptA two column zero surcharge promise where a left list names three fees other checkouts add and a right mono receipt prints each at $0.00.

Payment Security Explainerecommerce-pro-payment-sections-payment-security-explainerThree plain rows on where the card number goes by architecture with no padlock icons and no badge images.

Refund Speed By Methodecommerce-pro-payment-sections-refund-speed-by-methodA refund timing comparison where each payment method row names its method, days to land, a proportional bar, and one line on where the wait lives.

Saved Card Controlsecommerce-pro-payment-sections-saved-card-controlsA two column saved card explainer where a left list states what saving stores and what removal does beside a static account panel blueprint.

Why No Crypto Cardecommerce-pro-payment-sections-why-no-crypto-cardThe honest no on crypto with the 60 day refund volatility math and a promise to update when it changes.

Delivery Feedback Cardecommerce-pro-post-purchase-sections-delivery-feedback-cardOne handover question with four chips, where the answer goes, and why it never touches the driver.

First Use Guide Cardecommerce-pro-post-purchase-sections-first-use-guide-cardThree timed steps before the first rain, each with the failure mode it prevents and the honest why.

Honest Review Requestecommerce-pro-post-purchase-sections-honest-review-requestThe review email shown in full at three weeks, no incentive stated inside it and one reminder maximum.

Missed Delivery Playbookecommerce-pro-post-purchase-sections-missed-delivery-playbookA centered heading over three ordered attempt cards, each pairing an icon, step label, delivery detail, and its limit, closed by a policy line.

Order Edit Window Cardecommerce-pro-post-purchase-sections-order-edit-window-cardThe 60 minute self serve window: address, size, or cancel from the order email with no contact needed.

Packaging Recycling Guideecommerce-pro-post-purchase-sections-packaging-recycling-guideA left aligned heading above four material tiles, each with an icon, description, a bin badge, and a disposal note, followed by a closing line.

Packing Slip Explainerecommerce-pro-post-purchase-sections-packing-slip-explainerAnnotated slip mockup: contents and serials, gift prices stripped, QR return, and initials in pen.

Product Registration Cardecommerce-pro-post-purchase-sections-product-registration-cardSerial plus email attaches the guarantee to the product itself, with three things registration unlocks.

Reorder Reminder Cardecommerce-pro-post-purchase-sections-reorder-reminder-cardA centered column with a usage curve card marking the single reminder day, a three rule grid explaining the timing, and a closing note.

Spare Parts Counterecommerce-pro-post-purchase-sections-spare-parts-counterA two column split pairing three checkmark promises with a parts panel listing each part by thumbnail, fit, price, and stock above an order button.

What Happens Next Timelineecommerce-pro-post-purchase-sections-what-happens-next-timelineFour stage dot timeline from payment to door, with the quiet stretch named as the system working.

Care Hub Pageecommerce-pro-prebuilt-pages-care-hub-pageFull care page sorted by material, with a schedule table, a kit picker, and a step by step how to article.

Contact Pageecommerce-pro-prebuilt-pages-contact-pageFull contact page routing each question to the right channel, with real reply times and a FAQ index.

Home Pageecommerce-pro-prebuilt-pages-home-pageStorefront home with category bar nav, mosaic hero, catalog split, ranked bestsellers, and reviews milestone.

Membership Pageecommerce-pro-prebuilt-pages-membership-pageMembership landing that argues with arithmetic including the profile where joining loses money.

Product Pageecommerce-pro-prebuilt-pages-product-pageProduct detail with sustainability panel, photo review wall, care kit attach, and shipping protection.

Repairs Hub Pageecommerce-pro-prebuilt-pages-repairs-hub-pageRepairs hub with the published price table, live bench queue, request form, and turnaround stats.

Resale Landing Pageecommerce-pro-prebuilt-pages-resale-landing-pageResale landing, the estimator first for sellers, graded listings and the loop counted for buyers.

Returns Center Pageecommerce-pro-prebuilt-pages-returns-center-pageReturns center with plain policy first, start flow, refund timeline, and a full FAQ before the footer.

Cost Breakdown Barsecommerce-pro-pricing-transparency-sections-cost-breakdown-barsThe $185 tote split into five labeled bars with dollar amounts and a note on each line that adds to the price.

Cost Of Free Returns Explainerecommerce-pro-pricing-transparency-sections-cost-of-free-returns-explainerThe $6.10 per return, the 6.2% rate, and the 38 cents on every order with the arithmetic printed.

Cost Per Wear Mathecommerce-pro-pricing-transparency-sections-cost-per-wear-mathThree equation tiles divide the price across a ten year design life, above a marked decade strip and a list of milestones it covers.

Input Cost Indexecommerce-pro-pricing-transparency-sections-input-cost-indexFour stat cards hold each raw input cost with its current rate, twelve month movement, and a trend sparkline, above the pass through rule line.

No Sales Policy Cardecommerce-pro-pricing-transparency-sections-no-sales-policy-cardWhy no sales ever, in three numbered rows, with the archive exception.

Price History Tableecommerce-pro-pricing-transparency-sections-price-history-tableEvery price since 2015 with the published reason per change including the year the price went down.

Price Questions Accordionecommerce-pro-pricing-transparency-sections-price-questions-accordionAn accordion answers five blunt questions about the price, each written plainly, with the first item expanded by default.

Retail Markup Comparisonecommerce-pro-pricing-transparency-sections-retail-markup-comparisonTwo side by side channel cards break the same tote into additive cost rows, one priced through a store, one sold direct.

Wage Transparency Cardecommerce-pro-pricing-transparency-sections-wage-transparency-cardFloor rate, median, and the local living wage published beside the labor cost line.

What Margin Pays Forecommerce-pro-pricing-transparency-sections-what-margin-pays-forThe $40 margin itemized, repairs to reserve, profit stated without apology.

Why This Price Explainerecommerce-pro-pricing-transparency-sections-why-this-price-explainerThe case for $185 against the $90 lookalike, with the sincere concession included.

Care By Material Tabsecommerce-pro-product-care-sections-care-by-material-tabsThree material routines in tabs, numbered steps, a frequency line, one product each.

Care Dos and Dontsecommerce-pro-product-care-sections-care-dos-dontsTwo side by side panels list five care habits to always do and five to never do, each with a one line reason, closed by an honest footer note.

Care Kit Pickerecommerce-pro-product-care-sections-care-kit-pickerThree kits with the recommended tag on the cheapest one, on purpose.

Care Label Decoderecommerce-pro-product-care-sections-care-label-decoderA static mockup of the sewn in care label sits beside its five stitched symbols, each translated into a plain instruction and the damage it prevents.

Care Schedule Tableecommerce-pro-product-care-sections-care-schedule-tableFour seasons, one five minute task each, and a Summer row that says do nothing.

Care Video Libraryecommerce-pro-product-care-sections-care-video-libraryThree short tutorial cards, each with a video thumbnail, runtime, a job summary, and the tools it uses, closed by a filming note.

Leather Aging Timelineecommerce-pro-product-care-sections-leather-aging-timelineYear 0 to 5 as four tiles, what patina is normal at each, cracking named as a claim, not aging.

Leather Care Faqecommerce-pro-product-care-sections-leather-care-faqFive bench answers, early cracking is a claim, and the vegan question unguarded.

Repair Bench Menuecommerce-pro-product-care-sections-repair-bench-menuA three step mail in repair process sits beside a six line price list with turnaround times and a closing note on repair claims.

Stain First Aid Guideecommerce-pro-product-care-sections-stain-first-aid-guideFour stains with do now, never do, and bench it if, ink answered honestly.

Storage Guide Splitecommerce-pro-product-care-sections-storage-guide-splitStorage rules beside the image, the shipping bag revealed as the storage bag.

Winterizing Checklistecommerce-pro-product-care-sections-winterizing-checklistFive steps with minute estimates, seams first, and the paid bench option offered without apology on row five.

Bag Finder Quizecommerce-pro-product-finders-bag-finder-quizTwo questions narrow nineteen bags to a shortlist, with the logic stated.

Budget Finder Bandecommerce-pro-product-finders-budget-finder-bandThree price tiles stating what each number buys, $200 answered honestly.

Finalist Duelecommerce-pro-product-finders-finalist-duelTwo finalist bags side by side with spec rows where bold marks the better number and ties grey out, closed by one decider question.

Finder Decision Treeecommerce-pro-product-finders-finder-decision-treeThe finder logic printed as a static branching tree of yes and no questions leading to four bag leaf cards you trace by hand.

Finder Entry Tilesecommerce-pro-product-finders-finder-entry-tilesThree ways into the catalog by question asked, not category browsed.

Finder Results Gridecommerce-pro-product-finders-finder-results-gridThe quiz verdict, one best match argued and two alternatives with trade offs.

First Bag Finderecommerce-pro-product-finders-first-bag-finderThree questions pre filled to the most common answers, the verdict card and the honest fork stated.

Gift Finder Cardecommerce-pro-product-finders-gift-finder-cardRecipient and budget in, three candidates out, with the safe pick flagged.

Load Calculatorecommerce-pro-product-finders-load-calculatorChecklist of everyday carry items that tallies liters live beside a verdict panel recommending one bag with a fill meter and headroom rows.

Quiz Step Cardecommerce-pro-product-finders-quiz-step-cardOne finder question as a full card, progress shown, skippable by design.

Use Case Matrixecommerce-pro-product-finders-use-case-matrixA fit matrix with five weeks down the side and four bags across the top, each cell a three state dot rating the fit.

Archive Pieces Gridecommerce-pro-product-grids-archive-pieces-gridResale one of ones at grid scale, each card carrying its serial, grade, price, and one line of history.

Bestsellers By Numbers Gridecommerce-pro-product-grids-bestsellers-by-numbers-gridFour products ranked by units sold this year, the count on every card and last place included with affection.

Bestsellers Railecommerce-pro-product-grids-bestsellers-railA snap scrolling ranked strip with units sold, no carousel scripts.

Colorway Family Gridecommerce-pro-product-grids-colorway-family-gridOne product in every colorway it has ever had: permanent, live batch count, and retired linked to resale.

Complete Collection Gridecommerce-pro-product-grids-complete-collection-gridAll 19 products on one page with the honest admission that there is no page two.

Dense List Rowsecommerce-pro-product-grids-dense-list-rowsProducts as comparison rows with mono spec lines, ratings, and add buttons.

Editorial Two Columnecommerce-pro-product-grids-editorial-two-columnFour products with large images and a full written sentence under each.

Featured Tile Gridecommerce-pro-product-grids-featured-tile-gridA mixed size product grid where one hero piece spans a double tile beside four supporting products, each card carrying its name and price.

Gift Guide Grid Pricedecommerce-pro-product-grids-gift-guide-grid-pricedPicks under budget bands where every why is gifting logic, not product copy.

Grid With Filters Sidebarecommerce-pro-product-grids-grid-with-filters-sidebarThe standard category page, a filter rail with result counts beside a rated product grid.

Grid With Sort Pillsecommerce-pro-product-grids-grid-with-sort-pillsWorking sort pills reorder the grid live, bestselling, price, and newest.

Last Chance Gridecommerce-pro-product-grids-last-chance-gridDiscontinued stock with live counts and the reason each is leaving.

Most Repaired Gridecommerce-pro-product-grids-most-repaired-gridFour tiles wearing repair counts as proof of service and the reframe that repairs mean kept.

New In Grid Datedecommerce-pro-product-grids-new-in-grid-datedArrivals grouped by week so returning visitors know where they left off.

One Of Each Gridecommerce-pro-product-grids-one-of-each-gridThe four piece starter set with total stated and a footer that advises to start with just the bag.

Preorder Gridecommerce-pro-product-grids-preorder-gridA preorder grid for a numbered batch, each card showing its ship window, price, a claimed progress bar, and a reserve button.

Recently Restocked Gridecommerce-pro-product-grids-recently-restocked-gridThis week's returns, each card dated with how long it was gone.

Sale Grid With Badgesecommerce-pro-product-grids-sale-grid-with-badgesThe markdown rack with percent badges, both prices, and live stock notes per card.

Simple Four Columnecommerce-pro-product-grids-simple-four-columnThe catalog reduced to image, name, and price in four disciplined columns.

Split Category Gridecommerce-pro-product-grids-split-category-gridA sticky editorial column beside the grid, the magazine category page.

Staff Picks Gridecommerce-pro-product-grids-staff-picks-gridFour picks from repairs, the bench, the returns desk, and email with the cost discount disclosed up front.

Tabbed Category Gridecommerce-pro-product-grids-tabbed-category-gridA product grid split across category tabs, each tab showing four bestsellers with a total count and a link to view the whole shelf.

Under 50 Gifts Gridecommerce-pro-product-grids-under-50-gifts-gridReal range items under $50 with who it suits captions, gift cards as the fallback.

With Color Swatchesecommerce-pro-product-grids-with-color-swatchesA grid with colorway dots and overflow counts, inventory truth on every card.

With Quick Addecommerce-pro-product-grids-with-quick-addConsumable cards with add buttons so replenishment never leaves the listing.

With Rating Rowsecommerce-pro-product-grids-with-rating-rowsCards led by their rating row and closed with one quoted review line each.

With Size Availabilityecommerce-pro-product-grids-with-size-availabilityA product grid printing every size on each card, live sizes as chips and sold out sizes struck through with a one line restock note.

Accessory Overviewecommerce-pro-product-overviews-accessory-overviewThe $22 brass fob page with three spec rows, the straight faced guarantee, and shipping honesty.

Bundle Kit Overviewecommerce-pro-product-overviews-bundle-kit-overviewEvery kit piece priced on its own row with the belt advisory directing belt owners to skip and save.

Bundle Productecommerce-pro-product-overviews-bundle-productA set priced against its itemized total with every included piece and its solo price.

Capacity Overviewecommerce-pro-product-overviews-capacity-overviewA product overview pairing a numbered interior map of every compartment with a matching legend that names what each one holds.

Digital Downloadecommerce-pro-product-overviews-digital-downloadA digital product with its exact file manifest, license terms, and a free sample.

Gallery With Detailsecommerce-pro-product-overviews-gallery-with-detailsThe canonical product top, gallery with thumbnail rail beside price, rating, and buy stack.

Heavy Freight Overviewecommerce-pro-product-overviews-heavy-freight-overviewThe furniture page where delivery gets equal billing, crew, room, doorway.

Limited Colorway Overviewecommerce-pro-product-overviews-limited-colorway-overviewOne dye lot of 200, live counts, the restock verdict, and the permanent alternative named below.

Made To Order Overviewecommerce-pro-product-overviews-made-to-order-overviewThe bespoke product with its make week, live queue, and charged at dispatch promise.

Minimal Product Spececommerce-pro-product-overviews-minimal-product-specA spec table doing the persuading, seven concrete rows and no imagery by design.

Overview With Inline Faqecommerce-pro-product-overviews-overview-with-inline-faqProduct page ending in three inbox sourced questions answered with the specificity that reduces returns.

Overview With Trade In Offerecommerce-pro-product-overviews-overview-with-trade-in-offerProduct page with the trade in card inline, credit landing at the courier scan, any brand accepted.

Personalised Product Overviewecommerce-pro-product-overviews-personalised-product-overviewLive initials preview on the product as you type, placement honesty included.

Product Video Splitecommerce-pro-product-overviews-product-video-splitThe demo video chaptered, jump straight to the rain test or the pockets.

Refurbished Grade Overviewecommerce-pro-product-overviews-refurbished-grade-overviewOne traded in unit with its serial, inspection report, and price against new.

Split With Sticky Buyecommerce-pro-product-overviews-split-with-sticky-buyA long product story scrolls while a compact buy panel stays pinned beside it.

Subscription Optionsecommerce-pro-product-overviews-subscription-optionsOne time versus subscribe as selectable cards with the cancel terms inside the option.

Trade Unit Overviewecommerce-pro-product-overviews-trade-unit-overviewThe B2B product page with volume bands, one fleet spec change stated, Net 30 terms, and an order pad CTA.

With Accordion Detailsecommerce-pro-product-overviews-with-accordion-detailsA clean buy fold with materials, care, shipping, and guarantee folded into an accordion.

With Ingredients Listecommerce-pro-product-overviews-with-ingredients-listEvery ingredient named with purpose and source, the INCI pattern for goods.

With Model Comparisonecommerce-pro-product-overviews-with-model-comparisonA product overview above a full comparison table of every model in the range, the viewed column highlighted with its buy button inside.

With Monogram Optionsecommerce-pro-product-overviews-with-monogram-optionsLetters, placement chips, and the return gate stated before the button changes to say no returns.

With Press Quoteecommerce-pro-product-overviews-with-press-quoteThe buy decision anchored on one earned press sentence, framed and linked.

With Review Snapshotecommerce-pro-product-overviews-with-review-snapshotA two column product overview pairing an image and buy stack with a star rating histogram and owner scored fit scales beneath.

With Shipping Estimatorecommerce-pro-product-overviews-with-shipping-estimatorPostcode in, a dated delivery answer out, the when question solved on the page.

With Size Guide Linkecommerce-pro-product-overviews-with-size-guide-linkFit guidance at the size row, a crowd verdict banner and a measured guide link.

With Store Pickupecommerce-pro-product-overviews-with-store-pickupA product overview with delivery and pickup modes, a nearby store list showing live stock and hours, and the route echoed in the cart button.

With Sustainability Panelecommerce-pro-product-overviews-with-sustainability-panelCheckable environment facts with the mill named, repairs counted, and the carbon badge refused until measured.

With Trust Rowecommerce-pro-product-overviews-with-trust-rowThe buy stack closing on four promise tiles that lead with numbers, not adjectives.

With Variant Swatchesecommerce-pro-product-overviews-with-variant-swatchesWorking color and size selection with the chosen pair echoed in the add to cart button.

With Wear Photos Overviewecommerce-pro-product-overviews-with-wear-photos-overviewA gallery aging timeline shows the same bag at new, year one, and year three before checkout.

Birthday Club Cardecommerce-pro-promo-sections-birthday-club-cardThe birthday perk that asks for the month, not the date, terms in one line.

Bogo Promo Splitecommerce-pro-promo-sections-bogo-promo-splitBuy one gift one with the mechanics in three lines and a live unit counter.

Bundle And Save Bandecommerce-pro-promo-sections-bundle-and-save-bandKit math published in full, both prices printed, the shipping logic underneath.

Bundle Deal Cardecommerce-pro-promo-sections-bundle-deal-cardTwo products joined by a plus with the pair price and the saving in the button.

Countdown Sale Bannerecommerce-pro-promo-sections-countdown-sale-bannerA real deadline in a primary band with the policy that powers it, we do not extend.

Discount Code Bandecommerce-pro-promo-sections-discount-code-bandOne code in a dashed ticket box with copy button and terms in a single honest line.

End Of Season Honesty Bandecommerce-pro-promo-sections-end-of-season-honesty-bandThe seasonal canvas leaving on a date at an unchanged price with the warehouse math printed plainly.

Flash Sale Rowsecommerce-pro-promo-sections-flash-sale-rowsThe odds and ends rack where every discount names its reason and its exact stock.

Free Gift With Purchaseecommerce-pro-promo-sections-free-gift-with-purchaseThe $18 tin free over $150, the real product, not a giveaway sachet.

Free Shipping Bannerecommerce-pro-promo-sections-free-shipping-bannerThe threshold as a quiet permanent strip, same number all year, even December.

Member Pricing Calloutecommerce-pro-promo-sections-member-pricing-calloutThe loyalty program pitched by a three row price table, not points, not tiers.

Members Week Bandecommerce-pro-promo-sections-members-week-bandEarly archive access for members 48 hours before the public, with the public date printed equally large.

Mix And Match Promoecommerce-pro-promo-sections-mix-and-match-promoA mix and match promo with a heading, a six tile picking grid marking two chosen items, and a footer bar tracking the kit total.

Price Drop Protectionecommerce-pro-promo-sections-price-drop-protectionA two column price drop promise pairing three numbered steps with a worked refund receipt showing the markdown difference returned to the card.

Referral Program Splitecommerce-pro-promo-sections-referral-program-splitBoth sides of the referral deal as equal cards, credited when the order ships.

Sale Calendar Bandecommerce-pro-promo-sections-sale-calendar-bandA centered sale calendar with a heading and a bordered list of dated sale rows, each carrying scope copy and a live status badge.

Seasonal Promo Tilesecommerce-pro-promo-sections-seasonal-promo-tilesEvery live offer on one screen, each tile carrying its real end condition.

Spend Save Ladderecommerce-pro-promo-sections-spend-save-ladderThree rungs with the effective percentage worked at each one.

Student Discount Cardecommerce-pro-promo-sections-student-discount-cardTen percent off with the verification time, stacking rules, and honest scope all stated before the button.

Trade In Bonus Bandecommerce-pro-promo-sections-trade-in-bonus-bandA dated 20 percent trade in credit bonus with the demand side reason published inline.

Vip Early Access Bandecommerce-pro-promo-sections-vip-early-access-bandThe earned regulars tier published whole, benefits, rule, and member count.

Weekend Flash Bandecommerce-pro-promo-sections-weekend-flash-bandA real window, a counted scope, and the overstock reason published.

Welcome Offer Signupecommerce-pro-promo-sections-welcome-offer-signupA two column email signup with a headline offer, address form, and a fact list on the right spelling out exactly what the newsletter sends.

Why No Birthday Clubecommerce-pro-promo-sections-why-no-birthday-clubThe birthday discount declined as data minimalism with what Acme holds and will not ask for.

Why No Coupon Fieldecommerce-pro-promo-sections-why-no-coupon-fieldThe missing code box defended in three arguments, with the gift card exception.

Bench Queue Statusecommerce-pro-repair-service-sections-bench-queue-statusThe repair backlog live, queue depth, turnaround, and the bench named.

Mail In Stepsecommerce-pro-repair-service-sections-mail-in-stepsThe postal repair in four cards with packing guidance that prevents real mistakes.

Meet The Benchecommerce-pro-repair-service-sections-meet-the-benchA centered intro above two profile cards, each with an avatar, bio, and three stat rows, closed by a signed card note.

Parts Trade Inecommerce-pro-repair-service-sections-parts-trade-inA two column trade in layout with three numbered steps beside a tiered credit table of four condition rows and a closing note.

Repair Cost Estimatorecommerce-pro-repair-service-sections-repair-cost-estimatorDamage type and warranty status in, the real bench price out, with every guarantee repair confirmed at zero.

Repair Glossaryecommerce-pro-repair-service-sections-repair-glossaryThe four bench terms defined in ruled rows with prices so every estimate reads without decoding.

Repair Guarantee Termsecommerce-pro-repair-service-sections-repair-guarantee-termsA centered heading over two side by side cards listing what the guarantee covers and excludes, closed by a one line claim path.

Repair Pricing Tableecommerce-pro-repair-service-sections-repair-pricing-tableThe out of warranty menu published, seven jobs with prices and bench time.

Repair Request Formecommerce-pro-repair-service-sections-repair-request-formThree fields and two photos start the repair, with the schedule promised in dates.

Repair Status Timelineecommerce-pro-repair-service-sections-repair-status-timelineA two column repair tracker pairing an intro with a card that steps one ticket through five bench stages on a vertical status timeline.

Repair Stories Galleryecommerce-pro-repair-service-sections-repair-stories-galleryBefore and after pairs with bench notes, the guarantee shown working.

Repair Turnaround Statsecommerce-pro-repair-service-sections-repair-turnaround-statsFour bench metrics published like a support inbox with the October queue spike stated upfront.

Repair Vs Replace Guideecommerce-pro-repair-service-sections-repair-vs-replace-guideThe bench's decision rules, including neither and sadly replace.

Spare Parts Gridecommerce-pro-repair-service-sections-spare-parts-gridEvery replaceable part sold individually with fit notes and honest difficulty.

Walk In Hours Cardecommerce-pro-repair-service-sections-walk-in-hours-cardFriday bench hours with the fixable list, the ticket list, and no appointment needed.

Bench Restoration Logecommerce-pro-resale-sections-bench-restoration-logA three column triptych follows one traded in unit from arrival notes through itemized bench work to a regraded listing with price and guarantee.

Buyback Explainerecommerce-pro-resale-sections-buyback-explainerWhy the store buys its own products back, the business case stated out loud.

Circularity Stats Bandecommerce-pro-resale-sections-circularity-stats-bandThe loop counted in five tiles, with zero landfilled labeled as the one that matters.

Consignment Vs Buyback Tableecommerce-pro-resale-sections-consignment-vs-buyback-tableTwo resale routes on four rows, the 12% failure rate included, no verdict picked.

New Versus Used Compareecommerce-pro-resale-sections-new-vs-used-compareTwo side by side cards contrast buying new against a graded resale unit, each with an image, price, four condition rows, and a buy button.

Provenance Report Cardecommerce-pro-resale-sections-provenance-report-cardOne resale unit documented from first sale to regrade with a timestamped record that travels to every owner.

Resale Drop Calendarecommerce-pro-resale-sections-resale-drop-calendarUpcoming graded batches as dated rows including one entry honest enough to call itself TBD.

Resale Faqecommerce-pro-resale-sections-resale-faqBuyer and seller questions answered, guarantees per grade and the regret clause.

Resale Grading Scaleecommerce-pro-resale-sections-resale-grading-scaleFour grades defined once with prices and the guarantees that travel with them.

Resale Value Curveecommerce-pro-resale-sections-resale-value-curveA two column split pairs a heading and three retention notes with a card charting resale value falling over six years to a marked floor.

Secondhand Gridecommerce-pro-resale-sections-secondhand-gridOne of one graded pieces with history lines, used goods sold as biographies.

Sell Back Stepsecommerce-pro-resale-sections-sell-back-stepsEstimate to credit in four steps, about a week, the estimate locked from the first.

Trade In Estimatorecommerce-pro-resale-sections-trade-in-estimatorProduct and honest condition in, the credit out, regrades only ever go up.

What We Takeecommerce-pro-resale-sections-what-we-takeA centered intro sits above two panels, one listing four accepted trade ins with reasons and another listing the four kinds it declines.

Chargeback Honesty Cardecommerce-pro-resolution-sections-chargeback-honesty-cardThe dispute button named as your right with honest speed math on both routes and a published record.

Complaint Process Explainerecommerce-pro-resolution-sections-complaint-process-explainerThree complaint stages with real durations and the exits past the store linked rather than buried.

Damage Report Cardecommerce-pro-resolution-sections-damage-report-cardA three step damaged item flow beside a static report form with order number field, photo drop area, fix choices, and submit.

Dispute Timeline Explainerecommerce-pro-resolution-sections-dispute-timeline-explainerThe chargeback path dated from day zero with honest advice on when a refund request beats it by weeks.

Escalation Contacts Cardecommerce-pro-resolution-sections-escalation-contacts-cardReal addresses in order from the support inbox to the founder to the dispute body that binds the store.

Make It Right Promiseecommerce-pro-resolution-sections-make-it-right-promiseThree automatic fixes for failures the store caused and the line between help and compensation.

Refund Status Cardecommerce-pro-resolution-sections-refund-status-cardAn example refund tracked across four stages from approval to statement, with wait bars per payment method and an escalation line below.

Remedy Options Cardecommerce-pro-resolution-sections-remedy-options-cardFour remedy cards side by side, each with an icon, an optional badge, a description, and a spec row stating speed and any extra.

Resolution Case Logecommerce-pro-resolution-sections-resolution-case-logA single complaint published as a timestamped thread, customer and support messages with system notes between them and the fix cost logged.

Resolution Outcomes Reportecommerce-pro-resolution-sections-resolution-outcomes-reportA quarterly complaint report with four headline stat tiles, a shared legend, and segmented bars showing where each complaint category ended.

Second Look Appealecommerce-pro-resolution-sections-second-look-appealA two column appeal section with a three step path on one side and last quarter's appeal outcomes and a segmented bar beside it.

Batch Status Trackerecommerce-pro-restock-sections-batch-status-trackerA production heading, a three fact strip, and a five stage vertical timeline of done, in progress, and upcoming stages, each with a dated note.

Drop Calendar Listecommerce-pro-restock-sections-drop-calendar-listThe release pipeline with exact dates emphasized and honest months muted.

Most Requested Restocks Listecommerce-pro-restock-sections-most-requested-restocks-listThe five longest waitlists ranked by queue length, each with batch math and an honest date or unknown.

Next Drop Countdownecommerce-pro-restock-sections-next-drop-countdownA split section with a heading, three countdown tiles, waitlist buttons, and a final contents list with unit counts beside placeholder imagery.

Notify Me Cardecommerce-pro-restock-sections-notify-me-cardOut of stock as a dated promise with queue size against batch size.

Notify Me Inline Rowecommerce-pro-restock-sections-notify-me-inline-rowThe sold out inline row with the batch date when known and the honest unknown when not, order noted.

Preorder Explainerecommerce-pro-restock-sections-preorder-explainerBatch preorder mechanics in four steps, charged at dispatch, never before.

Queue Fairness Policyecommerce-pro-restock-sections-queue-fairness-policyA heading, an intro, and a two by two grid of four icon cards, each stating one waitlist fairness rule, with a closing policy line.

Restock History Logecommerce-pro-restock-sections-restock-history-logEvery past restock dated with units and sell through, the receipt behind the ETA.

Restock History Noteecommerce-pro-restock-sections-restock-history-noteA year of restock promises scored against what landed, the miss included.

Size Restock Tableecommerce-pro-restock-sections-size-restock-tableA heading and a per size table with status badges, next batch dates, queue lengths, and a notify or add to cart action per row.

Stock Counts Explainerecommerce-pro-restock-sections-stock-counts-explainerHow the counters work, sworn in public, the hand set field does not exist.

Waitlist Position Cardecommerce-pro-restock-sections-waitlist-position-cardYour queue position with the batch math stated and a leave button with no guilt.

Why Batches Explainerecommerce-pro-restock-sections-why-batches-explainerThe four operational reasons everything restocks in batches, linked from every sold out tile.

Damaged Item Fast Trackecommerce-pro-returns-sections-damaged-item-fast-trackA split layout pairs three photo first steps for damaged arrivals with a static report panel of issue rows, a dropzone, and a submit button.

Dropoff Map Listecommerce-pro-returns-sections-dropoff-map-listThree nearest return drop points listed with distance, hours, and the honest queue note per row.

Exchange Instead Panelecommerce-pro-returns-sections-exchange-instead-panelThe swap offer on the honest speed argument, with the refund button kept full size.

Holiday Return Windowecommerce-pro-returns-sections-holiday-return-windowA three date stat rail marks the holiday window opening, cutoff, and deadline, with gift return notes and a rule that the longer window wins.

Instant Store Credit Optionecommerce-pro-returns-sections-instant-store-credit-optionCard refund in 2 to 4 bank days or instant store credit with the reasoning for no bonus published.

Plain Language Policyecommerce-pro-returns-sections-plain-language-policyThe whole returns policy in eight numbered sentences, the legal version linked, not inflicted.

Refund Timeline Explainerecommerce-pro-returns-sections-refund-timeline-explainerWhere the money is at each stage, who holds it, and which days are the bank.

Return Condition Guideecommerce-pro-returns-sections-return-condition-guideTwo side by side lists sort eight returns into full refund and keep it, with a closing line routing gray area cases to a person.

Return Label Stepsecommerce-pro-returns-sections-return-label-stepsPrint, QR, or pickup, two free and one priced at the courier cost it is.

Return Tracking Statusecommerce-pro-returns-sections-return-tracking-statusThe return tracked with the refund milestone embedded before the warehouse stage.

Returns Faqecommerce-pro-returns-sections-returns-faqSix questions from the returns inbox, including the used item and the missed deadline.

Returns Feedback Loopecommerce-pro-returns-sections-returns-feedback-loopThree product rows each pair the top return note with the fix that shipped and a before and after return rate stat column.

Start Return Flowecommerce-pro-returns-sections-start-return-flowThe order as selectable rows, the refund promised at the courier scan, not the warehouse.

Ask An Owner Qaecommerce-pro-reviews-sections-ask-an-owner-qaThree QA threads answered by verified owners, staff stepping in once and labeled loudly for it.

Attribute Ratings Breakdownecommerce-pro-reviews-sections-attribute-ratings-breakdownA split reviews section with the overall average and sample size beside four sub scores, each with a bar meter and one anchoring quote.

Critical Reviews Pageecommerce-pro-reviews-sections-critical-reviews-pageAll critical reviews under four stars, newest first with store replies and the honest count of 412.

Most Helpful Pairecommerce-pro-reviews-sections-most-helpful-pairThe top voted positive and critical reviews side by side, both right.

Most Helpful Reviews Panelecommerce-pro-reviews-sections-most-helpful-reviews-panelThe top voted positive and critical reviews side by side, chosen by readers.

Photo Review Guidelines Cardecommerce-pro-reviews-sections-photo-review-guidelines-cardThree honest rules for a useful review photo, a do and do not table, and the five dollar credit terms.

Photo Review Wallecommerce-pro-reviews-sections-photo-review-wallCustomer photos with stars, one line, and ownership time from order dates.

Press And Customer Reviewsecommerce-pro-reviews-sections-press-and-customer-reviewsA two column review section pairing press verdicts with publication marks against verified owner quotes with avatars, closed by a sourcing note.

Questions And Answersecommerce-pro-reviews-sections-questions-and-answersPre purchase questions answered by the team and by owners, labeled and timed.

Rating Over Time Chartecommerce-pro-reviews-sections-rating-over-time-chartMonthly rating as a shadcn line with the dip kept and its recall explained.

Rating Summary With Barsecommerce-pro-reviews-sections-rating-summary-with-barsThe average beside the full distribution, with the one star reviews linked first.

Review Cards Gridecommerce-pro-reviews-sections-review-cards-gridSix short reviews that show how long each reviewer has owned the piece.

Review Highlights Summaryecommerce-pro-reviews-sections-review-highlights-summaryRecurring review themes with counts and quotes, the mixed one kept, method disclosed.

Review Incentives Disclosureecommerce-pro-reviews-sections-review-incentives-disclosureWhat reviewers are paid, published next to the stars it governs.

Review List With Photosecommerce-pro-reviews-sections-review-list-with-photosFull reviews with photo strips and the three star repair story kept on page one.

Review Topic Filtersecommerce-pro-reviews-sections-review-topic-filtersTopic chips filter live review quotes by what buyers actually worry about, with mention counts.

Reviews From Returnsecommerce-pro-reviews-sections-reviews-from-returnsA centered heading over three review cards from buyers who returned the product, each showing return timing and their better fit, closed by a policy line.

Reviews Milestone Bandecommerce-pro-reviews-sections-reviews-milestone-bandThe review program audited, including the critical share, all published.

Reviews Over The Yearsecommerce-pro-reviews-sections-reviews-over-the-yearsOne quote per ownership band, year one to year five plus, sorted so time does the arguing.

Reviews With Fit Feedbackecommerce-pro-reviews-sections-reviews-with-fit-feedbackFit verdict as three div bars with 412 buyer sample, beside two quotes anchored to height and load carried.

Spotlight Reviewecommerce-pro-reviews-sections-spotlight-reviewOne earned review at editorial scale with the customer's own photos and provenance.

Store Response Threadecommerce-pro-reviews-sections-store-response-threadCritical reviews with signed public replies and the fixes they caused.

Verified Buyer Stripecommerce-pro-reviews-sections-verified-buyer-stripThe review system's three rules with enforcement counts, the policy as a trust band.

Video Reviews Rowecommerce-pro-reviews-sections-video-reviews-rowA centered heading over a four up row of customer filmed video thumbnails, each with a play mark, runtime, star rating, and one transcript pull.

Write Review Promptecommerce-pro-reviews-sections-write-review-promptThe review ask with honest expectations, ninety seconds, wear photos welcome.

Empty Search Stateecommerce-pro-search-sections-empty-search-stateZero results handled honestly, what we checked and three real ways forward.

Guided Search Finderecommerce-pro-search-sections-guided-search-finderA guided finder replacing the search box with three toggle chip questions, surfacing the best matching product once all three answers are in.

Popular Searches Bandecommerce-pro-search-sections-popular-searches-bandThis month's top queries as chips, ranked by real counts and dated.

Saved Search Alertsecommerce-pro-search-sections-saved-search-alertsA saved searches panel listing each stored query as a row with its save date, what changed since your last visit, and a per search alert toggle.

Search By Photo Cardecommerce-pro-search-sections-search-by-photo-cardSnap a bag you saw, get the match, the photo deleted the same minute.

Search Results Pageecommerce-pro-search-sections-search-results-pageResults for a query with the count, sort, and the close miss row below.

Search Suggestions Panelecommerce-pro-search-sections-search-suggestions-panelThe open search box, recents, popular now, and direct product jumps.

Search Syntax Guideecommerce-pro-search-sections-search-syntax-guideA power search reference with six operator cards, each pairing a query fragment chip with its effect, then one combined example query in a search field.

Search With Filters Barecommerce-pro-search-sections-search-with-filters-barResults with toggleable filter chips and the count updating per selection.

Store Availability Searchecommerce-pro-search-sections-store-availability-searchA local availability search pairing a product query with nearby store rows showing live shelf counts and pickup windows, plus a shipping fallback.

Discount Bandsecommerce-pro-seconds-sections-discount-bandsA header above a three column grid of discount bands, each card pairing a fixed markdown percentage with its flaw words and an example listing.

Drop Alertecommerce-pro-seconds-sections-drop-alertA split layout pairing an email signup for the drop schedule with a ledger of the last four drops showing piece counts and sellout speed.

Flaw Glossaryecommerce-pro-seconds-sections-flaw-glossaryThe four words the seconds rail can use, each defined in plain language with a severity line.

Photographed Flaw Overviewecommerce-pro-seconds-sections-photographed-flaw-overviewOne second with the flaw photographed close, the discount named, and the full guarantee unchanged.

Rail Timelineecommerce-pro-seconds-sections-rail-timelineA centered header above a vertical numbered timeline tracing a second through five steps from failed inspection to sold, with elapsed time on each step.

Seconds Faqecommerce-pro-seconds-sections-seconds-faqFive seconds rail questions answered with glossary words, the unchanged returns and the pricing spine.

Seconds Gridecommerce-pro-seconds-sections-seconds-gridFour one of one pieces each named by its actual flaw and the discount that flaw earned.

Seconds Vs New Tableecommerce-pro-seconds-sections-seconds-vs-new-tableThree rows change when you buy a second and four rows do not, and the unchanged column does the selling.

Sold Archiveecommerce-pro-seconds-sections-sold-archiveA centered header above a three figure stat strip and a ledger of recently sold seconds naming each piece, its flaw, band, and rail days.

Why Seconds Exist Letterecommerce-pro-seconds-sections-why-seconds-exist-letterThe QC lead explains the 4% failure rate, the three options, and why naming the flaw won.

Bulk Order Cartecommerce-pro-shopping-carts-bulk-order-cartTrade quantity cart with volume break shown per line and the next break named when the buyer is close.

Cart Stock Warningsecommerce-pro-shopping-carts-cart-stock-warningsLine items with live stock truth, including the one that sold out waiting.

Cart With Delivery Estimatesecommerce-pro-shopping-carts-cart-with-delivery-estimatesEach cart line carries its own arrival date and the made to order batch date before payment.

Cart With Dutiesecommerce-pro-shopping-carts-cart-with-dutiesA two column international cart with a destination row, line items, a border explainer, and a landed cost summary itemizing duties and tax paid upfront.

Cart With Eco Optionsecommerce-pro-shopping-carts-cart-with-eco-optionsPackaging and speed choices with real trade offs and the honest $2.

Cart With Gift Splitecommerce-pro-shopping-carts-cart-with-gift-splitLine items grouped by destination, shipping per address, one checkout with gift tracking to you only.

Cart With Installments Previewecommerce-pro-shopping-carts-cart-with-installments-previewThe total with the four payment split shown inline before the payment page asks you to choose.

Cart With Order Notesecommerce-pro-shopping-carts-cart-with-order-notesA note for the humans packing this, with honored examples that prove readership.

Cart With Price Dropsecommerce-pro-shopping-carts-cart-with-price-dropsA single column cart where each line shows watched pricing, drops applied with a struck old price and one held item, above a savings summary and checkout.

Cart With Promo Codeecommerce-pro-shopping-carts-cart-with-promo-codeA visible code field that says where codes come from, applied codes itemized.

Cart With Recommendationsecommerce-pro-shopping-carts-cart-with-recommendationsA clean cart above a cross sell rail where every suggestion states its reason.

Cart With Save For Laterecommerce-pro-shopping-carts-cart-with-save-for-laterThe cart with a parked strip that tracks prices and never triggers a campaign.

Cart With Trade Inecommerce-pro-shopping-carts-cart-with-trade-inA single column cart pairing a new item with a locked trade in credit, its condition and inspection steps, and a summary showing the reduced amount due today.

Compact Cart Summaryecommerce-pro-shopping-carts-compact-cart-summaryThe cart as one strip, count, named preview, total, and checkout.

Empty Cart Stateecommerce-pro-shopping-carts-empty-cart-stateThe empty cart as navigation, no guilt, with three labeled exits.

Free Shipping Progress Cartecommerce-pro-shopping-carts-free-shipping-progress-cartA threshold meter with one honest gap closing suggestion under the items.

Full Cart Pageecommerce-pro-shopping-carts-full-cart-pageThe two column cart with steppers and a summary that promises no checkout surprises.

Gift Options Cartecommerce-pro-shopping-carts-gift-options-cartA working gift toggle with message field, free wrap, and no prices on gift receipts.

Mini Cart Drawerecommerce-pro-shopping-carts-mini-cart-drawerThe open drawer with two items, a shipping meter, and honest top up arithmetic.

Mini Cart Panelecommerce-pro-shopping-carts-mini-cart-panelThe slide over cart as a standalone panel with both exits given equal standing.

Saved For Later Cartecommerce-pro-shopping-carts-saved-for-later-cartThe parking shelf under the cart, watched while parked, restocks move back.

Shared Cartecommerce-pro-shopping-carts-shared-cartA two column shared cart with a contributors avatar strip, line items tagged by who added them, and a per person split summary with one checkout.

Subscription Items Cartecommerce-pro-shopping-carts-subscription-items-cartRecurring and one time lines separated, with today split from every 4 weeks.

Belt Sizing Guideecommerce-pro-size-and-fit-belt-sizing-guidePin to hole on the belt that fits, with the do not order your jeans size rule.

Between Sizes Deciderecommerce-pro-size-and-fit-between-sizes-deciderOne sizing rule per product type, each backed by ten years of exchange data from the ledger.

Brand To Brand Fit Tableecommerce-pro-size-and-fit-brand-to-brand-fit-tableFour brand archetypes translated to an Acme order, with the outdoor row that sends buyers to centimeters.

Cut Comparisonecommerce-pro-size-and-fit-cut-comparisonThe same chest size in three cuts as garment silhouettes with a dashed chest line, each with ease numbers and who it suits.

Denim Size Matrixecommerce-pro-size-and-fit-denim-size-matrixA waist by inseam availability grid beside a height to inseam picker, so buyers choose both numbers instead of guessing the second.

Fit Notes Panelecommerce-pro-size-and-fit-fit-notes-panelFour notes from the pattern table, the cut, the between sizes call, and who graded it.

Glove Sizing Cardecommerce-pro-size-and-fit-glove-sizing-cardPalm cm to size table with the between sizes rule and the leather stretch already accounted for.

International Size Conversionecommerce-pro-size-and-fit-international-size-conversionHouse sizes against four systems, with centimeters as the tiebreaker.

Kids Growth Sizingecommerce-pro-size-and-fit-kids-growth-sizingAge bands with buy ahead advice built in, height decides, age approximates.

Measure Yourself Guideecommerce-pro-size-and-fit-measure-yourself-guideA drawn figure with three measurement lines, each with a no tape fallback.

Measurement Guide Diagramecommerce-pro-size-and-fit-measurement-guide-diagramA drawn garment SVG with lettered measurement lines matching the chart.

Model Size Referenceecommerce-pro-size-and-fit-model-size-referenceThree fit models across the height range in framed cards, each with real measurements, the size they wear, and an honest fit note.

Reviewer Fit Feedbackecommerce-pro-size-and-fit-reviewer-fit-feedbackA true to size distribution built from verified reviews as div bars, beside three reviewer quotes stating height, size bought, and verdict.

Shoe Size Measureecommerce-pro-size-and-fit-shoe-size-measurePaper and pen measurement in three steps, then the centimeter table.

Size Chart All Productsecommerce-pro-size-and-fit-size-chart-all-productsEvery sized product on one bookmarkable table, each row linking its full guide and measuring steps.

Size Chart Tableecommerce-pro-size-and-fit-size-chart-tableGarment measurements taken flat, with tolerances and the between sizes verdict.

Size Recommender Cardecommerce-pro-size-and-fit-size-recommender-cardHeight and usual size in, a recommendation with its reasoning printed out.

Strap Length Guideecommerce-pro-size-and-fit-strap-length-guideThe 40 cm strap range explained via torso not height, with a string measuring method and wear table.

As Worn By Rowecommerce-pro-social-proof-sections-as-worn-by-rowThree customers whose work tests the product, with tenure and their own words.

By The Numbers Bandecommerce-pro-social-proof-sections-by-the-numbers-bandFive proof numbers with sources, picked to show people stay, not just arrive.

Community Spotlight Interviewecommerce-pro-social-proof-sections-community-spotlight-interviewOne customer at length, three questions, the unfixed pocket kept in.

Creator Collabs Listecommerce-pro-social-proof-sections-creator-collabs-listThe collab archive with splits disclosed and honest sell through numbers.

Customer Photos Ctaecommerce-pro-social-proof-sections-customer-photos-ctaThe owner photo ask with usage terms up front, older and dirtier preferred.

Independent Tests Panelecommerce-pro-social-proof-sections-independent-tests-panelA ruled panel of four third party test results, each row naming the issuer, method, verbatim result and date with a report link, plus a fee disclosure.

New Vs Worn Compareecommerce-pro-social-proof-sections-new-vs-worn-compareA two column comparison of the same product at day one and year five, each with matching condition rows and a borrowed back disclosure below.

Owner Posts Wallecommerce-pro-social-proof-sections-owner-posts-wallA responsive wall of six unsolicited owner text posts, each card carrying an avatar, handle, platform and date, then the quoted words.

Press Mentions Rowecommerce-pro-social-proof-sections-press-mentions-rowThree dated press quotes, the mixed review kept in on purpose.

Press Quotes Rowecommerce-pro-social-proof-sections-press-quotes-rowThree exact press sentences with text wordmarks and dates instead of logo soup.

Repair Counter Live Bandecommerce-pro-social-proof-sections-repair-counter-live-bandThe year to date repair count as one large integer, broken into three sub counts updated nightly.

Stockist Quotes Rowecommerce-pro-social-proof-sections-stockist-quotes-rowThree wholesale stockists quoted on why they reorder, with the margin disclosure printed below.

Thanks Milestones Bandecommerce-pro-social-proof-sections-thanks-milestones-bandThe stats band as gratitude, these are your numbers, not ours.

Ugc Photo Gridecommerce-pro-social-proof-sections-ugc-photo-gridSix owner photos with handles and tenure captions, consent stated in one line.

Video Reviews Rowecommerce-pro-social-proof-sections-video-reviews-rowA three column row of independent owner review videos, each with thumbnail, runtime, channel, and a pulled quote, plus a not commissioned disclosure.

Years Owned Leaderboardecommerce-pro-social-proof-sections-years-owned-leaderboardThe longest serving bags from the registration data, numbered rows with a repair prize for first place.

Capacity Tableecommerce-pro-spec-sections-capacity-tableCapacity claims tested by packing real things into a real bag with tight and no rows included.

Compatibility Tableecommerce-pro-spec-sections-compatibility-tableAccessories matrix across four bags with every cell tested by clipping and a minus meaning no not yet.

Dimensions Diagramecommerce-pro-spec-sections-dimensions-diagramInline SVG technical line drawing paired with a table for screen readers and copy paste, four callouts.

Full Spec Sheetecommerce-pro-spec-sections-full-spec-sheetThe complete spec table with a tolerance column, because handmade varies and pretending generates email.

Hardware Spec Cardecommerce-pro-spec-sections-hardware-spec-cardThe buckle, zips, and rivets each specified and each carrying its failure rate from the bench log.

Materials Ledgerecommerce-pro-spec-sections-materials-ledgerA ruled ledger listing each material with its use, source mill or tannery, how long the relationship has run, and switch criteria.

Spec Revisionsecommerce-pro-spec-sections-spec-revisionsA revision log comparing the current version to the last, each changed spec shown as a from and to pair with its reason.

Tolerances Note Cardecommerce-pro-spec-sections-tolerances-note-cardThree ruled sections on why handmade varies, what never does, and a return promise with no friction.

Weather Test Resultsecommerce-pro-spec-sections-weather-test-resultsA split section pairing the test method notes on the left with rain scenarios on the right, each rated on a five dot resistance scale.

Weight Breakdownecommerce-pro-spec-sections-weight-breakdownA stacked list of product components, each with its gram weight, a proportional bar, and a note, closing on a summed total row.

Whats In The Boxecommerce-pro-spec-sections-whats-in-the-boxFour items in and four deliberately out, with the absence list carrying the personality of the brand.

Footer Accordion Mobileecommerce-pro-store-footers-footer-accordion-mobileFooter whose four link groups collapse into an accordion on mobile and spread into four columns on desktop, above the legal bar.

Footer Minimal Legalecommerce-pro-store-footers-footer-minimal-legalBrand name, four policy links, and a legal bar with company number, sized for checkout pages.

Footer With App Badgesecommerce-pro-store-footers-footer-with-app-badgesFooter whose brand column sells the mobile app with two store badges, a scannable code, and the app rating beside three link columns.

Footer With Category Sitemapecommerce-pro-store-footers-footer-with-category-sitemapEvery product and collection as a dense directory, completeness stated outright.

Footer With Company Numbersecommerce-pro-store-footers-footer-with-company-numbersThe brand column carries company number, VAT, and the real street address.

Footer With Language Regionecommerce-pro-store-footers-footer-with-language-regionThree storefronts as plain text rows with duty notes per region and the pricing page named openly.

Footer With Locale Selectorecommerce-pro-store-footers-footer-with-locale-selectorRegion, language, and currency as visible selectors with the duties promise localized.

Footer With Newsletterecommerce-pro-store-footers-footer-with-newsletterThe capture band leading the footer, one email a month with the open rate as proof.

Footer With Reviews Scoreecommerce-pro-store-footers-footer-with-reviews-scoreThe 4.8 with its count in the footer, linking the critical reviews first.

Footer With Service Linksecommerce-pro-store-footers-footer-with-service-linksService columns instead of category columns: Repairs, Resale, Membership, and Help each named.

Footer With Social Feedecommerce-pro-store-footers-footer-with-social-feedFooter led by a shoppable social feed of six square post tiles under the handle and follower count, above a compact link row.

Footer With Store Locationsecommerce-pro-store-footers-footer-with-store-locationsFooter pairing the link columns with three physical store cards showing address, weekly hours, phone number, and a directions link each.

Footer With Trust Rowecommerce-pro-store-footers-footer-with-trust-rowThe four policy facts as a bordered strip above standard footer columns.

Holiday Hours Footerecommerce-pro-store-footers-holiday-hours-footerThe whole December schedule in one ruled list, cutoffs, support, bench.

Mega Store Footerecommerce-pro-store-footers-mega-store-footerThe full sitemap footer with payment chips and the VAT number European buyers scan for.

Minimal Store Footerecommerce-pro-store-footers-minimal-store-footerA centered one row footer with the five questions a single product store gets.

Archive Sale Heroecommerce-pro-store-heroes-archive-sale-heroThe twice yearly archive sale with the real piece count, listing time, and the full guarantee.

Bestseller Spotlight Heroecommerce-pro-store-heroes-bestseller-spotlight-heroThe one bag that outsells the rest, argued with three audited numbers and an honest lede crediting buyers.

Brand Manifesto Heroecommerce-pro-store-heroes-brand-manifesto-heroThe position at display size with three receipts, buy it once, we mean the once.

Centered With Category Linksecommerce-pro-store-heroes-centered-with-category-linksThe brand promise above four category tiles with style counts, browsing starts here.

Comparison Heroecommerce-pro-store-heroes-comparison-heroA store hero that argues price with a scrolling cost of ownership table comparing the flagship against a cheap rival, ending on cost per year.

Editorial Split Heroecommerce-pro-store-heroes-editorial-split-heroThe store led by seasonal writing beside a campaign image with its provenance caption.

Founders Welcome Heroecommerce-pro-store-heroes-founders-welcome-heroA kitchen table origin and a signed refusal list from the founder still packing boxes on Fridays.

Gift Guide Heroecommerce-pro-store-heroes-gift-guide-heroThe seasonal guide opened by recipient with price floors and the gift card lane.

Gift Season Heroecommerce-pro-store-heroes-gift-season-heroDecember hero with real courier cutoff dates, a gift returns promise, and a Placeholder split image panel.

Hero With Bestsellers Rowecommerce-pro-store-heroes-hero-with-bestsellers-rowThe pitch beside the four most bought products ranked with units sold.

Hero With Reviews Stripecommerce-pro-store-heroes-hero-with-reviews-stripThe pitch above three one line verified reviews, proof in the fold without a product shot.

Made Here Heroecommerce-pro-store-heroes-made-here-heroEleven people, one room, 60 bags a week and the supplier count named on the chain page.

Mosaic Collage Heroecommerce-pro-store-heroes-mosaic-collage-heroFive labeled category tiles beside the small range manifesto.

New Arrivals Heroecommerce-pro-store-heroes-new-arrivals-heroA drop announcement above three new pieces with names and prices in the fold.

Preorder Heroecommerce-pro-store-heroes-preorder-heroA split store hero for a preorder batch pairing price, deposit terms, and units left with a production timeline panel tracking the batch.

Press Quote Heroecommerce-pro-store-heroes-press-quote-heroA publication's verdict as the headline, dated, linked, and not paid for.

Product Finder Heroecommerce-pro-store-heroes-product-finder-heroA split store hero pairing a three step finder promise and CTAs with a live first question panel of radio options and a progress bar.

Restock Heroecommerce-pro-store-heroes-restock-heroThe waited for item back, with its queue history and a live unit counter.

Seasonal Prep Heroecommerce-pro-store-heroes-seasonal-prep-heroThe October rewax as a ritual, three honest numbers and the bench price for anyone who prefers not.

Seasonal Sale Heroecommerce-pro-store-heroes-seasonal-sale-heroThe discount at display scale with the three sale rules listed in full, no countdown gimmicks.

Split With Productecommerce-pro-store-heroes-split-with-productA store hero with the flagship product beside price, rating, and the shipping promise.

Starter Kit Heroecommerce-pro-store-heroes-starter-kit-heroA split store hero selling a three piece bundle: the reasons the kit exists beside an itemized order panel with prices and the bundle saving.

Store Numbers Heroecommerce-pro-store-heroes-store-numbers-heroThe tagline replaced by six audited figures, none rounded up.

Text Only Drop Heroecommerce-pro-store-heroes-text-only-drop-heroA drop announced with facts instead of photos, quantities and restock policy included.

Trade Heroecommerce-pro-store-heroes-trade-heroB2B landing hero with fleet numbers, Net 30 terms, the total repair spend, and the account rep named.

Video Lookbook Heroecommerce-pro-store-heroes-video-lookbook-heroThe seasonal film as a wide poster with play badge, runtime, and every piece linked.

Flagship Store Pageecommerce-pro-store-locator-sections-flagship-store-pageThe one store, its hours, the bench in view, and honest parking advice.

Flagship Store Splitecommerce-pro-store-locator-sections-flagship-store-splitOne store with its services itemized, monogramming times and the seconds shelf.

In Store Pickup Explainerecommerce-pro-store-locator-sections-in-store-pickup-explainerClick and collect in three steps, live stock, two hour ready, counter returns.

Popup Tour Scheduleecommerce-pro-store-locator-sections-popup-tour-scheduleA pop up tour schedule listing the traveling shop as dated city stops with venue, what travels along, and an open or waitlist status.

Stockist Detail Cardecommerce-pro-store-locator-sections-stockist-detail-cardOne stockist in full: what is stocked, what is not, hours, services, and the price match promise stated.

Stockists Listecommerce-pro-store-locator-sections-stockists-listFour independent shops with what each shelf actually carries.

Store Events Listecommerce-pro-store-locator-sections-store-events-listTours, clinics, and pack nights as dated rows with honest small capacities.

Store List Cardsecommerce-pro-store-locator-sections-store-list-cardsLocations with live hours and a what this store uniquely offers line each.

Store Map Finderecommerce-pro-store-locator-sections-store-map-finderA store finder split with a search field and nearest results on the left beside a blueprint style map with numbered pins on the right.

Store Opening Announcementecommerce-pro-store-locator-sections-store-opening-announcementA new store announcement naming the location and opening date, then the opening week itemized day by day above an invite call to action.

Store Services Matrixecommerce-pro-store-locator-sections-store-services-matrixA services matrix with every location as a column and every in store service as a row, each cell a check, a dash, or a short note.

Visit Planner Cardecommerce-pro-store-locator-sections-visit-planner-cardBook half an hour at the counter, fittings, repairs, or deciding between two.

Account Menu Panelecommerce-pro-store-navbars-account-menu-panelNavbar with the signed in account panel open: greeting with store credit, four account destinations each carrying a live fact, and sign out.

Announcement Navbar Comboecommerce-pro-store-navbars-announcement-navbar-comboBanner and nav as one composed header unit with a dismissible price change preannounce above the bar.

Centered Logo Navbarecommerce-pro-store-navbars-centered-logo-navbarEditorial fashion header with a centered wordmark, utilities split symmetrically to either side, and a centered category row beneath.

Checkout Header Lockecommerce-pro-store-navbars-checkout-header-lockThe payment flow header, wordmark, lock line, and one exit back to cart.

Country Selector Navbarecommerce-pro-store-navbars-country-selector-navbarNavbar with the region panel open: four duty zones, consequence per row, and the cart survives the switch.

Minimal Logo Cartecommerce-pro-store-navbars-minimal-logo-cartThe navbar stripped to wordmark, one trust link, and the cart for single product stores.

Mobile Menu Open Panelecommerce-pro-store-navbars-mobile-menu-open-panelStatic open state mobile nav with expanded sub-links, utility rows, and the support hours footer.

Nav With Announcementecommerce-pro-store-navbars-nav-with-announcementAn announcement strip and slim nav designed as one unit, dated message included.

Nav With Cart Searchecommerce-pro-store-navbars-nav-with-cart-searchThe standard store header with inline search and the icon trio with cart count.

Nav With Category Barecommerce-pro-store-navbars-nav-with-category-barA brand row above a scrolling category bar with the current section underlined.

Nav With Mega Menu Panelecommerce-pro-store-navbars-nav-with-mega-menu-panelThe navbar with its mega panel open, link columns plus a help deciding column.

Nav With Mini Cart Panelecommerce-pro-store-navbars-nav-with-mini-cart-panelNavbar with its mini cart open below: two line items with thumbs, a free shipping progress meter, subtotal, and one checkout route.

Nav With Order Status Stripecommerce-pro-store-navbars-nav-with-order-status-stripStandard navbar with a dismissible strip showing the active order, ship date, and tracking link.

Nav With Reorder Barecommerce-pro-store-navbars-nav-with-reorder-barReplenishment navbar with a buy again strip beneath: chips for four staples from the last order, each with its price and a one tap add.

Nav With Utility Barecommerce-pro-store-navbars-nav-with-utility-barA support fact, order tracking, and locale picker in a slim strip above the nav.

Nav With Wishlist Countecommerce-pro-store-navbars-nav-with-wishlist-countWishlist heart as a first class nav icon with a count badge and a price drop dot explained below.

Search Overlay Panelecommerce-pro-store-navbars-search-overlay-panelThe search open mid query, products and guides split into two columns.

Service First Navbarecommerce-pro-store-navbars-service-first-navbarPrimary nav with Repairs, Resale, and Membership first, plus a live bench queue strip below.

Trade Portal Navbarecommerce-pro-store-navbars-trade-portal-navbarThe logged in B2B header with tier, rep, terms, and the Friday cutoff.

Cadence Picker Cardecommerce-pro-subscription-sections-cadence-picker-cardDelivery rhythm chosen by honest usage guidance, the recommendation argued.

Care Club Annual Summaryecommerce-pro-subscription-sections-care-club-annual-summaryThe year one care club receipt in four numbers with the skip praised and the cadence downgrade offered.

First Delivery Timelineecommerce-pro-subscription-sections-first-delivery-timelineA four step numbered timeline of a subscription's first ninety days, from signup through the reminder email to the second charge and a start button.

Gift A Subscription Cardecommerce-pro-subscription-sections-gift-a-subscription-cardA gifted year of wax with two delivery options and the no auto renew rule as the centerpiece.

Kit Size Plansecommerce-pro-subscription-sections-kit-size-plansThree subscription box sizes in ring framed cards, each with placeholder imagery, price, contents list, and fit note, with the smallest recommended.

Manage Subscription Panelecommerce-pro-subscription-sections-manage-subscription-panelAll four controls at equal weight, cancel included, with the skip praised in history.

Member Perks Ledgerecommerce-pro-subscription-sections-member-perks-ledgerA two column membership section pairing a value summary with a divided ledger of perks, each priced by yearly worth, plus one excluded line.

Next Box Editorecommerce-pro-subscription-sections-next-box-editorAn editable next subscription box as a line item list, each swappable or removable, with a one time add on, running total, and edit deadline.

Pause Or Skip Controlsecommerce-pro-subscription-sections-pause-or-skip-controlsThree off switches compared by situation, no survey behind any of them.

Subscribe Save Overviewecommerce-pro-subscription-sections-subscribe-save-overviewThe consumable subscription as logistics, exits listed above the join button.

Subscription Faqecommerce-pro-subscription-sections-subscription-faqSix subscription inbox answers written as binding policy, from price locks to why bags are excluded entirely.

Subscription Vs Onetime Mathecommerce-pro-subscription-sections-subscription-vs-onetime-mathA year priced both ways across three profiles, one verdict against the store.

Certification Auditecommerce-pro-sustainability-sections-certification-auditTwo column certification audit listing held certificates with scope and audit dates beside the badges skipped on purpose, each with a stated reason.

Durability Pledge Cardecommerce-pro-sustainability-sections-durability-pledge-cardFour durability commitments you can test, not values language, each naming the thing that proves it.

Honest Unknowns Cardecommerce-pro-sustainability-sections-honest-unknowns-cardThe things Acme has not measured yet, three gaps stated plainly with the plan or the honest none.

Longevity As Sustainabilityecommerce-pro-sustainability-sections-longevity-as-sustainabilityThe sustainability thesis: time in service beats material talk, argued with three service numbers.

Materials Footprint Tableecommerce-pro-sustainability-sections-materials-footprint-tableThree materials across two honest columns: what Acme verified on visits and what suppliers claimed.

Packaging Teardownecommerce-pro-sustainability-sections-packaging-teardownTwo column packaging teardown pairing an intro and a weighed total card with a divided list naming each component, its material, and where it goes.

Repair Vs Replace Footprintecommerce-pro-sustainability-sections-repair-vs-replace-footprintA zipper repair against a new bag in plain ratios, not invented kilograms, with the method stated.

Shipping Footprint Explainerecommerce-pro-sustainability-sections-shipping-footprint-explainerGround over air 6 to 1, one box of three, and the no offsets position stated as a deliberate choice.

Sustainability Ledgerecommerce-pro-sustainability-sections-sustainability-ledgerCentered heading and intro over a dated, divided ledger of entries, each with a date, tagged badge, title, and short body, newest first.

Takeback Outcomesecommerce-pro-sustainability-sections-takeback-outcomesA proportional outcome bar with legend above three cards breaking down resold, stripped, and landfill shares, closed by a dated method note.

Fleet Case Studyecommerce-pro-trade-sections-fleet-case-studyForty bags, two years, and the strap flaw that changed the whole fleet spec included in the repair count.

Fleet Cost Estimatorecommerce-pro-trade-sections-fleet-cost-estimatorAn interactive estimator with two sliders for fleet size and service years that reprice upfront spend, projected repairs, and cost per bag live.

Pro Stories Rowecommerce-pro-trade-sections-pro-stories-rowThree fleets with wear numbers, deliveries per repair as the proof.

Sample Kit Cardecommerce-pro-trade-sections-sample-kit-cardThe fleet evaluation kit, credited at five units, built for the deciding meeting.

Trade Application Formecommerce-pro-trade-sections-trade-application-formThe pro program intake with who qualifies and a two day answer, never silence.

Trade Faqecommerce-pro-trade-sections-trade-faqFive program questions answered straight, priority repair quantified.

Trade Onboarding Stepsecommerce-pro-trade-sections-trade-onboarding-stepsApplication to first order in four real durations, 6 day median at the foot.

Trade Perks Gridecommerce-pro-trade-sections-trade-perks-gridFour perks argued from the professional's economics, downtime is our problem.

Trade Portal Previewecommerce-pro-trade-sections-trade-portal-previewA two column portal preview pairing three account features with a static fleet dashboard showing repair stages, fleet counts, and a reorder row.

Trade Termsecommerce-pro-trade-sections-trade-termsA two column trade terms section pairing five payment and ordering terms with a static invoice mockup showing the discount and net 30 in practice.

Trade Versus Retailecommerce-pro-trade-sections-trade-vs-retailA two column comparison table setting retail against a trade account across seven rows, with a lede and a closing note on the identical guarantee.

Volume Pricing Tableecommerce-pro-trade-sections-volume-pricing-tableTeam order bands published with the services included at each.

Account Deletion Cardecommerce-pro-trust-sections-account-deletion-cardOne button, what dies instantly, what the law keeps, and the guarantee that outlives the account.

Counterfeit Spotting Guideecommerce-pro-trust-sections-counterfeit-spotting-guideFour physical tells and a same day serial check open to secondhand buyers who have no receipt.

Data Promise Cardecommerce-pro-trust-sections-data-promise-cardFive numbered data promises each with the mechanism that lets a buyer check it, and a review date.

Guarantee Vs Warranty Explainerecommerce-pro-trust-sections-guarantee-vs-warranty-explainerStatutory rights, the Acme guarantee, and the repair program in one table showing they stack not replace.

Price History Pledgeecommerce-pro-trust-sections-price-history-pledgeSplit trust section listing three pricing pledges beside an illustrative 90 day price history chart showing a single real markdown for one product.

Refund Speed Trackerecommerce-pro-trust-sections-refund-speed-trackerCentered trust section listing refund speed per payment method, pairing each promised window with the measured median and a usage bar.

Returned Item Lifecycleecommerce-pro-trust-sections-returned-item-lifecycleCentered trust section with a segmented distribution bar and a destination row for each return path, from restocked as new to destroyed.

Review Integrity Reportecommerce-pro-trust-sections-review-integrity-reportSplit trust section pairing three review moderation rules on the left with a stat panel of quarterly numbers and a removal reason breakdown.

Security Contact Cardecommerce-pro-trust-sections-security-contact-cardScope, honest reward, and three named researchers with what they found for a store disclosure page.

Subprocessors Listecommerce-pro-trust-sections-subprocessors-listFive outside data partners named by role with what they receive, why, and the deletion path on a page.

Why We Ask Explainerecommerce-pro-trust-sections-why-we-ask-explainerEvery checkout field justified with its use and boundary, and the one field that is not there.

Accessories Railecommerce-pro-upsell-sections-accessories-railThe small goods as a snap strip with one earned context line per card.

Add On Servicesecommerce-pro-upsell-sections-add-on-servicesMonogramming, treatment, and care as checkable services with a live total.

Better Spend Suggesterecommerce-pro-upsell-sections-better-spend-suggesterBudget chips answered with the honest allocation at each number including the one that stops at 433.

Care Kit Attach Rowecommerce-pro-upsell-sections-care-kit-attach-rowThe care kit at cart with the first rain argument and the attach rate published.

Care Sub Upsell Rowecommerce-pro-upsell-sections-care-sub-upsell-rowThe wax already in the cart offered as a schedule with an equal weight decline priced alongside.

Complete The Lookecommerce-pro-upsell-sections-complete-the-lookOne outfit photo itemized with roles and the wearer's height and size in the footer.

Complete The Set Progressecommerce-pro-upsell-sections-complete-the-set-progressOwned and missing pieces of the set, same hides as the only argument.

Cross Sell Bannerecommerce-pro-upsell-sections-cross-sell-bannerOne product recommended to owners of another, with the relationship stated.

Frequently Bought Togetherecommerce-pro-upsell-sections-frequently-bought-togetherCheckable companions with a live total and real attachment rates printed per item.

Gift Wrap Upsell Rowecommerce-pro-upsell-sections-gift-wrap-upsell-rowThe $6 wrap shown for real, with the hand written note revealed on selection.

Membership Upsell Mathecommerce-pro-upsell-sections-membership-upsell-mathA perks list beside a checkout receipt that admits joining costs more today, shows when it pays off, with join and stay a guest buttons.

Post Purchase Upsellecommerce-pro-upsell-sections-post-purchase-upsellOne add riding the same box, declinable in a tap, never chaining to another.

Protection Plan Pickerecommerce-pro-upsell-sections-protection-plan-pickerA product row above single choice coverage tiers, the free warranty listed as an equal option, with a live total and a continue button.

Recently Viewed Rowecommerce-pro-upsell-sections-recently-viewed-rowThe browsing trail with per item dismissal and a privacy footer, memory with manners.

Replenishment Reminder Cardecommerce-pro-upsell-sections-replenishment-reminder-cardThe reorder timed by your own usage math, one dated email, not a subscription.

Setup Service Upsellecommerce-pro-upsell-sections-setup-service-upsellThe first wax at the bench for $12, with the honest counter offer and the adoption rate published.

Shipping Threshold Nudgeecommerce-pro-upsell-sections-shipping-threshold-nudgeA live progress bar toward the free shipping threshold, three small items sized to close the gap, and the flat rate as a fair alternative.

Spare Parts Attach Rowecommerce-pro-upsell-sections-spare-parts-attach-rowTwo spares at the cart with an honest counter on who actually needs them and a skip.

Tiered Bundle Builderecommerce-pro-upsell-sections-tiered-bundle-builderPick any pieces, the discount steps at two and three, the math updates live.

Trade Up Comparisonecommerce-pro-upsell-sections-trade-up-comparisonTwo product cards side by side above a spec table with the price delta itemized, an honest downside row, and a button per choice.

You May Also Likeecommerce-pro-upsell-sections-you-may-also-likeFour recommendations that each print why they were chosen above the card.

Empty Wishlist Stateecommerce-pro-wishlist-sections-empty-wishlist-stateA centered empty wishlist with a heart badge, headline, a three row explainer of what saving does, and a recently viewed product strip.

Household Shared Listecommerce-pro-wishlist-sections-household-shared-listA shared household wishlist with an avatar stack above a two column card grid where each item carries its adder avatar, reason, and duplicate flag.

Price Drop Alerts Listecommerce-pro-wishlist-sections-price-drop-alerts-listWatched items, saved versus current price, one real drop and one frozen for 14 months.

Registry Mode Panelecommerce-pro-wishlist-sections-registry-mode-panelThe wishlist as a registry with claimed states, group gifting, and anonymity rules.

Restock Watch Listecommerce-pro-wishlist-sections-restock-watch-listA restock queue with one back in stock item held on a deadline above a list of waiting items showing queue position and supply notes.

Share Wishlist Cardecommerce-pro-wishlist-sections-share-wishlist-cardA share link as a code chip with three privacy rules stated before the optional occasion date is asked for.

Shared List Guest Viewecommerce-pro-wishlist-sections-shared-list-guest-viewTwo column guest view of a shared wishlist with owner intro, occasion facts, claiming rules, and a thumbnail item list with claim buttons.

Wishlist Alert Settingsecommerce-pro-wishlist-sections-wishlist-alert-settingsA two column alert settings panel defining what each notification means on the left and a bordered stack of labeled switch rows on the right.

Wishlist Boards Gridecommerce-pro-wishlist-sections-wishlist-boards-gridAccount overview of three named wishlist boards as thumbnail strip cards with item counts and privacy captions, plus a dashed new list tile.

Wishlist Grid Pageecommerce-pro-wishlist-sections-wishlist-grid-pageSaved items as a product grid with live status captions and a single button that adds only the in stock ones.

Wishlist With Prioritiesecommerce-pro-wishlist-sections-wishlist-with-prioritiesFive items grouped under three honest tiers with owner notes, and the admission the store ignores them.

3D Feature Carouselecommerce-product-features-3d-feature-carouselA rotating carousel that shows product features on 3D cards with depth and motion. Great for highlighting a few standout capabilities on a landing page.

Alternating Featuresecommerce-product-features-alternating-featuresStacked 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.

Animated Features Gridecommerce-product-features-animated-features-gridA grid of feature cards with icons and motion that triggers as cards enter view. Adds life to a benefits section without burying the message.

Before After Comparisonecommerce-product-features-before-after-comparisonA slider that wipes between two product images so buyers see the difference at a glance. Ideal for skincare, editing tools, or cleaning results.

Carousel Feature Showcaseecommerce-product-features-carousel-feature-showcaseA swipeable carousel that steps through product features with image and copy per slide. Fits compact pages where space for many cards is tight.

Expandable Features Gridecommerce-product-features-expandable-features-gridA grid of feature cards that open to reveal more detail on click. Keeps the overview tidy while letting curious shoppers dig into the specifics.

Feature Accordionecommerce-product-features-feature-accordionStacked 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.

Feature Comparison Tableecommerce-product-features-feature-comparison-tableA table that lines up features across plans or models with clear check marks. Helps shoppers weigh every option and pick the right product fast.

Feature Tabs Navigationecommerce-product-features-feature-tabs-navigationTabbed sections that swap feature content as buyers click each label. Organizes a deep feature set into bite sized views on one tidy single panel.

Feature Timelineecommerce-product-features-feature-timelineA vertical timeline that walks through product features in sequence. Useful for showing a setup flow or how capabilities build on each other.

Features Testimonial Comboecommerce-product-features-features-testimonial-comboA layout that pairs product features with a customer quote beside them. Backs each benefit claim with real proof to win hesitant buyers over.

Horizontal Scrolling Featuresecommerce-product-features-horizontal-scrolling-featuresA row of feature panels that scroll sideways as the page moves. Shows many product capabilities in a compact, playful strip that invites swiping.

Image Hotspot Featuresecommerce-product-features-image-hotspot-featuresA product image dotted with clickable hotspots that reveal each feature in place. Perfect for showing exactly where a capability lives on the item.

Interactive Feature Tabsecommerce-product-features-interactive-feature-tabsTabs paired with a live preview that updates as buyers select a feature. Lets shoppers explore what each capability looks like before they buy.

Simple Feature Gridecommerce-product-features-simple-feature-gridA 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.

Split Image Featuresecommerce-product-features-split-image-featuresA 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.

Stats Feature Showcaseecommerce-product-features-stats-feature-showcaseA section that pairs product features with hard numbers and metrics. Use it when figures like speed or savings make the strongest case to buy.

Timeline Feature Showcaseecommerce-product-features-timeline-feature-showcaseA timeline that reveals product features step by step as buyers scroll. Good for guiding readers through a journey from first use to results.

Video Feature Showcaseecommerce-product-features-video-feature-showcaseA section that pairs an embedded product video with supporting feature copy. Shows the item in action when motion sells better than a still.

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

Comparison Listecommerce-product-list-comparison-listA side by side list lining up products with specs, prices, and features in columns. Helps shoppers weigh options before they commit to a purchase.

Featured Listecommerce-product-list-featured-listA list spotlighting select products with large imagery, descriptions, and prices. Highlights bestsellers or promotions on a storefront landing page.

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

Gallery Listecommerce-product-list-gallery-listAn image first list showing products as large photo cards with name and price. Suits visual categories like fashion, home decor, and art prints.

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

Masonry Listecommerce-product-list-masonry-listA masonry grid fitting product cards of varying heights into tight columns. Works well for mixed imagery in lookbooks and curated collections.

Table Listecommerce-product-list-table-listA table listing products in rows with columns for image, name, stock, and price. Ideal for dashboards, admin catalogs, and bulk inventory views.

Timeline Listecommerce-product-list-timeline-listA vertical timeline arranging products or drops by date with images and prices. Good for release schedules, new arrivals, and limited editions.

Classic Overviewecommerce-product-overview-classic-overviewA 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.

Compact Overviewecommerce-product-overview-compact-overviewA tight product layout that fits the image, price, options, and buy button above the fold. Built for small screens and quick mobile purchases.

Gallery Overviewecommerce-product-overview-gallery-overviewA 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.

Immersive Overviewecommerce-product-overview-immersive-overviewA 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.

Minimal Overviewecommerce-product-overview-minimal-overviewA 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.

Modern Overviewecommerce-product-overview-modern-overviewA contemporary product page mixing a bold image grid, accent typography, and clear pricing. Suits fashion and lifestyle brands that want a fresh look.

Centered Icon Promoecommerce-promo-sections-centered-icon-promoA centered promo with an icon, headline, and supporting copy. Highlights a single offer or shipping perk in the middle of a store landing page.

Centered Image Gridecommerce-promo-sections-centered-image-gridA centered promo paired with a tidy grid of product images. Showcases a curated collection or a seasonal lineup right on your shop homepage.

Centered Simple Promoecommerce-promo-sections-centered-simple-promoA 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.

Countdown Timer Promoecommerce-promo-sections-countdown-timer-promoA promo block with a live countdown timer, headline, and call to action. Builds urgency around flash sales and limited time offers that expire soon.

Fading Background Testimonialecommerce-promo-sections-fading-background-testimonialA testimonial promo with a soft fading background and a customer quote. Builds trust on a product page while reinforcing the offer you are running.

Full Width Large Contentecommerce-promo-sections-full-width-large-contentA full width promo with oversized type and a clear button. Commands attention across the whole page for a headline campaign or a seasonal launch.

Image Asideecommerce-promo-sections-image-asideA 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.

Large Image Splitecommerce-promo-sections-large-image-splitA 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.

Multi Column Cardsecommerce-promo-sections-multi-column-cardsA promo arranged as several cards in columns, each holding its own offer. Presents multiple deals or categories side by side on one store page.

Simple Bannerecommerce-promo-sections-simple-bannerA 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.

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

Compact Cartecommerce-shopping-cart-compact-cartA 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.

Floating Cartecommerce-shopping-cart-floating-cartA 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.

Mini Cartecommerce-shopping-cart-mini-cartA 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.

Modern Cartecommerce-shopping-cart-modern-cartA clean cart layout with product images, quantity steppers, and an order summary. Suits a full cart page where shoppers review items before checkout.

Sidebar Cartecommerce-shopping-cart-sidebar-cartA 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.

Sticky Cartecommerce-shopping-cart-sticky-cartA 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.

Achievementsmarketing-about-sections-achievementsA 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.

Animated Statsmarketing-about-sections-animated-statsHeadline 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.

Brand Valuesmarketing-about-sections-brand-valuesA 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.

Company Culturemarketing-about-sections-company-culturePhotos 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.

Company Valuesmarketing-about-sections-company-valuesA 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.

Diversity & Inclusionmarketing-about-sections-diversity-inclusionA section pairing a statement on belonging with supporting stats and imagery. Use it to show how your company invests in people and fairness.

Foundersmarketing-about-sections-foundersPortrait 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.

Mission Statementmarketing-about-sections-mission-statementA 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.

Press & Recognitionsmarketing-about-sections-press-recognitionsA 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.

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

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

Stats Gridmarketing-about-sections-stats-gridA 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.

Tabsmarketing-about-sections-tabsTabbed 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.

Team Gridmarketing-about-sections-team-gridA responsive grid of headshots with names, titles, and social links. Use it on an about page to introduce the real people behind your product.

Timelinemarketing-about-sections-timelineA 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.

Two Columnmarketing-about-sections-two-columnA 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.

Valuesmarketing-about-sections-valuesA 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.

With Imagemarketing-about-sections-with-imageAn 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.

Floatingmarketing-announcement-banners-floatingA banner that floats above page content with rounded corners and a dismiss button. Announce a promotion or update without pushing the layout down.

Simple Centeredmarketing-announcement-banners-simple-centeredA 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.

With Actionmarketing-announcement-banners-with-actionA 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.

With Countdownmarketing-announcement-banners-with-countdownA 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.

With Imagemarketing-announcement-banners-with-imageA 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.

With Social Proofmarketing-announcement-banners-with-social-proofA 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.

Author Spotlightmarketing-blog-sections-author-spotlightA 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.

Carouselmarketing-blog-sections-carouselA 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.

Case Study Showcasemarketing-blog-sections-case-study-showcaseA 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.

Category Filtermarketing-blog-sections-category-filterA 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.

Compact Listmarketing-blog-sections-compact-listA 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.

Expert Roundupmarketing-blog-sections-expert-roundupA grid collecting quotes and headshots from several contributors. Use it to package an opinion roundup or panel feature into one shareable post.

Featured Listmarketing-blog-sections-featured-listA 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.

Featured With Sidebarmarketing-blog-sections-featured-with-sidebarA 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.

Hero Focusmarketing-blog-sections-hero-focusA 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.

Interview Formatmarketing-blog-sections-interview-formatA question and answer layout with a guest portrait and intro. Use it to publish interviews in a clear, readable format on an editorial blog.

Magazine Layoutmarketing-blog-sections-magazine-layoutAn 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.

Minimal Blogmarketing-blog-sections-minimal-blogA 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.

Newsletter Blogmarketing-blog-sections-newsletter-blogAn article feed combined with an email signup form and short prompt. Use it to grow a subscriber list while showcasing your most recent posts.

Podcast Listmarketing-blog-sections-podcast-listA list of episode cards with cover art, titles, and play controls. Use it to publish a podcast feed where listeners browse and start episodes.

Simple Gridmarketing-blog-sections-simple-gridAn 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.

Timeline Blogmarketing-blog-sections-timeline-blogA vertical timeline that orders posts by date with markers and dots. Use it for a changelog, release notes, or a chronological story archive.

Video Blogmarketing-blog-sections-video-blogA 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.

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

Career Pathmarketing-careers-career-pathA career path layout showing role progression, levels, and growth milestones. Helps applicants picture how they advance after joining your team.

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

Department Positionsmarketing-careers-department-positionsA 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.

Department Showcasemarketing-careers-department-showcaseA department showcase with cards describing each team, its focus, and people. Helps candidates understand where they fit before browsing open roles.

Employee Benefitsmarketing-careers-employee-benefitsAn employee benefits grid covering insurance, learning budgets, and flexible hours. Shows candidates the full package while they consider applying.

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

Interview Processmarketing-careers-interview-processA step by step interview process timeline running from first application to final offer. Sets expectations so candidates know what each hiring stage involves.

Job Boardmarketing-careers-job-boardA 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.

Job Detailsmarketing-careers-job-detailsA single job details page with description, responsibilities, and an apply button. Gives candidates everything they need to decide and submit.

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

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

Basic Changelogmarketing-changelogs-basic-changelogA straightforward changelog list with version numbers, dates, and bullet points. Use it to post release notes when you want clarity over visual flourish.

Categorized Changelogmarketing-changelogs-categorized-changelogRelease 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.

Compact Changelogmarketing-changelogs-compact-changelogA dense changelog that packs many versions into a tight column. Ideal when you ship often and want the full history visible without heavy scrolling.

Expandable Changelogmarketing-changelogs-expandable-changelogCollapsed version entries that open on click to reveal full details. Keeps a long release history short while letting readers drill into any update.

Grid Changelogmarketing-changelogs-grid-changelogRelease 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.

Grouped Changelogmarketing-changelogs-grouped-changelogUpdates clustered by month or release so related entries sit together. Good for products with frequent shipping where context across versions matters.

Interactive Changelogmarketing-changelogs-interactive-changelogA changelog with filters and clickable entries that reveal more detail. Lets visitors explore updates by type and focus on the releases that matter.

Minimalist Changelogmarketing-changelogs-minimalist-changelogA 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.

Tabbed Changelogmarketing-changelogs-tabbed-changelogRelease notes organized into tabs by version or category. Lets readers switch between updates without scrolling, keeping each release neatly contained.

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

Timeline Changelogmarketing-changelogs-timeline-changelogA 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.

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

Split With Detailsmarketing-contact-sections-split-with-detailsA 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.

With Mapmarketing-contact-sections-with-mapA 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.

Awards CTAmarketing-cta-sections-awards-ctaA 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.

Banner With Backgroundmarketing-cta-sections-banner-with-backgroundA full width banner with a background image, headline, and button. Anchors a campaign message across the top or bottom of any marketing page.

Case Study CTAmarketing-cta-sections-case-study-ctaA 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.

Countdown Timermarketing-cta-sections-countdown-timerA call to action with a live countdown clock beside a headline and button. Drives urgency for a sale, launch, or webinar registration deadline.

CTA With Testimonialmarketing-cta-sections-cta-with-testimonialA 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.

FAQ CTAmarketing-cta-sections-faq-ctaA 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.

Feature Gridmarketing-cta-sections-feature-gridA 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.

Gradient CTAmarketing-cta-sections-gradient-ctaA 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.

Image With Textmarketing-cta-sections-image-with-textA 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.

Integrations CTAmarketing-cta-sections-integrations-ctaA call to action surrounded by logos of supported tools and platforms. Reassures teams about compatibility before they sign up and connect apps.

Newsletter Formmarketing-cta-sections-newsletter-formA signup section with an email input and subscribe button under a short pitch. Collects leads for a newsletter, waitlist, or product updates.

Quick Contact CTAmarketing-cta-sections-quick-contact-ctaA 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.

Simple Centeredmarketing-cta-sections-simple-centeredA 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.

Split With Imagemarketing-cta-sections-split-with-imageA 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.

Stats CTAmarketing-cta-sections-stats-ctaA call to action that leads with key metrics like users or uptime, then a button. Uses hard numbers to convince visitors before they commit.

Tab CTAmarketing-cta-sections-tab-ctaA call to action with tabbed content that swaps messages by audience or use case. Lets visitors pick a path before clicking the matching button.

Video CTAmarketing-cta-sections-video-ctaA 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.

Zigzag CTAmarketing-cta-sections-zigzag-ctaA call to action with alternating text and image rows that lead into a button. Walks readers through benefits before the final closing prompt.

Accordion With Backgroundmarketing-faq-sections-accordion-with-backgroundAn 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.

Card Gridmarketing-faq-sections-card-gridA 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.

Center Alignedmarketing-faq-sections-center-alignedA 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.

Code Snippetsmarketing-faq-sections-code-snippetsAn FAQ layout with formatted code blocks inside answers. Built for developer docs where responses need syntax examples, commands, or configuration shown.

Contact Formmarketing-faq-sections-contact-formAn 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.

Image Illustratedmarketing-faq-sections-image-illustratedAn 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.

Right Alignedmarketing-faq-sections-right-alignedA 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.

Search Filtermarketing-faq-sections-search-filterAn 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.

Sidebar Navigationmarketing-faq-sections-sidebar-navigationAn FAQ layout with a sidebar of categories beside the answers. Lets visitors switch topics quickly and keeps large help sections organized and navigable.

Simple 2 Cols Gridmarketing-faq-sections-simple-2-cols-gridA 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.

Simple With Divider And Iconmarketing-faq-sections-simple-with-divider-and-iconA 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.

Tabbed Categoriesmarketing-faq-sections-tabbed-categoriesAn FAQ section with tabs that group questions by category. Visitors pick a topic and see only relevant answers, keeping a broad help area uncluttered.

Timeline FAQmarketing-faq-sections-timeline-faqAn FAQ laid out as a vertical timeline, walking visitors through questions in order. Suited to onboarding or step by step guides where sequence matters.

3D Cardsmarketing-feature-sections-3d-cardsFeature 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.

Card Gridmarketing-feature-sections-card-gridA 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.

Feature Accordionmarketing-feature-sections-feature-accordionStacked 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.

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

Feature Comparisonmarketing-feature-sections-feature-comparisonSets 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 Statsmarketing-feature-sections-feature-statsFeature copy paired with bold metrics like uptime, users, or speed. Backs your claims with numbers and builds trust on a homepage or product overview.

Feature Timelinemarketing-feature-sections-feature-timelineA 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.

Feature Videosmarketing-feature-sections-feature-videosA 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.

Feature Wizardmarketing-feature-sections-feature-wizardA 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.

Grid Hovermarketing-feature-sections-grid-hoverA 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.

Simplemarketing-feature-sections-simpleA 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.

Stepsmarketing-feature-sections-stepsNumbered 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.

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

With Carouselmarketing-feature-sections-with-carouselFeature 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.

With Comparisonmarketing-feature-sections-with-comparisonA 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.

With Imagesmarketing-feature-sections-with-imagesAlternating rows of feature copy beside supporting images. A reliable pattern for explaining several capabilities while keeping the page lively and balanced.

With Statsmarketing-feature-sections-with-statsFeature descriptions interleaved with headline numbers and labels. Pairs the what with the proof so visitors trust the results on a product or pricing page.

With Tabsmarketing-feature-sections-with-tabsTabbed feature panels that swap content and visuals as visitors switch tabs. Organizes many capabilities into one compact, tidy section that stays readable.

Logo Cloudmarketing-footers-logo-cloudA 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.

Minimalmarketing-footers-minimalA 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.

Multi Columnmarketing-footers-multi-columnA footer split into grouped link columns for products, company, and resources. Organizes deep site navigation on a large marketing or app homepage.

Simplemarketing-footers-simpleA 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.

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

Carousel Gallerymarketing-gallery-carousel-galleryA 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.

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

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

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

Immersive Gallerymarketing-gallery-immersive-galleryAn 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.

Polaroid Gallerymarketing-gallery-polaroid-galleryA 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.

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

Booking Formmarketing-hero-forms-booking-formA 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.

Center Aligned Search With Tagsmarketing-hero-forms-center-aligned-search-with-tagsA 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.

Center Aligned With A Formmarketing-hero-forms-center-aligned-with-a-formA centered hero pairing a headline and subtext with a short inline form. Collects an email or signup in one view to start onboarding immediately.

Contact Form With Backgroundmarketing-hero-forms-contact-form-with-backgroundA 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.

Contest Entry Formmarketing-hero-forms-contest-entry-formA hero with a contest entry form for name, email, and answer fields. Drives signups and excitement around a giveaway or promotional campaign.

Early Access Formmarketing-hero-forms-early-access-formA 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.

Event Registration Countdownmarketing-hero-forms-event-registration-countdownA hero combining a registration form with a live countdown timer. Pushes visitors to claim a spot before an event or sale window closes.

Feedback Survey Formmarketing-hero-forms-feedback-survey-formA hero with a feedback survey form using ratings and short answers. Gathers visitor opinions on a product or service in a single focused view.

Floating Card With Gradientmarketing-hero-forms-floating-card-with-gradientA hero with a floating form card resting over a soft gradient backdrop. Highlights a signup field and pulls the eye to one clear action.

Free Ebook Formmarketing-hero-forms-free-ebook-formA 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.

Free Trial Signup Formmarketing-hero-forms-free-trial-signup-formA hero with a free trial signup form for email and password fields. Starts new accounts the moment a visitor decides to try the product.

Image And Formmarketing-hero-forms-image-and-formA 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.

Job Application Formmarketing-hero-forms-job-application-formA hero with a job application form for contact details and a resume upload. Lets candidates apply right from the top of a careers page.

Newsletter Subscriptionmarketing-hero-forms-newsletter-subscriptionA hero with a newsletter subscription field and a short value pitch. Turns first time visitors into subscribers with one quick email entry.

Newsletter With Social Proofmarketing-hero-forms-newsletter-with-social-proofA hero pairing a newsletter form with subscriber counts and logos. Uses social proof to convince visitors the list is worth joining today.

Product Customizer Formmarketing-hero-forms-product-customizer-formA hero with a product customizer form for options like size and color. Lets shoppers configure their choice and preview it before checkout.

Quiz Assessment Formmarketing-hero-forms-quiz-assessment-formA hero with a quiz or assessment form that walks through scored questions. Engages visitors and routes them toward a tailored recommendation.

Schedule Demo Formmarketing-hero-forms-schedule-demo-formA hero with a schedule demo form for name, company, and a time slot. Books sales calls with prospects right where they first arrive.

Sign Up Formmarketing-hero-forms-sign-up-formA 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.

Split Screen Multi Stepmarketing-hero-forms-split-screen-multi-stepA split screen hero with a multi step form and a progress indicator. Guides visitors through a longer signup without overwhelming them at once.

Subscription Form With Togglemarketing-hero-forms-subscription-form-with-toggleA 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.

Two Factor Verificationmarketing-hero-forms-two-factor-verificationA hero with a two factor verification form for a one time security code. Confirms identity during signin to keep new accounts safe and secure.

User Feedback Formmarketing-hero-forms-user-feedback-formA hero with a user feedback form for comments, ratings, and contact info. Collects honest input from visitors to guide the next product update.

Webinar Registration Formmarketing-hero-forms-webinar-registration-formA hero with a webinar registration form for name, email, and session time. Fills seats for a live session straight from the landing page top.

3D Isometric Heromarketing-hero-sections-3d-isometric-heroA 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.

Animated Features Heromarketing-hero-sections-animated-features-heroA 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.

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

Animated Text Heromarketing-hero-sections-animated-text-heroA 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.

Centred With Imagemarketing-hero-sections-centred-with-imageA centered hero with a headline, subtext, and CTA above a wide product image. A balanced, classic opener for marketing and SaaS landing pages.

Chat Preview Heromarketing-hero-sections-chat-preview-heroA hero pairing a headline and CTA with a live chat conversation preview. Ideal for messaging, support, or AI assistant products you want to demo.

Countdown Heromarketing-hero-sections-countdown-heroA hero with a ticking countdown timer beside a headline and CTA. Builds urgency for launches, sales, webinars, and limited time offer landing pages.

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

Gradient Mesh Heromarketing-hero-sections-gradient-mesh-heroA hero with a soft mesh gradient behind a centered headline and CTA. Gives a calm, premium backdrop to SaaS, design, and startup landing pages.

Image Carousel Heromarketing-hero-sections-image-carousel-heroA 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.

Image With Reviewsmarketing-hero-sections-image-with-reviewsA 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.

Interactive Metricsmarketing-hero-sections-interactive-metricsA 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.

Mobile App Heromarketing-hero-sections-mobile-app-heroA 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.

Multi-Step CTA Heromarketing-hero-sections-multi-step-cta-heroA 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.

Particles Background Heromarketing-hero-sections-particles-background-heroA hero with animated particles drifting behind a centered headline and CTA. A dynamic, tech forward opener for software and startup landing pages.

Product Carousel Heromarketing-hero-sections-product-carousel-heroA 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.

Progress Tracker Heromarketing-hero-sections-progress-tracker-heroA 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.

Search Barmarketing-hero-sections-search-barA hero centered on a prominent search bar below a headline and subtext. Ideal for directories, docs, marketplaces, and content heavy landing pages.

Simple Centredmarketing-hero-sections-simple-centredA 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.

Social Proof Heromarketing-hero-sections-social-proof-heroA 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.

Split Content Heromarketing-hero-sections-split-content-heroA 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.

Split Image Heromarketing-hero-sections-split-image-heroA 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.

Split With Videomarketing-hero-sections-split-with-videoA 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.

Testimonial Carouselmarketing-hero-sections-testimonial-carouselA 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.

Trust Indicatorsmarketing-hero-sections-trust-indicatorsA hero leading with security badges, certifications, and partner logos. Reassures cautious buyers at the top of a landing or enterprise sales page.

Video Background Heromarketing-hero-sections-video-background-heroA 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.

With 3D Mockupmarketing-hero-sections-with-3d-mockupA hero featuring a rotating 3D device mockup beside a headline and CTA. Presents your app or product with depth on a modern landing page.

With API Previewmarketing-hero-sections-with-api-previewA hero pairing a headline and CTA with a live API request and response preview. Built for developer tools and platforms aimed at technical buyers.

With App Showcasemarketing-hero-sections-with-app-showcaseA 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.

With Bento Gridmarketing-hero-sections-with-bento-gridA 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.

With Code Previewmarketing-hero-sections-with-code-previewA 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.

With Content Tabsmarketing-hero-sections-with-content-tabsA 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.

With Dashboardmarketing-hero-sections-with-dashboardA 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.

With Email Inputmarketing-hero-sections-with-email-inputA hero centered on an inline email capture form below a headline and subtext. Ideal for waitlists, newsletters, and early access landing pages.

With Feature Cardsmarketing-hero-sections-with-feature-cardsA 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.

With Feature Timelinemarketing-hero-sections-with-feature-timelineA 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.

With Integration Showcasemarketing-hero-sections-with-integration-showcaseA hero showing a grid of integration logos beside a headline and CTA. Highlights the tools your product connects to on a platform landing page.

With Product Screenshotsmarketing-hero-sections-with-product-screenshotsA 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.

With Team Gridmarketing-hero-sections-with-team-gridA 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.

With Terminalmarketing-hero-sections-with-terminalA 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.

2 Cols Gridmarketing-icon-sections-2-cols-gridA 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.

Animated Icon Gridmarketing-icon-sections-animated-icon-gridA 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.

Centred Description With Icon Blocksmarketing-icon-sections-centred-description-with-icon-blocksA centred intro paragraph above a row of icon blocks. Frames a section theme, then lists supporting features in tidy, evenly spaced columns.

Circle Icons Centre Alignedmarketing-icon-sections-circle-icons-centre-alignedCentre 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.

Compact Metric Listmarketing-icon-sections-compact-metric-listA tight vertical list pairing icons with numbers and labels. Shows key metrics in a small footprint, ideal for sidebars or dense feature pages.

Description On Left Icon Blocks On Rightmarketing-icon-sections-description-on-left-icon-blocks-on-rightA 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.

Expandable Icon Cardsmarketing-icon-sections-expandable-icon-cardsIcon cards that expand on click to reveal more detail. Keeps the section compact while letting curious visitors dig into any feature they choose.

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

Horizontal Scrolling Iconsmarketing-icon-sections-horizontal-scrolling-iconsA horizontal strip of icon cards users swipe or scroll through. Fits many features in limited height and reads naturally on mobile screens.

Icon Feature Carouselmarketing-icon-sections-icon-feature-carouselA carousel rotating through icon features one slide at a time. Highlights a long list of capabilities without crowding the page or overwhelming readers.

Icon Stats Gridmarketing-icon-sections-icon-stats-gridA 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.

Icon Tabs Categoriesmarketing-icon-sections-icon-tabs-categoriesCategory tabs marked with icons that filter the features shown below. Helps visitors jump straight to the feature set that matches their needs.

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

Icons With Tooltipsmarketing-icon-sections-icons-with-tooltipsA row of icons that reveal a short tooltip on hover. Packs many features into a small space while keeping extra detail one cursor away.

Interactive Icon Showcasemarketing-icon-sections-interactive-icon-showcaseAn interactive panel where hovering an icon updates the description beside it. Invites visitors to explore features at their own pace and stay engaged.

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

Minimal Stats Tilesmarketing-icon-sections-minimal-stats-tilesClean 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.

Radial Icon Layoutmarketing-icon-sections-radial-icon-layoutIcons arranged in a circular, radial pattern around a central label. A distinctive way to show how features connect to one core product idea.

Solid Icon With Hover Effectmarketing-icon-sections-solid-icon-with-hover-effectSolid filled icons that shift colour or lift on hover. Adds tactile feedback to a feature grid so the section feels responsive as visitors browse.

Stacked Cardsmarketing-icon-sections-stacked-cardsVertically 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.

API Previewmarketing-integrations-api-previewA 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.

Carouselmarketing-integrations-carouselA 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.

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

Featured Showcasemarketing-integrations-featured-showcaseA large card spotlighting one key integration with its logo, summary, and a link. Use it to highlight a flagship partner above the full list.

Simple Gridmarketing-integrations-simple-gridA 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.

Cards On Imagesmarketing-masonry-sections-cards-on-imagesA 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.

Calculatormarketing-pricing-sections-calculatorA 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.

Cardsmarketing-pricing-sections-cardsA 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.

Custom Buildermarketing-pricing-sections-custom-builderA plan builder where buyers pick features and quantities to assemble a quote. Use it for modular products where every customer needs a different mix.

Enterprisemarketing-pricing-sections-enterpriseA 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.

Feature Gridmarketing-pricing-sections-feature-gridA 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.

Horizontalmarketing-pricing-sections-horizontalA 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.

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

Minimalistmarketing-pricing-sections-minimalistA 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.

Modernmarketing-pricing-sections-modernA 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.

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

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

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

Testimonialmarketing-pricing-sections-testimonialA 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.

Togglemarketing-pricing-sections-toggleA 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.

About Split With Quotemarketing-pro-about-sections-about-split-with-quoteAn origin story in two paragraphs beside a founder pull quote on a muted panel.

About With Statsmarketing-pro-about-sections-about-with-statsTwo paragraphs of company story beside a ruled grid of four numbers with sentence labels.

Backers and Angelsmarketing-pro-about-sections-backers-and-angelsA muted band of two fund wordmarks above a ruled two column list of six angel operators, closed by a no board seats line.

By the Numbersmarketing-pro-about-sections-by-the-numbersA split about section pairing narrative copy with a 2x2 grid of oversized stats in hairline ring cards and a muted strip of three milestone years.

Company Fact Sheetmarketing-pro-about-sections-company-fact-sheetNarrative copy beside a ruled definition list ledger stating founded date, team, customers, funding, and ownership as plain label and value rows.

Founder Lettermarketing-pro-about-sections-founder-letterA first person letter in a narrow reading column with a salutation, three short paragraphs, and a serif signature above the founder portrait.

Founders Q and Amarketing-pro-about-sections-founders-qaA two column about section pairing founder portraits and an intro with a ruled list of five real customer questions answered in short attributed paragraphs.

Funding History Listmarketing-pro-about-sections-funding-history-listThe complete capital ledger including the round not raised and the one declined.

How We Make Moneymarketing-pro-about-sections-how-we-make-moneyA business model section splitting a labeled revenue mix with hairline percentage bars beside a ruled list of three funding facts.

Leadership Gridmarketing-pro-about-sections-leadership-gridSix leaders in a borderless portrait grid, each with a role and the one thing they answer for, plus a flat titles note.

Manifesto Dark Bandmarketing-pro-about-sections-manifesto-dark-bandThree belief statements set large on a primary band with a dated signature line.

Mission and Valuesmarketing-pro-about-sections-mission-and-valuesAn about section opening with a mission statement, then four value cards with soft square icons and a quiet attribution line linking to careers.

Mission Statement Centeredmarketing-pro-about-sections-mission-statement-centeredOne oversized centered mission statement with a single supporting paragraph.

Offices Listmarketing-pro-about-sections-offices-listOffice cards with pin icons, addresses, and a note on what each city does for customers.

Operating Principles Gridmarketing-pro-about-sections-operating-principles-gridSix working rules as cards, each ending with what the principle actually cost.

Press Mentionsmarketing-pro-about-sections-press-mentionsEarned headlines as linked rows with styled text wordmarks for each publication.

Principles Numberedmarketing-pro-about-sections-principles-numberedFour numbered operating principles in wide ruled rows with full paragraph arguments.

Story Timelinemarketing-pro-about-sections-story-timelineThe company history as five year marked chapters on a vertical hairline timeline.

Values Gridmarketing-pro-about-sections-values-gridSix bordered value cards, each with an icon disc and the working rule the value produces.

What We Don't Domarketing-pro-about-sections-what-we-dont-doA two column about section pairing a heading and argument with a ruled list of six firm refusals, each stating the reason it holds.

Working Weekmarketing-pro-about-sections-working-weekAn about section laying out five day columns on hairline top rules, each naming its ritual and what it protects, closed by a weekly meeting tally.

Affiliate Hero Splitmarketing-pro-affiliate-sections-affiliate-hero-splitA partner program hero with the terms in one paragraph beside an earnings panel mockup.

Application CTA Cardmarketing-pro-affiliate-sections-application-cta-cardA closing CTA card pairing the apply buttons with a panel listing every application field, why it is asked, and the approval rate.

Audience Fit Gridmarketing-pro-affiliate-sections-audience-fit-gridA four card grid of partner profiles, each with an icon, fit reason, earnings range, and ramp time, above a note on who to skip.

Commission Tiers Tablemarketing-pro-affiliate-sections-commission-tiers-tableFour partner tiers with the requirements column programs usually omit.

How Referrals Work Stepsmarketing-pro-affiliate-sections-how-referrals-work-stepsThe four attribution mechanics written out, including the two partner collision case.

Partner Case Studymarketing-pro-affiliate-sections-partner-case-studyA two column case study pairing a partner story, quote, and dated milestones with an earnings panel of monthly bars and summary rows.

Partner Quotes Gridmarketing-pro-affiliate-sections-partner-quotes-gridThree partner quote cards from different channels, each led by a verified payout figure and closed with avatar attribution.

Payout Methods Gridmarketing-pro-affiliate-sections-payout-methods-gridA four card grid of payout methods, each with an icon, blurb, and rows for minimum, fee, arrival time, and coverage, above a schedule note.

Payout Stats Bandmarketing-pro-affiliate-sections-payout-stats-bandProgram payout totals with the honest median and a public on time streak.

Program FAQ Accordionmarketing-pro-affiliate-sections-program-faq-accordionSix pre application questions in an accordion beside the heading, with a direct email card promising a one day human reply.

Program Rules Splitmarketing-pro-affiliate-sections-program-rules-splitTwo side by side rule cards listing allowed and prohibited promotion tactics with reasons, closed by a plain enforcement note.

Promo Asset Kit Gridmarketing-pro-affiliate-sections-promo-asset-kit-gridA six card grid of ready made promo asset packs, each with a small preview mockup, description, and format meta line.

Terms Changelog Listmarketing-pro-affiliate-sections-terms-changelog-listA two column terms changelog pairing the heading and advance notice promise with a dated list of rate and rule changes, each carrying a tag.

Terms Comparison Tablemarketing-pro-affiliate-sections-terms-comparison-tableA three column table setting six program terms against typical affiliate defaults, with a sourcing note under the table.

Top Partners Leaderboardmarketing-pro-affiliate-sections-top-partners-leaderboardThe quarterly partner board with earnings by channel type, named only with consent.

Ai Boundaries Panelsmarketing-pro-ai-sections-ai-boundaries-panelsTwo ring framed panels under a centered heading listing what the assistant does and never does, closed by a contractual footnote.

Ai Chat Heromarketing-pro-ai-sections-ai-chat-heroAn AI hero with a chat mockup where the assistant answers with segment sizes and choices made.

Ai Drafts Demo Splitmarketing-pro-ai-sections-ai-drafts-demo-splitA drafting demo that shows the human edits, two corrected lines feeding the workspace voice.

Ai Outcomes Statsmarketing-pro-ai-sections-ai-outcomes-statsA measured outcomes band with a centered heading, four ruled stat columns with values, labels, and detail lines, and a methodology footnote.

Ai Principles Listmarketing-pro-ai-sections-ai-principles-listFive AI commitments written plainly, each backed by a mechanism a buyer can verify.

Ai Release Timelinemarketing-pro-ai-sections-ai-release-timelineA dated model release log with versions, change summaries, category chips, and one rolled back entry under a header with a changelog link.

Ai Skeptics Faqmarketing-pro-ai-sections-ai-skeptics-faqA split section for skeptical AI questions, heading copy left and an accordion of five blunt answers right, first item opened.

Citation Trace Splitmarketing-pro-ai-sections-citation-trace-splitTwo column split pairing heading copy and three proof points with a cited answer card whose numbered markers resolve to listed source rows.

Copilot Compare Tablemarketing-pro-ai-sections-copilot-compare-tableCentered heading over a comparison table whose ruled rows pit a generic chatbot against the built-in assistant, closed by a sourcing footnote.

Data Governance Tablemarketing-pro-ai-sections-data-governance-tableCentered heading over a ruled table of six policy rows, each pairing a data commitment with a plain explanation, closed by a DPA link.

Eval Scores Chartmarketing-pro-ai-sections-eval-scores-chartEval pass rates per release as a shadcn line chart, including the regression we published.

Human Review Explainermarketing-pro-ai-sections-human-review-explainerThe three gates every AI draft passes, model, checks, human, with no autopilot setting.

Prompt Library Gridmarketing-pro-ai-sections-prompt-library-gridSix proven prompts as cards with categories, usage counts, and mono opening lines.

Usage Meter Cardmarketing-pro-ai-sections-usage-meter-cardAn AI usage panel with per feature bars and a capacity meter that is always full, no metering.

Voice Training Timelinemarketing-pro-ai-sections-voice-training-timelineHeading and intro above four milestone columns for days 1, 7, 30, and 90, each with a title, note, and a rising voice match meter.

Analyst Mentions Listmarketing-pro-awards-sections-analyst-mentions-listExact sentences from independent research with the firm, report, and date attached.

Analyst Quadrantmarketing-pro-awards-sections-analyst-quadrantSplit analyst recognition section pairing a drawn quadrant matrix of unnamed vendor dots with ruled report facts and a highlighted placement.

Award Spotlightmarketing-pro-awards-sections-award-spotlightSplit spotlight on one flagship award pairing a drawn laurel medallion panel with the verbatim jury citation and ruled judging facts.

Awards Timelinemarketing-pro-awards-sections-awards-timelineRecognition by year as ruled rows, from the first small badge to category leader.

Badge Comparison Tablemarketing-pro-awards-sections-badge-comparison-tableMatrix of review platform badges comparing us with two shortlisted rivals as filled and hollow dots, one badge conceded, totals per column.

Badge Criteriamarketing-pro-awards-sections-badge-criteriaPublished review badge thresholds as ruled requirement rows, the bar beside where you stand, met criteria as filled dots, one badge unearned.

Badge Wallmarketing-pro-awards-sections-badge-wallAward badges drawn as SVG laurel medallions with names and seasons, no raster assets.

Category Leader Gridmarketing-pro-awards-sections-category-leader-gridCurrent rank across eight product categories as cards with a large position numeral, quarters held, and a movement marker against last cycle.

Category Ratings Comparemarketing-pro-awards-sections-category-ratings-compareRuled list of review platform rating axes with paired meter bars comparing your score to the category average, losses included.

Entry Ledgermarketing-pro-awards-sections-entry-ledgerComplete ledger of award entries as ruled rows with year, award, outcome badge, and a lesson note, losses listed beside the wins.

Jury Panelmarketing-pro-awards-sections-jury-panelA grid of profile cards for the independent award judges, each with a portrait, an affiliation, the criterion scored, and one scoring note.

Rating Breakdown Chartmarketing-pro-awards-sections-rating-breakdown-chartThe full star distribution as a horizontal shadcn bar chart, one star reviews included.

Rating Trend Chartmarketing-pro-awards-sections-rating-trend-chartAn eight quarter line chart of the average review score against the category average, with a three stat summary row beneath.

Recognition Statsmarketing-pro-awards-sections-recognition-statsFour ruled stat columns counting badges held, Leader quarters, verified reviews, and first place categories, with a quarterly recount footnote.

Review Scores Bandmarketing-pro-awards-sections-review-scores-bandRatings from four review platforms as drawn medallions with stars and verified counts.

Reviewer Quotes Gridmarketing-pro-awards-sections-reviewer-quotes-gridSix lines lifted from verified reviews with star rows, one four star kept on purpose.

Announcement Barmarketing-pro-banners-announcement-barA slim muted strip with a highlighted lead word, one sentence of news, and an arrow link.

App Download Bannermarketing-pro-banners-app-download-bannerA smart app style strip with a rounded app icon, the name over a star rating and review count, a get the app button, and dismiss.

Bottom Docked Bannermarketing-pro-banners-bottom-docked-bannerA bottom pinned consent card with plain language copy and equal weight accept choices.

Countdown Bannermarketing-pro-banners-countdown-bannerA bordered event band with the launch date, a day, hour, and minute countdown readout, and a register button.

Dismissible Announcement Barmarketing-pro-banners-dismissible-announcement-barA slim dismissible top of page bar on a primary background with an uppercase New tag, a one sentence message, an arrow link, and an X button.

Email Capture Bannermarketing-pro-banners-email-capture-bannerA full width muted band with a newsletter invitation beside a labeled email form, a subscribe button, and a one line privacy note.

Feedback Bannermarketing-pro-banners-feedback-bannerA rounded muted row pairing a one question rating prompt and helper line with a five point scale bracketed by low and high labels.

Integration Bannermarketing-pro-banners-integration-bannerA bordered card strip pairing two product marks joined by a plus with a bold announcement lead and an arrow link to the integration.

Live Signups Bannermarketing-pro-banners-live-signups-bannerA pill banner with the most recent join, its city, and the day count, wired or nothing.

Promo Band With Ctamarketing-pro-banners-promo-band-with-ctaA primary colored offer strip with a bolded discount, plain deadline, and compact button.

Referral Bannermarketing-pro-banners-referral-bannerA muted row with a gift icon square, a give and get lead with reward terms, a mono referral link field, and a copy button.

Region Bannermarketing-pro-banners-region-bannerA bordered card row pairing a globe icon and detected location lead with a primary switch button beside a quiet stay option.

Sale Banner Darkmarketing-pro-banners-sale-banner-darkA seasonal sale band with the discount at display size, honest terms, and a secondary button.

Scheduled Maintenance Bannermarketing-pro-banners-scheduled-maintenance-bannerA calm maintenance strip with exact UTC times and the impact answered in one sentence.

Update Banner With Badgemarketing-pro-banners-update-banner-with-badgeA changelog style card strip with a version badge, feature line, release link, and dismiss.

Upgrade Bannermarketing-pro-banners-upgrade-bannerAn inline muted banner row with a Sparkles icon square, a semibold plan lead with muted benefits, a rounded Upgrade button, and a See plans link.

Webinar Bannermarketing-pro-banners-webinar-bannerA bordered card band pairing an overlapping speaker avatar stack and session title with a seats remaining note and a register button.

Before After Barsmarketing-pro-benchmarks-sections-before-after-barsMonth zero against month three as paired bars, churned teams counted, not survivors.

Benchmark Cta Bandmarketing-pro-benchmarks-sections-benchmark-cta-bandA report download band trading the itemized PDF for an email.

Benchmark Table Compactmarketing-pro-benchmarks-sections-benchmark-table-compactBenchmark metrics by company size with the reader band highlighted.

Benchmark Trend Linemarketing-pro-benchmarks-sections-benchmark-trend-lineFive years of the median and top decile as a shadcn line chart, the case against comparing to stale numbers.

Distribution Curvemarketing-pro-benchmarks-sections-distribution-curveThe full account distribution as a shadcn area curve with a marked median.

Funnel Drop Offmarketing-pro-benchmarks-sections-funnel-drop-offMedian conversion per funnel step as bars with top decile ticks, counting rules per row, and the weakest step named.

Industry Benchmark Barsmarketing-pro-benchmarks-sections-industry-benchmark-barsMedian and top decile open rates by industry as grouped shadcn bars with counting rules.

Key Findings Listmarketing-pro-benchmarks-sections-key-findings-listExecutive summary listing numbered findings as divided rows, each pairing a headline stat and label with a title and a two sentence read.

Methodology Notemarketing-pro-benchmarks-sections-methodology-noteThe methods section on the page, sample, definitions, exclusions, and named bias.

Percentile Calloutsmarketing-pro-benchmarks-sections-percentile-calloutsMedian, quartile, and decile threshold cards with mini position scales and verdict notes.

Quadrant Scattermarketing-pro-benchmarks-sections-quadrant-scatterSplit section pairing an inline SVG scatter of accounts, split into four quadrants by median crosshairs, with a labeled list naming each quadrant.

Quartile Range Bandsmarketing-pro-benchmarks-sections-quartile-range-bandsBenchmark section showing each segment as a horizontal p25 to p75 range on a shared axis, with a median dot and top decile tick.

Rank Yourself Slidermarketing-pro-benchmarks-sections-rank-yourself-sliderAn interactive slider placing the reader's open rate in a percentile band, with cut points listed and a verdict card.

Send Time Heatmapmarketing-pro-benchmarks-sections-send-time-heatmapMedian open rate by send day and hour as a token opacity heatmap grid, with peak, trough, and a legend.

Survey Results Barsmarketing-pro-benchmarks-sections-survey-results-barsRanked survey answers as horizontal shadcn bars with sample size in the footnote.

Year Over Year Shift Tablemarketing-pro-benchmarks-sections-yoy-shift-tableReference table listing each headline metric with last year, this year, a signed change chip, and a one line note on what moved it.

Author Spotlight Rowmarketing-pro-blog-sections-author-spotlight-rowA writer with a beat and credential bio beside their three most read pieces.

Blog Cards Gridmarketing-pro-blog-sections-blog-cards-gridThree post cards with placeholder covers, category badges, excerpts, and read times.

Category Filter Gridmarketing-pro-blog-sections-category-filter-gridA centered heading and lede sit above a row of category filter pills, then a three column grid of six hairline topped text posts with meta.

Curated Reading Pathmarketing-pro-blog-sections-curated-reading-pathA start here section walking new readers through five foundational posts on a numbered rail with read times and why it matters lines.

Editorial Feature Rowmarketing-pro-blog-sections-editorial-feature-rowA magazine front page row pairing one large feature card with two stacked compact posts.

Editorial Listmarketing-pro-blog-sections-editorial-listA centered blog header above five hairline separated editorial rows with dates, titles, excerpts, and category badges, closed by an archive button.

Featured Post Splitmarketing-pro-blog-sections-featured-post-splitOne flagship post with a wide cover, standfirst, author line, and read link.

Featured Post With Listmarketing-pro-blog-sections-featured-post-with-listA blog split with a view all header link, one large featured post with an author byline, and a hairline divided stack of three compact posts.

Monthly Archive Groupsmarketing-pro-blog-sections-monthly-archive-groupsA left aligned heading and lede lead into three month sections, each pairing a month label and count with a hairline divided list of dated posts.

Newsletter Archive Splitmarketing-pro-blog-sections-newsletter-archive-splitA sticky subscribe panel with a labeled email form beside a hairline divided ledger of five past issues with numbers, dates, and teasers.

Posts List Minimalmarketing-pro-blog-sections-posts-list-minimalA text only post ledger of dated, ruled rows with categories and hover arrows.

Posts With Sidebarmarketing-pro-blog-sections-posts-with-sidebarAn editorial post list beside a sticky sidebar of category counts and most read titles.

Pull Quote Cardsmarketing-pro-blog-sections-pull-quote-cardsA centered heading and lede over three bordered cards, each opening with a quote glyph and pull quote above a footer with source and byline.

Series Collection Cardsmarketing-pro-blog-sections-series-collection-cardsThree multi part series as cards with part counts, read times, and honest statuses.

Topic Hub Tilesmarketing-pro-blog-sections-topic-hub-tilesA browse by topic directory of six hairline topped tiles, each with an icon chip, mono post count, topic name, and one line description.

Write For Us Splitmarketing-pro-blog-sections-write-for-us-splitA two column contributor pitch: the left stacks a heading, lede, and commissioned topics, the right a panel with numbered steps, perks, and a button.

Writers Gridmarketing-pro-blog-sections-writers-gridA meet the writers grid of four author columns with illustrated avatars, beats, one line bios, post counts, and read links.

Affiliate Earnings Calculatormarketing-pro-calculators-affiliate-earnings-calculatorAudience and conversion sliders projecting commission, assumptions printed below.

Annual Billing Togglemarketing-pro-calculators-annual-billing-toggleA monthly or annual toggle with a seat slider, both yearly totals side by side and the annual saving printed.

Build Vs Buy Calculatormarketing-pro-calculators-build-vs-buy-calculatorEngineer and month sliders price an in house build against a flat subscription, compared as proportional bars with a verdict.

Churn Impact Calculatormarketing-pro-calculators-churn-impact-calculatorRevenue and churn sliders feed a three stat strip of monthly loss, yearly loss, and what one point less churn keeps.

CPL Benchmark Calculatormarketing-pro-calculators-cpl-benchmark-calculatorTwo column cost per lead calculator with spend and lead sliders beside a big CPL figure, a banded benchmark scale with marker, and a verdict.

Downtime Cost Calculatormarketing-pro-calculators-downtime-cost-calculatorCentered downtime calculator with one revenue slider that reprices a selectable SLA tier table and prints a yearly savings verdict line.

Email Volume Calculatormarketing-pro-calculators-email-volume-calculatorA volume slider against public rate bands with the computed monthly price.

Funnel Projection Calculatormarketing-pro-calculators-funnel-projection-calculatorOne traffic slider runs a four stage funnel at printed median rates, ending in projected new monthly revenue.

Ltv Calculatormarketing-pro-calculators-ltv-calculatorThree sliders driving lifetime value with the formula printed under the result.

Payback Summary Staticmarketing-pro-calculators-payback-summary-staticA worked payback example line by line, the calculator with the answer filled in.

Roi Calculatormarketing-pro-calculators-roi-calculatorTwo sliders for team and hours driving live yearly savings with printed assumptions.

Savings Slidermarketing-pro-calculators-savings-sliderOne slider for tool count driving monthly and yearly consolidation savings.

Team Size Estimatormarketing-pro-calculators-team-size-estimatorA stepper that picks the right plan from headcount with visible tier boundaries.

Test Duration Calculatormarketing-pro-calculators-test-duration-calculatorCentered A/B test duration calculator with three sliders feeding a big day count, a six week calendar grid, and a plain verdict line.

Usage Cost Estimatormarketing-pro-calculators-usage-cost-estimatorTwo column pricing estimator with seat and project steppers and add on switches beside a live itemized receipt that totals your monthly cost.

Benefits Gridmarketing-pro-careers-sections-benefits-gridSix benefit cards where every sentence commits to a number, policy, or default.

Benefits Icon Gridmarketing-pro-careers-sections-benefits-icon-gridA careers benefits section with a centered header, six icon led perks in a three by two grid, and a rounded button pointing to open roles.

Career Laddermarketing-pro-careers-sections-career-ladderA centered header above two bordered track panels for IC and management ladders, ruled level rows, a crossover note, and a promotion cycle strip.

Careers Cta Bannermarketing-pro-careers-sections-careers-cta-bannerA compact banner with overlapping avatars, an invitation line, and an open roles count.

Careers FAQmarketing-pro-careers-sections-careers-faqCandidate questions in an accordion beside heading copy and a contact card promising a reply within two working days.

Compensation Principlesmarketing-pro-careers-sections-compensation-principlesPay transparency principles beside a salary band table with levels and ranges.

Culture Values Splitmarketing-pro-careers-sections-culture-values-splitCulture framed as working agreements beside four numbered rules with enforcement notes.

Day in the Lifemarketing-pro-careers-sections-day-in-the-lifeA two column layout with heading copy and an employee card of avatar, role, and facts beside a vertical timeline of one real workday.

Early Careersmarketing-pro-careers-sections-early-careersA centered header above two bordered program cards for internship and graduate paths, each with a summary, ruled detail rows, and an apply button.

Employee Quotesmarketing-pro-careers-sections-employee-quotesThree employee quote cards with avatars and tenure lines confirming culture claims.

Hiring Journeymarketing-pro-careers-sections-hiring-journeyA hiring process section with four numbered steps joined by hairlines, per step durations, and a muted accommodations strip with a contact link.

Hiring Process Stepsmarketing-pro-careers-sections-hiring-process-stepsFour connected hiring stages with promised durations and no ghosting commitments.

Interview Prep Listmarketing-pro-careers-sections-interview-prep-listWhat each interview stage assesses and how to prepare, the rubric published.

Onboarding Planmarketing-pro-careers-sections-onboarding-planThree timeframe cards mapping the first ninety days with checklists, ruled outcome lines, and an onboarding buddy note.

Open Rolesmarketing-pro-careers-sections-open-rolesA header row with a view all button, role rows grouped by team with location and type badges, and a speculative application note.

Open Roles Listmarketing-pro-careers-sections-open-roles-listRuled rows of open roles with team badges, honest locations, and a reply time promise.

People Statsmarketing-pro-careers-sections-people-statsFour ruled retention and tenure stats with one line explanations under a centered header, closed by a source note.

Referral Program Cardmarketing-pro-careers-sections-referral-program-cardA public referral bounty split with the candidate, open beyond employees.

Roles By Departmentmarketing-pro-careers-sections-roles-by-departmentOpenings grouped under department headers with live counts and ruled role rows.

Salary Bands Tablemarketing-pro-careers-sections-salary-bands-tablePublished compensation by level with the midpoint offer rule and equity columns.

Talent Networkmarketing-pro-careers-sections-talent-networkHeading copy with three icon led contact promises beside a bordered signup card with an email field, a team interest checklist, and a join button.

Where We Workmarketing-pro-careers-sections-where-we-workThree office hub cards with working day, teams, and open role rows above a remote strip listing every hiring country.

Anonymous Results Compactmarketing-pro-case-studies-anonymous-results-compactAnonymized result rows for reference shy industries, with NDA references offered.

Before After Panelsmarketing-pro-case-studies-before-after-panelsA customer story told as two side by side panels contrasting the week before and after, closing with a row of three headline numbers.

Challenge Solution Resultsmarketing-pro-case-studies-challenge-solution-resultsOne customer story told across three divided columns covering the challenge, the solution steps, and a stacked results metric list.

Dark Panel Featuremarketing-pro-case-studies-dark-panel-featureFeatured story in a solid primary panel with inverted wordmark, summary, and three metrics.

Featured Storymarketing-pro-case-studies-featured-storyCentered heading over a story card pairing narrative and quote with a rail of three metrics.

Featured With Listmarketing-pro-case-studies-featured-with-listOne customer story told in full inside a featured card, beside a compact divided list of four more stories, each a wordmark and its number.

Growth Chart Storymarketing-pro-case-studies-growth-chart-storyA case study card led by a twelve month line chart with milestone markers and a story row below.

Industry Tabsmarketing-pro-case-studies-industry-tabsIndustry tabs where each panel shows one story card with metrics and a customer quote.

Interview Storymarketing-pro-case-studies-interview-storyA case study told as an interview, with the customer intro and headline numbers beside four question and answer exchanges.

Logo Rows With Resultsmarketing-pro-case-studies-logo-rows-with-resultsStacked divided rows pairing a wordmark and outcome with a bold metric and story link.

Metrics Spotlightmarketing-pro-case-studies-metrics-spotlightCompany narrative beside a divided stat rail with a wide customer quote underneath.

Mini Results Gridmarketing-pro-case-studies-mini-results-gridFour compact customer cards with wordmarks, one headline number, and story links.

Quote Led Storymarketing-pro-case-studies-quote-led-storyOversized opening quote above a three stat row and two short narrative paragraphs.

Quote With Radial Statsmarketing-pro-case-studies-quote-with-radial-statsA large customer quote beside a panel of three donut rings showing percentage outcomes.

Results Tablemarketing-pro-case-studies-results-tableClean table of customers, industries, results, and time to value with CTA buttons below.

Results With Area Chartmarketing-pro-case-studies-results-with-area-chartA case study with the customer indexed series as a hoverable shadcn area chart.

Roi Summary Cardsmarketing-pro-case-studies-roi-summary-cardsThree customers reduced to invested, returned, and payback period, finance memo style.

Savings Breakdownmarketing-pro-case-studies-savings-breakdownA finance first story and quote beside an itemized annual savings statement card whose line items add up to one bold yearly total.

Split With Quotemarketing-pro-case-studies-split-with-quoteTwo paragraph story beside a right rail holding a quote card and two key stats.

Stakeholder Voicesmarketing-pro-case-studies-stakeholder-voicesOne rollout narrated through three quote cards with avatars for marketing, operations, and finance, over a shared row of results each team measured.

Stat Callout Storymarketing-pro-case-studies-stat-callout-storyA narrative case study interrupted twice by ruled display size stat callouts.

Story Accordionmarketing-pro-case-studies-story-accordionFour customer stories in a bordered accordion where each trigger pairs a wordmark with a metric chip and opens to a summary and stats.

Story Carouselmarketing-pro-case-studies-story-carouselHorizontally scrollable snap row of story cards with wordmarks, metrics, and summaries.

Story Gridmarketing-pro-case-studies-story-gridThree story cards each showing a wordmark, a bold result, a summary, and a read link.

Story With Before After Chartmarketing-pro-case-studies-story-with-before-after-chartA customer narrative and quote beside grouped bars comparing three metrics before and after Acme.

Story With Fact Sheetmarketing-pro-case-studies-story-with-fact-sheetA narrative case study and checklist of changes beside an at a glance fact sheet card that closes with two results.

Timeline With Metricsmarketing-pro-case-studies-timeline-with-metricsA rollout told as a vertical timeline with a metric chip per milestone and a closing results band.

Video Case Rowmarketing-pro-case-studies-video-case-rowThree customer films with posters, durations, and the one number each story turns on.

Changelog Cards Monthlymarketing-pro-changelog-sections-changelog-cards-monthlyMonthly scorecards with change type counts, the headline ship, and line item links.

Changelog Filter Tabsmarketing-pro-changelog-sections-changelog-filter-tabsA dated changelog behind working filter tabs that narrow one list of entries to new features, improvements, or fixes.

Changelog List Datedmarketing-pro-changelog-sections-changelog-list-datedRelease entries down a hairline rail with dates, version chips, and outcome sentences.

Changelog Sticky Monthsmarketing-pro-changelog-sections-changelog-sticky-monthsA two column changelog archive: a sticky month index with entry counts beside releases grouped under month headings, each pairing a version chip with a title.

Changelog Subscribe Splitmarketing-pro-changelog-sections-changelog-subscribe-splitA changelog subscription split with copy, a three point benefit list, and a labeled email form beside a mockup of the release digest email itself.

Changelog With Tagsmarketing-pro-changelog-sections-changelog-with-tagsDated releases where every line carries a New, Improved, or Fixed chip.

Deprecations Notice Listmarketing-pro-changelog-sections-deprecations-notice-listRetirements with dates, reasons, and migration paths, plus the rumor stopping non removal.

Patch Notes Tablemarketing-pro-changelog-sections-patch-notes-tableA dense patch table listing version, date, a type chip, and a one line summary per row, closed by a note on the versioning policy.

Release Cadence Chartmarketing-pro-changelog-sections-release-cadence-chartShipped changes per month as stacked shadcn bars split into features and fixes.

Release Cardsmarketing-pro-changelog-sections-release-cardsA changelog with a centered header, a subscribe link, and stacked release cards carrying version badges, dates, and grouped change bullets.

Release Highlights Splitmarketing-pro-changelog-sections-release-highlights-splitThe headline feature of a release with copy and CTAs beside a mini app mockup.

Release Notes Accordionmarketing-pro-changelog-sections-release-notes-accordionReleases in a single open accordion where each trigger pairs a version chip, date, and title with grouped change bullets.

Release Notes Columnsmarketing-pro-changelog-sections-release-notes-columnsA single release in three columns: a version header and lede above New, Improved, and Fixed cards that list changes with per column counts.

Requested And Shippedmarketing-pro-changelog-sections-requested-and-shippedShipped changes as cards crediting the customers who asked, each footer stacking requester avatars beside the request count.

Shipping Velocity Statsmarketing-pro-changelog-sections-shipping-velocity-statsThree shipping cadence stats beside a sparkline of releases per month.

Version Compare Tablemarketing-pro-changelog-sections-version-compare-tableA three column table putting the previous major version beside the current one, capability by capability, with a migration guide link.

Version Timeline Horizontalmarketing-pro-changelog-sections-version-timeline-horizontalVersion dots along a horizontal line with dates and titles, the latest haloed.

Whats New Bannermarketing-pro-changelog-sections-whats-new-bannerA clickable row with the latest release, a version chip, and a changelog link.

Community Calls Splitmarketing-pro-community-sections-community-calls-splitA monthly call pitch with hosts beside the next three dated topics and a series button.

Community Channels Cardsmarketing-pro-community-sections-community-channels-cardsThree doors into the community, forum, calls, and digest, with activity facts.

Community Guidelines Splitmarketing-pro-community-sections-community-guidelines-splitModeration stats and a full charter link beside four numbered house rules in a divided card.

Community Quote Bandmarketing-pro-community-sections-community-quote-bandA member arc quote with tenure attribution beside an ungated join button.

Community Stats Bannermarketing-pro-community-sections-community-stats-bannerOverlapping member avatars and an invitation beside reply speed stats and a join button.

Contributor Gridmarketing-pro-community-sections-contributor-gridTop contributor cards with answer counts above an avatar wall and a breadth stat.

Discussion Preview Listmarketing-pro-community-sections-discussion-preview-listLive forum thread rows with avatars, tags, reply counts, and an active now chip.

First Week Stepsmarketing-pro-community-sections-first-week-stepsA seven day onboarding path in four numbered steps with day labels, closed by a join button and note.

Join FAQ Accordionmarketing-pro-community-sections-join-faq-accordionA two column layout pairing reassurance copy and a join button with an accordion of five pre join questions, the first answer opened by default.

Leaderboard Tablemarketing-pro-community-sections-leaderboard-tableThe quarterly contributor board with points, streaks, and published stakes.

Meetups City Gridmarketing-pro-community-sections-meetups-city-gridCity chapters with next dates, named organizers, and a dashed your city card.

Member Resources Gridmarketing-pro-community-sections-member-resources-gridMember built template cards with type chips, author avatars, and download counts under a browse all link.

Member Roles Laddermarketing-pro-community-sections-member-roles-ladderA centered heading over a table style card of four earned member roles, each with member counts, how it is earned, and what it unlocks.

Member Spotlightmarketing-pro-community-sections-member-spotlightA split card pairing a profile rail of portrait, role, and membership facts with a three question interview and a past spotlights link.

Milestones Timelinemarketing-pro-community-sections-milestones-timelineFour dated community milestones on a marker line, each with a year, a title, and one concrete fact.

Solved Thread Showcasemarketing-pro-community-sections-solved-thread-showcaseA two column layout pairing answer speed stats and an ask button with a static solved thread, its accepted answer highlighted over a reply.

Alternative Cardsmarketing-pro-comparison-sections-alternative-cardsThree cards positioning the product as the alternative to spreadsheets, email, and suites.

Before and Aftermarketing-pro-comparison-sections-before-afterBefore and after cards listing the same workflow as crossed off pains and checked wins.

Claim Checkmarketing-pro-comparison-sections-claim-checkA left aligned header over a stacked list of competitor claims, each quoted with a verdict badge and source, then answered in plain text.

Comparison Hubmarketing-pro-comparison-sections-comparison-hubA centered header over a grid of versus cards, each pairing your product and a competitor with a category, a verdict, and a read link.

Comparison with Quotemarketing-pro-comparison-sections-comparison-with-quoteCompact five row comparison table beside a quote card from a customer who switched.

Competitor Tablemarketing-pro-comparison-sections-competitor-tableFeature table comparing the product against two competitors with check, partial, and no marks.

Cost Breakdown Barsmarketing-pro-comparison-sections-cost-breakdown-barsTwo stacked bars totaling an old tool stack against one shorter Acme bar with an itemized legend.

Cost Comparison Chartmarketing-pro-comparison-sections-cost-comparison-chartAll in yearly cost against two competitors as grouped shadcn bars with the method owned.

Dimension Rowsmarketing-pro-comparison-sections-dimension-rowsStacked full width rows comparing Them and Us copy across four buying dimensions.

Feature Checklist Tablemarketing-pro-comparison-sections-feature-checklist-tableTwo column checklist table comparing features and pricing against a single competitor.

Feature Depth Matrixmarketing-pro-comparison-sections-feature-depth-matrixCapabilities rated with dot scales instead of checkmarks, one row conceded on purpose.

Fewer Stepsmarketing-pro-comparison-sections-fewer-stepsTwo numbered columns comparing the same task, nine steps beside three, each led by a step count and time, with a card explaining the gap.

Grouped Bar Comparisonmarketing-pro-comparison-sections-grouped-bar-comparisonFour dimensions compared as paired horizontal bars for Acme and a typical alternative.

Head To Head Tabsmarketing-pro-comparison-sections-head-to-head-tabsCentered pill tabs switch between competitors, each pane pairing a verdict and three checked differences with a two by two grid of outcome stat tiles.

Migration Coveragemarketing-pro-comparison-sections-migration-coverageA left rail argues the switch is easy with migration stats and two buttons, beside a card listing what carries over from the old tool.

Old Way New Waymarketing-pro-comparison-sections-old-way-new-wayEditorial split contrasting a muted old way list with a confident checked new way list.

Performance Curvesmarketing-pro-comparison-sections-performance-curvesTwo SVG curves diverging over six quarters, teams on Acme rising while the status quo stays flat.

Plan Matchmarketing-pro-comparison-sections-plan-matchThree stacked mapping rows pair each competitor plan with its matching plan on your side, an arrow chip between them and a yearly savings badge.

Pros And Cons Splitmarketing-pro-comparison-sections-pros-and-cons-splitAn honest fit assessment with a good fit card beside real disqualifiers and a referral.

Quadrant Position Chartmarketing-pro-comparison-sections-quadrant-position-chartA self drawn market quadrant as a shadcn scatter with the methodology owned in the footnote.

Release Velocitymarketing-pro-comparison-sections-release-velocityTwo changelog columns side by side, each led by a release count over a dated feed, a busy product feed beside a sparse rival.

Review Scoresmarketing-pro-comparison-sections-review-scoresA rounded table scores three products across independent review platforms, each cell pairing a rating with a five star meter above an averages row.

Score Ring Cardsmarketing-pro-comparison-sections-score-ring-cardsFour scored dimensions as ring gauges with industry averages and a source caption.

Side by Side Mockupsmarketing-pro-comparison-sections-side-by-side-mockupsTwo window mockups contrasting a cluttered generic tool with the calm product, captioned.

Switch Bannermarketing-pro-comparison-sections-switch-bannerMigration banner card with a heading, one call to action, and three checked steps below.

Switch Reasonsmarketing-pro-comparison-sections-switch-reasonsA why teams switch section with three icon reason cards ending in highlighted stats, plus a guarantee strip with a migration guide button.

Switching Stories Listmarketing-pro-comparison-sections-switching-stories-listFour evaluation accounts, each tagged with the factor that settled the decision.

Tco Tablemarketing-pro-comparison-sections-tco-tableA total cost table with stack and Acme columns, a totals row, and named assumptions.

Us vs Them Splitmarketing-pro-comparison-sections-us-vs-them-splitDivided two column list pairing checked product strengths with crossed out competitor gaps.

Vs Competitormarketing-pro-comparison-sections-vs-competitorA product versus legacy tools comparison with two matched criteria cards, a subtly emphasized product side, and a closing CTA with a migration link.

Callback Request Formmarketing-pro-contact-sections-callback-request-formTwo column split pairing a pitch with three numbered steps and a phone line beside a form card collecting name, phone, topic, and preferred time.

Centered Email Ctamarketing-pro-contact-sections-centered-email-ctaA formless contact section with the email address itself at display size as a mailto link.

Channel Cardsmarketing-pro-contact-sections-channel-cardsThree contact channel cards with icons, response promises, and action links for routing by intent.

Contact Split Formmarketing-pro-contact-sections-contact-split-formA reassuring pitch with reply time facts beside a bordered name, email, and message form.

Contact With Hoursmarketing-pro-contact-sections-contact-with-hoursChannel rows with live open chips beside a staffed hours card and a handoff note.

Direct Team Contactsmarketing-pro-contact-sections-direct-team-contactsHeading and lede above a four column grid of named people cards, each with an avatar, role, scope, direct email, and reply promise.

FAQ With Contact Cardmarketing-pro-contact-sections-faq-with-contact-cardCentered heading and lede above a two column split pairing an accordion of common questions with a contact card and direct inbox list.

Form With Channelsmarketing-pro-contact-sections-form-with-channelsA split contact section pairing intro copy, three contact channel rows, and office hours with a card based message form and privacy note.

Form With Map Mockupmarketing-pro-contact-sections-form-with-map-mockupA contact form beside an abstract dot grid map with labeled office pins and a coverage caption.

Offices Gridmarketing-pro-contact-sections-offices-gridRegional office cards with addresses, local inboxes, and working hours per timezone.

Offices Listmarketing-pro-contact-sections-offices-listA centered header over three office cards with region labels, addresses, timezones, and email links, closed by a remote friendly note.

Project Inquiry Formmarketing-pro-contact-sections-project-inquiry-formCentered heading and lede above a brief form card with name, email, company, and budget fields, a service checkbox grid, and a project textarea.

Regional Offices Gridmarketing-pro-contact-sections-regional-offices-gridThree offices with addresses, honest local hours, and the one channel each answers.

Sales Vs Support Splitmarketing-pro-contact-sections-sales-vs-support-splitOne panel split into sales and support doors, each with expectation bullets and its own CTA.

Support Channelsmarketing-pro-contact-sections-support-channelsA centered contact header above three channel cards for sales, support, and community, each with an arrow link and a median response time.

Support Stats Contactmarketing-pro-contact-sections-support-stats-contactLive support queue stats beside the start a conversation card.

Article With TLDRmarketing-pro-content-sections-article-with-tldrA long read opener with an author byline, reading meta, a bordered short version panel summarizing the argument, then the opening paragraphs.

Checklist Manifestomarketing-pro-content-sections-checklist-manifestoSix checked commitments pairing enforceable rules with the practices behind them.

Content With Toc Sidebarmarketing-pro-content-sections-content-with-toc-sidebarLong form prose beside a sticky mini table of contents with an active item.

Definition List Sectionmarketing-pro-content-sections-definition-list-sectionA working glossary of term and definition rows where the second sentence differentiates.

Glossary Preview Listmarketing-pro-content-sections-glossary-preview-listSix glossary terms defined in two sentences each, the second one with a stance.

Headline With Leadlinemarketing-pro-content-sections-headline-with-leadlineAn oversized research finding with a sourced leadline and one evidence link.

Letter From Foundermarketing-pro-content-sections-letter-from-founderA short founder letter that names the catch, signed with an avatar and a real email.

Myth Fact Rowsmarketing-pro-content-sections-myth-fact-rowsA myth versus evidence section of hairline divided rows pairing a popular belief on the left with what the measured data shows on the right.

Numbered Takeawaysmarketing-pro-content-sections-numbered-takeawaysThree ghost numbered research takeaways, each a claim with its data and reframe.

Prose Two Columnmarketing-pro-content-sections-prose-two-columnAn essay set in magazine columns under a heading, closed by an attribution line.

Prose With Margin Notesmarketing-pro-content-sections-prose-with-margin-notesAn annotated essay where each paragraph carries a superscript marker paired with a numbered caveat in a narrow margin column beside it.

Pull Quote Breakmarketing-pro-content-sections-pull-quote-breakOne aphorism set large between hairline rules with a source line, page punctuation.

Reading List Cardsmarketing-pro-content-sections-reading-list-cardsCurated external resources including one that argues against you, with real whys.

Series Chapter Indexmarketing-pro-content-sections-series-chapter-indexA series index pairing an intro column and byline with a divided list of numbered chapters, each showing a description, reading time, and marker.

Banner With Avatarsmarketing-pro-ctas-banner-with-avatarsCard banner with headline, overlapping avatar row, and a single primary button.

Before After Splitmarketing-pro-ctas-before-after-splitCentered headline and lede above a divided two column panel comparing the current week with the same week on the product, four lines per side.

Bordered Insetmarketing-pro-ctas-bordered-insetCentered headline and buttons inside a large rounded border inset.

Cta With Setup Checklistmarketing-pro-ctas-cta-with-setup-checklistThe closing ask beside the first session itemized, five steps with median times that sum.

Cta With Trend Chartmarketing-pro-ctas-cta-with-trend-chartA closing ask beside a minimal shadcn trendline framed as the reader future line.

Dark Band With Sparklinemarketing-pro-ctas-dark-band-with-sparklineA primary colored CTA band with a single button and a faint sparkline along its base.

Dual CTA Bannermarketing-pro-ctas-dual-cta-bannerA full width inverted CTA panel with a centered headline, supporting line, contrasting pill button, quiet arrow link, and a three item trust row.

Full Bleed Bandmarketing-pro-ctas-full-bleed-bandFull width primary band with headline, supporting line, and one inverted button.

Minimal Inlinemarketing-pro-ctas-minimal-inlineSlim ruled strip pairing a short headline with a single arrow text link.

Plain Text Ctamarketing-pro-ctas-plain-text-ctaThe editorial close, three sentences and two text links, no buttons.

Side By Side Cardsmarketing-pro-ctas-side-by-side-cardsTwo matched cards offering free trial and sales paths with checklists and buttons.

Split With Growth Chartmarketing-pro-ctas-split-with-growth-chartA bordered CTA panel with headline and buttons beside a rising area chart and a labeled result.

Split With Mockupmarketing-pro-ctas-split-with-mockupCard split pairing CTA copy and buttons with a metrics dashboard mockup.

Split With Quotemarketing-pro-ctas-split-with-quoteCTA copy and buttons beside a customer quote card with a matching avatar.

Trial Vs Demo Splitmarketing-pro-ctas-trial-vs-demo-splitSelf serve trial and guided demo as equal doors with terms lines and separate buttons.

With App Badgesmarketing-pro-ctas-with-app-badgesCentered mobile pitch with App Store and Google Play download buttons.

With Booking Slotsmarketing-pro-ctas-with-booking-slotsTwo column split pairing a headline, agenda list, and button with a scheduling card of a host, day chips, a time grid, and timezone note.

With Countdownmarketing-pro-ctas-with-countdownCentered card with a headline, supporting line, three countdown tiles for days, hours, and minutes, then a primary button over a terms line.

With Email Capturemarketing-pro-ctas-with-email-captureCentered closing call to action pairing a headline and supporting line with a labeled email form, one input, a primary button, and a terms line.

With Faq Linksmarketing-pro-ctas-with-faq-linksA final ask beside the three questions that stall signups, each linked to its answer.

With Guaranteemarketing-pro-ctas-with-guaranteeCentered card CTA with buttons and a money back guarantee reassurance line.

With Install Commandmarketing-pro-ctas-with-install-commandA developer CTA with a terminal box, copy affordance, and a first event success line.

With Integration Gridmarketing-pro-ctas-with-integration-gridCTA copy beside a three by three grid of integration tiles with a filled Acme tile at the center.

With Setup Progressmarketing-pro-ctas-with-setup-progressA CTA pairing copy and button with an onboarding card showing a progress ring and checklist.

With Statsmarketing-pro-ctas-with-statsCentered CTA copy and buttons above a divided grid of three proof stats.

Api Changelog Compactmarketing-pro-developers-sections-api-changelog-compactFive dated API changes with type tags and the 180 day breaking change policy up front.

Api Hero With Terminalmarketing-pro-developers-sections-api-hero-with-terminalA developer hero with the pitch beside a terminal running the first API call and its response.

Cli Install Bandmarketing-pro-developers-sections-cli-install-bandA slim band selling the CLI, one brew command with a copy button and three proof points.

Dev Community Cardsmarketing-pro-developers-sections-dev-community-cardsCentered developer community section with three channel cards, each carrying a stat, a description, and a join link, closed by an email line.

Docs Links Gridmarketing-pro-developers-sections-docs-links-gridSix documentation entry points as icon cards, each labeled with its honest reading time.

Error Codes Splitmarketing-pro-developers-sections-error-codes-splitSplit section listing six error families with codes, stable types, and fixes beside a mockup response body and a short list of guarantees.

Quickstart Steps Codemarketing-pro-developers-sections-quickstart-steps-codeInstall, authenticate, send. The whole quickstart as three cards with real code panels.

Rate Limits Tablemarketing-pro-developers-sections-rate-limits-tablePublished rate limits by plan beside the response headers that expose limit state.

Sdk Language Gridmarketing-pro-developers-sections-sdk-language-gridNine SDK cards with install commands and honest Official or Community badges.

Status Uptime Panelmarketing-pro-developers-sections-status-uptime-panelTwo column reliability section pairing audited uptime stats and a status page link with a panel of 45 day uptime bar strips and a legend.

Test Mode Fixturesmarketing-pro-developers-sections-test-mode-fixturesTwo column sandbox section with test mode proof points and keys beside a panel of magic recipient addresses that reproduce each failure mode.

Webhook Events Tablemarketing-pro-developers-sections-webhook-events-tableThe complete webhook reference as a ruled table, seven events with payload sizes.

CISO Quote Statsmarketing-pro-enterprise-sections-ciso-quote-statsA two column proof section pairing a customer CISO quote with a portrait against four audited deployment numbers, above a verification line.

Compliance Certifications Gridmarketing-pro-enterprise-sections-compliance-certifications-gridA centered heading over a three column grid of framework cards, each with a status badge, plain language scope, and a footer audit date.

Dedicated Infra Statsmarketing-pro-enterprise-sections-dedicated-infra-statsFour audited infrastructure numbers over a region table that separates failover from residency.

Deployment Options Cardsmarketing-pro-enterprise-sections-deployment-options-cardsCloud, dedicated, and self hosted as three cards, each stating its tradeoff in the footer.

Enterprise Hero Logosmarketing-pro-enterprise-sections-enterprise-hero-logosAn enterprise hero with the three procurement numbers and a wordmark row of large customers.

Pilot Terms Panelmarketing-pro-enterprise-sections-pilot-terms-panelA two column section pairing a paid pilot pitch and call to action buttons with a panel listing six standard pilot terms as definition rows.

Procurement Checklistmarketing-pro-enterprise-sections-procurement-checklistSeven procurement artifacts with availability and turnaround, the vendor packet in rows.

Rollout Responsibilitiesmarketing-pro-enterprise-sections-rollout-responsibilitiesA two column section pairing a heading and commitment stats with four onboarding phases, each splitting tasks between vendor and customer teams.

Security Review Fastlanemarketing-pro-enterprise-sections-security-review-fastlaneThe security review as a dated four step timeline with a free pilot extension if it runs long.

Sso Scim Gridmarketing-pro-enterprise-sections-sso-scim-gridSix identity questionnaire rows answered with mechanisms, SSO, SCIM, audit, and residency.

Support Tiers Tablemarketing-pro-enterprise-sections-support-tiers-tableThree support tiers with contractual response times and automatic credits when missed.

Agenda Day Columnsmarketing-pro-events-sections-agenda-day-columnsA two day single track agenda with timed session rows and track chips.

Agenda Tracks Columnsmarketing-pro-events-sections-agenda-tracks-columnsA two track conference day side by side with timed sessions and role credited speakers.

Conference Cta Bandmarketing-pro-events-sections-conference-cta-bandA primary registration band with the event name, date line, quick facts, and ticket button.

Event Stats Bannermarketing-pro-events-sections-event-stats-bannerA banner of four numbers from last year, attendance, reach, rating, and return intent.

Featured Webinar Splitmarketing-pro-events-sections-featured-webinar-splitA session pitch with speakers beside a registration card with date facts and an email field.

Key Dates Timelinemarketing-pro-events-sections-key-dates-timelineFour event milestones sit on a connected dot timeline with done, current, and upcoming states, each carrying a date, title, and one detail line.

Past Talks Listmarketing-pro-events-sections-past-talks-listThe team speaking record as ruled rows with venues, recordings, and a booking line.

Speakers Gridmarketing-pro-events-sections-speakers-gridEight speaker cards with portraits, roles, and session titles doubling as a mini agenda.

Sponsor Tiersmarketing-pro-events-sections-sponsor-tiersRuled tier rows list sponsor wordmarks with small SVG marks sized down from platinum to community, above a bordered prospectus request strip.

Ticket Tiersmarketing-pro-events-sections-ticket-tiersThree bordered ticket cards show prices, inclusion lists, and availability notes with one pass highlighted, closed by a refunds and transfer line.

Upcoming Events Listmarketing-pro-events-sections-upcoming-events-listRuled event rows with date tiles, format badges, and locations under a recordings link.

Venue Travel Splitmarketing-pro-events-sections-venue-travel-splitA stylized SVG neighborhood map and venue address sit beside ruled rows for airport, transit, and parking plus partner hotels with nightly rates.

Workshop Cardsmarketing-pro-events-sections-workshop-cardsThree hands on workshop cards with date chips, outcome lines, and honest seat counts.

Accordion With Linksmarketing-pro-faqs-accordion-with-linksAccordion beside a bordered card of documentation, community, and support links.

Audience Tabsmarketing-pro-faqs-audience-tabsCentered heading and lede above a three tab switcher for marketers, finance, and IT, each pane a hairline divided list of questions and answers.

Category Columnsmarketing-pro-faqs-category-columnsThree topic columns for billing, product, and security with short plain text answers.

Category Icon Gridmarketing-pro-faqs-category-icon-gridSix FAQ category cards with icons, answer counts, and the top two questions pulled out.

Centered Accordionmarketing-pro-faqs-centered-accordionA classic centered FAQ with a single column accordion of six questions, the first open by default, and a closing support handoff line.

Chat Style QAmarketing-pro-faqs-chat-style-qaCentered heading and lede above a bordered chat panel where visitor questions sit in filled bubbles and a named teammate answers in muted bubbles.

Compact Two Column Qamarketing-pro-faqs-compact-two-column-qaA text only FAQ grid with every short answer already open in two columns.

Faq Accordion Two Colmarketing-pro-faqs-faq-accordion-two-colTwo independent accordions side by side, twelve questions in the height of six.

FAQ Cards Gridmarketing-pro-faqs-faq-cards-gridSix bordered cards in a responsive grid, each pairing one question with a short answer.

Faq With Contact Cardmarketing-pro-faqs-faq-with-contact-cardAn FAQ accordion beside a support card with an avatar, reply time promise, and button.

Journey Stagesmarketing-pro-faqs-journey-stagesCentered heading and lede above a vertical rail of numbered stage nodes, each carrying a caption and a short stack of questions and answers.

Numbered Listmarketing-pro-faqs-numbered-listEditorial Q&A list with large muted numerals beside each question and hairline dividers.

Objection Answer Pairsmarketing-pro-faqs-objection-answer-pairsFour skeptical sentences quoted at heading weight, answered with concessions and receipts.

Sidebar Topicsmarketing-pro-faqs-sidebar-topicsStatic topic list with counts beside a flat divided list of billing questions.

Single Column Prosemarketing-pro-faqs-single-column-proseNarrow centered column of stacked Q&As in calm prose separated by hairlines.

Split Headline Accordionmarketing-pro-faqs-split-headline-accordionSticky heading and lede in the left third with the accordion filling the right two thirds.

Top Questions Plus Allmarketing-pro-faqs-top-questions-plus-allThree featured question cards above an accordion holding the remaining answers.

Topic Columnsmarketing-pro-faqs-topic-columnsA static FAQ grouping bold questions and short muted answers in a two column grid under three uppercase topic labels, closed by a contact panel.

Verdict Listmarketing-pro-faqs-verdict-listLeft aligned heading above a hairline divided list where each row pairs a Yes, No, or Depends badge with a bold question and short answer.

Wide Accordion Boldmarketing-pro-faqs-wide-accordion-boldFull width accordion with oversized question typography for confident scanning.

With CTA Bannermarketing-pro-faqs-with-cta-bannerCentered accordion above a slim bordered contact band with an outline support button.

With Search Barmarketing-pro-faqs-with-search-barAn FAQ head with a search pill, topic chips, and a most asked accordion beneath.

Accordion With Previewmarketing-pro-feature-sections-accordion-with-previewSingle open accordion of features paired with an analytics preview window.

Alternating Rowsmarketing-pro-feature-sections-alternating-rowsA centered header above three feature rows that alternate sides, pairing icon led copy and check lists with framed app panel mockups.

Alternating With Chartsmarketing-pro-feature-sections-alternating-with-chartsThree alternating feature rows pairing copy and checklists with bar, line, and donut chart panels.

Before After Panelsmarketing-pro-feature-sections-before-after-panelsA centered header above two matched panels, a muted before column and a highlighted after column listing the same tasks with new time costs.

Bento Gridmarketing-pro-feature-sections-bento-gridCentered intro above a bento of one large dashboard card and five smaller icon tiles.

Bento Grid Featuresmarketing-pro-feature-sections-bento-grid-featuresFive features in mixed cell sizes, a sparkline lead and an inbox stack among quiet text cells.

Capability Matrixmarketing-pro-feature-sections-capability-matrixA left aligned header above a framed table crossing six capabilities against three teams, marking coverage with checks and gaps with muted minus icons.

Cards With Mockupsmarketing-pro-feature-sections-cards-with-mockupsThree feature cards, each topped with a small chart, list, or form mockup.

Centered Rowsmarketing-pro-feature-sections-centered-rowsNarrow centered column of four icon feature rows separated by dividers.

Checklist Splitmarketing-pro-feature-sections-checklist-splitA split feature section with a header and grouped checklist beside a tall app window mockup with stats, task rows, and status chips.

Compact Two Columnmarketing-pro-feature-sections-compact-two-columnCentered heading over a tight two column list of eight checkmarked essentials.

Feature List Two Columnmarketing-pro-feature-sections-feature-list-two-columnA text only inventory of eight features, each a bold name with one working sentence.

Feature Tabs With Previewmarketing-pro-feature-sections-feature-tabs-with-previewTabs switching between three features, each pane pairing a blurb with a framed app mockup.

Feature Timelinemarketing-pro-feature-sections-feature-timelineA left aligned header above a vertical timeline of four numbered nodes, each carrying a capability title, a paragraph, and outcome chips.

Features With Area Chartmarketing-pro-feature-sections-features-with-area-chartReporting copy beside the actual shadcn chart component the dashboard renders.

Features With Customer Quotesmarketing-pro-feature-sections-features-with-customer-quotesFour capabilities, each paired with one customer line about that specific feature.

Grid With Sparklinesmarketing-pro-feature-sections-grid-with-sparklinesSix feature cards, each headed by a distinct mini graphic such as a sparkline, ring, or gauge.

Icon Benefit Gridmarketing-pro-feature-sections-icon-benefit-gridA centered header over a hairline divided three by two grid of six benefits, each with an icon tile, one line title, and two line copy.

Icon Grid Sixmarketing-pro-feature-sections-icon-grid-sixCentered heading over a three column grid of six icon led feature blurbs.

Icon List Three Columnmarketing-pro-feature-sections-icon-list-three-columnSix features as inline icons, bold names, and single sentences, no cards.

Mockup With Calloutsmarketing-pro-feature-sections-mockup-with-calloutsA centered header above one annotated product window with numbered callout badges, then a four column legend mapping each number to a feature.

Numbered Feature Rowsmarketing-pro-feature-sections-numbered-feature-rowsThree features argued editorially in ruled rows with ghost numerals and proof lines.

Solid Panel Gridmarketing-pro-feature-sections-solid-panel-gridSolid primary panel holding a heading and a six tile icon feature grid.

Split With App Windowmarketing-pro-feature-sections-split-with-app-windowHeading and checklist beside a campaign window mockup with live progress bars.

Split With Flow Diagrammarketing-pro-feature-sections-split-with-flow-diagramFeature copy and a checklist beside an SVG automation flow with a trigger, condition, and branches.

Split With Stat Cardsmarketing-pro-feature-sections-split-with-stat-cardsFeature copy beside a two by two grid of mini stat cards with attribution notes.

Stacked Panelsmarketing-pro-feature-sections-stacked-panelsTwo stacked split panels pairing copy and checklists with app window mockups.

Tabbed Showcasemarketing-pro-feature-sections-tabbed-showcaseA tabbed feature showcase with pill triggers for plan, track, and ship views, each pairing copy and a checklist with an app panel mockup.

With Stat Bandmarketing-pro-feature-sections-with-stat-bandIcon feature grid capped by a divided band of three headline stats.

Brand Blurb Columnsmarketing-pro-footers-brand-blurb-columnsBrand blurb and social icons beside three columns of product links.

Centered Logo Linksmarketing-pro-footers-centered-logo-linksCentered logo over a single row of links, social icons, and a copyright line.

Columns With Newslettermarketing-pro-footers-columns-with-newsletterFour link columns beside a newsletter pitch with an inline email subscribe row.

Dark Solidmarketing-pro-footers-dark-solidSolid primary footer with brand blurb, socials, and four link columns.

Developer Links Footermarketing-pro-footers-developer-links-footerA developer footer with an install command chip, docs columns, and an API status row.

Five Column With Taglinemarketing-pro-footers-five-column-with-taglineBrand name and tagline beside four link columns above a legal bar.

Footer With Status Linemarketing-pro-footers-footer-with-status-lineA four column footer whose bottom bar carries live status, region, and locale.

Giant Wordmarkmarketing-pro-footers-giant-wordmarkA statement footer pairing a slim nav and social row, an oversized brand wordmark across the middle, and a copyright and legal bottom bar.

Global Officesmarketing-pro-footers-global-officesA footer with a brand blurb and three link columns, a dedicated offices band listing four worldwide locations with hours, and a contact bar.

Legal Heavymarketing-pro-footers-legal-heavyLink columns over a dense legal block with disclaimers and compliance badges.

Mega Footermarketing-pro-footers-mega-footerA comprehensive footer with a brand mark and tagline beside four link columns, plus a bottom bar pairing the copyright with social icon links.

Minimal Inline Linksmarketing-pro-footers-minimal-inline-linksOne slim row with copyright, inline nav links, and small social icons.

Newsletter Centeredmarketing-pro-footers-newsletter-centeredCentered newsletter signup above a row of nav links and a copyright line.

Sitemap Mega Footermarketing-pro-footers-sitemap-mega-footerSix dense link columns covering every page, pure wayfinding with a slim legal row.

Slim Centeredmarketing-pro-footers-slim-centeredA minimal centered footer stacking a brand mark, one row of five links, social icon buttons, and a muted copyright line under a hairline border.

Social And Certificationsmarketing-pro-footers-social-and-certificationsA trust forward footer closing with social icons and compliance chips for SOC 2, GDPR, and ISO.

Stacked Link Rowsmarketing-pro-footers-stacked-link-rowsA footer that stacks each link group into its own hairline separated row, with a brand and social row above and a copyright bar below.

With App Badgesmarketing-pro-footers-with-app-badgesThree link columns plus iOS and Android download buttons above a brand bar.

With Blog Postsmarketing-pro-footers-with-blog-postsA footer pairing a brand blurb and three link columns with a latest posts list of three dated links and a view all link.

With Contact Infomarketing-pro-footers-with-contact-infoLink columns alongside address, email, and phone contact details.

With Cta Rowmarketing-pro-footers-with-cta-rowA footer opening with a final CTA row above standard link columns and a status link.

With Status And Localemarketing-pro-footers-with-status-and-localeFour link columns with a bottom bar showing system status and a language picker.

Category Cards Gridmarketing-pro-help-center-sections-category-cards-gridSix help categories as cards with article counts and the top three links inlined.

Community Answer Calloutmarketing-pro-help-center-sections-community-answer-calloutA forum thread mockup with an accepted answer, selling community as a support channel.

Escalation Paths Bandmarketing-pro-help-center-sections-escalation-paths-bandChat, email, and phone as cards with measured response times and when to pick each.

Help Search Heromarketing-pro-help-center-sections-help-search-heroA help center hero with one big search field and the five queries people actually type.

Known Issues Listmarketing-pro-help-center-sections-known-issues-listA tracker of open bugs as ruled rows, each with a status badge, affected area, open date, and a workaround link when one exists.

Live Sessions Schedulemarketing-pro-help-center-sections-live-sessions-scheduleThe next four live sessions as ruled rows, each with a date tile, the topic, host and time, and a seat reservation button.

Popular Articles Listmarketing-pro-help-center-sections-popular-articles-listThe ten most read help articles as ranked rows with categories and read times.

Setup Steps Timelinemarketing-pro-help-center-sections-setup-steps-timelineA numbered vertical timeline of five setup steps, each with a time estimate, a one line description, and a link to the full guide.

Support Plans Tablemarketing-pro-help-center-sections-support-plans-tableThree support tiers as columns in a ruled table, compared across channels, first reply time, coverage hours, escalation, and onboarding.

Symptom Triage Tablemarketing-pro-help-center-sections-symptom-triage-tableA ruled three column table mapping common symptoms to the first thing to check and the fix article, with a chat fallback line beneath.

System Status Bandmarketing-pro-help-center-sections-system-status-bandAn overall status line above one row per service, each with a 45 day uptime bar strip, an uptime percentage, and a status page link.

Video Guides Rowmarketing-pro-help-center-sections-video-guides-rowThree walkthrough videos with posters, honest durations, and one line on what each covers.

Centered Minimalmarketing-pro-hero-sections-centered-minimalA typography only hero with a centered headline, lede, single CTA, and a muted trust line.

Centered With Browser Mockupmarketing-pro-hero-sections-centered-with-browser-mockupA centered hero with headline and CTAs above a browser mockup with sidebar, chart, and table rows.

Centered With Feature Pillsmarketing-pro-hero-sections-centered-with-feature-pillsA centered headline, lede, and dual CTAs above a wrapped row of bordered icon feature pills.

Centered With Integration Diagrammarketing-pro-hero-sections-centered-with-integration-diagramA centered hero above a hub and spoke diagram of six integration chips around an Acme node.

Centered With Logo Stripmarketing-pro-hero-sections-centered-with-logo-stripA centered hero anchored by a ruled strip of customer wordmarks under a trust count.

Centered With Searchmarketing-pro-hero-sections-centered-with-searchA docs hero with centered copy above a command bar search mockup with suggestion rows.

Centered With Video Mockupmarketing-pro-hero-sections-centered-with-video-mockupCentered hero with headline, lede, and dual CTAs above a video player mockup with poster, play button, control bar, and a row of chapter markers.

Headline Only Heromarketing-pro-hero-sections-headline-only-heroOne oversized statement, one line with a number, two buttons. Typography carries the fold.

Hero With Ticker Bandmarketing-pro-hero-sections-hero-with-ticker-bandA centered hero above five live platform activity tiles with pulsing dots.

Left Aligned With Checklistmarketing-pro-hero-sections-left-aligned-with-checklistA left aligned headline, lede, three check items, and dual CTAs that own the left edge.

Metrics Heromarketing-pro-hero-sections-metrics-heroA centered proof led hero with headline, lede, dual CTAs, a hairline separated row of three oversized stats, and a customer wordmark strip.

Signup Heromarketing-pro-hero-sections-signup-heroA split hero pairing a headline, lede, and check marked benefits with an inline signup card of labeled fields, Google sign in, and a terms line.

Split App Panelmarketing-pro-hero-sections-split-app-panelA split hero pairing headline, lede, dual CTAs, and an avatar star rating with a markup app window of icon rail, chart strip, and invoice rows.

Split With Analytics Dashboardmarketing-pro-hero-sections-split-with-analytics-dashboardA two column hero pairing headline and CTAs with an analytics dashboard mockup and area chart.

Split With Chat Mockupmarketing-pro-hero-sections-split-with-chat-mockupA support led hero beside a chat mockup with a named agent and a resolved in minutes line.

Split With Codemarketing-pro-hero-sections-split-with-codeA split hero with headline, lede, and CTAs beside a token colored code editor window mockup.

Split With Comparisonmarketing-pro-hero-sections-split-with-comparisonSplit hero with headline, lede, and dual CTAs beside a two column panel contrasting the old way as crossed items against checked new ones.

Split With Funnel Graphicmarketing-pro-hero-sections-split-with-funnel-graphicA split hero pairing headline and CTAs with a vertical funnel of narrowing stage bars.

Split With Live Chartmarketing-pro-hero-sections-split-with-live-chartA hero whose chart is a working shadcn component, wired for real data instead of a mockup.

Split With Metricsmarketing-pro-hero-sections-split-with-metricsA split hero with copy and dual CTAs beside a divided panel of four large KPI tiles.

Split With Mobile Appmarketing-pro-hero-sections-split-with-mobile-appA split hero with copy and dual CTAs beside a phone mockup of the product mobile app.

Split With Pricing Cardmarketing-pro-hero-sections-split-with-pricing-cardSplit hero with headline, lede, dual CTAs, and a guarantee row beside a single plan card showing the seat price, checked features, and trial CTA.

Split With Signup Formmarketing-pro-hero-sections-split-with-signup-formA hero with the signup card in the fold, friction removers checked beside email and password fields.

Split With Stats Sidebarmarketing-pro-hero-sections-split-with-stats-sidebarA calm hero with four proof numbers running down a single ruled rail.

Split With Stepsmarketing-pro-hero-sections-split-with-stepsSplit hero with headline, lede, dual CTAs, and a two stat row beside a card walking the four onboarding steps on a numbered vertical rail.

Split With Testimonialmarketing-pro-hero-sections-split-with-testimonialA split hero with headline, lede, and dual CTAs beside a single customer quote card.

Terminal Heromarketing-pro-hero-sections-terminal-heroA centered developer tool hero with an install command row, dual CTAs, and a terminal window mockup of prompt, output, and success lines.

With Avatar Ratingmarketing-pro-hero-sections-with-avatar-ratingA centered hero with dual CTAs above overlapping avatars, five stars, and a team count line.

With Customer Countermarketing-pro-hero-sections-with-customer-counterA centered hero with the unrounded customer count at display size and an avatar row.

With Kanban Previewmarketing-pro-hero-sections-with-kanban-previewA centered hero with copy and CTAs above a wide kanban board mockup of campaign tasks.

Carbon Stats Bandmarketing-pro-impact-sections-carbon-stats-bandThree years of audited emissions with shrinking bars and the mechanism named.

Commitments Timelinemarketing-pro-impact-sections-commitments-timelineA vertical rail timeline of public impact promises with year markers, kept or in progress status badges, and honest detail lines.

Counting Rules Gridmarketing-pro-impact-sections-counting-rules-gridA methodology section presenting four numbered impact accounting rules in a two by two card grid with the external auditor named in the footer.

Grantee Spotlightmarketing-pro-impact-sections-grantee-spotlightA grantee spotlight split with a director quote on the left and a paperwork facts panel plus a headline outcome number on the right.

Grants Program Cardmarketing-pro-impact-sections-grants-program-cardA grants program with cycle stats, clear criteria, and no logo placement required.

Impact Report Numbersmarketing-pro-impact-sections-impact-report-numbersThe annual impact report as an eight line ledger, including the weakest number.

Open Source Listmarketing-pro-impact-sections-open-source-listMaintain, contribute, fund, publish. Four open source relations with real numbers.

Pledge Percent Cardmarketing-pro-impact-sections-pledge-percent-cardThe 1% pledge with last year's total and the allocation rows that prove it.

Product Donations Gridmarketing-pro-impact-sections-product-donations-gridA centered header over three stat cards for standing product giveaway programs, each with a big count, terms, and eligibility link.

Regional Giving Barmarketing-pro-impact-sections-regional-giving-barA regional grant allocation section with one segmented bar across the top and a ruled legend listing regions, grantee counts, amounts, and share.

Volunteer Days Panelmarketing-pro-impact-sections-volunteer-days-panelA split volunteer program section with participation stats on the left and a partner outing roster listing activities, people, and hours on the right.

API and Webhooks Panelmarketing-pro-integration-sections-api-webhooks-panelA developer split with a headline, capability ticks, and a docs button beside an inverted code panel with file tabs and token styled lines.

Connection Methods Tablemarketing-pro-integration-sections-connection-methods-tableA centered header above a comparison table weighing native apps, no code recipes, and the developer API, with the most popular column highlighted.

Directory Gridmarketing-pro-integration-sections-directory-gridAn integration directory with a centered header, static category chips, a three by two grid of tool cards with Connect links, and a request line.

Integration Request Boardmarketing-pro-integration-sections-integration-request-boardConnector requests with vote counts and honest statuses, the declined one kept visible.

Integration Security Panelmarketing-pro-integration-sections-integration-security-panelA trust focused split with a headline, four security assurances, and a docs link beside an access manager showing granted scopes and a revoke control.

Integration Setup Stepsmarketing-pro-integration-sections-integration-setup-stepsAn onboarding split with a headline, a numbered three step timeline, and a blueprint that walks from choosing a tool to the first live sync.

Integration Spotlightmarketing-pro-integration-sections-integration-spotlightAn integration deep dive with paired marks, a headline, three feature rows, and connect buttons beside a field mapping panel of what syncs each way.

Integrations Categories Columnsmarketing-pro-integration-sections-integrations-categories-columnsA text only directory index of four category columns with counts and linked tool names.

Integrations Cta Bandmarketing-pro-integration-sections-integrations-cta-bandA centered panel with icon chips, a stack fit headline, and browse and request buttons.

Integrations Grid Tilesmarketing-pro-integration-sections-integrations-grid-tilesNine category tiles with icons and data flow blurbs above a browse all button.

Integrations Hub Diagrammarketing-pro-integration-sections-integrations-hub-diagramA hub diagram of sources flowing into Acme and attribution flowing back out, with a legend.

Integrations With Codemarketing-pro-integration-sections-integrations-with-codeAPI copy and a checklist beside a terminal panel showing a colored webhook payload.

Sync Volume Chartmarketing-pro-integration-sections-sync-volume-chartRecords synced per day as shadcn bars beside sync lag and success rate facts.

Data Residency Splitmarketing-pro-localization-sections-data-residency-splitSplit section stacking residency stats beside a seven region list with mono codes, role notes, and live or in build status chips.

Glossary Terms Tablemarketing-pro-localization-sections-glossary-terms-tableA heading and lede, then a bordered table of product terms with approved translations in three languages, usage notes, and review status chips.

Languages Grid Bandmarketing-pro-localization-sections-languages-grid-bandInterface languages as chips with two honest tiers, full coverage or UI only.

Local Payments Rowmarketing-pro-localization-sections-local-payments-rowCurrencies, local payment methods, tax, and AP ready invoices as four cards.

Locale Formatting Splitmarketing-pro-localization-sections-locale-formatting-splitA two column split pairing a stacked list of formatting behaviors with a bordered panel rendering one date, number, and price across five locales.

Market Rollout Timelinemarketing-pro-localization-sections-market-rollout-timelineA heading and lede, then four phase columns on a dotted top rule, each with a quarter label, status chip, markets opening, and shipping work.

Regional Compliance Listmarketing-pro-localization-sections-regional-compliance-listPrivacy and messaging laws by region, described as product behavior instead of legal prose.

Rtl Support Calloutmarketing-pro-localization-sections-rtl-support-calloutRight to left and script support described at the level where credibility lives.

Support Hubs Columnsmarketing-pro-localization-sections-support-hubs-columnsThree regional support hub columns with staffing hour strips, native language lists, and median first reply stats above a handoff note.

Translation Coverage Barsmarketing-pro-localization-sections-translation-coverage-barsA heading and lede, a two segment legend, then a two column list of languages with reviewed percentages, progress bars, and string counts.

Translation Workflow Mockupmarketing-pro-localization-sections-translation-workflow-mockupA drawn translation screen with locale rows, review chips, and a send blocked footer.

Customer Wall Densemarketing-pro-logo-clouds-customer-wall-denseTwenty wordmarks in a tight ruled grid, volume as the entire message.

Logos Band Darkmarketing-pro-logo-clouds-logos-band-darkA primary colored band with a trust claim above wordmarks in foreground tones.

Logos By Industrymarketing-pro-logo-clouds-logos-by-industryCustomer wordmarks sorted into four industry columns with team counts per shelf.

Logos Case Resultsmarketing-pro-logo-clouds-logos-case-resultsA centered heading over six bordered tiles, each pairing a customer wordmark with a headline case study metric, a result line, and a link.

Logos Featured Customermarketing-pro-logo-clouds-logos-featured-customerA featured customer panel with a wordmark, quote, and ruled fact rows sits beside a two column grid of supporting wordmarks and a count line.

Logos Grid With Headingmarketing-pro-logo-clouds-logos-grid-with-headingA heading and lede beside a two by four grid of bordered wordmark tiles.

Logos Row Simplemarketing-pro-logo-clouds-logos-row-simpleA single wrapped row of muted text wordmarks under one line of trust copy.

Logos Timelinemarketing-pro-logo-clouds-logos-timelineA left aligned heading over ruled yearly rows, each pairing the notable wordmarks that signed on with a running customer total at the right.

Logos Two Row Offsetmarketing-pro-logo-clouds-logos-two-row-offsetTen wordmark pills in two staggered rows for a dense, brickwork style logo cloud.

Logos With Proof Statsmarketing-pro-logo-clouds-logos-with-proof-statsA wordmark wall above the three numbers that make logos evidence, retention included.

Logos With Quotemarketing-pro-logo-clouds-logos-with-quoteA wordmark row above one short centered customer quote with avatar attribution.

Logos With Statmarketing-pro-logo-clouds-logos-with-statA large customer count and claim beside a ruled two column grid of wordmarks.

Press Stripmarketing-pro-logo-clouds-press-stripA press strip with a standalone uppercase label and three pull quotes above outlet wordmarks, split by hairlines that adapt to stacking.

Ratings Stripmarketing-pro-logo-clouds-ratings-stripAn uppercase intro over three review platform columns with star rows, scores, wordmarks, and review counts, above a wrapped row of customer wordmarks.

Stat Anchoredmarketing-pro-logo-clouds-stat-anchoredA static logo cloud anchored by an oversized customer count in primary type, a muted supporting line, and two staggered rows of wordmarks.

Feature Name Mappingmarketing-pro-migration-sections-feature-name-mappingA centered heading over a two column grid of cards mapping each old tool name to its new equivalent, each with a short note.

Import Coverage Tablemarketing-pro-migration-sections-import-coverage-tableWhat migrates from each source tool by data type, with honest partial cells worth reading.

Import Dry Run Previewmarketing-pro-migration-sections-import-dry-run-previewSplit section pairing dry run copy and three assurances with a static importer report of counts, review statuses, and estimated run time.

Migration Paths Cardsmarketing-pro-migration-sections-migration-paths-cardsA centered heading over three migration path cards with a best fit line, an included checklist, and a time estimate, one marked featured.

Migration Steps Timelinemarketing-pro-migration-sections-migration-steps-timelineThe switch as five clock stamped steps tagged automatic, your review, or your call.

Migration Stories Rowmarketing-pro-migration-sections-migration-stories-rowThree switcher accounts structured as feared, what happened, and how long it really took.

Switch FAQ Accordionmarketing-pro-migration-sections-switch-faq-accordionA two column switching FAQ with reassurance copy and a contact link beside a five item accordion that opens the first answer by default.

Switch Hero Checklistmarketing-pro-migration-sections-switch-hero-checklistA migration hero with the importer checklist and the one thing it cannot carry, stated.

Switcher Offer Cardmarketing-pro-migration-sections-switcher-offer-cardThe buyout deal as three numbered terms on the page, contract credit to exit clause.

Time To Switch Bandmarketing-pro-migration-sections-time-to-switch-bandA centered heading over a four column bordered band of account size tiers, each showing a large migration time and a line on coverage.

Who Does What Splitmarketing-pro-migration-sections-who-does-what-splitTwo panel responsibilities section listing your timed migration tasks beside importer and engineer duties, totaled in a closing footnote.

Zero Downtime Explainermarketing-pro-migration-sections-zero-downtime-explainerHow both tools run in parallel during the switch, three paragraphs with a definitions rail.

App Downloadmarketing-pro-mobile-app-sections-app-downloadA split app download CTA pairing a heading, drawn store buttons, and a star rating with a phone mockup showing a chart strip and activity rows.

App Features With Screensmarketing-pro-mobile-app-sections-app-features-with-screensThree mobile moments, each with a small phone frame and the why a phone copy.

App Hero With Phonemarketing-pro-mobile-app-sections-app-hero-with-phoneAn app hero with store buttons and a rating line beside a drawn phone frame.

App Onboarding Stepsmarketing-pro-mobile-app-sections-app-onboarding-stepsA three step onboarding section with a heading above numbered steps joined by a dashed connector, each pairing an explanation with a drawn UI chip.

App Privacy Labelmarketing-pro-mobile-app-sections-app-privacy-labelA two column privacy section pairing plain language data promises with a drawn store style privacy label card listing data categories.

App Rating Calloutmarketing-pro-mobile-app-sections-app-rating-calloutThe big store rating beside three real voiced review cards with version metadata.

App Screens Rowmarketing-pro-mobile-app-sections-app-screens-rowThree captioned phone frames in a row with the middle screen elevated.

App Store Badges Bandmarketing-pro-mobile-app-sections-app-store-badges-bandA download band with drawn store chips and an existing account reassurance.

App Update Notesmarketing-pro-mobile-app-sections-app-update-notesStore style release notes with version, size, and a voice people actually read.

App Watch Companionmarketing-pro-mobile-app-sections-app-watch-companionA two column watch companion section pairing three wrist feature rows with a drawn smartwatch mockup showing an approval notification and its inline actions.

App Widget Showcasemarketing-pro-mobile-app-sections-app-widget-showcaseA widget showcase with a heading above three captioned tiles, a wide chart, a daily glance, and a quick actions grid, over behavior notes.

Push Notification Mockupmarketing-pro-mobile-app-sections-push-notification-mockupA drawn lock screen with the three pushes the app sends beside the restraint policy.

Qr Download Splitmarketing-pro-mobile-app-sections-qr-download-splitA desktop to phone bridge with a drawn QR card that stays dark on light by design.

Announcement Bar Navmarketing-pro-navbars-announcement-bar-navA sticky header with a primary announcement bar and arrow link above a frosted navbar with centered links and dual CTAs.

Bordered Grid Navmarketing-pro-navbars-bordered-grid-navA full bleed grid header where the logo, uppercase links, and actions sit in bordered cells split by dividers, ending in a solid CTA cell.

Centered Links Navmarketing-pro-navbars-centered-links-navA symmetric header with links optically centered between the logo and a single CTA.

Compact Centered Navmarketing-pro-navbars-compact-centered-navA slim borderless navbar with a wordmark, three links, and a text only primary CTA.

Dark Navmarketing-pro-navbars-dark-navA solid primary colored header with inverted logo chip and a secondary CTA button.

Double Deck Navmarketing-pro-navbars-double-deck-navA two row header with a slim utility deck above the main logo, links, and CTA row.

Mega Menu Navmarketing-pro-navbars-mega-menu-navA sticky navbar with its product mega menu expanded inline: two icon link columns and a featured update card, collapsing to a mobile sheet.

Minimal Nav With Searchmarketing-pro-navbars-minimal-nav-with-searchA minimal header built around a command bar search pill with a keyboard shortcut hint.

Nav With Announcementmarketing-pro-navbars-nav-with-announcementA sticky header with a slim primary announcement line riding above a standard navbar.

Navbar With Promo Bannermarketing-pro-navbars-navbar-with-promo-bannerAn announcement strip and navigation designed as one header unit with a real deadline.

Phone CTA Navmarketing-pro-navbars-phone-cta-navA contact forward sticky header for service businesses with logo and links, a labeled phone number, and a quote CTA that collapse on mobile.

Pill Navmarketing-pro-navbars-pill-navA contained rounded pill header inset from the page edges with links and a rounded CTA.

Slim Glass Navmarketing-pro-navbars-slim-glass-navA slim glass navbar with a wordmark, four muted links, and one pill shaped CTA. Links collapse into a mobile sheet menu.

Split Logo Navmarketing-pro-navbars-split-logo-navA boutique header with the logo centered between two split link sets and a compact CTA.

Stacked Centered Navmarketing-pro-navbars-stacked-centered-navAn editorial masthead with utility links and search, a large centered wordmark, sign in and subscribe actions, and a centered section link row below.

Standard Sticky Navmarketing-pro-navbars-standard-sticky-navA dependable sticky header with logo, inline links, dual CTAs, and a mobile sheet menu.

Subnav Section Barmarketing-pro-navbars-subnav-section-barA slim sticky section bar with the page name and anchor links for long pages.

Issue Preview Splitmarketing-pro-newsletter-sections-issue-preview-splitThe signup form beside the actual current issue drawn as an email mockup.

Newsletter Archive Listmarketing-pro-newsletter-sections-newsletter-archive-listFour numbered back issues as linked rows with the subscribe form for the next one.

Newsletter Author Notemarketing-pro-newsletter-sections-newsletter-author-noteA two column layout pairing a letter style note card with the writer avatar signature beside the heading, labeled subscribe form, and small print.

Newsletter Card Centeredmarketing-pro-newsletter-sections-newsletter-card-centeredOne centered panel with the pitch, form, and a reader avatar row with a count.

Newsletter Dark Bandmarketing-pro-newsletter-sections-newsletter-dark-bandA primary colored band with a tinted email field, secondary button, and small print line.

Newsletter Inline Bandmarketing-pro-newsletter-sections-newsletter-inline-bandA slim bordered band pairing a cadence promise with an inline email field and button.

Newsletter Panelmarketing-pro-newsletter-sections-newsletter-panelA full width muted newsletter panel pairing a headline, benefit line, and no spam note with a labeled email field and pill subscribe button.

Newsletter Reader Quotesmarketing-pro-newsletter-sections-newsletter-reader-quotesA two column layout with subscribe copy and a labeled form on one side and two subscriber quote cards with avatars, names, and roles.

Newsletter Split With Perksmarketing-pro-newsletter-sections-newsletter-split-with-perksSubscribe copy and form beside a checked list of what every issue contains.

Newsletter Stats Stripmarketing-pro-newsletter-sections-newsletter-stats-stripA centered heading and labeled subscribe form above a four stat strip showing subscribers, open rate, issues shipped, and publishing streak.

Newsletter Topic Pickermarketing-pro-newsletter-sections-newsletter-topic-pickerA centered heading and intro over a grid of selectable topic tiles with checkboxes, followed by a labeled email field and subscribe button.

Newsletter With Sample Issuemarketing-pro-newsletter-sections-newsletter-with-sample-issueSubscribe copy beside an email client mockup rendering last month as the sample issue.

Churn Retention Chartsmarketing-pro-open-metrics-churn-retention-chartsMonthly churn bars beside a net revenue retention line, the uncomfortable pair published.

Conversion Funnel Metricsmarketing-pro-open-metrics-conversion-funnel-metricsA split layout pairing headline conversion facts with a funnel panel of proportional bars and the step by step rate between visitors, signups, and customers.

Cost Transparency Chartmarketing-pro-open-metrics-cost-transparency-chartMonthly costs by category as horizontal shadcn bars with a profitable since header.

Costs Breakdown Chartmarketing-pro-open-metrics-costs-breakdown-chartCost structure by quarter as stacked shadcn bars, mostly people, deliberately.

Goals Progress Boardmarketing-pro-open-metrics-goals-progress-boardFour goal cards pairing public targets with actuals, each carrying the current value, a progress bar, an honest status badge, and a detail line.

Growth Milestones Timelinemarketing-pro-open-metrics-growth-milestones-timelineA vertical timeline of dated milestones behind the published numbers, each row stamped with its title, a short note, and the MRR at the time.

Metrics Intro Bannermarketing-pro-open-metrics-metrics-intro-bannerThe why of an open metrics page with publish dates, cadence, and named exclusions.

Metrics Stat Gridmarketing-pro-open-metrics-metrics-stat-gridA headline snapshot with six KPI tiles, each showing the current value, a month over month delta line, and a small illustrative sparkline.

Mrr Growth Chartmarketing-pro-open-metrics-mrr-growth-chartTwelve months of MRR as a shadcn area chart with a stat header and counting rules footnote.

Open Metrics Tablemarketing-pro-open-metrics-open-metrics-tableSix months of exact headline metrics in a copyable table with a CSV link.

Revenue Breakdown Barsmarketing-pro-open-metrics-revenue-breakdown-barsMRR by plan tier as stacked shadcn bars across six months.

Traffic Sources Donutmarketing-pro-open-metrics-traffic-sources-donutVisitor acquisition split as a shadcn donut beside strategy notes per source.

User Growth Linemarketing-pro-open-metrics-user-growth-lineActive workspaces against paying customers as two shadcn lines with a legend.

Agency Program Bannermarketing-pro-partner-sections-agency-program-bannerA primary band compressing program terms to three chips with a decision timeline.

Become Partner Splitmarketing-pro-partner-sections-become-partner-splitAn agency recruitment pitch with a no competition promise beside a first quarter checklist.

Certification Path Stepsmarketing-pro-partner-sections-certification-path-stepsThree certification stages with honest hours and what each one unlocks.

Deal Registration Comparemarketing-pro-partner-sections-deal-registration-compareA heading and lede above a comparison table of registered versus unregistered deals, then a three column policy fact row and action buttons.

Marketplace Categories Gridmarketing-pro-partner-sections-marketplace-categories-gridSix marketplace aisles with listing counts and a yearly re review policy up top.

Partner Directory Previewmarketing-pro-partner-sections-partner-directory-previewA centered heading above a filter chip row and three partner cards with portrait, tier badges, specialties, ratings, and a browse all button.

Partner Earnings Calculatormarketing-pro-partner-sections-partner-earnings-calculatorA centered heading with two sliders for client count and plan value feeding a three stat payout strip, a policy note, and an apply button.

Partner Logos Bandmarketing-pro-partner-sections-partner-logos-bandA certified agency count above partner wordmarks and a find a partner link.

Partner Stats Rowmarketing-pro-partner-sections-partner-stats-rowProgram economics as four tiles, margin, median revenue, leads, and the zero.

Partner Story Timelinemarketing-pro-partner-sections-partner-story-timelineA two column layout pairing an agency narrative, quote, and byline with a vertical milestone timeline of dated stages, details, and metrics.

Partner Tiers Cardsmarketing-pro-partner-sections-partner-tiers-cardsThree program tiers with public requirements, stated margins, and benefit checklists.

Boilerplate And Factsmarketing-pro-press-sections-boilerplate-and-factsThe approved company paragraph with word count and date beside a fast facts table.

Brand Colors Gridmarketing-pro-press-sections-brand-colors-gridPalette swatch cards with names, hex values, and usage notes per color.

Company Milestonesmarketing-pro-press-sections-company-milestonesA centered heading above a single vertical timeline rail of dated milestones, each with a title, a short detail, and an optional figure chip.

Coverage Quote Wallmarketing-pro-press-sections-coverage-quote-wallA centered heading above a three column grid of coverage cards, each with a publication wordmark, a pulled sentence, and a writer byline.

Founder Bios Rowmarketing-pro-press-sections-founder-bios-rowThree quotable people with bios written to be lifted verbatim and speaks on lines.

Interview Appearancesmarketing-pro-press-sections-interview-appearancesA heading with a booking note above a divided row list of founder appearances, each showing format icon, show, guest, runtime, and a listen link.

Logo Usage Rulesmarketing-pro-press-sections-logo-usage-rulesThe mark rendered correctly beside the four common abuses, crossed out.

Media Assets Gridmarketing-pro-press-sections-media-assets-gridBrowsable asset tiles with format chips and download affordances.

Media Contact Cardmarketing-pro-press-sections-media-contact-cardA named press contact with deadline aware reply terms and what she can arrange.

Press Kit Downloadsmarketing-pro-press-sections-press-kit-downloadsFour ungated asset bundle cards with file details and an everything ZIP link.

Press Release Archivemarketing-pro-press-sections-press-release-archiveA sticky intro column with email and RSS subscribe links beside announcements grouped by year, each row showing date, category, headline, and summary.

Annual Toggle Two Tiermarketing-pro-pricing-sections-annual-toggle-two-tierTwo plan cards under a monthly and annual switch that updates prices with a savings badge.

Base Plus Add Onsmarketing-pro-pricing-sections-base-plus-addonsA split pricing section pairing a base plan card and feature checklist with a stack of priced extras and a hairline estimated total row.

Compact Tier Cardsmarketing-pro-pricing-sections-compact-tier-cardsThree slim tiers with a price and one deciding sentence each, no feature lists.

Compare Plansmarketing-pro-pricing-sections-compare-plansA full feature matrix for three plans with pricing and CTAs in the column heads, grouped feature rows, and a tinted band on the popular plan.

Credit Packsmarketing-pro-pricing-sections-credit-packsFour prepaid credit pack cards with one time prices and per credit rates, above three notes on expiry, team sharing, and automatic top ups.

Currency Region Tablemarketing-pro-pricing-sections-currency-region-tableThe same plan in four currencies with purchasing power discounts published openly.

Dark Featured Tiermarketing-pro-pricing-sections-dark-featured-tierThree pricing tiers where the featured middle plan sits on a solid primary panel.

Enterprise Split Ctamarketing-pro-pricing-sections-enterprise-split-ctaAn enterprise pitch with capability checks beside a named contact card and call terms.

Feature Matrix Compactmarketing-pro-pricing-sections-feature-matrix-compactPlan headers with CTAs above a compact feature matrix that shades the middle column.

Free vs Promarketing-pro-pricing-sections-free-vs-proFree and Pro columns with their own feature lists and CTAs, with Pro framed by a primary ring.

Lifetime Dealmarketing-pro-pricing-sections-lifetime-dealA wide panel with a one time price, three value bullets, a guarantee note, and a strong CTA.

Open Source vs Cloudmarketing-pro-pricing-sections-open-source-vs-cloudA free self hosted panel with an install command beside a paid managed cloud plan.

Per Seat Calculatormarketing-pro-pricing-sections-per-seat-calculatorA seat slider that totals a flat per seat rate beside the included feature list.

Plans By Audiencemarketing-pro-pricing-sections-plans-by-audienceA centered tab switcher for freelancers, teams, and agencies, each revealing two plan cards with prices, feature lists, and a highlighted pick.

Plans With Metersmarketing-pro-pricing-sections-plans-with-metersThree plan cards whose quotas are proportional meter bars, so tiers compare at a glance.

Pricing Faq Inlinemarketing-pro-pricing-sections-pricing-faq-inlineSix billing questions answered open beside the prices, mechanisms and timelines included.

Pricing With Cost Chartmarketing-pro-pricing-sections-pricing-with-cost-chartA flat plan beside a shadcn bar chart of total cost against a per seat stack by team size.

Pricing With Guaranteemarketing-pro-pricing-sections-pricing-with-guaranteeA flat plan beside a guarantee card with spelled out terms and a published claim rate.

Pricing With Testimonialmarketing-pro-pricing-sections-pricing-with-testimonialTwo plan cards beside a customer quote card that endorses the upgrade.

Sample Invoicemarketing-pro-pricing-sections-sample-invoiceA left column of a heading and four checked billing promises beside a static sample invoice with line items, a seat credit, tax, and total.

Simple Rate Tablemarketing-pro-pricing-sections-simple-rate-tableA minimal rate table listing each metric, its included allowance, and the overage price.

Single Plan With FAQmarketing-pro-pricing-sections-single-plan-with-faqA single full plan price card beside a divided list of three short pricing questions.

Startup Discount Cardmarketing-pro-pricing-sections-startup-discount-cardThe startup program as five labeled rows, including what happens when the discount ends.

Trial Timelinemarketing-pro-pricing-sections-trial-timelineA single plan card with a flat price and feature list beside a vertical timeline walking through each day of a 14 day trial.

Usage Estimatormarketing-pro-pricing-sections-usage-estimatorAn interactive estimator with a seats slider and annual switch on one side and an inverted summary card with a line item breakdown on the other.

Usage Estimator Slidermarketing-pro-pricing-sections-usage-estimator-sliderOne slider for contacts, the matching plan and price computed live with the CTA labeled.

With Roi Chartmarketing-pro-pricing-sections-with-roi-chartA flat price plan beside a chart of cumulative value crossing cost at a labeled break even.

With Usage Curvemarketing-pro-pricing-sections-with-usage-curveA plan card beside an SVG curve of the unit price flattening across three labeled volume tiers.

Accordion Stepsmarketing-pro-process-sections-accordion-stepsA split process section pairing a four step accordion of numbered onboarding steps with a window styled data sync mockup and progress meter.

Branching Flowmarketing-pro-process-sections-branching-flowAn SVG flowchart of automated checks branching to approve or review, with a numbered step list.

Checklist With Progressmarketing-pro-process-sections-checklist-with-progressThe setup checklist mid flight, a computed meter above tasks in three states.

Cycle Diagrammarketing-pro-process-sections-cycle-diagramA numbered four step list beside a circular loop diagram with nodes on a dashed ring.

Day In The Lifemarketing-pro-process-sections-day-in-the-lifeA workday told in timestamped scenes down a rule, each with its quiet before.

Day One Timelinemarketing-pro-process-sections-day-one-timelineIntro copy beside a first day timeline of product moments keyed by monospaced times.

First Week Timelinemarketing-pro-process-sections-first-week-timelineDays one through seven in honest prose, including the two days of nothing on purpose.

Gantt Style Planmarketing-pro-process-sections-gantt-style-planThe onboarding month as overlapping workstream bars with owners labeled per bar.

Handoff Lanesmarketing-pro-process-sections-handoff-lanesA responsibility split process section running three rollout phases as rows under two lanes, contrasting the customer tasks against the heavier vendor tasks.

Horizontal Connectedmarketing-pro-process-sections-horizontal-connectedThree steps in a row joined by a thin connector line with a dot marking each step.

Milestone Pathmarketing-pro-process-sections-milestone-pathA winding dashed path with four numbered milestone dots above a matching grid of steps.

Numbered Editorialmarketing-pro-process-sections-numbered-editorialFour oversized numbered steps in a two column editorial grid with top borders.

Old Way New Waymarketing-pro-process-sections-old-way-new-wayA process comparison telling one weekly workflow twice, a manual panel with X marks beside a product panel with check marks and summed totals.

Onboarding Checklistmarketing-pro-process-sections-onboarding-checklistCopy about a one afternoon setup beside a bordered checklist card with a progress bar.

Pipeline Flowmarketing-pro-process-sections-pipeline-flowInline SVG flow of four pipeline stages above a three column row explaining them.

Process Tablemarketing-pro-process-sections-process-tableA process section laying the rollout out as a five row table with stage, description, owner badge, timeline, and deliverable columns.

Progress Bar Stepsmarketing-pro-process-sections-progress-bar-stepsOnboarding as a segmented meter frozen mid journey with honest time labels per step.

Split Steps With Mockupmarketing-pro-process-sections-split-steps-with-mockupThree numbered steps beside an app window mockup showing live metrics and a chart.

Step Tabsmarketing-pro-process-sections-step-tabsTabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.

Steps With Mini Mockupsmarketing-pro-process-sections-steps-with-mini-mockupsThree numbered step cards, each led by a mini UI mockup of the brief, board, and report stages.

Three Phase Pathmarketing-pro-process-sections-three-phase-pathA three phase process section with icon squares, arrow connectors on desktop, per phase checklists, and a quiet link to the onboarding guide.

Three Step Cardsmarketing-pro-process-sections-three-step-cardsCentered heading above three step cards, each pairing an icon and number with short copy.

Vertical Milestonesmarketing-pro-process-sections-vertical-milestonesA split process section with a sticky header, CTA, and proof stats beside a vertical timeline of four numbered milestones with timing detail rows.

Vertical Timelinemarketing-pro-process-sections-vertical-timelineNarrow vertical timeline of four numbered steps joined by a line, with buttons below.

Zigzag Stepsmarketing-pro-process-sections-zigzag-stepsAlternating rows of step copy and app mockups, each tagged with a bordered step badge.

Annotated Screenshotmarketing-pro-product-tours-annotated-screenshotA browser mockup with numbered marker dots decoded by a sticky legend list.

Before After Screensmarketing-pro-product-tours-before-after-screensA shabby dashed before screen beside a confident after screen with verdict captions.

Command Palette Tourmarketing-pro-product-tours-command-palette-tourSplit layout pairing a power user pitch with a static command palette blueprint showing a typed query, grouped results, and inline shortcut hints.

Demo Teaser Splitmarketing-pro-product-tours-demo-teaser-splitA sandbox pitch beside a mockup with a drawn cursor, hovered row, and honest tooltip.

Feature Spotlight Tabsmarketing-pro-product-tours-feature-spotlight-tabsThree workflows on ui tabs, each pairing one paragraph with a small drawn panel.

Feature Spotlight Zoommarketing-pro-product-tours-feature-spotlight-zoomOne UI element drawn at large scale, an automation rule row with a toggle and live count.

Keyboard Shortcuts Panelmarketing-pro-product-tours-keyboard-shortcuts-panelThe product shortcuts as a Kbd reference panel, craft signaled through key caps.

Onboarding Checklistmarketing-pro-product-tours-onboarding-checklistSplit layout pairing a guided onboarding pitch and reassurance rows with a setup checklist mockup showing a progress bar and highlighted current step.

Persona Tour Gridmarketing-pro-product-tours-persona-tour-gridCentered heading above three persona columns, each pairing a framed home screen mockup with a role name and a short line on what they do.

Side Tabs Tourmarketing-pro-product-tours-side-tabs-tourVertical tabs of product areas, each pane pairing a blurb with a framed list mockup.

Tour Steps With Screensmarketing-pro-product-tours-tour-steps-with-screensThree numbered tour steps, each paired with a framed mini screen showing that stage.

Video Tour Chaptersmarketing-pro-product-tours-video-tour-chaptersCentered heading over a static video player mockup with a chaptered scrubber, beside a timestamped chapter list that highlights the active chapter.

Workflow Walkthroughmarketing-pro-product-tours-workflow-walkthroughThree mini screens joined by arrows following one item from new to sent.

Feature Journeymarketing-pro-roadmap-sections-feature-journeyA split section with heading, a stat rows panel, and a dated vertical timeline tracing one feature from first request to shipped.

Feature Request Formmarketing-pro-roadmap-sections-feature-request-formA split call to action pairing numbered triage steps that explain what happens after you submit with a labeled request form card.

Milestone Progress Barsmarketing-pro-roadmap-sections-milestone-progress-barsIn flight initiatives with stage chips, owners, and progress bars defined by milestones.

Prioritization Criteriamarketing-pro-roadmap-sections-prioritization-criteriaA centered header over a two by two grid of criteria cards, each pairing the test we apply with a passed or failed real example.

Public Roadmap Bannermarketing-pro-roadmap-sections-public-roadmap-bannerA transparency banner with in flight and shipped counts linking roadmap and changelog.

Quarter Timelinemarketing-pro-roadmap-sections-quarter-timelineFour quarters on a line with status chips and struck through shipped items.

Roadmap Columnsmarketing-pro-roadmap-sections-roadmap-columnsA Now, Next, Later board with defined column semantics and tagged item cards.

Roadmap Tablemarketing-pro-roadmap-sections-roadmap-tableA section header over a summary line and a dense table listing every initiative with detail, product area, status badge, and target quarter columns.

Roadmap With Votesmarketing-pro-roadmap-sections-roadmap-with-votesFeature requests ranked by vote buttons with status badges and descriptions.

Shipped Vs Planned Listmarketing-pro-roadmap-sections-shipped-vs-planned-listDated shipped items beside planned ones with quarter chips and an honest exploring label.

Voting Board Columnsmarketing-pro-roadmap-sections-voting-board-columnsThe public roadmap as a three column kanban, vote counts kept on shipped cards.

Yearly Themesmarketing-pro-roadmap-sections-yearly-themesThe three directive themes the year answers to, with reasoning and in flight bets.

Annual Report Numbersmarketing-pro-stats-sections-annual-report-numbersAn editorial year in review with a statement headline and three oversized ruled numbers.

Counters With Iconsmarketing-pro-stats-sections-counters-with-iconsA light four counter row with tinted icon discs, large values, and hairline dividers.

Dark Stat Bandmarketing-pro-stats-sections-dark-stat-bandA solid primary band with a short headline beside three large stats divided by hairline rules.

Growth Storymarketing-pro-stats-sections-growth-storyA split stats section pairing a heading, narrative paragraph, and three hairline stat rows with a large decorative area chart panel.

Inline Stat Stripmarketing-pro-stats-sections-inline-stat-stripA slim pill shaped strip of four value and label pairs, the lightest proof beat between sections.

KPI Cardsmarketing-pro-stats-sections-kpi-cardsA centered stats header over three KPI cards, each pairing a small label and oversized value with a delta chip and a twelve bar sparkline.

Kpi Cards With Chartsmarketing-pro-stats-sections-kpi-cards-with-chartsFour KPI cards with working shadcn sparklines beneath their numbers.

Live Counter Bandmarketing-pro-stats-sections-live-counter-bandOne running total with a pulsing dot and the per minute rate beneath.

Metric Bandmarketing-pro-stats-sections-metric-bandA centered stats band with a heading, four oversized metrics separated by hairline dividers, and a footnote citing the measurement period.

Metric Tiles Bandmarketing-pro-stats-sections-metric-tiles-bandA centered heading above four large KPI tiles separated by hairline dividers in one rounded band.

Milestones Inline Textmarketing-pro-stats-sections-milestones-inline-textSix years of company history as one paragraph with the milestones set at display size inline.

Rating Stats Bandmarketing-pro-stats-sections-rating-stats-bandA split satisfaction band with the overall score set enormous beside a star row and a ruled list of rating sources, each with its own stars and volume.

Single Stat Spotlightmarketing-pro-stats-sections-single-stat-spotlightOne enormous centered number with a quiet claim above and a sourcing line below.

Split Numbers With Copymarketing-pro-stats-sections-split-numbers-with-copyA text only split section with a heading and two paragraphs beside a grid of four large numbers.

Stat Bento Gridmarketing-pro-stats-sections-stat-bento-gridA left aligned header, then one dominant hero card carrying the headline number and sourcing beside four smaller supporting stat cards in a two by two grid.

Stats Benchmark Barsmarketing-pro-stats-sections-stats-benchmark-barsA centered header over one bordered panel where each row compares a measure as two horizontal bars, customer result above industry average, with a legend.

Stats Comparison Columnsmarketing-pro-stats-sections-stats-comparison-columnsA then and now ledger with before values struck through beside bold on Acme numbers.

Stats With Bar Chartmarketing-pro-stats-sections-stats-with-bar-chartA split section pairing a heading and three stacked stats with a twelve month bar chart panel.

Stats With Donut Chartmarketing-pro-stats-sections-stats-with-donut-chartThree stat lines beside a shadcn donut splitting the same claim into its parts.

Stats With Donut Gridmarketing-pro-stats-sections-stats-with-donut-gridThree large donut rings with centered percentages and captions inside one bordered panel.

Stats With Progress Barsmarketing-pro-stats-sections-stats-with-progress-barsCopy beside four goal attainment rows, each with a label, value, and filled progress bar.

Stats With Quotesmarketing-pro-stats-sections-stats-with-quotesA centered header over three cards, each pairing an oversized stat and label with the customer quote behind the number and an avatar attribution.

Stats With Sparklinesmarketing-pro-stats-sections-stats-with-sparklinesFour stat cards, each topped by a small sparkline that shows the trend behind the number.

Text Stat Sentencesmarketing-pro-stats-sections-text-stat-sentencesThree prose sentences with the numbers rendered large inline, stats with grammar.

Current Status Listmarketing-pro-status-sections-current-status-listAn aggregate status banner above per component rows with dots and uptime figures.

Incident History Listmarketing-pro-status-sections-incident-history-listDated incidents with severity chips, precise impact lines, and postmortem links.

Incident Response Processmarketing-pro-status-sections-incident-response-processA heading and lede over four numbered step cards, each pairing a title and description with a time commitment printed in a footer row.

Incident Update Timelinemarketing-pro-status-sections-incident-update-timelineA split section pairing a communication promise and three bullet commitments with a live incident feed of phase chips, timestamps, and update text.

Maintenance Schedulemarketing-pro-status-sections-maintenance-scheduleA heading and lede over a bordered list of maintenance windows, each row carrying date, UTC time, affected components, impact, and a status chip.

Regional Status Gridmarketing-pro-status-sections-regional-status-gridPer region health cards with local latency and twelve month incident counts.

Reliability Stats Bandmarketing-pro-status-sections-reliability-stats-bandA centered heading and lede above a four column stat band, each cell pairing a large metric with its label and a method note.

Response Time Chartmarketing-pro-status-sections-response-time-chartMedian and p99 latency as shadcn lines with the visible spike explained.

Sla Commitments Tablemarketing-pro-status-sections-sla-commitments-tableSLA targets beside trailing actuals and automatic remedies, published inline.

Status Summary Bannermarketing-pro-status-sections-status-summary-bannerA one row live status banner with a pulsing dot linking the full status page.

Subscribe To Updatesmarketing-pro-status-sections-subscribe-to-updatesA status list signup with a never marketing constitution and an email form.

Uptime Day Ticksmarketing-pro-status-sections-uptime-day-ticksThe last 90 days as tick bars with the two degraded days named below, not in tooltips.

Advisors And Boardmarketing-pro-team-sections-advisors-and-boardA split section with intro copy and engagement notes beside two labeled lists of advisor and board rows, each with avatar, name, and former role.

Compact Team Rolesmarketing-pro-team-sections-compact-team-rolesA text only roster in three department columns listing names and roles without portraits.

Founders Spotlightmarketing-pro-team-sections-founders-spotlightTwo wide founder cards with large avatars, problem and answer bios, and social links.

Hiring Processmarketing-pro-team-sections-hiring-processA heading and lede above a four column grid of numbered interview stages with durations, closed by a candidate promises row and an open roles button.

Leadership Listmarketing-pro-team-sections-leadership-listEditorial leadership rows with avatars, highlighted roles, and short biographies.

Open Roles By Teammarketing-pro-team-sections-open-roles-by-teamPositions grouped by team with location and the real comp range on every row.

Team By Departmentmarketing-pro-team-sections-team-by-departmentPeople grouped into labeled departments as avatar pill chips with one line charters.

Team Cards With Socialsmarketing-pro-team-sections-team-cards-with-socialsSix bordered member cards with avatars, personality one liners, and social icon rows.

Team Grid With Avatarsmarketing-pro-team-sections-team-grid-with-avatarsA centered heading above a four column grid of illustrated portraits with names and roles.

Team Growth Chartmarketing-pro-team-sections-team-growth-chartFive years of headcount as a stepped shadcn line beside the slow on purpose philosophy.

Team Map Distributionmarketing-pro-team-sections-team-map-distributionA distributed team pitch beside a dot grid map with city pins and an overlap caption.

Team Stats Bannermarketing-pro-team-sections-team-stats-bannerA compact banner pairing overlapping avatars and a team pitch with three numbers.

Team Timelinemarketing-pro-team-sections-team-timelineA heading and lede above a vertical rail of year entries, each with a milestone title, a short story, and an overlapping avatar group of new joiners.

Team Voicesmarketing-pro-team-sections-team-voicesA centered heading above a three column grid of bordered quote cards, each carrying a teammate quote with an avatar, name, and role footer.

Team With Hiring Ctamarketing-pro-team-sections-team-with-hiring-ctaRecruiting copy and CTAs beside an avatar mosaic ending in a dashed open seat tile.

Alternating Quotesmarketing-pro-testimonials-alternating-quotesLarge quotes with avatars that alternate left and right alignment in a divided stack.

Avatar Strip With Quotemarketing-pro-testimonials-avatar-strip-with-quoteA centered row of ten overlapping avatars above one quote, five stars, and a review count.

Case Study Cardsmarketing-pro-testimonials-case-study-cardsA centered header over two large case study cards pairing a customer wordmark and quote excerpt with two headline metrics and a story link.

Chat Style Quotesmarketing-pro-testimonials-chat-style-quotesTestimonials as a chat thread with alternating bubbles, avatars, and timestamps in a framed window.

Dark Panel Quotemarketing-pro-testimonials-dark-panel-quoteOne featured quote inside a solid primary panel with avatar attribution at the bottom.

Interview Excerptmarketing-pro-testimonials-interview-excerptA two column layout pairing a profile card with a ruled fact sheet and headline outcome beside four question and answer exchanges in a hairline divided list.

Journey Quotes Timelinemarketing-pro-testimonials-journey-quotes-timelineA centered header with avatar attribution above a vertical timeline of four dated quotes from one customer, day one to renewal.

Logos And Quotes Gridmarketing-pro-testimonials-logos-and-quotes-gridA grid that alternates customer quote cards with company wordmark tiles under a heading.

Nps Chart With Quotesmarketing-pro-testimonials-nps-chart-with-quotesSix quarters of NPS as shadcn bars beside survey verbatims including the missing point.

One Line Quotes Listmarketing-pro-testimonials-one-line-quotes-listTen customers at one ruled line each, density and variety as the proof.

Press Quotes Rowmarketing-pro-testimonials-press-quotes-rowThree pulled review lines under publication wordmarks, each cited to its piece.

Pull Quotes Stackmarketing-pro-testimonials-pull-quotes-stackAn editorial stack of two big pull quotes with oversized quote marks and attributions.

Quote Carouselmarketing-pro-testimonials-quote-carouselA looping carousel of three large centered pull quotes with avatars, customer wordmarks, and rounded previous and next controls below.

Quote Masonry Gridmarketing-pro-testimonials-quote-masonry-gridFive quotes at their natural lengths flowing in masonry columns with avatar attributions.

Quote With Metricsmarketing-pro-testimonials-quote-with-metricsA featured customer quote card beside a divided grid of two big result numbers.

Quote With Metrics Panelmarketing-pro-testimonials-quote-with-metrics-panelOne substantial quote beside the board slide it describes, befores struck through.

Quote With Product Shotmarketing-pro-testimonials-quote-with-product-shotA large quote and attribution beside a launch checklist mockup of the product.

Quote With Rating Barsmarketing-pro-testimonials-quote-with-rating-barsA review summary with average score, star row, and histogram bars beside a featured quote.

Quote With Results Chartmarketing-pro-testimonials-quote-with-results-chartA large customer quote beside a results panel with an outcome headline and twelve month bar chart.

Quote With Stats Rowmarketing-pro-testimonials-quote-with-stats-rowA centered banner quote above a ruled row of three results from the same customer.

Role Quote Tabsmarketing-pro-testimonials-role-quote-tabsA centered header above a three tab switcher segmented by buyer role, each panel showing one large quote with avatar attribution and a ruled result line.

Single Quote Bannermarketing-pro-testimonials-single-quote-bannerOne large centered quote with an avatar, name, and role stacked beneath it.

Social Cardsmarketing-pro-testimonials-social-cardsA grid of six social post style cards with avatars, handles, and casual praise.

Social Posts Wallmarketing-pro-testimonials-social-posts-wallSix short posts drawn as cards with avatars, handles, and timestamps, displayed unedited.

Three Column Quotesmarketing-pro-testimonials-three-column-quotesThree customer quotes in divided columns under a centered heading and lede.

Video Testimonial Cardsmarketing-pro-testimonials-video-testimonial-cardsA centered header above a three card grid of testimonials, each framing a thumbnail with a play control, a pull quote, avatar, and clip length.

Wall of Lovemarketing-pro-testimonials-wall-of-loveA masonry wall of nine short quote cards under a centered header, with illustrated avatars, names, and roles at customer companies.

Audit Log Previewmarketing-pro-trust-and-security-audit-log-previewA mono audit log mockup including the line the vendor own support access writes.

Compliance Badges Rowmarketing-pro-trust-and-security-compliance-badges-rowA strip of certification chips with shield icons and audit dates beside a delivery promise.

Compliance Panelmarketing-pro-trust-and-security-compliance-panelA compliance section with a centered header, four framework cards pairing drawn badge marks with status lines, and a quiet trust center link.

Data Flow Diagrammarketing-pro-trust-and-security-data-flow-diagramAn SVG flow of tools, platform, and storage with TLS and AES labels on the arrows.

Data Promisemarketing-pro-trust-and-security-data-promiseA centered data manifesto with five check marked promise rows split by hairlines and whitepaper and DPA buttons beneath.

Data Retention Stagesmarketing-pro-trust-and-security-data-retention-stagesA left aligned header above three lifecycle panels for active accounts, cancellation, and deletion, each with a duration and data category rows.

Encryption Flow Diagrammarketing-pro-trust-and-security-encryption-flow-diagramBrowser to storage as a three node SVG flow with the encryption state on every hop.

Incident Response Stepsmarketing-pro-trust-and-security-incident-response-stepsA left aligned header above five numbered phases in a horizontal stepper, each with a time chip and short note, plus a last incident line.

Plain Language Privacymarketing-pro-trust-and-security-plain-language-privacyFive human sentences summarizing the privacy policy, each linked to its legal section.

Residency Map Dotsmarketing-pro-trust-and-security-residency-map-dotsA residency promise beside a dot grid map with pinned storage regions and a backup clause.

Responsible Disclosuremarketing-pro-trust-and-security-responsible-disclosureA centered header over three response time tiles, side by side in scope and out of scope lists, and a report button with a safe harbor note.

Security Faq Compactmarketing-pro-trust-and-security-security-faq-compactSix always open security answers written to be pasted into a vendor review form.

Security Feature Listmarketing-pro-trust-and-security-security-feature-listA split security section pairing a headline, whitepaper button, and spec rows with a grouped icon feature list under two uppercase labels.

Security Pillars Gridmarketing-pro-trust-and-security-security-pillars-gridSix security control cards with icon discs and implementation detail sentences.

Security Split With Checklistmarketing-pro-trust-and-security-security-split-with-checklistA security pitch and pack request beside six checked controls with terse implementation notes.

Shared Responsibility Modelmarketing-pro-trust-and-security-shared-responsibility-modelA centered header over two paired panels splitting what we secure and what you control, each an icon list closed by a joint strip.

Subprocessors Tablemarketing-pro-trust-and-security-subprocessors-tableEvery third party that touches customer data, with purpose, region, and year added.

Trust Center Linksmarketing-pro-trust-and-security-trust-center-linksFour document cards with updated dates and honest action links for security reviewers.

Uptime History Barsmarketing-pro-trust-and-security-uptime-history-barsSLA stats beside twelve monthly uptime bars with one honest dip explained in the caption.

Access Denied 403marketing-pro-utility-pages-access-denied-403A centered 403 page with a signed-in identity card, the admin who can grant access, a request action, and account switch controls.

Coming Soonmarketing-pro-utility-pages-coming-soonA prelaunch page with the launch date at display size and a two email promise.

Email Confirmedmarketing-pro-utility-pages-email-confirmedA verification landing that names what the click unlocked before one button back.

Link Expiredmarketing-pro-utility-pages-link-expiredAn expired sign-in link page with a three-column lifecycle timeline, a security framed explanation, and a one field form for a fresh link.

Maintenance Pagemarketing-pro-utility-pages-maintenance-pageA planned window notice with the untouched list and a live status link.

Not Found 404marketing-pro-utility-pages-not-found-404A 404 with a search pill and chips for the pages people were actually hunting.

Not Found Directorymarketing-pro-utility-pages-not-found-directoryA 404 page with an oversized muted number, a calm headline, a rounded home button, and three destination cards for docs, status, and support.

Rate Limited 429marketing-pro-utility-pages-rate-limited-429A blameless 429 page with the exact retry window and a human path to higher limits.

Server Error 500marketing-pro-utility-pages-server-error-500A 500 that owns the failure, protects the draft, and hands out an error ID.

Signups Closedmarketing-pro-utility-pages-signups-closedA capacity pause page with the reason, reopen date, and a hold my place form.

Thank You Pagemarketing-pro-utility-pages-thank-you-pageA post signup page that schedules the next five minutes with honest times.

Unsubscribe Confirmedmarketing-pro-utility-pages-unsubscribe-confirmedAn unsubscribe confirmation with an icon badge, a preference card of remaining lists with per-list checkboxes and cadences, and an undo action.

Verify Your Inboxmarketing-pro-utility-pages-verify-your-inboxA post-signup check your inbox page with an icon badge, three-step progress row, the sent-to address, and resend or fix-typo actions.

Centered Video Showcasemarketing-pro-video-sections-centered-video-showcaseOne ultrawide cinematic player mockup under a centered heading with a duration caption.

Live Session Registermarketing-pro-video-sections-live-session-registerA live session split: date, agenda, and host credits on one side with a labeled registration card and recording note on the other.

Podcast Episode Listmarketing-pro-video-sections-podcast-episode-listEpisode rows with play discs, guest credits, and platform chips.

Short Clips Rowmarketing-pro-video-sections-short-clips-rowA heading with a browse link above a row of four portrait clip cards, each with a play disc, duration chip, and caption.

Testimonial Video Cardsmarketing-pro-video-sections-testimonial-video-cardsThree customer film cards with pull quote lines, avatars, and duration chips.

Video Grid Thumbnailsmarketing-pro-video-sections-video-grid-thumbnailsThree video cards with posters, play discs, duration chips, and topic badges.

Video Player Splitmarketing-pro-video-sections-video-player-splitPitch copy beside a player mockup with a poster, play disc, and progress bar.

Video Playlist Queuemarketing-pro-video-sections-video-playlist-queueA featured video player beside a numbered up next queue of thumbnail rows with durations and a highlighted now playing row.

Video Transcript Splitmarketing-pro-video-sections-video-transcript-splitA player mockup beside a transcript excerpt of timestamped speaker turns with a link out to the full text.

Video With Chaptersmarketing-pro-video-sections-video-with-chaptersA player mockup beside a chapter list with timestamps and one active row.

Webinar Replay Splitmarketing-pro-video-sections-webinar-replay-splitA dated replay player beside checked takeaways with watch and slides CTAs.

Webinar Replays Gridmarketing-pro-video-sections-webinar-replays-gridFour past sessions with posters, live attendance counts, and no registration wall.

Cohort Schedulemarketing-pro-waitlist-sections-cohort-scheduleA centered heading over an admission calendar table of upcoming cohorts with dates, seat counts, and status, marking the row a signup lands in.

Early Access Tiersmarketing-pro-waitlist-sections-early-access-tiersThe free queue beside a paid skip whose fee credits against the first year.

Founding Member Perksmarketing-pro-waitlist-sections-founding-member-perksFour founding perks with stated limits, led by the price lock, dated window.

Invite Code Redeemmarketing-pro-waitlist-sections-invite-code-redeemA centered code entry card with the invite tree explained and a polite no code path.

Launch Timelinemarketing-pro-waitlist-sections-launch-timelineAlpha, beta, launch phases down a rail with a you are here chip on the live one.

Milestone Unlocksmarketing-pro-waitlist-sections-milestone-unlocksA centered heading, a progress bar over the signup count, and a grid of milestone cards that each unlock a feature at a threshold.

Referral Position Cardmarketing-pro-waitlist-sections-referral-position-cardYour queue position with referral math, a copyable link, and a fairness cap.

Waitlist Faq Compactmarketing-pro-waitlist-sections-waitlist-faq-compactThe five waitlist questions answered with dates, counts, and mechanisms.

Waitlist Hero Countmarketing-pro-waitlist-sections-waitlist-hero-countA waitlist hero with the queue size and weekly admission rate as the proof.

Waitlist How It Worksmarketing-pro-waitlist-sections-waitlist-how-it-worksA four step numbered grid explaining the queue mechanics from signup to invite, each step carrying the one rule that governs it.

Waitlist Signup Splitmarketing-pro-waitlist-sections-waitlist-signup-splitA two column waitlist section pairing a labeled signup form with a spec row card that lists the plain terms of the list.

Waitlist Stats Bandmarketing-pro-waitlist-sections-waitlist-stats-bandFour queue health numbers including median wait and invite activation rate.

Achievement Barsmarketing-stats-achievement-barsHorizontal 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.

Card Groupmarketing-stats-card-groupA 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.

Circular Progressmarketing-stats-circular-progressRing shaped progress dials that animate to a percentage value. Good for dashboards or landing pages that report completion rates and capacity at a glance.

Comparison Metricsmarketing-stats-comparison-metricsTwo 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.

Comparison Statsmarketing-stats-comparison-statsPaired figures with labels that weigh your offering against a baseline. Great for sales pages that need to make the gain feel concrete and credible.

Customer Testimonialmarketing-stats-customer-testimonialA 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.

Funnel Statsmarketing-stats-funnel-statsA 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.

Gradient Gridmarketing-stats-gradient-gridA 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.

Growth Timelinemarketing-stats-growth-timelineA 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.

Horizontal With Dividersmarketing-stats-horizontal-with-dividersA 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.

Impact Numbersmarketing-stats-impact-numbersOversized counters that animate upward as the section scrolls into view. Use it to make reach, users, or revenue feel bold and immediate to readers.

Interactive Hovermarketing-stats-interactive-hoverStat 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.

Metric Cardsmarketing-stats-metric-cardsBordered 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 Main With Three Follow Upsmarketing-stats-one-main-with-three-follow-upsOne large headline number anchored by three smaller supporting stats. Use it to lead with your strongest figure and back it with related proof.

Progress Barsmarketing-stats-progress-barsLabeled 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.

Simple 3 Colsmarketing-stats-simple-3-colsThree 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.

Sparkline Statsmarketing-stats-sparkline-statsStat 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.

Stats With Iconsmarketing-stats-stats-with-iconsEach 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.

Timeline Statsmarketing-stats-timeline-statsKey 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.

Trust Indicatorsmarketing-stats-trust-indicatorsA 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.

Benefits Listmarketing-subscribe-benefits-listA 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.

Incentive Center Alignedmarketing-subscribe-incentive-center-alignedA 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.

Input Stylemarketing-subscribe-input-styleA 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.

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

Simple Center Alignedmarketing-subscribe-simple-center-alignedA clean centered newsletter signup with a heading, short text, and email field. The reliable default for landing pages and blog footers here.

Simple Right Alignedmarketing-subscribe-simple-right-alignedA 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.

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

Split Layoutmarketing-subscribe-split-layoutA 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.

Alternating Sectionsmarketing-team-sections-alternating-sectionsA 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.

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

Simple Cardsmarketing-team-sections-simple-cardsA 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.

With Contactmarketing-team-sections-with-contactTeam 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.

With Filtersmarketing-team-sections-with-filtersA team directory with category filters that sort members by department or location. Helps visitors find the right person inside a large company.

With Hover Cardsmarketing-team-sections-with-hover-cardsA 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.

With Large Imagesmarketing-team-sections-with-large-imagesTeam 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.

With Skill Badgesmarketing-team-sections-with-skill-badgesTeam 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.

With Testimonialsmarketing-team-sections-with-testimonialsTeam 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.

Basemarketing-testimonials-baseA 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.

Big Imagemarketing-testimonials-big-imageA 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.

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

Cards With Statsmarketing-testimonials-cards-with-statsTestimonial cards joined by a row of headline metrics like users and revenue. Pair real quotes with hard numbers to prove your product delivers.

Customer Story Showcasemarketing-testimonials-customer-story-showcaseA featured customer story with a detailed quote, company logo, and result. Use it as social proof when one account speaks to your ideal buyer.

Mini With Dividers In Gridmarketing-testimonials-mini-with-dividers-in-gridCompact testimonials arranged in a grid with thin dividers between them. Fit many short quotes into a tidy space without crowding the layout.

Short Review With Logo And Starsmarketing-testimonials-short-review-with-logo-and-starsA 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.

Simple Center Aligned With Logomarketing-testimonials-simple-center-aligned-with-logoA single centered quote topped with a company logo and the author below. Keep focus on one strong endorsement on a calm, uncluttered section.

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

With Statsmarketing-testimonials-with-statsA testimonial section blended with key metrics such as customers served and ratings. Combine a quote with proof points to back your claims with data.

Company Intro Heromodern-saas-about-sections-company-intro-heroA centered about page opener: kicker pill, oversized headline, and a single plainspoken thesis line over a dark mode only ambient glow.

Founding Story Splitmodern-saas-about-sections-founding-story-splitA founding story split: mono tag and large heading on the left lane, two measured prose paragraphs on the right.

Hiring Banner Stripmodern-saas-about-sections-hiring-banner-stripA hiring banner strip: an invitation line and a short teams list beside a primary depth pill pointing at open roles.

Leadership Avatar Gridmodern-saas-about-sections-leadership-avatar-gridA five up leadership grid of tile cards with large illustrated avatars, names, and roles under an asymmetric header.

Leadership Teammodern-saas-about-sections-leadership-teamA 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.

Meet the Teammodern-saas-about-sections-meet-the-teamA swipeable carousel of team profile cards with names, roles, and portraits, each opening a short bio in a dialog.

Numbered Value Cardsmodern-saas-about-sections-numbered-value-cardsThree numbered value cards: mono index, bold principle, and a two line explanation on gradient panels.

Our Purposemodern-saas-about-sections-our-purposeAn editorial about section with no imagery: an uppercase eyebrow and large headline on the left beside a two paragraph purpose statement on the right.

Story Timelinemodern-saas-about-sections-story-timelineA 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.

Team Stats Interludemodern-saas-about-sections-team-stats-interludeA quiet company facts interlude: two large proof stats split by a hairline, followed by a single transitional statement line about the team.

Depth Loginmodern-saas-auth-pages-depth-loginA centered login screen with SSO pills, mono divider, email field, and primary depth pill over a soft radial glow.

Depth Signupmodern-saas-auth-pages-depth-signupA split signup screen: form half with SSO pills and fields, proof half with a customer quote and social proof row.

Article Card Gridmodern-saas-blog-sections-article-card-gridA three up grid of blog post cards, each pairing a category badge and date with the post title and a stacked author byline.

Article Prose Pagemodern-saas-blog-sections-article-prose-pageA full blog article page: breadcrumb, oversized headline, avatar byline, wide photograph, measured prose with a pull quote, tag chips, and read next tiles.

Card Carouselmodern-saas-blog-sections-card-carouselA swipeable carousel of blog post cards, each pairing a cover image with a category, date, two line title, and read time.

Category Post Listmodern-saas-blog-sections-category-post-listA blog category page: breadcrumb, left aligned heading with mono post count, category filter pills, a column of quiet list rows, and an honest load more pill.

Featured Post Gridmodern-saas-blog-sections-featured-post-gridA blog landing opener: a centered kicker and heading over a wide featured post split card with an illustrative constellation panel and avatar byline.

Filterable Post Gridmodern-saas-blog-sections-filterable-post-gridA blog post grid with working category filter pills over two rows of text first post cards with mono meta lanes and illustrated avatar bylines.

Hiring Intro Benefitsmodern-saas-careers-hiring-intro-benefitsA careers page opener: kicker, oversized heading, plainspoken pitch, and a three up grid of quiet benefit tiles.

Open Roles Listmodern-saas-careers-open-roles-listAn open roles section: mono team labels over quiet role tiles with location and contract details, ghost apply pills, and a strip for unlisted roles.

Team Quote Statsmodern-saas-careers-team-quote-statsA careers proof section: a centered teammate quote with an illustrated avatar attribution, followed by two hiring stats split by a hairline.

Horizontal Timelinemodern-saas-changelogs-horizontal-timelineA 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.

Versioned Entry Listmodern-saas-changelogs-versioned-entry-listA changelog with mono dates and version pills in a left lane and typed change chips stepping down in weight on the right.

Vertical Timelinemodern-saas-changelogs-vertical-timelineA 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.

Split Contact Formmodern-saas-contact-sections-split-contact-formA contact section splitting a form panel from a channel rail of direct line cards with mono emails and a status card.

Centered Calloutmodern-saas-ctas-centered-calloutA simple, centered closing CTA on a soft bordered panel: a bold headline and short lede over two pill buttons.

Horizon Glow CTAmodern-saas-ctas-horizon-glow-ctaA closing CTA over a soft radial glow rising from the bottom edge, with a depth pill button pair.

Inline Banner Stripmodern-saas-ctas-inline-banner-stripA slim banner strip: bold prompt and one line support on the left, a single ghost pill action on the right.

Newsletter Signup Stripmodern-saas-ctas-newsletter-signup-stripA newsletter strip: an invitation line and a frequency promise beside a primary depth pill.

Selfserve FAQ Stripmodern-saas-ctas-selfserve-faq-stripA self serve strip: a gentle redirect for contact page visitors whose answer already exists, pointing at the FAQ.

Split Signupmodern-saas-ctas-split-signupA 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.

Sidebar Docs Shellmodern-saas-docs-pages-sidebar-docs-shellA complete docs page shell: sidebar with mini search and mono section labels, prose column with terminal blocks and working copy buttons, and an on this page rail.

Centered Astronautmodern-saas-error-pages-centered-astronautA 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.

Split With Linksmodern-saas-error-pages-split-with-linksA 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.

Category Pill Accordionsmodern-saas-faqs-category-pill-accordionsA full FAQ section with a category pill row and mono labeled question groups as quiet accordion tiles.

Single Open Accordionmodern-saas-faqs-single-open-accordionA centered FAQ on the shadcn Accordion where the first item ships open and closed rows stay on quiet hairline tiles.

Split With Asidemodern-saas-faqs-split-with-asideA two-column FAQ: a sticky heading and help link beside a flat, single-open accordion of answers.

Tabbed Categoriesmodern-saas-faqs-tabbed-categoriesA 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.

App Workspacemodern-saas-feature-sections-app-workspaceAn oversized display word over a stat-led feature rail beside a full automation workspace dashboard mockup built from theme tokens.

Assistant Snippet Gridmodern-saas-feature-sections-assistant-snippet-gridA two by two grid of assistant feature cards, each led by a miniature UI snippet inside an inset tile.

Benefits Isometricmodern-saas-feature-sections-benefits-isometricThree benefit columns, each with a centered isometric SVG illustration, a FIG tag, label, and short paragraph. A clean, minimal way to frame product principles.

Bento Gridmodern-saas-feature-sections-bento-gridAn asymmetric bento feature grid with a custom SVG illustration in every cell: analytics, collaboration, automation, security, and integrations. A clean, minimal overview.

Capability Columnsmodern-saas-feature-sections-capability-columnsA split lead over three capability columns, each framing a schematic SVG figure with corner crop marks, a caption tag, and a Learn more cue.

Capability Diagram Cardsmodern-saas-feature-sections-capability-diagram-cardsThree depth cards each led by an illustrative SVG diagram: node constellation, decision doc, and ascending bars.

Illustrated Cardsmodern-saas-feature-sections-illustrated-cardsA gradient lead headline over two equal isometric cards: a backlog sorted into stacked lanes and cubes converging on one focused point.

Metric Interludemodern-saas-feature-sections-metric-interludeA quiet pacing section: two large proof stats split by a hairline, followed by a single transitional statement line.

Product Showcasemodern-saas-feature-sections-product-showcaseA 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.

Split Checklist Panelmodern-saas-feature-sections-split-checklist-panelA split highlight: heading, lede, and checklist beside a roadmap panel of initiative rows with stepped progress meters.

Brand Watermarkmodern-saas-footers-brand-watermarkA full width footer with a brand line, social buttons, and link columns, over a giant outlined brand wordmark above a legal bottom bar.

Simplemodern-saas-footers-simpleA simple footer: a brand mark and tagline beside columns of navigation links, over a bottom bar with a copyright line and social icons.

Status Columns Footermodern-saas-footers-status-columns-footerA multi column footer with brand tagline, live status pill, four link columns, and a hairline social bottom row.

Popular Articles Support Stripmodern-saas-help-centers-popular-articles-supportA help center closer: a most read header with browse all link, two columns of article rows with mono category tags, and a support strip with a depth CTA.

Search Hero Topic Gridmodern-saas-help-centers-search-hero-topic-gridA help center opener: kicker, oversized heading, wide search field with shortcut hint and popular chips, then a grid of icon tile topic cards with mono article counts.

Centered With Backdropmodern-saas-hero-sections-centered-with-backdropA 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.

Centered With Product Imagemodern-saas-hero-sections-centered-with-product-imageA 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.

Planet Centerpiecemodern-saas-hero-sections-planet-centerpieceA full-fold hero spread pairing a headline and CTAs with a token-built planet centerpiece and a monospace statement above a customer logo strip.

Connect Your Stackmodern-saas-integrations-connect-your-stackA 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.

Connector Directorymodern-saas-integrations-connector-directoryAn integrations directory: centered heading over a responsive grid of connector cards pairing monochrome brand marks with one line descriptions and mono category tags, closed by an API strip.

Icon Tile Spotlightmodern-saas-integrations-icon-tile-spotlightTwo rows of gradient icon tiles above a centered heading, one line promise, and a ghost pill CTA.

Dual Marqueemodern-saas-logo-clouds-dual-marqueeA logo cloud with two rows of customer logos scrolling in opposite directions. A seamless, pure CSS marquee for social proof on a landing page.

Inline Wordmark Stripmodern-saas-logo-clouds-inline-wordmark-stripA quiet single row logo strip: a muted caption over one evenly justified line of glyph and wordmark pairs.

Simple Gridmodern-saas-logo-clouds-simple-gridA 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.

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

Standard Stickymodern-saas-navbars-standard-stickyA 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.

Company Pagemodern-saas-prebuilt-pages-company-pageA complete Modern SaaS company page that opens with the navbar and runs from purpose through the story and team to a closing call to action.

Depth SaaS Landingmodern-saas-prebuilt-pages-depth-saas-landingA complete depth style SaaS landing page composed from thirteen depth blocks, from pill navbar to glow CTA and footer.

Pricing Pagemodern-saas-prebuilt-pages-pricing-pageA full Modern SaaS pricing page that leads with the plans, then backs them with logo proof, customer voices, and answers before a final CTA.

Product Landingmodern-saas-prebuilt-pages-product-landingA complete Modern SaaS landing page that runs from hero through features, proof, and plans into a closing call to action and footer.

Startup Landingmodern-saas-prebuilt-pages-startup-landingA calmer, story led Modern SaaS landing page with a full bleed hero, principle first benefits, two simple plans, and a newsletter close.

Depth Tier Cardsmodern-saas-pricing-sections-depth-tier-cardsThree depth style pricing tiers with a billing toggle; the featured plan carries a brighter hairline and mono tag.

Membershipmodern-saas-pricing-sections-membershipA single membership plan: a price card with an annual note and refund line beside a checked list of what the plan includes.

Plan Comparison Tablemodern-saas-pricing-sections-plan-comparison-tableA plan comparison table with price column headers, mono feature groups, and checks aligned down fixed lanes.

Three Tiermodern-saas-pricing-sections-three-tierA three tier pricing section with a featured plan, per card annual billing toggles, icon feature lists, and an enterprise banner.

Two Plansmodern-saas-pricing-sections-two-plansTwo 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.

Numbered Stepsmodern-saas-process-flow-numbered-stepsA 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.

Pull Quote with Proof Statsmodern-saas-testimonials-pull-quote-proof-statsA large centered pull quote with attribution mark and a pair of proof stats split by a hairline divider.

Quote Card Gridmodern-saas-testimonials-quote-card-gridA two column grid of testimonial cards, each pairing a customer quote with an avatar, name, and role.

Spotlight With Statsmodern-saas-testimonials-spotlight-with-statsA 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.

Staggered Quote Masonrymodern-saas-testimonials-staggered-quote-masonryA three column testimonial masonry of naturally staggered quote cards, each closed by an illustrated avatar byline.

About Meportfolio-portfolio-about-and-skills-about-meAn 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.

Education Certificationsportfolio-portfolio-about-and-skills-education-certificationsA list of degrees, courses, and certifications with issuer, date, and credential. Shows formal training and qualifications on a portfolio or resume page.

Resume Downloadportfolio-portfolio-about-and-skills-resume-downloadA 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.

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

Timeline Category Skillsportfolio-portfolio-about-and-skills-timeline-category-skillsA 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.

Awards Timelineportfolio-portfolio-awards-and-recognition-awards-timelineA vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.

Badge Or Icon Gridportfolio-portfolio-awards-and-recognition-badge-or-icon-gridA responsive grid of award badges or icons with short captions. Displays many certifications and honors at a glance on a portfolio about page.

Carousel Of Certificationsportfolio-portfolio-awards-and-recognition-carousel-of-certificationsA sliding carousel that cycles through certification logos and details. Fits a long list of credentials into a compact, scrollable strip here.

Featured Award Highlightportfolio-portfolio-awards-and-recognition-featured-award-highlightA 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.

Quote Award Comboportfolio-portfolio-awards-and-recognition-quote-award-comboA block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.

Featured Article Listportfolio-portfolio-blog-writing-and-previews-featured-article-listA list that leads with one large featured article followed by smaller entries. Use it to spotlight your best post while listing recent writing.

Grid Blog Cardsportfolio-portfolio-blog-writing-and-previews-grid-blog-cardsA responsive grid of blog cards with cover image, title, and excerpt. The standard layout for browsing many articles on a writing index page.

Horizontal Blog Carouselportfolio-portfolio-blog-writing-and-previews-horizontal-blog-carouselA horizontal carousel of blog cards that scrolls sideways. Use it to preview recent posts in a tidy row without taking up much vertical space.

Masonry Layout Articlesportfolio-portfolio-blog-writing-and-previews-masonry-layout-articlesA 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.

Minimal List Datesportfolio-portfolio-blog-writing-and-previews-minimal-list-datesA 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.

Accordion Expandable Case Studiesportfolio-portfolio-case-studies-accordion-expandable-case-studiesAn 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.

Grid Case Study Previewsportfolio-portfolio-case-studies-grid-case-study-previewsA responsive grid of case study cards with thumbnail, title, and summary. The go to layout for browsing a portfolio of client projects at once.

Large Visual Focus Case Studyportfolio-portfolio-case-studies-large-visual-focus-case-studyA 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.

Side By Side Image Storyportfolio-portfolio-case-studies-side-by-side-image-storyA two column block placing a project image beside its written story. Pairs visuals and narrative to walk readers through a single case study.

Timeline Style Case Studyportfolio-portfolio-case-studies-timeline-style-case-studyA 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.

Classic Contact Formportfolio-portfolio-contact-sections-classic-contact-formA 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.

Map With Contact Infoportfolio-portfolio-contact-sections-map-with-contact-infoPairs 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.

Minimal Form With Socialportfolio-portfolio-contact-sections-minimal-form-with-socialA 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.

Popup Trigger Contactportfolio-portfolio-contact-sections-popup-trigger-contactA 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.

Split Layoutportfolio-portfolio-contact-sections-split-layoutA 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.

Accordion Servicesportfolio-portfolio-core-services-overview-accordion-servicesAn 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.

Icon List Overviewportfolio-portfolio-core-services-overview-icon-list-overviewA 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.

Numbered Process Style Servicesportfolio-portfolio-core-services-overview-numbered-process-style-servicesA 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.

Service Cards Gridportfolio-portfolio-core-services-overview-service-cards-gridA responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.

Split Layout Featureportfolio-portfolio-core-services-overview-split-layout-featureA split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.

Full Width Bold Bannerportfolio-portfolio-cta-banner-full-width-bold-bannerA 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.

Inline CTAportfolio-portfolio-cta-banner-inline-ctaA 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.

Personal Photo CTAportfolio-portfolio-cta-banner-personal-photo-ctaA 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.

Split CTAportfolio-portfolio-cta-banner-split-ctaA 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.

Sticky CTAportfolio-portfolio-cta-banner-sticky-ctaA 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.

Card Style Signupportfolio-portfolio-email-signup-and-newsletter-card-style-signupA bordered card holding a headline, short pitch, and email field. Use it as a standalone callout inviting visitors to join your mailing list.

Footer Integrated Signupportfolio-portfolio-email-signup-and-newsletter-footer-integrated-signupAn email field built into the site footer beside links and details. Captures subscribers at the bottom of every page without a dedicated section.

Popup Signup Formportfolio-portfolio-email-signup-and-newsletter-popup-signup-formA 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.

Simple Inline Formportfolio-portfolio-email-signup-and-newsletter-simple-inline-formA 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.

Split Section Signupportfolio-portfolio-email-signup-and-newsletter-split-section-signupA two column section with descriptive copy beside the signup form. Explains what subscribers get while keeping the email field clearly in view.

Event Cards Gridportfolio-portfolio-event-speaking-and-workshops-event-cards-gridA grid of cards listing talks and workshops with their title, date, and venue. Use it to present many speaking appearances in one scannable layout.

Featured Talkportfolio-portfolio-event-speaking-and-workshops-featured-talkA spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.

Featured Talk Highlightportfolio-portfolio-event-speaking-and-workshops-featured-talk-highlightA bold featured talk layout pairing a large title with imagery and key facts. Draws extra attention to your most notable conference appearance.

Timeline Speaking Engagementsportfolio-portfolio-event-speaking-and-workshops-timeline-speaking-engagementsA vertical timeline charting talks and workshops in date order. Use it to show how your speaking history has grown across many events over time.

Video Recording Embedportfolio-portfolio-event-speaking-and-workshops-video-recording-embedA section embedding a recorded talk video alongside its title and context. Lets visitors watch you present without ever leaving your portfolio.

Carousel Of Featured Projectsportfolio-portfolio-featured-work-highlights-carousel-of-featured-projectsA 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.

Interactive Hover Revealportfolio-portfolio-featured-work-highlights-interactive-hover-revealA 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.

Large Hero Project Displayportfolio-portfolio-featured-work-highlights-large-hero-project-displayA 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.

Split Image And Details Layoutportfolio-portfolio-featured-work-highlights-split-image-and-details-layoutA 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.

Stacked Highlight Cardsportfolio-portfolio-featured-work-highlights-stacked-highlight-cardsA 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.

Carousel Sliderportfolio-portfolio-hero-showcases-carousel-sliderA 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.

Floating Elementsportfolio-portfolio-hero-showcases-floating-elementsA hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.

Full Screen Centeredportfolio-portfolio-hero-showcases-full-screen-centeredA 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.

Minimalist CTAportfolio-portfolio-hero-showcases-minimalist-ctaA 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.

Split Layoutportfolio-portfolio-hero-showcases-split-layoutA 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.

Grid Of Core Valuesportfolio-portfolio-mission-and-values-grid-of-core-valuesA 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.

Quote Values Comboportfolio-portfolio-mission-and-values-quote-values-comboA 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.

Story First Narrativeportfolio-portfolio-mission-and-values-story-first-narrativeA 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 Pillars Layoutportfolio-portfolio-mission-and-values-three-pillars-layoutThree equal columns, each presenting one guiding pillar with a heading and text. Use it to summarize the ideas your practice is built around.

Vertical Step Timelineportfolio-portfolio-mission-and-values-vertical-step-timelineA 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.

Cycle Diagramportfolio-portfolio-process-and-approach-cycle-diagramA 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.

Horizontal Stepperportfolio-portfolio-process-and-approach-horizontal-stepperA 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.

Process Principlesportfolio-portfolio-process-and-approach-process-principlesA section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.

Stacked Cardsportfolio-portfolio-process-and-approach-stacked-cardsA 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.

Vertical Timelineportfolio-portfolio-process-and-approach-vertical-timelineA 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.

Filterable Gridportfolio-portfolio-project-displays-filterable-gridA 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.

Quote Stackportfolio-portfolio-project-displays-quote-stackA 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.

Standard Gridportfolio-portfolio-project-displays-standard-gridAn 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.

Stats Cardsportfolio-portfolio-project-displays-stats-cardsA 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.

Zigzag Layoutportfolio-portfolio-project-displays-zigzag-layoutAlternating 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.

Baseportfolio-portfolio-quote-and-feedback-baseA 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.

Grid Of Quotesportfolio-portfolio-quote-and-feedback-grid-of-quotesA 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.

Quote With Project Contextportfolio-portfolio-quote-and-feedback-quote-with-project-contextA 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.

Scrollable Quote Carouselportfolio-portfolio-quote-and-feedback-scrollable-quote-carouselA carousel that slides through client quotes one at a time with author details. Use it to rotate testimonials without crowding a portfolio page.

Single Quote Highlightportfolio-portfolio-quote-and-feedback-single-quote-highlightA 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.

Featured Resource Cardportfolio-portfolio-resource-download-sections-featured-resource-cardA prominent card spotlighting one downloadable resource with a cover, summary, and button. Use it to push a flagship guide or template to visitors.

Gated Downloadportfolio-portfolio-resource-download-sections-gated-downloadA 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.

Inline Resource Calloutportfolio-portfolio-resource-download-sections-inline-resource-calloutA 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.

Minimalist Resource Listportfolio-portfolio-resource-download-sections-minimalist-resource-listA 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.

Resources Gridportfolio-portfolio-resource-download-sections-resources-gridA 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.

Branded Document Icons Gridportfolio-portfolio-resume-and-downloads-branded-document-icons-gridA 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.

Resume Cover Letter Comboportfolio-portfolio-resume-and-downloads-resume-cover-letter-comboA 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.

Resume With Short Bio CTAportfolio-portfolio-resume-and-downloads-resume-with-short-bio-ctaA 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.

Simple Download Buttonportfolio-portfolio-resume-and-downloads-simple-download-buttonA 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.

Split Layoutportfolio-portfolio-resume-and-downloads-split-layoutA 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.

Highlighted Postportfolio-portfolio-social-media-embeds-highlighted-postA single featured post pinned in a clean card with avatar, caption, and engagement counts. Spotlights your best content when one example carries the message.

Instagram Gridportfolio-portfolio-social-media-embeds-instagram-gridA 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.

Social Icons Feedportfolio-portfolio-social-media-embeds-social-icons-feedA 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.

Tweet Carouselportfolio-portfolio-social-media-embeds-tweet-carouselA swipeable carousel of tweet cards with author, timestamp, and text. Rotate through recent posts or testimonials without stacking them down the page.

YouTube Video Stripportfolio-portfolio-social-media-embeds-youtube-video-stripA 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.

Before After Comparisonportfolio-portfolio-why-work-with-me-before-after-comparisonA 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.

Bulleted Value Propositionportfolio-portfolio-why-work-with-me-bulleted-value-propositionA 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.

Client Oriented Testimonialsportfolio-portfolio-why-work-with-me-client-oriented-testimonialsStacked testimonial cards framed around client outcomes, with quote, name, and role. Builds trust by letting past clients vouch for your results.

Storytelling Approachportfolio-portfolio-why-work-with-me-storytelling-approachA 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.

Why Me Vs Competitionportfolio-portfolio-why-work-with-me-why-me-vs-competitionA two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.

Accordion Experience Cardsportfolio-portfolio-work-experience-cards-accordion-experience-cardsCollapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.

Card With Project Showcaseportfolio-portfolio-work-experience-cards-card-with-project-showcaseA 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.

Experience Quote Comboportfolio-portfolio-work-experience-cards-experience-quote-comboA 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.

Logo First Card Layoutportfolio-portfolio-work-experience-cards-logo-first-card-layoutA 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.

Minimalist Role Highlightportfolio-portfolio-work-experience-cards-minimalist-role-highlightA 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.

About Long Formportfolio-pro-about-sections-about-long-formA reading-width essay about with three prose paragraphs covering career origin, what shaped the practice, and where the work stands now.

About Splitportfolio-pro-about-sections-about-splitAn about split with a portrait, a point of view bio, and three grounding facts including a human one.

About With Image Rowportfolio-pro-about-sections-about-with-image-rowAn about section with a two-column bio and ruled facts grid above a row of three labelled Placeholder tiles showing workspace, process, and a close detail.

About With Statsportfolio-pro-about-sections-about-with-statsA two-column about pairing a short bio and a facts list with a four-card stat strip covering years, projects, clients, and one human metric.

Approach Aboutportfolio-pro-about-sections-approach-aboutAn about section that presents three to four named working principles in a numbered ruled list beside a heading and setup paragraph.

Elsewhere Aboutportfolio-pro-about-sections-elsewhere-aboutHeading and intro above a ruled list of talks, podcasts, essays, and teaching, each with a year, format, title, venue, and note.

Expectations Aboutportfolio-pro-about-sections-expectations-aboutHeading and intro above two bordered lists side by side, what a client can expect from you and what you ask of them in return.

FAQ Aboutportfolio-pro-about-sections-faq-aboutAn about told as five ruled intro call questions with honest answers, beside a heading and a card inviting anything not covered.

Full Width Statementportfolio-pro-about-sections-full-width-statementA centered bordered panel containing a single large belief sentence at heading scale and one supporting line attributing the principle to the practice.

Influences Aboutportfolio-pro-about-sections-influences-aboutHeading and intro above a two column ruled grid of four cards, each pairing a type badge with an influence title and a lesson.

Journey Aboutportfolio-pro-about-sections-journey-aboutA ruled vertical list of three dated milestones tracing the career path from first role to going independent, each with a year, heading, and body.

Letter Aboutportfolio-pro-about-sections-letter-aboutA card-framed signed note with three personal paragraphs and a ruled sign-off naming the designer and their location.

Manifesto Aboutportfolio-pro-about-sections-manifesto-aboutA numbered list of craft beliefs each paired with a clarifying sentence, for a practitioner with a genuine position on their work.

Now Page Aboutportfolio-pro-about-sections-now-page-aboutA dated snapshot of current projects, learning, and availability with a side column showing location and next opening.

Off Hours Aboutportfolio-pro-about-sections-off-hours-aboutA four-card grid of pursuits away from the desk, each with an honest note, closed by a line tying them back to the craft.

Photo Collage Aboutportfolio-pro-about-sections-photo-collage-aboutA two-column about with a mixed aspect ratio three-image collage beside a short bio and facts list, designed for photographers and makers who lead with their environment.

Press Bio Aboutportfolio-pro-about-sections-press-bio-aboutHeading, intro, and a portrait with usage notes beside three labelled cards holding ready to paste bios at one line, short, and full lengths.

Principles Aboutportfolio-pro-about-sections-principles-aboutThree principle cards each split into the belief and its honest cost, naming the tradeoff that following the principle requires in practice.

Quote And Bioportfolio-pro-about-sections-quote-and-bioAn about section that leads with a personal philosophy quote at heading size, then follows with a short bio paragraph and a ruled fact strip.

Split With Listportfolio-pro-about-sections-split-with-listA two-column about split with a portrait Placeholder beside a bio heading, a paragraph, and a five-item checklist that names capabilities and explicitly lists what is not taken on.

Stats And Bioportfolio-pro-about-sections-stats-and-bioA two-column section pairing a career bio paragraph with a 2x2 grid of four concrete career figures in large tabular numerals.

Studio Aboutportfolio-pro-about-sections-studio-aboutA two-column studio about with a founding narrative, three named avatar team cards showing name and role, and a single belief line beneath the team.

Then And Now Aboutportfolio-pro-about-sections-then-and-now-aboutA ruled comparison list of four topics, each pairing an early career belief with the replacement a decade of practice produced.

Three Things Aboutportfolio-pro-about-sections-three-things-aboutA scannable about section with three bordered cards covering what the person does, how they work, and what they care about.

Timeline Aboutportfolio-pro-about-sections-timeline-aboutA career told as a vertical ruled timeline with a year and a concrete sentence per chapter from first job to now.

Tools And Setup Aboutportfolio-pro-about-sections-tools-and-setup-aboutA grouped card grid listing the hardware and software this person uses day to day with a short honest note per tool.

Typical Week Aboutportfolio-pro-about-sections-typical-week-aboutA two-column about showing the shape of a working week as five ruled day rows beside a heading and three working facts.

Values Listportfolio-pro-about-sections-values-listA four-row ruled list of numbered working principles each with a short imperative title and a concrete sentence on what the principle has cost to learn.

What I Do Aboutportfolio-pro-about-sections-what-i-do-aboutThree discipline cards each naming a practice area and describing the approach taken, defining the work by activity rather than by job title or deliverable.

Availability FAQportfolio-pro-availability-sections-availability-faqA two-column block answering common booking questions in an accordion beside a short intro, response meta rows, and a direct contact button.

Availability Statementportfolio-pro-availability-sections-availability-statementA centered availability statement with a large headline naming the open window, a supporting line, two actions, and a ruled three column facts strip.

Booking Calendarportfolio-pro-availability-sections-booking-calendarA six month availability strip of month cells marked booked, open, or closed, each with a short note, plus a status legend and booking button.

Booking Statusportfolio-pro-availability-sections-booking-statusA two-column availability block stating the current booked-through month, the next opening slot, response time, and typical engagement length as ruled detail rows.

Capacity Breakdownportfolio-pro-availability-sections-capacity-breakdownA two-column block with a stacked weekly capacity bar and legend beside commitment rows naming each engagement, its share, and the open day.

Capacity Noteportfolio-pro-availability-sections-capacity-noteA two-column block with a candid workload statement and a last-updated timestamp on the left, and four expectation rows covering response time and start dates on the right.

Engagement Matrixportfolio-pro-availability-sections-engagement-matrixAn availability table, one row per engagement type showing scope, length, next start, and status, with a heading above and a booking action below.

Hire Me Cardportfolio-pro-availability-sections-hire-me-cardA two-column block listing engagement types as ruled rows beside availability, location, and rate detail rows, with a referral note for when the calendar is full.

Next Opening Cardportfolio-pro-availability-sections-next-opening-cardA two-column split showing the next available start date with slot details and a three-step claim process ending in a contact action.

Open For Work Bannerportfolio-pro-availability-sections-open-for-work-bannerA slim top-of-page band with a green status dot, an availability statement naming the open month, and a contact button for an immediate above-the-fold signal.

Project Slotsportfolio-pro-availability-sections-project-slotsA two-column availability block showing 3 named project slots with open or taken status, engagement details, and a claim action.

Quarter Outlookportfolio-pro-availability-sections-quarter-outlookA row of four quarter panels, each with a segmented slot meter, status line, and focus note, closed by an update line and booking action.

Retainer Daysportfolio-pro-availability-sections-retainer-daysA two-column block with a weekday strip marking committed and open days beside retainer detail rows and a reserve-a-day contact action.

Status Bandportfolio-pro-availability-sections-status-bandA slim card stating current booking status, next opening month, and response time with a direct contact button in one horizontal strip.

Timezone Overlapportfolio-pro-availability-sections-timezone-overlapA two column block pairing an async policy intro and schedule rows with a timezone overlap chart plotting each city against your business hours.

Waitlist Cardportfolio-pro-availability-sections-waitlist-cardA two-column block explaining the first-refusal waitlist mechanic in three numbered steps, with current list stats as ruled rows and an email join form on the right.

As Featured Inportfolio-pro-awards-recognition-as-featured-inA centred press strip with eight publication wordmarks and a dated context line per entry showing what kind of coverage was given.

Awards And Pressportfolio-pro-awards-recognition-awards-and-pressA two-column recognition block listing formal awards with body and category on the left and press features with outlet and headline on the right.

Awards By Projectportfolio-pro-awards-recognition-awards-by-projectHeading and intro above ruled rows grouped by project, each pairing a name and summary with the list of honours that work earned.

Awards By Yearportfolio-pro-awards-recognition-awards-by-yearAn awards ledger grouped by year with each year as a large left numeral beside that year's wins, bodies, and projects in ruled rows.

Awards Listportfolio-pro-awards-recognition-awards-listA ruled list of award wins naming the award, the project it recognised, the awarding body, and the year.

Certifications Rowportfolio-pro-awards-recognition-certifications-rowA row of compact credential cards each naming the certification, the issuing organisation, and the year.

Feature Quotesportfolio-pro-awards-recognition-feature-quotesA three-card grid of short press pull quotes each attributed to a named publication with its date.

Interviews Listportfolio-pro-awards-recognition-interviews-listHeading and intro above ruled rows of media appearances, each with a format badge, the show, episode title, year, and a listen or watch link.

Judging Rolesportfolio-pro-awards-recognition-judging-rolesA ruled table of invited jury seats with columns for the awarding body, the role held, the category judged, and the year.

Nominations And Winsportfolio-pro-awards-recognition-nominations-and-winsA ruled list of award submissions where an outcome badge marks each entry as won, shortlisted, or an honourable mention beside its year.

Press Featuresportfolio-pro-awards-recognition-press-featuresA ruled list of press coverage naming the publication, the article headline, the date, and a read link.

Press Logo Rowportfolio-pro-awards-recognition-press-logo-rowA heading and lede above a single ruled grid of six publication wordmarks where the practice has been featured.

Press Quote Spotlightportfolio-pro-awards-recognition-press-quote-spotlightTwo column layout pairing a large pull quote from a publication with its attribution on the left beside a ruled card of further press mentions.

Recognition Bandportfolio-pro-awards-recognition-recognition-bandA slim border-y strip listing award wins and press features with their source and year in a compact horizontal flow.

Recognition Gridportfolio-pro-awards-recognition-recognition-gridA four-card grid mixing awards, press features, and honours each tagged by kind with its source and year.

Recognition Statsportfolio-pro-awards-recognition-recognition-statsA four-column stat band summarising awards won, press features, jury invitations, and years of practice with a source line under each number.

Repeat Winsportfolio-pro-awards-recognition-repeat-winsHeading over three cards, each an awarding body led by a large win count numeral above a ruled list of its individual wins by year.

Single Award Featureportfolio-pro-awards-recognition-single-award-featureA two-column block spotlighting one award with a ruled context list on the left and a large award callout card on the right.

Speaking Listportfolio-pro-awards-recognition-speaking-listA ruled list of conference talks naming the event, the talk title, the year, and an optional recording link.

Timeline Awardsportfolio-pro-awards-recognition-timeline-awardsA vertical connected timeline listing awards most recent first, each tied to a specific project and awarding body.

Archive By Yearportfolio-pro-blog-sections-archive-by-yearA chronological archive grouping posts under large year labels with post counts, each year holding a ruled list of titles, dates, and read times.

Article Bodyportfolio-pro-blog-sections-article-bodyA reading-width prose column with h2 sections, body paragraphs, a pull-quote, and an inline Placeholder image demonstrating long-form typographic rhythm.

Article Seriesportfolio-pro-blog-sections-article-seriesTwo article series cards with status badges, descriptions, numbered part rows showing read times or a coming soon badge, and start reading links.

Article Table of Contentsportfolio-pro-blog-sections-article-tocA long form article layout pairing a sticky numbered table of contents and publish meta with a prose column of titled sections.

Author Bio Cardportfolio-pro-blog-sections-author-bio-cardA compact end-of-article card with an avatar, name, role line, a two-sentence bio, and a subscribe link for the foot of a blog post.

Blog Categoriesportfolio-pro-blog-sections-blog-categoriesA six-card topic index with post counts and a one-line description per category so readers can find the threads that match their interests.

Blog Post Gridportfolio-pro-blog-sections-blog-post-gridA six-post writing index in a three-column card grid, each card showing a Placeholder cover, category, title, date, and read time.

Blog Post Headerportfolio-pro-blog-sections-blog-post-headerAn article page opener with a category label, h1-scale post title, author avatar and meta, and a wide Placeholder cover image.

Blog Sidebar Layoutportfolio-pro-blog-sections-blog-sidebar-layoutA post list with thumbnail and meta on the left and a sidebar of about bio, category counts, and email subscribe on the right.

Featured And Listportfolio-pro-blog-sections-featured-and-listA writing landing with one promoted post shown at full width with a cover image and excerpt above a ruled list of four recent posts.

Featured Postportfolio-pro-blog-sections-featured-postA writing section with one large featured post carrying a cover, excerpt, and meta beside a ruled list of three recent posts.

Link Roundupportfolio-pro-blog-sections-link-roundupA curated reading digest grouping shared links under month headings, each row carrying the title, source domain, and a one line note.

Magazine Blog Gridportfolio-pro-blog-sections-magazine-blog-gridAn editorial two-column layout with one large featured post and a divided stack of three secondary posts beside it.

Most Read Listportfolio-pro-blog-sections-most-read-listA split section with archive stats rows and a browse link beside a ranked list of five posts with large ordinals, category, and read counts.

Newsletter Issuesportfolio-pro-blog-sections-newsletter-issuesA newsletter archive with a subscribe panel on the left showing cadence stats and an email field beside a ruled list of past issues.

Post List Rowsportfolio-pro-blog-sections-post-list-rowsA minimal image-free writing archive as ruled rows showing publish date, post title with inline category, and read time.

Published Elsewhereportfolio-pro-blog-sections-published-elsewhereA guest writing section grouping essays by publication, each pairing an SVG mark and wordmark with a ruled list of pieces, dates, and links.

Read Next Postsportfolio-pro-blog-sections-read-next-postsAn end of article footer with previous and next post cards carrying excerpts and meta, above a short ruled list of related reading.

Recent Writingportfolio-pro-blog-sections-recent-writingA homepage writing teaser showing three recent posts as compact rows with category, title, and date, plus a link to the full archive.

Tag Filter Blogportfolio-pro-blog-sections-tag-filter-blogA writing index with tag chips (All, Design, Career, Process) that filter six post rows via client-side state and show a live article count.

Three Card Rowportfolio-pro-blog-sections-three-card-rowThree equal blog post cards each with a Placeholder cover, title, date, and reading time in a responsive three-column grid.

Writing With Topicsportfolio-pro-blog-sections-writing-with-topicsA three-column writing index that groups posts under topic headings, each column holding a ruled list of two to three post rows.

Annotated Screen Caseportfolio-pro-case-study-sections-annotated-screen-caseA single product screen as a Placeholder with numbered markers keyed to a side list naming the design decision behind each area.

Before After Caseportfolio-pro-case-study-sections-before-after-caseA redesign case study with two Placeholder images side by side, each followed by a paragraph that names the problem or outcome and one unresolved edge case.

Case Study Coverportfolio-pro-case-study-sections-case-study-coverA case study opening with a full-width Placeholder hero and a bordered panel showing the project title, subtitle, and a meta table of client, role, duration, and year.

Case Study Heroportfolio-pro-case-study-sections-case-study-heroA fold-filling project page opener with the project name large, a one-line outcome summary, a four-cell meta row of client, role, year, and deliverables, and a wide cover image.

Case Study Indexportfolio-pro-case-study-sections-case-study-indexA ruled list of four navigable case study rows each carrying a thumbnail, a one-line problem statement, a result figure, and a category tag.

Case Study Pagerportfolio-pro-case-study-sections-case-study-pagerAn end of case study pager with previous and next project cells carrying thumbnails, summaries, and result lines, plus an all work link.

Case Study Splitportfolio-pro-case-study-sections-case-study-splitA case study split telling problem, what I did, and the constraint, with a sticky result strip.

Challenge Solutionportfolio-pro-case-study-sections-challenge-solutionA case study section with a wide Placeholder image above a two-column ruled layout naming the specific challenge and the solution with its test rounds.

Constraints Caseportfolio-pro-case-study-sections-constraints-caseFour fixed project constraints in a ruled list, each typed and explained by the mark it left on the design, with a candid closing note.

Decision Log Caseportfolio-pro-case-study-sections-decision-log-caseA ruled log of four project decisions, each row pairing the chosen path with the rejected alternative and the reason it lost.

Deliverables Caseportfolio-pro-case-study-sections-deliverables-caseA six-cell grid counting everything shipped to the client, each cell naming the count, format, and where it lives, closed by a handoff note.

Full Bleed Caseportfolio-pro-case-study-sections-full-bleed-caseA case study section with a full-width container image and an attached ruled panel carrying the title, summary, and outcome figures.

Gallery Case Studyportfolio-pro-case-study-sections-gallery-case-studyA vertically sequenced case study of three numbered Placeholder images with captions that name the specific decision visible in each screen.

Goals vs Outcomesportfolio-pro-case-study-sections-goals-vs-outcomesFour ruled rows pairing each kickoff target with its measured outcome and a status pill, closed by an honest note on the goal that missed.

Impact Summaryportfolio-pro-case-study-sections-impact-summaryA case study closing section with a four-cell tabular figure strip and a reflection paragraph that names the specific scheduling or process mistake the designer would change.

Intro and Galleryportfolio-pro-case-study-sections-intro-and-galleryA case study section with a short project intro paragraph followed by a captioned gallery of process frames in a three-column grid.

Iteration Rounds Caseportfolio-pro-case-study-sections-iteration-rounds-caseThree columns tracking one screen across three usability rounds, each with a version frame, what testing showed, and a ruled list of changes made.

Long Form Caseportfolio-pro-case-study-sections-long-form-caseA full written case study with an intro, five titled prose sections including a constraint, inline Placeholders, and a results strip.

Metrics Grid Caseportfolio-pro-case-study-sections-metrics-grid-caseA 2x2 grid of outcome figures each with a context line and measurement window, plus a candid attribution note below the grid.

Outcome First Caseportfolio-pro-case-study-sections-outcome-first-caseA case study that leads with the result at display size before a ruled divider reveals the problem and approach in two equal columns.

Process Walkthroughportfolio-pro-case-study-sections-process-walkthroughA numbered sequence of project steps each with a large step number, title, duration, paragraph, and a Placeholder showing the artefact.

Quote Led Caseportfolio-pro-case-study-sections-quote-led-caseA case study that opens with a client testimonial in a ruled blockquote before the work narrative and a results strip.

Research Insights Caseportfolio-pro-case-study-sections-research-insights-caseA four-cell method stat strip above three numbered research insights, each pairing a finding, a participant quote, and the design response it produced.

Results Bandportfolio-pro-case-study-sections-results-bandA ruled metric strip of four figures with one context line each and an honest attribution note naming any confounding changes in the same window.

Role Breakdownportfolio-pro-case-study-sections-role-breakdownTwo ruled lists side by side naming what the author owned versus what named teammates contributed, with honest framing about the credit split.

Sticky Summary Caseportfolio-pro-case-study-sections-sticky-summary-caseA case study layout with project facts and result figures fixed in a sticky left column while the prose writeup scrolls on the right.

Testimonial In Caseportfolio-pro-case-study-sections-testimonial-in-caseA single attributed client quote in a ruled panel placed between the work body and results sections of a case study.

Two Column Writeupportfolio-pro-case-study-sections-two-column-writeupA dense case study section with the project narrative split across two prose columns and a four-figure result strip below.

Visual Processportfolio-pro-case-study-sections-visual-processA vertical sequence of numbered process phases each pairing a Placeholder artefact frame with a short paragraph naming the concrete finding or decision from that phase.

Animated Logo Rowportfolio-pro-clients-and-logos-animated-logo-rowEight client wordmarks as muted semibold text at varied type sizes arranged in a single wrapping bordered panel.

Client Grid Detailedportfolio-pro-clients-and-logos-client-grid-detailedSix client cards each showing the wordmark, sector, the actual deliverable delivered, and the year of engagement.

Client Listportfolio-pro-clients-and-logos-client-listA ruled-row roster of ten clients each showing the company name, the kind of work delivered, and the year, the complete scannable client history.

Client Results Rowportfolio-pro-clients-and-logos-client-results-rowThree columns each attributing a large tabular-nums result figure and a one-line context sentence to a named client, the outcomes-by-client proof strip.

Client Spotlightportfolio-pro-clients-and-logos-client-spotlightA split layout pairing one anchor client panel with scope, fact rows, and an outcome against a ruled six row list of further clients.

Client Timelineportfolio-pro-clients-and-logos-client-timelineA heading and lede above ruled year bands, each pairing a large year label and note with the clients signed and work delivered.

Clients By Serviceportfolio-pro-clients-and-logos-clients-by-serviceThree bordered discipline columns each with a service description, a stacked list of client wordmarks, and a client count per column.

Confidential Clientsportfolio-pro-clients-and-logos-confidential-clientsA split layout pairing an NDA explanation and shareable detail rows with a grid of dashed anonymized cards naming client, work, and sector.

Engagement Lengthsportfolio-pro-clients-and-logos-engagement-lengthsA ruled panel of clients ordered by how long each engagement ran, every row pairing company and year span with a proportional bar and months figure.

Global Clientsportfolio-pro-clients-and-logos-global-clientsThree stacked region bands each pairing a region label and client count with a wrapped set of client names and home cities.

Industries Servedportfolio-pro-clients-and-logos-industries-servedA six-tile sector grid showing project counts and example client types per industry to demonstrate breadth without a logo grid.

Logo Grid With Quoteportfolio-pro-clients-and-logos-logo-grid-with-quoteEight client wordmarks in a bordered grid on one side and one attributed client testimonial on the other, pairing breadth with a specific endorsement.

Logo Wallportfolio-pro-clients-and-logos-logo-wallA grid of ten client wordmarks styled as muted text in varying sizes, with a heading and lede, showing the full breadth of past clients at a glance.

Logos And Testimonialportfolio-pro-clients-and-logos-logos-and-testimonialA ruled wordmark row of seven clients above one attributed pull quote that names a specific deliverable and outcome.

Logos With Countportfolio-pro-clients-and-logos-logos-with-countA centred headline figure above a twelve-cell client wordmark grid that proves practice scale with a count and a longevity line.

Notable Clientsportfolio-pro-clients-and-logos-notable-clientsFour client cards each naming the company, a paragraph on the scope of work, and a concrete one-line outcome, the selected engagements with results attached.

Referral Chainportfolio-pro-clients-and-logos-referral-chainA split layout pairing a large referral share figure and fact rows with a ruled list naming who introduced whom, the work, and the year.

Repeat Clientsportfolio-pro-clients-and-logos-repeat-clientsRuled rows of five returning clients each pairing the company and a one line history with a right aligned project count and year span.

Trusted By Rowportfolio-pro-clients-and-logos-trusted-by-rowA compact single-line strip of five client wordmarks with a small uppercase label, placed beneath a hero to add proof without interrupting page flow.

Two Row Logosportfolio-pro-clients-and-logos-two-row-logosA centered heading with a client count above two even ruled rows of five client wordmarks each, covering ten names across two sectors.

Between Sessionsportfolio-pro-coaching-mentoring-between-sessionsFour channel rows with response expectations beside a sample fortnight timeline and a single boundary rule, showing the support layer between calls.

Book Sessionportfolio-pro-coaching-mentoring-book-sessionA two-column booking block showing what a single session covers, the duration and price, a four-step booking sequence, and an honest list of what coaching is not.

Coaching FAQportfolio-pro-coaching-mentoring-coaching-faqA two column FAQ answering common coaching questions in an accordion beside quick facts covering price, engagement length, and reply time.

Coaching Heroportfolio-pro-coaching-mentoring-coaching-heroA full-fold hero naming the coach, their one-line premise, the next availability date, primary and secondary actions, and a three-cell credential strip.

Coaching Offeringsportfolio-pro-coaching-mentoring-coaching-offeringsThree coaching engagement types as cards with included items and a from price so visitors can self-sort before reaching out.

Coaching Packagesportfolio-pro-coaching-mentoring-coaching-packagesThree named coaching packages with session counts, durations, prices, and included items, one marked recommended, plus a scoping note confirming fit before payment.

Coaching Principlesportfolio-pro-coaching-mentoring-coaching-principlesFive numbered coaching ground rules in a divided list beside an intro, a short origin note, and a three-fact track record panel.

Engagement Timelineportfolio-pro-coaching-mentoring-engagement-timelineA five phase vertical timeline tracing a coaching engagement from free intake call to the one month check-in, plus a strip of what stays after.

Focus Areasportfolio-pro-coaching-mentoring-focus-areasSix topic cards mapping the territory a coaching practice covers, each pairing a short description with a real client question, plus a booking footer.

Group Cohortportfolio-pro-coaching-mentoring-group-cohortA six week group program pairing a curriculum list with a cohort card showing start date, schedule, seats left, price, and a reserve action.

Meet The Coachportfolio-pro-coaching-mentoring-meet-the-coachSplit bio pairing a framed portrait and quick-fact rows with a first person career account, a four-line role history, and credential chips.

Mentee Outcomesportfolio-pro-coaching-mentoring-mentee-outcomesA summary stat row and three outcome cards pairing then and now role panels with mentee quotes, avatars, and engagement lengths.

Mentorship Cardportfolio-pro-coaching-mentoring-mentorship-cardA free or low-cost mentorship offer naming who it is for, the monthly cadence, the pay-what-you-can cost, and a four-step application process.

Office Hoursportfolio-pro-coaching-mentoring-office-hoursOpen weekly slots with a spots-remaining count, a good-for list, a not-the-right-fit list, and a how-it-works breakdown for free 25-minute advice calls.

Session Anatomyportfolio-pro-coaching-mentoring-session-anatomyMinute by minute breakdown of a sixty minute coaching session as a four segment list beside panels for what clients send before and receive after.

Session Formatsportfolio-pro-coaching-mentoring-session-formatsFour format cards for video, async review, voice notes, and in person days, with best-when lists and a how-to-choose strip.

Brands Worked Withportfolio-pro-collaborations-brands-worked-withA wordmark grid of twelve named client brands with sector labels, a total client count, and a four-column breakdown of work by engagement type.

Collab Availabilityportfolio-pro-collaborations-collab-availabilityA split layout pairing an explanation of how slots are booked with a ruled ledger of four seasons, each showing the format and a booking status.

Collab Ctaportfolio-pro-collaborations-collab-ctaA two-column band listing four genuine collaboration types in a ruled list with explicit exclusions and a direct contact email button.

Collab Disciplinesportfolio-pro-collaborations-collab-disciplinesA heading, intro, and count line above a grid of six discipline cells, each with a working note, a joint project count, and a frequent partner.

Collab Faqportfolio-pro-collaborations-collab-faqA two-column FAQ answering five questions studios ask before a joint project, beside a heading and a three-row list of fixed terms.

Collab Formatsportfolio-pro-collaborations-collab-formatsThree engagement format cards, each with a summary, a ruled facts list of length, team shape, and fit, plus a recent partner example.

Collab Galleryportfolio-pro-collaborations-collab-galleryA heading and intro above three joint project cards, each with a Placeholder image, the project name, the partner and field, a role split line, and the year.

Collab Gridportfolio-pro-collaborations-collab-gridA four-card grid of joint projects each naming the partner, their discipline and location, the deliverable, and the year.

Collab Logosportfolio-pro-collaborations-collab-logosA four-column wordmark grid of collaborated companies each showing the brand name and the type of engagement as a secondary line.

Collab Processportfolio-pro-collaborations-collab-processFour numbered stage cards from first call to shipped work, each with a timing line, over a three cell band of working agreements.

Collab Splitportfolio-pro-collaborations-collab-splitA heading and intro above two ruled columns setting out what the studio carries and what the partner carries, closed by a three cell band of shared duties.

Collab Timelineportfolio-pro-collaborations-collab-timelineA year-by-year ruled ledger of five joint projects, each entry naming the partner, the shared deliverable, and the role split.

Featured Collabportfolio-pro-collaborations-featured-collabA split block spotlighting one joint project with a Placeholder image, a two-paragraph story including a constraint named, and a five-row facts list.

Partner Quotesportfolio-pro-collaborations-partner-quotesTwo large quote cards from past collaborators with avatar attribution and a footer row naming the shared project and their side of the split.

Partners Rowportfolio-pro-collaborations-partners-rowA divided wordmark grid of eight collaborators each showing the name and a one-word discipline label under a section heading.

Repeat Partnersportfolio-pro-collaborations-repeat-partnersA ruled ledger of four returning collaborators, each row pairing discipline and a working note with a tabular count of projects and years.

AI vs Hiring Meportfolio-pro-comparison-sections-ai-vs-hiring-meFive design tasks stacked as cards, each pairing what AI tools honestly deliver against what hiring me adds, with one task conceded outright.

Am I the Right Fitportfolio-pro-comparison-sections-am-i-the-right-fitTwo honest panels of fit signals, a good fit checklist beside reasons to look elsewhere, each item backed by a one line detail.

Before And Afterportfolio-pro-comparison-sections-before-and-afterFive paired before and after panels joined by arrows, each labelled by the dimension that changed, selling outcomes rather than deliverables.

By the Numbersportfolio-pro-comparison-sections-by-the-numbersFive project metrics as paired horizontal bars comparing a typical engagement with mine, each metric captioned and labelled with plain values.

Comparison Tableportfolio-pro-comparison-sections-comparison-tableNine criteria rows comparing this person against a typical alternative using check and minus icons, with honest gaps on both sides.

Expectations Vs Realityportfolio-pro-comparison-sections-expectations-vs-realityFive assumptions about hiring a solo designer paired row by row with what actually happens, including one the block admits is true.

Freelance Vs Agencyportfolio-pro-comparison-sections-freelance-vs-agencyA three-column table comparing freelance and agency across seven criteria including cost, speed to start, and institutional knowledge.

Freelance Vs Inhouseportfolio-pro-comparison-sections-freelance-vs-inhouseA three-column table of five signals arguing honestly for hiring a freelancer or building in-house across project length, budget, and team structure.

Process Comparisonportfolio-pro-comparison-sections-process-comparisonTwo engagement timelines side by side, a typical studio process against mine, with five numbered steps, timing labels, and an honest closing note.

Project vs Retainerportfolio-pro-comparison-sections-project-vs-retainerTwo engagement models compared down a central spine of six criteria, closed by paired pick this when lists so a prospect can self select.

Shortlist Questionsportfolio-pro-comparison-sections-shortlist-questionsFour questions to ask every designer you are comparing, each card pairing the question and why it matters with my answer below a divider.

Should You Hire Meportfolio-pro-comparison-sections-should-you-hire-meA four step decision path where each numbered question branches into yes and no outcomes, ending in a short verdict panel.

Specialists vs Generalistportfolio-pro-comparison-sections-specialists-vs-generalistA roster of four priced specialists beside my single generalist panel, where a three dot coverage meter rates my depth per discipline.

Template Vs Customportfolio-pro-comparison-sections-template-vs-customTwo decision panels weighing a bought template against custom work, each with cost and timeline facts plus the signs it is the right call.

What Makes Me Differentportfolio-pro-comparison-sections-what-makes-me-differentThree distinctive approach points each paired with an explicit tradeoff so the block reads as credible rather than promotional.

What You Actually Payportfolio-pro-comparison-sections-what-you-actually-payTwo itemised cost ledgers pricing the same project through an agency and through me, with line notes, plain totals, and an honest caveat.

Why Work With Meportfolio-pro-comparison-sections-why-work-with-meFour honest reasons as cards, each pairing a direct claim with the substance that makes it verifiable, the differentiation block.

Availability And Formportfolio-pro-contact-sections-availability-and-formAn availability strip showing current status and four project criteria sits above a name plus email plus message form so visitors self-qualify before writing.

Booking Window Stripportfolio-pro-contact-sections-booking-window-stripA six month availability strip of status dot cells, plus a footer pairing an earliest start note with a reserve by email action.

Brief Upload Formportfolio-pro-contact-sections-brief-upload-formA two column brief intake with submission facts on the left and a form pairing contact fields, a static upload zone, and a link field.

Calendar Embed Blueprintportfolio-pro-contact-sections-calendar-embed-blueprintA static booking widget blueprint showing a month grid with available and selected dates, a time-slot row, and a confirm button beside a call fact strip, ready to wire to a real scheduler.

Centered Contactportfolio-pro-contact-sections-centered-contactA centred narrow column with a heading, a framing sentence, and a name plus email plus message form with a reply-time note below the button.

Contact By Inquiry Typeportfolio-pro-contact-sections-contact-by-inquiry-typeA three card contact router splitting inquiries by intent, each card pairing an icon, a description, a dedicated email, and a reply time note.

Contact Card Gridportfolio-pro-contact-sections-contact-card-gridSix reach channels laid out as linked cards in a three-column grid, each naming the platform, the handle, and what that channel is best for.

Contact Details Panelportfolio-pro-contact-sections-contact-details-panelA text-only ruled list of email, location, availability, and response time rows with social links beneath, no form required.

Contact Faq Comboportfolio-pro-contact-sections-contact-faq-comboA contact form beside three pre-emptive FAQ answers covering rates, timeline, and availability so common objections are resolved before the message is sent.

Contact Formportfolio-pro-contact-sections-contact-formA centred name, email, and message form with a send button and an explicit two-business-day reply commitment below the submit action.

Contact Splitportfolio-pro-contact-sections-contact-splitA two-column contact section with a warm intro, ruled detail rows, and social links on the left and a name, email, and message form on the right.

Contact With Availabilityportfolio-pro-contact-sections-contact-with-availabilityA contact section that opens with a status dot, availability label, and a four-row capacity table before presenting the inquiry form.

Contact With Map Blueprintportfolio-pro-contact-sections-contact-with-map-blueprintA studio contact panel beside a bg-muted inline SVG map surface with a centred MapPin marker and a location chip, no third-party embed.

Contact With Testimonialportfolio-pro-contact-sections-contact-with-testimonialA name plus email plus message form beside a bordered client testimonial panel with a quote, avatar attribution, and two relationship facts.

Copy Email Contactportfolio-pro-contact-sections-copy-email-contactA centered formless contact block with one email in a bordered field, a copy button, a mailto link, and a three cell fact strip.

Email And Socialsportfolio-pro-contact-sections-email-and-socialsA centred minimal contact block with the email address rendered large as a mailto link and a row of social platform links with brand icons beneath.

Email Brief Checklistportfolio-pro-contact-sections-email-brief-checklistA large mailto link and a no forms pitch beside a checklist card covering the five details a useful first email should include.

Full Contact Pageportfolio-pro-contact-sections-full-contact-pageA two-column contact section with a warm intro, ruled details list, availability block naming exclusions, social links, and a complete inquiry form.

Inquiry Formportfolio-pro-contact-sections-inquiry-formA qualified project inquiry form with name, email, project-type and budget-range selects, a message field, and a note that scope and fee follow a discovery call.

Office Hours Bookingportfolio-pro-contact-sections-office-hours-bookingThree recurring office hour slots as ruled rows naming session, audience, schedule, and length, each with a book button and an email fallback.

Process And Formportfolio-pro-contact-sections-process-and-formA numbered three step outline of the reply, intro call, and written proposal sits beside a name plus email plus message form.

Simple Contact Rowportfolio-pro-contact-sections-simple-contact-rowA single bordered row with a mailto email link on the left and three social icon and text links on the right, sized for footer-adjacent placement.

Social Contact Gridportfolio-pro-contact-sections-social-contact-gridA grid of six destination cards covering email, LinkedIn, GitHub, X, Instagram, and a calendar booking link, each with a description of what lives there.

Two Column Contactportfolio-pro-contact-sections-two-column-contactA contact form on the left balanced against a ruled detail list of email, location, timezone, availability, and social links on the right.

Availability Bandportfolio-pro-cta-sections-availability-bandA ruled availability list naming real months and booking statuses with a get-in-touch action for the one open September slot.

Availability CTA Bandportfolio-pro-cta-sections-availability-cta-bandA bordered card that states the next opening month as a heading and pairs it with a single action button linking to the contact section.

Book A Call Bandportfolio-pro-cta-sections-book-a-call-bandA call-booking band with a two-row agenda covering what the call addresses and what it skips, plus a duration row stating free 20 minutes and no prep needed.

Client Logos CTAportfolio-pro-cta-sections-client-logos-ctaA bordered closer with a centered heading, one line pitch, and primary action above a ruled four cell strip of client wordmarks.

Download Resume Ctaportfolio-pro-cta-sections-download-resume-ctaA resume prompt with a lede, a ruled meta strip covering last-updated date and page count, and dual actions for downloading the PDF and viewing it online.

Email Capture CTAportfolio-pro-cta-sections-email-capture-ctaA centered heading with an inline email input and submit button that collects addresses for a one-email availability notification.

Engagement Paths CTAportfolio-pro-cta-sections-engagement-paths-ctaA heading above three bordered engagement cards, each naming a way to work together with a scope note, a terms line, and its own action button.

FAQ CTAportfolio-pro-cta-sections-faq-ctaA two column closer with a heading, lede, and primary action beside a ruled list of four common questions each answered in a sentence.

Featured Work CTAportfolio-pro-cta-sections-featured-work-ctaA bordered closer with a heading, lede, and two actions beside a featured project card showing a cover image, title, meta, and outcome.

Full Bleed Ctaportfolio-pro-cta-sections-full-bleed-ctaA bold section-filling heading with a concrete availability line and a single primary button, no gradient and no overlay.

Get In Touch Ctaportfolio-pro-cta-sections-get-in-touch-ctaA contact band with a pill-shaped email chip and three social icon links that lets visitors follow or reach out without committing to a message.

Hire Me Bandportfolio-pro-cta-sections-hire-me-bandA bordered conversion band with a confident heading, a one-line capacity note, and a single primary action that closes a portfolio page.

Lets Talk Splitportfolio-pro-cta-sections-lets-talk-splitA two-column contact split with a warm heading on the left and a bordered card carrying response time, fit criteria, and preferred start date on the right.

Newsletter Ctaportfolio-pro-cta-sections-newsletter-ctaA centred subscribe band with a heading naming the cadence, an honest pitch describing the content and what it excludes, and an inline email form.

Next Steps CTAportfolio-pro-cta-sections-next-steps-ctaA centered closer with three numbered steps covering the first message, a short intro call, and a written proposal, ending in one primary action.

Project Inquiry Ctaportfolio-pro-cta-sections-project-inquiry-ctaA ruled brief prompt listing four things to include in a first message, timeline, budget range, product description, and scope, to qualify enquiries before they arrive.

Simple Contact Ctaportfolio-pro-cta-sections-simple-contact-ctaA minimal closer with a single centered heading and one large email link at heading scale, nothing else, for visitors who have already decided to reach out.

Split Availability Ctaportfolio-pro-cta-sections-split-availability-ctaA two-column CTA with booking criteria and an availability dot on the left and what to send plus a project brief button on the right.

Start Project Bandportfolio-pro-cta-sections-start-project-bandA single bordered card with a confident heading, a one-line on how to begin, and a primary email action that names the response time commitment.

Starting Rate CTAportfolio-pro-cta-sections-starting-rate-ctaA bordered closer with a heading, lede, and primary action beside a rate card stating the starting price and a checked list of inclusions.

Stats CTA Bandportfolio-pro-cta-sections-stats-cta-bandA centered band with a heading, a primary button, and a ruled three cell stat strip proving years of practice, shipped projects, and returning clients.

Testimonial CTAportfolio-pro-cta-sections-testimonial-ctaA two column closer pairing a heading and dual actions with a bordered client quote card carrying an avatar, attribution, and an outcome line.

Two Action Ctaportfolio-pro-cta-sections-two-action-ctaA centered band with a heading and two equal-weight buttons offering distinct paths for visitors browsing work and visitors ready to reach out.

Annotated Screenportfolio-pro-design-portfolio-annotated-screenA single captioned product screen beside five numbered decision notes, each naming a screen region and the reasoning behind the call.

Before After Designportfolio-pro-design-portfolio-before-after-designA redesign proof with side-by-side Placeholder visuals and a ruled change table naming the constraint and three specific before-and-after decisions.

Brand Showcaseportfolio-pro-design-portfolio-brand-showcaseA brand identity case showing logo mark, theme-token colour swatches, typography panel, and three application mockups for one project.

Case Study Designportfolio-pro-design-portfolio-case-study-designA design case study with a sticky screen stack and result strip on the left and a four-section narrative (problem, approach, constraint, outcome) on the right.

Concept Gridportfolio-pro-design-portfolio-concept-gridA process-transparency grid of six unexplored or unshipped design directions, each with a Placeholder tile and an honest reason it was set aside.

Design Directionsportfolio-pro-design-portfolio-design-directionsThree visual directions for one project as tiles with trait rows for type, color, and feel, a verdict line, and the selected pick marked.

Design Principlesportfolio-pro-design-portfolio-design-principlesA ruled three-column grid of six numbered working principles, each pairing a short titled belief with an honest explanation of its impact.

Design Processportfolio-pro-design-portfolio-design-processA five-step design process block with numbered rows each carrying a title, duration, Placeholder illustration, and an honest description of the step output.

Design System Displayportfolio-pro-design-portfolio-design-system-displayA systems-work section showing a shared design system as colour token swatches, a six-step type scale, and three component documentation cards.

Featured Projectportfolio-pro-design-portfolio-featured-projectA flagship project split with a full-height Placeholder screen beside a summary, five ruled spec rows, and three measured outcome stats.

Iteration Timelineportfolio-pro-design-portfolio-iteration-timelineOne product screen across four dated design rounds in a ruled grid, each pairing a snapshot with the round name, date, and a change note.

Logo Gridportfolio-pro-design-portfolio-logo-gridAn eight-mark logo portfolio grid with centred monogram overlays on Placeholder tiles, each labelled by client name and mark kind.

Project Indexportfolio-pro-design-portfolio-project-indexA ruled archive table of every project by year with client sector and deliverable columns and a row-level arrow link to each case.

Research Decisionsportfolio-pro-design-portfolio-research-decisionsThree ruled rows pairing a real research quote with the exact design change it drove and the measured result after shipping.

Responsive Pairsportfolio-pro-design-portfolio-responsive-pairsThree projects each shown as a paired desktop and mobile frame with a note explaining the specific adaptation decision behind the small screen.

Screens Carousel Blueprintportfolio-pro-design-portfolio-screens-carousel-blueprintA static carousel blueprint of five app screens with prev and next affordances, dot indicators, and a thumbnail strip with one slide active.

UI Wallportfolio-pro-design-portfolio-ui-wallA six-screen product interface grid with state-level captions showing the full range of a design system from empty states to dense data views.

Visual Gridportfolio-pro-design-portfolio-visual-gridA dense nine-item square grid of design shots with minimal captions for explorations and process fragments that did not fit a case study.

Work Showcaseportfolio-pro-design-portfolio-work-showcaseA four-project design grid where each card names the client type, the role, the year, and the specific deliverables the designer owned.

ADR Logportfolio-pro-developer-portfolio-adr-logA single column architecture decision log of ruled rows, each pairing a record id and date with the decision, reasoning note, and status chip.

Api Project Cardportfolio-pro-developer-portfolio-api-project-cardA two-column backend project card pairing a project description and stack chips with a static mono panel showing a sample endpoint path and a formatted HTTP response.

Career Timelineportfolio-pro-developer-portfolio-career-timelineReverse chronological engineering roles as ruled rows pairing period and tenure with role, company, summary, a shipped highlight, and stack tags.

Code Snippetportfolio-pro-developer-portfolio-code-snippetA production function displayed in a mono bg-muted editor panel with a filename tab, gutter line numbers, and a caption explaining the technical tradeoff the snippet demonstrates.

Contributions Gridportfolio-pro-developer-portfolio-contributions-gridAn activity heatmap showing 1654 contributions across 52 weeks using theme-token opacity squares with a streak note and quarterly commit breakdown.

Engineering Principlesportfolio-pro-developer-portfolio-engineering-principlesSix numbered engineering principles in an editorial three column grid, each pairing a mono index with a short title and a first person note.

Github Statsportfolio-pro-developer-portfolio-github-statsA four-figure contribution stat strip above a 52-week CSS-grid heatmap built with theme-token opacity squares and a deterministic seed, with no green color scale.

Incident Postmortemportfolio-pro-developer-portfolio-incident-postmortemA two column incident retro pairing the story, root cause, and follow up changes with a static minute by minute timeline panel.

Now Buildingportfolio-pro-developer-portfolio-now-buildingA stacked list of 3 projects currently in development, each with a status badge, technical description, and a dated progress note.

Open Source Listportfolio-pro-developer-portfolio-open-source-listA ruled-row list of open-source contributions each naming the project, a specific description of the work done, a tabular star count, and a Maintainer or Contributor role badge.

Performance Winsportfolio-pro-developer-portfolio-performance-winsA single column list of optimization stories as ruled rows, each pairing the narrative and an improvement chip with before and after metric bars.

Project Listportfolio-pro-developer-portfolio-project-listA ruled-row developer projects index with stack chips, a one-line summary, and separate repo and live links per project.

Project Reposportfolio-pro-developer-portfolio-project-reposA four-card grid of public repositories each showing the project name, a one-line description, the stack as chips, and tabular stars and forks counts with a repo link.

Published Packagesportfolio-pro-developer-portfolio-published-packagesA ruled list of maintained npm packages, each row with the name, version, license, weekly downloads, a short description, and an install command.

Pull Request Showcaseportfolio-pro-developer-portfolio-pull-request-showcaseA two column pull request case study pairing the change narrative, review notes, and merge stats beside a static diff panel of the reworked hunk.

Skills and Projectsportfolio-pro-developer-portfolio-skills-and-projectsA two-column block with the technology stack organised into labelled chip categories on the left and a ruled list of representative projects on the right.

System Design Caseportfolio-pro-developer-portfolio-system-design-caseA case study split pairing the problem, numbered architecture decisions, and outcome metrics with a blueprint panel tracing the ingest and read paths.

Tech Stack Detailportfolio-pro-developer-portfolio-tech-stack-detailA four-column grid of technologies grouped under Languages, Frameworks, Infrastructure, and Tools, each item showing a two-letter mark and a short honest context note.

Terminal Introportfolio-pro-developer-portfolio-terminal-introA full-viewport hero split with an h1 and lede on the left and a static mono terminal panel on the right showing a whoami command with structured key-value output and a static cursor.

Career Chaptersportfolio-pro-experience-sections-career-chaptersThe full history grouped into three named eras as columns, each with a year range, a first person narrative, and a ruled list of roles.

Career Timelineportfolio-pro-experience-sections-career-timelineA vertical connected timeline of key roles and turning points with year markers and short narrative descriptions of how each move built on the last.

Client Engagementsportfolio-pro-experience-sections-client-engagementsFreelance work listed as a ruled index, each row pairing client and sector with a one line deliverable, an engagement type badge, and the year.

Compact Historyportfolio-pro-experience-sections-compact-historyA ruled list of roles showing company, title, and year range in tabular-nums, fitting five positions into a minimal footprint.

Current Positionportfolio-pro-experience-sections-current-positionA two-column card stating the present role with company, title, focus rows, and a plain note on what the person is and is not open to.

Experience Accordionportfolio-pro-experience-sections-experience-accordionAn accordion work history where each ruled row shows company, title, and years, expanding to a first person summary, highlights, and a departure note.

Experience Detailportfolio-pro-experience-sections-experience-detailA single role expanded with company, tenure, scope, a not in scope list, and key project cards each naming the work done and the measured outcome.

Experience Tabsportfolio-pro-experience-sections-experience-tabsA vertical rail of companies switches a detail panel showing the role title, a first person summary, what you owned, and a stat row.

Experience With Logosportfolio-pro-experience-sections-experience-with-logosA ruled history list where each role leads with an inline SVG company wordmark alongside title, date range, and a one-line summary.

Growth Matrixportfolio-pro-experience-sections-growth-matrixAreas of responsibility as rows and career levels as columns, with filled, faded, and empty dots marking what was owned or contributed at each stage.

Highlights Bandportfolio-pro-experience-sections-highlights-bandA four-cell bordered grid strip presenting standout career moments each with a bold label and a concrete outcome sentence.

Positions Listportfolio-pro-experience-sections-positions-listA compact ruled index of every role with company, title, employment type, and year range and no descriptions by design.

Promotion Pathportfolio-pro-experience-sections-promotion-pathA connected stepper telling six years at one company as four titles, each carrying the year, what changed in the work, and a scope fact.

Role Highlightsportfolio-pro-experience-sections-role-highlightsCards for the two or three most consequential roles, each with a context sentence and bulleted achievements that include concrete numbers.

Role Referencesportfolio-pro-experience-sections-role-referencesA three card work history pairing each role with a short quote from the manager or founder who was in the room, credited beneath.

Tenure Spansportfolio-pro-experience-sections-tenure-spansA tenure chart drawing every role as a horizontal bar across a shared year axis, with a legend separating full time roles from freelance work.

Work Historyportfolio-pro-experience-sections-work-historyA ruled list of every role with company, title, date range, and a one-sentence summary covering the full employment record.

Anchored FAQportfolio-pro-faq-sections-anchored-faqA FAQ with a sticky anchor rail listing three topic sections beside always open ruled answers, keeping long lists navigable without accordions.

Availability Faqportfolio-pro-faq-sections-availability-faqAn availability FAQ that states the real next opening month in the lede and answers five questions about lead time, rush work, waiting list, and start date slippage.

Centered Faqportfolio-pro-faq-sections-centered-faqA centered heading and lede above a narrow max-w-2xl accordion of six working-together questions with specific policy answers.

Faq Accordionportfolio-pro-faq-sections-faq-accordionA six-question general FAQ accordion covering how to start, revisions, time zones, file ownership, and NDA signing, with the first item open by default.

Faq Three Columnportfolio-pro-faq-sections-faq-three-columnNine questions and answers laid out in three equal columns as plain text blocks for at-a-glance scanning without interaction.

Faq With Contactportfolio-pro-faq-sections-faq-with-contactA five-question accordion beside a sticky contact nudge card so visitors whose question is not listed can reach out without leaving the page.

Grouped Faqportfolio-pro-faq-sections-grouped-faqA FAQ block that organizes questions into three topic groups (Process, Pricing, Working together) each rendered as a collapsible accordion.

Inline Faq Listportfolio-pro-faq-sections-inline-faq-listA FAQ block that shows all questions and answers as always-open ruled rows in a two-column grid with no accordion.

Myth FAQportfolio-pro-faq-sections-myth-faqA left aligned heading over a ruled stack of five two column rows, each pairing a quoted assumption with the reality that corrects it.

Numbered FAQportfolio-pro-faq-sections-numbered-faqAn editorial FAQ of six always open questions in a single narrow column, each led by a large index numeral and separated by ruled dividers.

Numbers FAQportfolio-pro-faq-sections-numbers-faqA left aligned heading above a three column grid of six rule topped cards, each pairing a question with a large number and detail.

Objections FAQportfolio-pro-faq-sections-objections-faqA centered heading over a chat styled thread of four exchanges, each a right aligned objection bubble answered by a reply beside a designer avatar.

Pricing Faqportfolio-pro-faq-sections-pricing-faqA five-question pricing FAQ stating project cost ranges, payment installments, delay responsibility, refund policy, and retainer terms without hedging.

Process Faqportfolio-pro-faq-sections-process-faqA five-question process FAQ covering revision rounds, how to give feedback, handoff deliverables, source file ownership, and how design disagreements are handled.

Tabbed FAQportfolio-pro-faq-sections-tabbed-faqA tabbed FAQ that splits questions into Projects, Pricing, and Logistics tabs, each revealing its own accordion of answers below a centered heading.

Timeline FAQportfolio-pro-faq-sections-timeline-faqA vertical numbered timeline of three project stages, each node carrying a stage title and two always open questions with paragraph answers.

Two Column Faqportfolio-pro-faq-sections-two-column-faqA two-column FAQ with a heading and quick-facts strip on the left and a five-question accordion on the right in a balanced split layout.

Working Faqportfolio-pro-faq-sections-working-faqA five-question collaboration FAQ answering how often you will talk, what the client needs to provide, scope changes, feedback format, and typical timelines.

Yes No FAQportfolio-pro-faq-sections-yes-no-faqA rapid FAQ of nine questions in a three column card grid, each led by a Yes, No, or Depends badge above a short answer.

Awards Footerportfolio-pro-footers-awards-footerA full width recognition ledger of ruled rows pairing each award with its body, project, and year, above a bar with copyright and social icons.

Big Cta Footerportfolio-pro-footers-big-cta-footerA conversion footer with a status line, a heading, a qualifier sentence, and a large email link filling the card, with compact links and a copyright line below.

Big Name Footerportfolio-pro-footers-big-name-footerA footer centred on the name and a tagline set at heading scale, with a ruled divider separating a short page link row and a copyright line.

Centered Footerportfolio-pro-footers-centered-footerA fully centered footer with the name mark, a row of nav links, a row of social icon links, and a copyright line separated by a top border.

Colophon Footerportfolio-pro-footers-colophon-footerA colophon footer pairing a name and site note with a ruled definition list of typefaces, stack, tools, and last update, above a copyright line.

Columns And Social Footerportfolio-pro-footers-columns-and-social-footerA three-column footer with a brand bio, a navigation column, and a contact column, topped by a social icon row and copyright bar.

Contact Footerportfolio-pro-footers-contact-footerA contact footer with a large email address as the centrepiece, social icon links, a compact site nav, and a copyright line inside a rounded card.

Elsewhere Footerportfolio-pro-footers-elsewhere-footerA grid of four bordered profile tiles, each with a platform icon, handle, and posting note, above a bar with nav and copyright.

Footer With Availabilityportfolio-pro-footers-footer-with-availabilityA two-column footer pairing the name, positioning line, and email on the left with a toggling availability status card and social icons on the right.

Footer With CTA Bandportfolio-pro-footers-footer-with-cta-bandA footer that opens with a bordered card holding a lets-work heading and action button, then closes with nav links, social icons, and a copyright line.

Footer With Navportfolio-pro-footers-footer-with-navA footer with four labelled link columns covering Work, About, Contact, and Social, the studio name and tagline above, and a copyright bar below.

Footer With Newsletterportfolio-pro-footers-footer-with-newsletterA footer pairing contact details and social icons with an inline newsletter subscribe form inside a bordered card above a copyright bar.

Footer With Nowportfolio-pro-footers-footer-with-nowA now panel of three ruled cells reporting what the owner builds, where they are based, and current interests, above a nav and copyright bar.

Latest Writing Footerportfolio-pro-footers-latest-writing-footerA footer pairing a brand column with a ruled list of recent essays, each titled and dated, plus a view all link and copyright bar.

Minimal Link Footerportfolio-pro-footers-minimal-link-footerA single centered row of text nav links above a copyright line, the smallest possible footer for pages that close with a strong CTA section.

Minimal Signoff Footerportfolio-pro-footers-minimal-signoff-footerA single ruled line carrying the name and copyright year on one side and a made-with location line on the other, with no nav or social links.

Quote Footerportfolio-pro-footers-quote-footerA large centered client quote with an avatar attribution, closed by a ruled bar carrying nav links, social icons, and a copyright line.

Recent Work Footerportfolio-pro-footers-recent-work-footerA footer opening with three latest project thumbnails, closed by a ruled bar carrying the copyright, a compact nav, and a row of social icons.

Sitemap Footerportfolio-pro-footers-sitemap-footerA complete portfolio footer with the name set at heading scale and five link columns covering Work, Writing, About, Contact, and Social.

Social Row Footerportfolio-pro-footers-social-row-footerA centred footer showing the name at heading scale, a one-line tagline, a row of social icon links, and a copyright line with no other navigation.

Stats Footerportfolio-pro-footers-stats-footerA ruled band of four practice numbers, each a large numeral with a label and detail line, above a bar with copyright, email, and nav.

Three Column Footerportfolio-pro-footers-three-column-footerA three-column footer with a brand and tagline column, a navigation links column, and a contact and social column, plus a full-width copyright bar.

Album Gridportfolio-pro-gallery-sections-album-gridA collections index of six named photography series, each card showing a cover image, album title, photo count, and date range.

Alternating Galleryportfolio-pro-gallery-sections-alternating-galleryAn alternating editorial gallery of full width rows that swap the image left and right beside a series title, story, and bordered facts list.

Before After Galleryportfolio-pro-gallery-sections-before-after-galleryThree retouching pairs showing a before and after image side by side with a technical note naming the specific technique applied to each.

Captioned Galleryportfolio-pro-gallery-sections-captioned-galleryFour photographs each paired with a full documentary caption naming where, when, and the story behind how the frame was made.

Columns Galleryportfolio-pro-gallery-sections-columns-galleryA four-column uniform grid of twelve captioned Placeholder tiles showing project name and client for a large body of work.

Contact Sheetportfolio-pro-gallery-sections-contact-sheetA ring framed sheet panel with a roll header above a dense grid of numbered mono frames, two ringed as picks marked for print.

Filmstrip Galleryportfolio-pro-gallery-sections-filmstrip-galleryA horizontally scrolling row of wide film frames with mono frame codes and captions beneath each, plus roll metadata beside the heading.

Frame Studyportfolio-pro-gallery-sections-frame-studyA single frame study pairing one large photograph with its title, story, and a bordered list of camera, exposure, film, and print details.

Full Bleed Galleryportfolio-pro-gallery-sections-full-bleed-galleryFour large edge-to-edge images stacked vertically with a sentence caption and location plus date beside each frame for immersive editorial presentation.

Full Width Rowsportfolio-pro-gallery-sections-full-width-rowsLarge images stacked at full container width with a title, a context-naming caption, and a two-digit series counter beneath each.

Grid With Filtersportfolio-pro-gallery-sections-grid-with-filtersA client-rendered gallery with category chips that filter image tiles via useState and a live count showing how many images are visible.

Index Preview Galleryportfolio-pro-gallery-sections-index-preview-galleryA numbered list of works with medium and year on the left beside a large preview of the highlighted row with its caption and counter.

Lightbox Blueprintportfolio-pro-gallery-sections-lightbox-blueprintA static open-state lightbox layout showing a centered large image with prev/next controls, a frame counter, caption, and thumbnail strip over a dark scrim.

Mosaic Galleryportfolio-pro-gallery-sections-mosaic-galleryA mosaic gallery with one large anchor frame spanning two columns and two rows beside eight square supporting tiles, above a view all link.

Photo Gridportfolio-pro-gallery-sections-photo-gridA three-column grid of nine square photography frames with hover captions showing location, date, and subject for each shot.

Photo Masonryportfolio-pro-gallery-sections-photo-masonryA CSS-columns masonry gallery of twelve Placeholder images in mixed aspect ratios that form a dense visual wall of travel photography.

Spotlight Galleryportfolio-pro-gallery-sections-spotlight-galleryA large main image with a captioned location and date above a five-thumbnail strip with the active selection ringed.

Thumbnail Stripportfolio-pro-gallery-sections-thumbnail-stripA compact responsive grid of square Placeholder thumbnails labelled with a series name and year for browsing a photographic archive.

Triptych Galleryportfolio-pro-gallery-sections-triptych-galleryA triptych gallery where each work is a row of three tall panels under a title and edition line, with one shared caption beneath.

Two Up Galleryportfolio-pro-gallery-sections-two-up-galleryAn editorial two-column image layout pairing photographs by series with title and medium captions beneath each image.

Year Archive Galleryportfolio-pro-gallery-sections-year-archive-galleryWork grouped into bordered rows by year, each pairing a large year heading, frame count, and note with a four image row of selects.

Availability Heroportfolio-pro-hero-sections-availability-heroA freelancer hero that centres a card showing the next open project slot, the slot count, and the typical engagement length beside a get-in-touch action.

Awards Heroportfolio-pro-hero-sections-awards-heroSplit hero with a first person intro and actions beside a two by two grid of award cells, each naming the issuer, honour, and year.

Big Type Heroportfolio-pro-hero-sections-big-type-heroA fold-filling hero that renders the name at oversized typographic scale with a discipline line, lede, two actions, and a three-cell grounding facts grid.

Career Timeline Heroportfolio-pro-hero-sections-career-timeline-heroA split hero with name, lede, actions, and availability note beside a bordered timeline panel listing each chapter with years, role, and detail.

Centered Statement Heroportfolio-pro-hero-sections-centered-statement-heroA symmetric portfolio opener with everything centered around a single strong positioning sentence, a quiet role lede, and one action button.

Client Quote Heroportfolio-pro-hero-sections-client-quote-heroA hero with name, role lede, and two actions above a full width client quote strip carrying the quote, an avatar, and attribution.

Cta Focused Heroportfolio-pro-hero-sections-cta-focused-heroA conversion-first hero with a single confident headline, a start-a-project button, and a four-figure trust signal strip at the base of the fold.

Featured Case Heroportfolio-pro-hero-sections-featured-case-heroA split hero with name, positioning lede, detail strip, and actions beside a single featured case study panel showing a thumbnail and outcome rows.

Hero With Marqueeportfolio-pro-hero-sections-hero-with-marqueeA fold-filling hero with a declarative h1, lede, two actions, a static row of service chips as a skills strip, and a three-cell availability facts grid.

Inquiry Form Heroportfolio-pro-hero-sections-inquiry-form-heroSplit hero with a first person invitation and expectations strip on the left beside a labelled inquiry form for name, email, company, and project.

Intro Paragraph Heroportfolio-pro-hero-sections-intro-paragraph-heroA hero that opens with a first-person paragraph above the name and headline, followed by a single action button and a three-field detail strip.

Intro With Socialsportfolio-pro-hero-sections-intro-with-socialsA personal portfolio hero with a name, role lede, two actions, and a branded social icon row that moves profile links into the first viewport.

Left Aligned Heroportfolio-pro-hero-sections-left-aligned-heroA left-anchored editorial hero with name and role in the h1, a studio lede, two actions, and a four-row ruled metadata strip covering role, studio, availability, and clients.

Minimal Name Heroportfolio-pro-hero-sections-minimal-name-heroA fully reduced centered hero with the name in the h1, a role line below it, and a small set of plain text navigation links and nothing else.

Name And Role Heroportfolio-pro-hero-sections-name-and-role-heroA name and role hero with a positioning line, a three fact strip, and an honest availability note.

Photo Grid Heroportfolio-pro-hero-sections-photo-grid-heroA hero built around a 2x2 photo tile grid with the photographer name and credential facts in a height-balanced side panel.

Portrait Right Heroportfolio-pro-hero-sections-portrait-right-heroA split hero with a name, lede, actions, and three grounding facts on the left beside a tall portrait placeholder on the right.

Process Steps Heroportfolio-pro-hero-sections-process-steps-heroA hero with a first person intro, lede, and two actions above a numbered three step strip showing how an engagement runs end to end.

Project Index Heroportfolio-pro-hero-sections-project-index-heroEditorial index hero with a name and positioning intro above a ruled, text only list of selected projects showing number, title, client, discipline, and year.

Quote Heroportfolio-pro-hero-sections-quote-heroA hero that opens with a craft philosophy sentence as the heading and the practitioner name and studio in a quieter line below.

Role And Clients Heroportfolio-pro-hero-sections-role-and-clients-heroA portfolio hero that pairs a name and role statement with an inline row of past client wordmarks placed between the lede and the action buttons.

Scrolling Roles Heroportfolio-pro-hero-sections-scrolling-roles-heroA hero that stacks every discipline this person works in as a static role list with one role emphasised and a facts panel beside it.

Service Menu Heroportfolio-pro-hero-sections-service-menu-heroSplit hero pairing a first person intro and availability facts with a bordered service menu panel listing each offering, its scope, and starting price.

Split Portrait Heroportfolio-pro-hero-sections-split-portrait-heroA two-column hero with a name, positioning lede, and ruled availability strip on the left and an aspect-4/5 portrait placeholder on the right.

Statement Heroportfolio-pro-hero-sections-statement-heroA stripped-back hero with one confident h1 sentence, a single lede, and one primary action directing visitors to the work.

Studio Heroportfolio-pro-hero-sections-studio-heroA small-agency opener with a studio name, a we-voice lede naming what the team does not offer, two actions, and a three-fact founding strip.

Two Disciplines Heroportfolio-pro-hero-sections-two-disciplines-heroA hero for a dual-practice creator with an h1 naming both disciplines, a lede connecting them, and two cards each pointing at one body of work.

Video Reel Heroportfolio-pro-hero-sections-video-reel-heroA hero that leads with a large video frame and play affordance, then names the director and their availability below it.

Work Preview Heroportfolio-pro-hero-sections-work-preview-heroA hero that leads with the name and role then immediately shows three labelled work thumbnails with role and year below each.

Album Featureportfolio-pro-music-audio-album-featureA split layout pairing a large Placeholder album cover with a full ruled tracklist, meta line, short release note, and platform links.

Booking Panelportfolio-pro-music-audio-booking-panelA live booking split pairing a ruled list of set formats with a details card of availability, a rider link, and a request button.

Discography Gridportfolio-pro-music-audio-discography-gridA six-album grid with Placeholder covers, titles, years, and track counts spanning a full catalogue from debut to latest release.

Gig Listportfolio-pro-music-audio-gig-listUpcoming shows as ruled rows with date, venue, city, and a tickets link, followed by muted past shows as an archive beneath.

Listen Cardportfolio-pro-music-audio-listen-cardA featured track card with a Placeholder cover, static div-bar waveform in theme tokens, and text links to four streaming platforms.

Live Sessionsportfolio-pro-music-audio-live-sessionsA three card grid of filmed live sessions, each with a still, song title, venue and year line, and a watch link with duration.

Music Heroportfolio-pro-music-audio-music-heroA fold-filling hero with a sentence h1, album lede, play and releases CTAs, a three-stat strip, and a Placeholder album cover beside it.

Press Kitportfolio-pro-music-audio-press-kitA press kit section pairing an approved short bio and press pull quotes with two photos and a ruled list of downloadable assets.

Releases Rowportfolio-pro-music-audio-releases-rowA four-column grid of recent album and EP cards each with a Placeholder cover, title, year, format, and a listen link.

Session Creditsportfolio-pro-music-audio-session-creditsA ruled credit table listing year, artist and record, and role for each session, closed by an availability note and a full credits link.

Song Storyportfolio-pro-music-audio-song-storyA two column split pairing a lyric excerpt card with the written story of a song, closed by a ruled credits list and a listen link.

Streaming Statsportfolio-pro-music-audio-streaming-statsA four stat strip of listener and stream totals above a split of most streamed tracks with bars and a ranked list of top cities.

Studio Servicesportfolio-pro-music-audio-studio-servicesThree service cards for mixing, mastering, and production, each with a rate, a checklist of what is included, and a turnaround line.

Sync Placementsportfolio-pro-music-audio-sync-placementsSelected sync licensing credits in three columns for film and television, advertising, and games, each a ruled list with a licensing link below.

Track Listportfolio-pro-music-audio-track-listA ruled list of ten tracks with tabular-numeral durations, track numbers, and a static play affordance for an album or EP.

Announcement Bar Navportfolio-pro-navbars-announcement-bar-navA header topped by an inverse announcement strip with a booking note, inline arrow link, and dismiss button, above the name mark and page links.

Centered Navportfolio-pro-navbars-centered-navAn editorial header with the name mark pinned to the absolute center and two nav links split symmetrically on each side.

Compact Navportfolio-pro-navbars-compact-navA slim 12-unit header with a name mark on the left and three minimal text links on the right, nothing else.

Divided Navportfolio-pro-navbars-divided-navFull width header where the name mark and each page link occupy their own border separated cell, ending in a solid inverse contact cell.

Logo Center Navportfolio-pro-navbars-logo-center-navA navbar with the name mark centered and two navigation links flanking it on each side, plus a contact button on the far right.

Mega Panel Navportfolio-pro-navbars-mega-panel-navA desktop header shown with its Work menu open, a full width panel laying out three category cards with thumbnails, counts, and a footer row.

Minimal Name Navbarportfolio-pro-navbars-minimal-name-navbarA minimal personal-site header with the name mark on the left and three nav links on the right, nothing else.

Name And Menuportfolio-pro-navbars-name-and-menuA mobile-first header shown in its open-menu state with four large stacked links and zero-padded index numbers.

Nav With Availability Dotportfolio-pro-navbars-nav-with-availability-dotA navbar with name, centred links, and a pulsing emerald dot beside an availability month label on the right.

Nav With Ctaportfolio-pro-navbars-nav-with-ctaA conversion header with the name mark, three nav links, and a primary Get in touch button on the right.

Nav with Location and Timeportfolio-pro-navbars-nav-with-location-timeHeader with a name mark on the left, centered page links, and a location readout showing the city and a local time label on the right.

Nav With Resumeportfolio-pro-navbars-nav-with-resumeA site header with a name mark and nav links on the left and a download CV button on the right for portfolios where recruiters need direct resume access.

Nav With Socialsportfolio-pro-navbars-nav-with-socialsA connected header with the name mark and nav links on the left and a row of GitHub, LinkedIn, and Instagram icon links on the right.

Nav With Theme Toggleportfolio-pro-navbars-nav-with-theme-toggleA navbar with the name mark on the left, four nav links in the center, and a static sun and moon theme toggle button on the right.

Numbered Navportfolio-pro-navbars-numbered-navHeader with a name mark on the left, horizontal links each carrying a zero padded index number, and a small index caption on the right.

Pill Links Navportfolio-pro-navbars-pill-links-navHeader with a name mark, page links inside a bordered rounded pill segmented control with the active one highlighted, and a quiet arrow link.

Side Rail Navportfolio-pro-navbars-side-rail-navA fixed left rail with the name mark and role, stacked section links with an active highlight, and a bottom row of social icons.

Sticky Minimal Navportfolio-pro-navbars-sticky-minimal-navA slim sticky header with frosted background, the name mark, three nav links, and an emerald availability dot.

Transparent Navportfolio-pro-navbars-transparent-navA background-free header with the studio name on the left and anchor links on the right, designed to float over a hero section.

Two Row Navportfolio-pro-navbars-two-row-navA stacked two-row header with the name and social icons on the top row and a six-link section nav on the second row for content-rich portfolios.

Underline Tabs Navportfolio-pro-navbars-underline-tabs-navA header whose page links behave like full height tabs, the active one carrying a bottom border that sits flush against the header rule.

Wide Navportfolio-pro-navbars-wide-navA full-width header with the name mark on the left, five centred navigation links, and a contact button on the right in a generous 16-unit bar.

Author Noteportfolio-pro-newsletter-sections-author-noteCentered newsletter signup framed as a first person letter in a bordered note, signed with avatar, name, and role above a labeled email form.

Centered Signupportfolio-pro-newsletter-sections-centered-signupA centered heading, pitch, and email-and-button form with a cadence note naming the send dates, frequency, and unsubscribe policy.

Greatest Hitsportfolio-pro-newsletter-sections-greatest-hitsCentered newsletter signup leading with a two by two grid of the most opened issues, each with a topic badge, summary, and open rate.

Inbox Previewportfolio-pro-newsletter-sections-inbox-previewA two column newsletter signup pairing a pitch and labeled email form with a drawn inbox mockup listing five recent issues by subject and date.

Inline Newsletter Bandportfolio-pro-newsletter-sections-inline-newsletter-bandA slim bordered subscribe band with a one-line pitch and inline email input designed for mid-page placement between content sections.

Issue Anatomyportfolio-pro-newsletter-sections-issue-anatomyTwo column newsletter signup pairing a pitch and labeled email form with a numbered breakdown of the four recurring segments, each with a read time.

Latest Issueportfolio-pro-newsletter-sections-latest-issueA two-column block showing a preview card of the most recent newsletter issue beside a subscribe form with cadence note.

Newsletter FAQportfolio-pro-newsletter-sections-newsletter-faqA two column newsletter signup pairing the pitch and labeled email form with a bordered list of five short questions and plain answers.

Newsletter Featureportfolio-pro-newsletter-sections-newsletter-featureA two-column newsletter signup with value props and cadence on the left and recent issue previews on the right.

Newsletter Signupportfolio-pro-newsletter-sections-newsletter-signupA newsletter signup section with a heading, a one-sentence pitch, an email and subscribe form, and an exact cadence note naming the send dates.

Newsletter Statsportfolio-pro-newsletter-sections-newsletter-statsA two-column newsletter signup block pairing an email form with three proof figures including subscriber count, open rate, and issues published.

Newsletter Tiersportfolio-pro-newsletter-sections-newsletter-tiersA two tier newsletter signup pairing side by side Reader and Supporter cards, one carrying the email form and the other a feature list.

Newsletter With Archiveportfolio-pro-newsletter-sections-newsletter-with-archiveA newsletter signup block that lists the three most recent issues as titled linked rows before showing the subscribe form, letting visitors sample the content first.

Reader Quotesportfolio-pro-newsletter-sections-reader-quotesA centered newsletter signup above a three card row of short reader quotes, each attributed with avatar art, a name, and a role.

Sidebar Subscribeportfolio-pro-newsletter-sections-sidebar-subscribeA compact subscribe card sized for a sidebar with a short pitch, email form, and subscriber count.

Simple Subscribeportfolio-pro-newsletter-sections-simple-subscribeA minimal horizontal band with a single line of copy and an inline email input and subscribe button, sized for placement directly above a footer.

Split Newsletterportfolio-pro-newsletter-sections-split-newsletterA two-column block with the pitch and four dated recent issue titles on the left and a signup form card with cadence and reader count on the right.

Subscribe Cardportfolio-pro-newsletter-sections-subscribe-cardA compact bordered card with a newsletter pitch, a subscriber count and frequency stats strip, and an email form sized for a sidebar or narrow column.

Topic Pickerportfolio-pro-newsletter-sections-topic-pickerCentered newsletter signup card with a checkbox list of three letters, each with a description and cadence, above a labeled email form.

App Defaultsportfolio-pro-now-uses-app-defaultsTwo ruled columns pairing twenty everyday categories with the single app that wins each job, a dot flagging any default changed this year.

Currently Cardportfolio-pro-now-uses-currently-cardA compact ruled card of six status rows covering building, reading, listening, learning, availability, and location as a live snapshot.

Desk Tourportfolio-pro-now-uses-desk-tourSplit desk tour pairing a square workspace photo with six numbered callout rows naming each item and the reason it earned its place.

Gear Listportfolio-pro-now-uses-gear-listKit organised into category groups as cards with a placeholder visual, a model name, and a sentence on why each piece earned its place.

Learning Logportfolio-pro-now-uses-learning-logVertical timeline of five skills with month stamps, status badges covering progress and pauses, and short notes on what each skill changed.

Media Dietportfolio-pro-now-uses-media-dietFour category cards for listening, watching, playing, and following, each holding three titled items with meta notes and one highlighted pick.

Now Archiveportfolio-pro-now-uses-now-archiveDated snapshots of a now page, each pairing a date column with a three column panel of what started, stopped, and kept going.

Now Pageportfolio-pro-now-uses-now-pageA dated snapshot across Work, Learning, and Life sections with specific items so the page reads as a live signal rather than a static bio.

Paid Toolsportfolio-pro-now-uses-paid-toolsRuled rows of the subscriptions behind an independent practice, each showing the tool, its plan, a monthly price, closing on a total row.

Reading Listportfolio-pro-now-uses-reading-listBooks listed as ruled rows with title, author, a one-line connection to current practice, and a reading, finished, or queued status badge.

Uses Pageportfolio-pro-now-uses-uses-pageDaily gear and software listed across Desk Setup, Software, and Everyday Carry groups, each item with a model name and a one-line why.

Category Tilesportfolio-pro-photography-category-tilesA browse-by-genre block with 4 Placeholder tiles for Portrait, Landscape, Street, and Studio, each labelled with a genre name, image count, and a hover descriptor.

Commission Briefportfolio-pro-photography-commission-briefThree commission types with day rates and inclusions beside a booking panel walking four steps from enquiry to delivery with an availability note.

Contact Sheetportfolio-pro-photography-contact-sheetA proof-sheet block with 12 small Placeholder frames in a dense grid labelled by roll and frame number, with a footer naming the camera, film stock, and lab.

Edit Breakdownportfolio-pro-photography-edit-breakdownThe raw scan and final print file side by side, four numbered edit steps, and a closing note on what the retouching never includes.

Exhibition Historyportfolio-pro-photography-exhibition-historyTwo ruled lists set side by side, selected exhibitions with venue, city, and year beside publications naming each outlet, piece, and date.

Full Bleed Setportfolio-pro-photography-full-bleed-setA full-bleed editorial photo set with 3 edge-to-edge Placeholder images and ruled caption rows carrying location, date, and a field note between each frame.

Photo Aboutportfolio-pro-photography-photo-aboutA photographer profile split with a Placeholder portrait beside a bio, three approach sections, and a gear table.

Photo Bookportfolio-pro-photography-photo-bookA book cover and three spread thumbnails beside the monograph story, a full specifications table, a stockist list, and a direct order button.

Photo Heroportfolio-pro-photography-photo-heroA fold-filling photography hero with a large Placeholder image above a two-column text panel carrying the photographer name, focus, commission note, and a four-row meta strip.

Print Pricingportfolio-pro-photography-print-pricingA photography print pricing block listing multiple series as cards with size and price tables, edition counts, remaining inventory, and framing notes.

Print Shopportfolio-pro-photography-print-shopA print sales block with 4 limited-edition print cards each showing a Placeholder image, a size-to-price table, edition size, and an honest shipping and duties note.

Series Featureportfolio-pro-photography-series-featureA photography series feature with a large lead frame, a four-still strip with location captions, and a series note naming the shooting constraint and frame count.

Series Gridportfolio-pro-photography-series-gridA photo series grid showing 6 Placeholder images grouped under a series title, year span, and intro paragraph with per-frame location captions.

Shoot Detailportfolio-pro-photography-shoot-detailA single-shoot case block with a lead Placeholder image, a one-sentence brief, a ruled meta strip of six rows, and a supporting row of three smaller frames.

Two Column Photosportfolio-pro-photography-two-column-photosA two-column photo layout with six captioned frames at mixed aspect ratios that lets a photographer contrast subject, light, or location side by side.

About Pageportfolio-pro-prebuilt-pages-about-pageA full about page composing a long form personal story, skills list, process steps, and testimonial cards into one ready to deploy page.

Contact Pageportfolio-pro-prebuilt-pages-contact-pageA minimal contact page composing a split section that shows the inquiry form and contact details side by side without scrolling.

Developer Pageportfolio-pro-prebuilt-pages-developer-pageA full developer portfolio page composing a terminal intro hero, project repos, tech stack detail, and contact footer from sibling blocks.

Freelancer Pageportfolio-pro-prebuilt-pages-freelancer-pageA full freelancer hire-me page composing an availability hero with a next opening month, services list, featured work grid, hire me band, and contact footer from sibling blocks.

Home Pageportfolio-pro-prebuilt-pages-home-pageA full portfolio homepage composing a name and role hero, featured work grid, about split, testimonial cards, and hire me band into one ready to deploy page.

Link In Bio Pageportfolio-pro-prebuilt-pages-link-in-bio-pageA minimal two-block link-in-bio page composing the link-in-bio social links block and a minimal signoff footer for a single-URL creator landing page.

Photographer Pageportfolio-pro-prebuilt-pages-photographer-pageA full photographer portfolio page composing a photo hero, series grid, print shop, and contact footer from sibling blocks.

Project Pageportfolio-pro-prebuilt-pages-project-pageA full case study page composing a project hero, problem and approach split with a named constraint, and a quantified results band.

Services Pageportfolio-pro-prebuilt-pages-services-pageA full services page composing a scoped services list, engagement cards with rates, process steps, and a hire me band into one ready to deploy page.

Studio Pageportfolio-pro-prebuilt-pages-studio-pageA full studio site page composing a studio hero, named team grid, services list with explicit exclusions, and contact footer from sibling blocks.

Work Pageportfolio-pro-prebuilt-pages-work-pageA dedicated work page composing a featured work grid and masonry grid with a hire me band so visitors see selected and full work in one flow.

Writer Pageportfolio-pro-prebuilt-pages-writer-pageA full writer portfolio page composing a writing hero, featured essay, published list, publications wall, and contact footer from sibling blocks.

Brand Bioportfolio-pro-press-kit-brand-bioThree approved bio lengths in copyable cards with word counts, followed by a key facts list for journalists to cite without follow-up.

By the Numbersportfolio-pro-press-kit-by-the-numbersHeading and lede above a hairline grid of eight large stat tiles with labels and notes, closed by a verification footnote.

Download Rowportfolio-pro-press-kit-download-rowA compact border-y strip of outline download buttons each labelled with file format and tabular size for press kit, CV, brand guide, logo pack, and case studies.

Headshot Galleryportfolio-pro-press-kit-headshot-galleryHeading with a download button, three headshot crops in a grid with resolution and use captions, and a required photo credit panel.

Interview Topicsportfolio-pro-press-kit-interview-topicsSix numbered cards pitching subjects a founder can speak about, with a formats band covering podcasts, panels, and written Q&A.

Logo Guidelinesportfolio-pro-press-kit-logo-guidelinesWordmark demo tiles on plain and reversed surfaces with size and format specs beside ruled lists of approved and prohibited uses.

Media Assetsportfolio-pro-press-kit-media-assetsA four-card grid of downloadable brand assets each showing a Placeholder preview, a format and resolution note, a file size, and a download button.

Press FAQportfolio-pro-press-kit-press-faqTwo column press FAQ with a heading and response time list beside an accordion answering the questions journalists ask before covering a studio.

Press Inquiryportfolio-pro-press-kit-press-inquiryTwo column press inquiry with a heading and what to include checklist beside a labeled contact form for outlet, deadline, and request.

Press Kit Pageportfolio-pro-press-kit-press-kit-pageA consolidated press section with a studio bio, five key facts, three downloadable assets with format notes, and a press contact card.

Press Mentionsportfolio-pro-press-kit-press-mentionsA ruled list of editorial coverage showing publication name, article headline, date, and an external read link for each mention.

Quick Factsportfolio-pro-press-kit-quick-factsA ruled definition list of ten key editorial facts covering name, location, focus, notable work, and a clickable press contact email.

Add-On Pricingportfolio-pro-pricing-sections-add-on-pricingTwo category panels list a la carte extras as divided rows, each pairing a name and one line description with a plainly stated price.

Budget Guideportfolio-pro-pricing-sections-budget-guideThree stacked budget bands pair a price range and engagement with a good fit list and a keep in mind list, the middle band flagged.

Hourly Rate Cardportfolio-pro-pricing-sections-hourly-rate-cardAn hourly rate stated plainly with included and excluded item columns, a four-hour minimum, and a ruled list of three scenarios where hourly billing makes more sense than a fixed scope.

Package Comparisonportfolio-pro-pricing-sections-package-comparisonA three-package comparison table with Check and Minus feature rows, prices, and per-package CTAs in a scrollable layout.

Payment Scheduleportfolio-pro-pricing-sections-payment-scheduleThree numbered payment stages with percentage splits sit beside a worked example panel that breaks a project fee into three payments with terms.

Pricing Tiersportfolio-pro-pricing-sections-pricing-tiersThree package cards with price-from amounts, durations, and included item lists, with a recommended tier highlighted and an honest scoping note below the grid.

Pricing With Faqportfolio-pro-pricing-sections-pricing-with-faqTwo tier cards with from prices and included lists beside three plainly answered pricing questions that remove common objections.

Project Estimate Cardportfolio-pro-pricing-sections-project-estimate-cardSix common project types as ruled table rows showing price bands and timelines, with scope assumptions per row and an honest note that all figures are starting points.

Rate and FAQportfolio-pro-pricing-sections-rate-and-faqA prominent day rate panel with a breakdown of half-day and retainer rates beside three plain-answer billing FAQ pairs.

Retainer Pricingportfolio-pro-pricing-sections-retainer-pricingThree monthly retainer cards with hour counts, prices, and cover items, plus a ruled panel explaining minimum terms, hour rollover policy, and when to switch off a retainer.

Simple Rate Bandportfolio-pro-pricing-sections-simple-rate-bandA minimal pricing block with three from-price rows and a qualifying note beside a heading and a single contact CTA.

Single Package Cardportfolio-pro-pricing-sections-single-package-cardOne clearly presented package with a from price, a bulleted included list, a not-included list, and a call to action button.

Three Tier Pricingportfolio-pro-pricing-sections-three-tier-pricingThree project tiers with from-prices, durations, and feature checklists where the middle tier is marked Recommended.

Usage Licensingportfolio-pro-pricing-sections-usage-licensingA formula strip showing creation fee times usage multiplier equals final fee sits above four license tier cards, closed by notes on exclusivity.

Value Pricing Noteportfolio-pro-pricing-sections-value-pricing-noteA two-column prose block arguing why project pricing beats hourly, with three named reasons on the right and a pair of actions linking to a quote and the hourly rate.

Whats Included Cardportfolio-pro-pricing-sections-whats-included-cardSide-by-side included and not-included cards for a design package, followed by a ruled assumptions panel covering brief quality, feedback rounds, content readiness, and stakeholder access.

Checklist Processportfolio-pro-process-sections-checklist-processFour project stages in a two-column card grid each listing the deliverables as checked items so scope is unambiguous.

Discovery Call Stepsportfolio-pro-process-sections-discovery-call-stepsA first-call explainer listing the four agenda items of a free 30-minute discovery call alongside a fact strip covering duration, format, cost, and commitment.

Engagement Flowportfolio-pro-process-sections-engagement-flowFive steps from first call to handoff presented as a two-column you and me table that names the mutual responsibilities at every stage.

Four Step Processportfolio-pro-process-sections-four-step-processA four-step process block showing Discover, Define, Design, and Deliver as numbered cards, each with a plain sentence describing the work at that stage.

Handoff Checklistportfolio-pro-process-sections-handoff-checklistA checked list of six deliverables the client receives at project close alongside a ruled notes strip and a card naming what the handoff does not include.

Horizontal Stepsportfolio-pro-process-sections-horizontal-stepsA centered heading above four numbered steps on a connected rail, each marker with a title and short description that stacks on small screens.

How I Work Stepsportfolio-pro-process-sections-how-i-work-stepsFour numbered cards each naming a stage title, what happens, and the concrete artifact the client receives at the close of that stage.

Numbered Processportfolio-pro-process-sections-numbered-processThree large-numbered phase cards showing Discover, Make, and Ship with a description and typical duration for each phase.

Phase Allocationportfolio-pro-process-sections-phase-allocationA heading and intro above a segmented proportional bar, with a ruled legend listing each phase, its percentage share, and what the time buys.

Phases Gridportfolio-pro-process-sections-phases-gridFour project phases in a two-column card grid, each card naming what happens, the concrete deliverable, and the typical duration.

Principles Processportfolio-pro-process-sections-principles-processA principles-led process block presenting three working principles as wide cards, each with an explanatory sentence and an explicit named tradeoff.

Process Comparisonportfolio-pro-process-sections-process-comparisonA heading and intro above a two column comparison table, contrasting the usual studio approach with how I work across five ruled aspect rows.

Process With Deliverablesportfolio-pro-process-sections-process-with-deliverablesFour stage cards each split into a process description on the left and the named artifact it produces on the right, from the brief to the spec.

Revision Roundsportfolio-pro-process-sections-revision-roundsA heading and intro above three feedback round cards, each naming its scope and an example note, plus a two panel footer on process.

Three Phase Processportfolio-pro-process-sections-three-phase-processA two-column split with design philosophy and three belief statements on the left and three numbered phases as a ruled list on the right.

Timeline Processportfolio-pro-process-sections-timeline-processA vertical timeline rail with five milestones each carrying a week range, day count, and the exact deliverable produced at that stage.

Timeline With Artportfolio-pro-process-sections-timeline-with-artA four-step vertical timeline with a Placeholder thumbnail per step and a named deliverable line under each description.

Two Column Processportfolio-pro-process-sections-two-column-processA working philosophy in three paragraphs on the left balanced against four numbered process steps in a ruled card on the right.

Vertical Stepsportfolio-pro-process-sections-vertical-stepsFive numbered stages stacked in a ruled list each with a title and a description that names a concrete commitment.

Working Together Stepsportfolio-pro-process-sections-working-together-stepsA day-by-day breakdown of the first two weeks with honest expectations listed beside the Week 1 and Week 2 ruled day cards.

Before After Cardportfolio-pro-project-cards-before-after-cardTwo redesign cards in a grid, each pairing captioned before and after thumbnails side by side with a name, meta line, and result figure.

Bordered Project Cardportfolio-pro-project-cards-bordered-project-cardA bordered card grid showing project thumbnails with name, role, year, skill tags, and a view link per entry.

Case Study Cardportfolio-pro-project-cards-case-study-cardA project teaser card showing a Placeholder image, a one-line problem statement, a headline result figure, and a read-case-study link.

Compact Grid Cardportfolio-pro-project-cards-compact-grid-cardA dense four-column archive grid showing eight project thumbnails each with a name and year in a tight baseline row.

Duo Tone Cardportfolio-pro-project-cards-duo-tone-cardA project card grid where each tile pairs a thumbnail with a muted caption panel in a contrasting surface tone, no gradient.

Featured Project Cardportfolio-pro-project-cards-featured-project-cardA single project given full-width treatment with a wide aspect-16/10 Placeholder, a heading-scale project name, a two-sentence description naming the problem and outcome, and a view-case link.

Hover Reveal Cardportfolio-pro-project-cards-hover-reveal-cardA project card rendered in its revealed state as a blueprint, showing the name, role, and arrow in an overlay strip with an outcome caption and year below the image.

Image Stack Cardportfolio-pro-project-cards-image-stack-cardA project card showing two or three Placeholder images layered at offsets to suggest depth, with the project name and role below.

Minimal List Cardportfolio-pro-project-cards-minimal-list-cardProjects as quiet ruled rows with a small thumb, name, role, and year, for a text forward work index.

Minimal Project Cardportfolio-pro-project-cards-minimal-project-cardA four-up project grid with a portrait Placeholder image, project name, and a single muted role line per card, nothing else.

Next Project Teaserportfolio-pro-project-cards-next-project-teaserA full-width bordered band at the foot of a case study page with a Placeholder thumbnail, the next project name and meta, a forward link, and a back-to-all link.

Numbered Project Cardportfolio-pro-project-cards-numbered-project-cardA vertical project stack where each entry is led by a large muted editorial index number beside a Placeholder image with the name, role, and year below.

Overlay Caption Cardportfolio-pro-project-cards-overlay-caption-cardA two-column project grid where each full-bleed thumbnail carries a frosted bottom strip naming the project and role.

Project Card With Tagsportfolio-pro-project-cards-project-card-with-tagsA two-column project grid where each card carries a Placeholder image, name, a one-line problem description, and a row of small skill and category chips.

Project List Rowportfolio-pro-project-cards-project-list-rowA ruled divided list where each project appears as a row with a small square thumbnail, name, client type, role, year in tabular numerals, and an arrow.

Quote Project Cardportfolio-pro-project-cards-quote-project-cardTwo project cards in a grid, each pairing a thumbnail with a short client quote attributed by avatar, name, role, and a view link.

Split Project Cardportfolio-pro-project-cards-split-project-cardA full-width horizontal card featuring one project with a Placeholder on the left and the name, description, discipline tags, and a case study link on the right.

Stat Project Cardportfolio-pro-project-cards-stat-project-cardAn imageless three column grid where each card leads with a large metric and context line, then the project name, meta, summary, and link.

Tag Heavy Cardportfolio-pro-project-cards-tag-heavy-cardA three-column project grid where each card leads with a prominent row of skill and tool tags before the description, for technical work where the stack signals as much as the outcome.

Tall Project Cardportfolio-pro-project-cards-tall-project-cardA four-column grid of portrait-format project cards each showing a Placeholder at aspect-4/5 with the name, role, and a concrete two-sentence outcome description below.

Text Only Cardportfolio-pro-project-cards-text-only-cardA typographic work index of ruled rows, each naming the project, role, year, and a one-sentence outcome with no thumbnail.

Timeline Project Cardportfolio-pro-project-cards-timeline-project-cardA vertical rail grouped by year, each project a compact row with a square thumbnail, name, role, and a one line outcome.

Wide Project Rowportfolio-pro-project-cards-wide-project-rowA full-width bordered project row with a Placeholder on one side and the name, description, tags, and view link on the other.

Year Badge Cardportfolio-pro-project-cards-year-badge-cardA project card grid with a pill chip marking the year on each thumbnail, plus the project name, client type, and role below.

Certifications and Awardsportfolio-pro-resume-cv-certifications-awardsA heading and intro above two ruled lists in a grid, one for certifications with issuer and ID, one for awards with presenter and note.

Compact Resumeportfolio-pro-resume-cv-compact-resumeA tight single-column CV with a positioned summary, three bulleted roles, and a two-column skills and education grid.

Cover Letterportfolio-pro-resume-cv-cover-letterA centered letter with a name and contact letterhead, date and recipient lines, three body paragraphs, a signed sign off, and an enclosures footer.

Cv Download Bandportfolio-pro-resume-cv-cv-download-bandA slim card showing the last updated date beside a Download CV button for the linked PDF resume.

Cv Headerportfolio-pro-resume-cv-cv-headerA print-friendly CV header band showing name large, title, and an inline contact and social strip with email, location, site URL, and brand icon social links.

Download Cv Cardportfolio-pro-resume-cv-download-cv-cardA bordered card with a heading, a one-line document description, a last-updated date, a primary download PDF button, and a secondary view-online text link.

Education Listportfolio-pro-resume-cv-education-listA ruled list of education entries showing institution, qualification, year range, and an optional contextual note per row.

Experience Timelineportfolio-pro-resume-cv-experience-timelineA vertical work history timeline listing four roles most recent first, each with company, title, date range, a short description, and a concrete result set off by a left border rule.

Printable CVportfolio-pro-resume-cv-printable-cvA single-column CV with a contact header, experience, education, and grouped skills sections optimised for both screen and print.

Publications and Talksportfolio-pro-resume-cv-publications-talksA heading and intro above a single ruled list of writing and speaking, each row with a year, title, venue, and a format badge.

References Rowportfolio-pro-resume-cv-references-rowA heading and intro above three reference cards, each with an avatar, name, role, a note, and a relationship and overlap meta footer.

Resume Summaryportfolio-pro-resume-cv-resume-summaryA CV opener with a name and title header, a two-sentence professional summary, and a three-cell quick-facts strip covering location, years of experience, and primary focus area.

Resume With Photoportfolio-pro-resume-cv-resume-with-photoA CV header pairing a square Placeholder portrait with the name, contact details, and summary before experience and skills follow below.

Skills And Tools Cvportfolio-pro-resume-cv-skills-and-tools-cvA ruled skills table grouping six disciplines with a proficiency level label and chip tags so a hiring manager can scan breadth in one pass.

Skills Resumeportfolio-pro-resume-cv-skills-resumeA resume skills section presenting four skill categories as chip rows in a two-column grid, each with a short proficiency note and no bar charts or percentage scores.

Timeline Resumeportfolio-pro-resume-cv-timeline-resumeA vertical connected timeline of four career roles with company, title, period, and bullet outcomes for a resume or about page.

Two Column Resumeportfolio-pro-resume-cv-two-column-resumeA two-column CV with a main experience and education column and a fixed sidebar for skills, contact, and brand icon links.

Availability Servicesportfolio-pro-services-sections-availability-servicesA services block that leads with a four-row availability table showing current status and next opening before the services detail.

Capabilities Gridportfolio-pro-services-sections-capabilities-gridSix capability tiles in a three-column grid each with a label and one sentence describing the concrete output, suited to generalist or multi-discipline practices.

Detailed Service Listportfolio-pro-services-sections-detailed-service-listA ruled two-column services layout with a scope paragraph and a bulleted deliverables list per service.

Engagement Comparisonportfolio-pro-services-sections-engagement-comparisonA heading and intro above a scrollable table that compares three engagement types row by row across fit, length, communication, and pricing.

Engagement Typesportfolio-pro-services-sections-engagement-typesThree ways to work together as cards each showing a commitment level, a summary, and a fit line naming the ideal client situation.

Icon Services Gridportfolio-pro-services-sections-icon-services-gridA services grid of four cards each with a lucide icon, a service name, and one sentence naming what is included and what is not.

Not Offered Noteportfolio-pro-services-sections-not-offered-noteA ruled list of four things this practice does not offer, each paired with a specific redirect to who can help instead.

Numbered Servicesportfolio-pro-services-sections-numbered-servicesAn editorial services list of large-numbered ruled rows each carrying a service title and a plain description with a stated scope limit.

Packages Overviewportfolio-pro-services-sections-packages-overviewThree engagement package cards showing a starting price, duration, and included items with a written-proposal footnote.

Process And Servicesportfolio-pro-services-sections-process-and-servicesA two-column services block that maps each service to its engagement phase so clients see the flow before they reach out.

Process Services Splitportfolio-pro-services-sections-process-services-splitA two-column block with four services on the left and four numbered process phases on the right showing both the offer and the method.

Service Cardsportfolio-pro-services-sections-service-cardsThree service cards each with a Lucide icon, a one-sentence description, and a bullet list of included deliverables.

Service Detail Splitportfolio-pro-services-sections-service-detail-splitA single service explained in depth with two paragraphs and a six-row deliverables table beside a sticky Placeholder visual.

Service Faq Comboportfolio-pro-services-sections-service-faq-comboA services block with three ruled service rows followed by three direct answers to the questions clients most commonly ask before contacting.

Service Outcomesportfolio-pro-services-sections-service-outcomesA heading and intro above a ruled list of services, each pairing a scope description with a large result stat and its context line.

Service With Pricingportfolio-pro-services-sections-service-with-pricingA ruled list of services each paired with a from-price and a short deliverable list so prospects can self-qualify before reaching out.

Services and CTAportfolio-pro-services-sections-services-and-ctaA two-column block pairing a concise services table on the left with a get-in-touch card on the right that names availability and prompts enquiry.

Services By Audienceportfolio-pro-services-sections-services-by-audienceA heading and intro above three columns, one per client type, each naming who it serves and listing the services most relevant to them.

Services Listportfolio-pro-services-sections-services-listA scannable ruled list of four services each with a title and a sentence describing what the engagement delivers.

Services Tabsportfolio-pro-services-sections-services-tabsA heading and intro above a tabbed explorer where each service tab opens a two column panel with scope, meta rows, and a deliverables list.

Services With Faqportfolio-pro-services-sections-services-with-faqA services block listing four offerings in a ruled table followed by three answered questions clients commonly ask before reaching out.

Three Services Rowportfolio-pro-services-sections-three-services-rowThree equal service cards each with an icon, a name, and a one-sentence scope, giving visitors an instant read of a focused practice.

What I Offerportfolio-pro-services-sections-what-i-offerA two-column split with an intro and honest capacity note on the left and a numbered list of four offerings on the right.

Who I Work Withportfolio-pro-services-sections-who-i-work-withA two-column fit block describing the ideal client by stage and team size alongside an honest list of situations that are a poor fit.

Bestseller Rowportfolio-pro-shop-products-bestseller-rowA four-column strip of top-selling products each with a ranked bestseller badge overlaid on a Placeholder thumbnail and a price.

Digital Downloadsportfolio-pro-shop-products-digital-downloadsA four-card block of downloadable products each showing a Placeholder, format chip, description, price, and an instant-download note.

Featured Productportfolio-pro-shop-products-featured-productA two-column split highlighting one digital product with a Placeholder image, price in tabular-nums, description, and an itemised includes list.

License Tiersportfolio-pro-shop-products-license-tiersThree license cards, each with a name, one time price, scope line, feature checklist, and buy action, the commercial tier flagged as most chosen.

Product Bundleportfolio-pro-shop-products-product-bundleA two column bundle offer: included product tiles with struck prices beside a pricing column showing the combined value, bundle price, and saving.

Product Categoriesportfolio-pro-shop-products-product-categoriesA three-tile category index for a creator shop showing a Placeholder, category name, and product count per format.

Product Comparisonportfolio-pro-shop-products-product-comparisonA comparison table for three packs, with prices as column headers, feature rows mixing counts, text, and check marks, and a buy button row.

Product Detail Cardportfolio-pro-shop-products-product-detail-cardA split single-product view with a Placeholder image, price, plain-language description, an itemised includes list, and a buy action.

Product Gridportfolio-pro-shop-products-product-gridA six-card shop grid listing products with a Placeholder thumbnail, name, from-price, and a format chip for each item.

Product Listportfolio-pro-shop-products-product-listA dense shop list inside one bordered panel, each row with a thumbnail, product name, one line description, format chip, price, and a view action.

Shop Heroportfolio-pro-shop-products-shop-heroA shop opener with a heading, studio lede, and a featured row of three Placeholder product tiles showing name, from-price, and format.

Badge Cloudportfolio-pro-skills-sections-badge-cloudA wrapped chip cloud that renders core disciplines larger and bolder so the primary expertise registers at a glance.

Capability Cardsportfolio-pro-skills-sections-capability-cardsThree capability cards each with a title, a plain-language approach sentence, and a ruled method list covering Product design, Design systems, and Front-end implementation.

Certifications Skillsportfolio-pro-skills-sections-certifications-skillsA two-column card grid pairing four formal credentials with the practical skill chips each one produces so visitors see qualification and capability together.

Core And Toolsportfolio-pro-skills-sections-core-and-toolsA ruled list of core disciplines each with a plain-language description and a chip row of the supporting tools used.

Disciplines Splitportfolio-pro-skills-sections-disciplines-splitThree equal discipline columns for a multi-discipline creative, each with a heading, a grounding sentence, and a ruled skill list covering Brand design, Product design, and Creative direction.

Expertise Barsportfolio-pro-skills-sections-expertise-barsA two-column expertise display with five div proficiency bars filled via theme tokens and plain-language level labels from Foundational to Fluent instead of percentages.

Grouped Tool Gridportfolio-pro-skills-sections-grouped-tool-gridThree labeled columns of tool tiles covering Design, Development, and Collaboration, each tile showing a two-letter mark and the tool name.

Now Learningportfolio-pro-skills-sections-now-learningA skills block listing four topics currently in progress, each with a reason and an honest status line showing where the learning stands.

Proficiency Listportfolio-pro-skills-sections-proficiency-listA ruled list of skills with an honest level word per row and a one-sentence note that qualifies what the level includes and what it does not.

Skill Bars Groupedportfolio-pro-skills-sections-skill-bars-groupedTwelve skills across three discipline columns each with a div bar and a word level from Foundational to Fluent rather than a percentage.

Skill Categoriesportfolio-pro-skills-sections-skill-categoriesFour category cards in a two-column grid organizing specific skills by project phase from Discovery through Delivery for a senior product designer.

Skills In Practiceportfolio-pro-skills-sections-skills-in-practiceA heading and lede above a ruled list where each row pairs a skill with the project that proved it, its outcome, and the year.

Skills Listportfolio-pro-skills-sections-skills-listA three-column grouped skills block with Design, Research, and Front-end category headings and bordered chip pills for a product designer or creative generalist.

Skills Matrixportfolio-pro-skills-sections-skills-matrixA heading and lede above a bordered table pairing skill rows with three engagement columns, one filled dot per row marking lead, build, or refer.

Skills Timelineportfolio-pro-skills-sections-skills-timelineA heading and lede above a dotted vertical timeline where each entry marks the year a skill arrived, its status word, and a note.

Specialties Rowportfolio-pro-skills-sections-specialties-rowThree card tiles each naming a core specialty with a focused sentence that states the scope and what falls outside it.

Stack With Contextportfolio-pro-skills-sections-stack-with-contextA three-column card grid showing six core tools each paired with a sentence explaining why it is in the stack rather than an alternative.

T-Shaped Skillsportfolio-pro-skills-sections-t-shaped-skillsAn asymmetric split pairing one deep discipline, unpacked as a ruled card of facets, with a breadth column of two labeled skill chip groups.

Tech Stack Rowportfolio-pro-skills-sections-tech-stack-rowA bordered horizontal strip showing a full-stack developer technology choices in three labeled rows: Frontend, Backend, and Infrastructure.

Tool Stack Gridportfolio-pro-skills-sections-tool-stack-gridA four-group grid of tool tiles with two-letter mark badges covering Design, Development, Research, and Delivery tools used day to day.

Tools Marqueeportfolio-pro-skills-sections-tools-marqueeA static wrap strip of twelve tool chips each showing a name and a one-word category, giving an at-a-glance view of the full toolkit.

Two Column Skillsportfolio-pro-skills-sections-two-column-skillsA two-column skills layout grouping chips by project phase across Research, Design, Systems, and Delivery columns.

What I Useportfolio-pro-skills-sections-what-i-useA ruled list of six daily tools each paired with one sentence explaining why that tool earned its place over the alternatives.

Big Type Linksportfolio-pro-social-links-big-type-linksAn index of social destinations in oversized type, each ruled row pairing a mono number, a large platform name, a handle, and a hover arrow.

Connect Cardportfolio-pro-social-links-connect-cardA compact centered card with a come-say-hi headline, an email row, a primary social row, and two side-by-side action buttons for a lightweight contact nudge.

Elsewhere Listportfolio-pro-social-links-elsewhere-listA ruled list of platforms where this person can be found online, showing the brand icon, handle, and a context-appropriate follow or connect action per row.

Featured Linksportfolio-pro-social-links-featured-linksFour high-priority destinations given prominence as large icon cards covering newsletter, shop, open-source project, and booking link.

Icon Rowportfolio-pro-social-links-icon-rowA centered strip of brand-icon links for GitHub, LinkedIn, X, and Instagram with accessible labels and hover transitions.

Link In Bioportfolio-pro-social-links-link-in-bioA mobile-first link hub with a centered avatar, name, one-line context, and a vertical stack of full-width buttons covering portfolio, newsletter, socials, and contact.

Links Cardportfolio-pro-social-links-links-cardA compact bordered card listing email, social handles, and a newsletter as ruled rows with an icon and platform label per entry.

Links Gridportfolio-pro-social-links-links-gridA responsive grid of link cards covering portfolio, newsletter, shop, calendar, and social channels, each with an icon, a bold label, and a short destination note.

Platform Feedsportfolio-pro-social-links-platform-feedsThree platform panels previewing recent posts, each with a brand icon header, handle, and follow action above a ruled list of titles with dates.

Platform Statsportfolio-pro-social-links-platform-statsA grid of platform cards, each pairing a brand icon and handle with a large audience count, a short note, and a follow action.

Reach Guideportfolio-pro-social-links-reach-guideA split contact guide ranking channels by reply speed, an intro column of location and hours beside a numbered list of channels with response chips.

Social Rowportfolio-pro-social-links-social-rowA centered horizontal strip of social links pairing a brand icon with a display handle for each platform, sized for embedding at the foot of any section.

Booking CTAportfolio-pro-speaking-events-booking-ctaA speaker booking closer with an invitation heading, a booking checklist, and dual actions beside a ruled card of speaking formats and logistics.

Conference Gridportfolio-pro-speaking-events-conference-gridA wordmark tile grid of conferences a speaker has appeared at, with a year sub-line per cell and a total count in the header.

Keynote Featureportfolio-pro-speaking-events-keynote-featureA split highlight of one signature talk with its title, abstract, a ruled venue history, and a watch link beside a portrait placeholder.

Organizer Quotesportfolio-pro-speaking-events-organizer-quotesThree organizer testimonial cards, each pairing an avatar, name, and role with a quote and the event it refers to in a ruled footer.

Past Talks Gridportfolio-pro-speaking-events-past-talks-gridA three-column card grid of speaking engagements showing event, talk title, year, and a watch link or a no-recording note.

Speaker Bioportfolio-pro-speaking-events-speaker-bioA two-column organizer package with a portrait placeholder, short and long bios ready to copy, a detail list, and a speaker kit download link.

Speaker Statsportfolio-pro-speaking-events-speaker-statsA three-panel ruled strip of headline speaking figures showing talks given, countries visited, and total audience with a context line under each number.

Speaking FAQportfolio-pro-speaking-events-speaking-faqA speaking FAQ with a heading and an accordion of organizer questions beside a small ruled card listing what to include in a first invite.

Talk Topicsportfolio-pro-speaking-events-talk-topicsA talk topics catalog of numbered ruled rows, each with a title, abstract, and a meta column of format, length, and audience fit.

Talks Listportfolio-pro-speaking-events-talks-listA reverse-chronological ruled index of past talks showing event, title, year, and a Watch or Slides link per row.

Upcoming Eventsportfolio-pro-speaking-events-upcoming-eventsA card grid of confirmed future talks showing date, event, city, talk title, and a register link for each appearance.

Achievement Countersportfolio-pro-stats-sections-achievement-countersThree large figures in equal columns covering products shipped, years of practice, and industries deep, each paired with a one-line context note that scopes the number.

At A Glance Factsportfolio-pro-stats-sections-at-a-glance-factsA 2x2 grid of qualitative fact tiles covering location, focus, availability, and response time so a prospective client has the practical working-with details at a glance.

Availability Stat Bandportfolio-pro-stats-sections-availability-stat-bandA three-figure booking facts band showing response time, current lead time, and next opening month alongside a short enquire CTA card.

Before After Statsportfolio-pro-stats-sections-before-after-statsA heading and lede above ruled rows that pair each metric and its measurement note with a before figure, an arrow, and an after figure.

Big Figures Bandportfolio-pro-stats-sections-big-figures-bandA three-stat band of oversized tabular-nums figures divided by vertical rules inside a bordered card, anchored by a closing statement.

By The Numbersportfolio-pro-stats-sections-by-the-numbersFive ruled rows pairing a tabular figure with a plain-language fact that scopes the number, presented as an honest accounting of the practice to date.

Career Statsportfolio-pro-stats-sections-career-statsA four-number horizontal strip showing years in practice, companies worked with, projects shipped, and active long-term retainers at a glance.

Client Logos And Statsportfolio-pro-stats-sections-client-logos-and-statsA credibility band combining a row of client wordmarks above a three-figure stat grid covering projects shipped, long-term clients, and on-time delivery rate.

Four Up Statsportfolio-pro-stats-sections-four-up-statsA 2x2 grid of four stat cards each showing a large figure, a short label, and a context line that earns the number.

Headline Statportfolio-pro-stats-sections-headline-statOne oversized centerpiece figure above a heading and a context paragraph, closed by a ruled row of three small supporting figures.

Impact Numbersportfolio-pro-stats-sections-impact-numbersAn outcome figures block showing four measured results from real client work, each with a context line, methodology note, and client attribution.

Impact Statsportfolio-pro-stats-sections-impact-statsThree outcome figures from real client work, each with an attribution note naming the project type and the measurement method so the result does not overstate.

Inline Stats Rowportfolio-pro-stats-sections-inline-stats-rowA single ruled band of four tabular figures with short labels, the slimmest way to surface career numbers without a card grid.

Numbers Stripportfolio-pro-stats-sections-numbers-stripA ruled horizontal band of four headline figures covering years, projects shipped, clients, and a retention count, each with a short plain-English label.

Projects Per Yearportfolio-pro-stats-sections-projects-per-yearA heading and lede above a bordered card of ruled year rows, each pairing a year with a proportional bar and a project count, plus a total footer.

Stats With Contextportfolio-pro-stats-sections-stats-with-contextThree figures each followed by a full sentence naming the client, the quarter, and the measurement method so no result appears without the context that earned it.

Stats With Iconsportfolio-pro-stats-sections-stats-with-iconsFour career figures each paired with a small lucide icon and a label in individual cards, making a numbers strip visually scannable.

Work Mix Splitportfolio-pro-stats-sections-work-mix-splitA heading and lede above a single segmented distribution bar showing how billed time splits across four kinds of work, with a percentage legend beneath.

Years And Projectsportfolio-pro-stats-sections-years-and-projectsA two-column split with a positioning heading on the left and two ruled figures on the right covering years of independent practice and total projects shipped.

Culture Sectionportfolio-pro-studio-team-culture-sectionA split block presenting three studio working principles as border-left blurbs beside a placeholder image.

Extended Teamportfolio-pro-studio-team-extended-teamA heading and intro above a two column grid of collaborator cards, each with avatar, discipline, project count and tenure, plus a credit note.

Founders Rowportfolio-pro-studio-team-founders-rowA three-column grid of studio founder cards each with a named avatar, role, and a single concrete bio line.

Open Rolesportfolio-pro-studio-team-open-rolesA heading above a two column layout: a ruled list of open roles with salary bands beside a numbered hiring process and application card.

Studio Heroportfolio-pro-studio-team-studio-heroA full-viewport studio opener with a we-voice headline, two actions, and a three-fact credential strip below.

Studio Servicesportfolio-pro-studio-team-studio-servicesFour studio service cards each listing a discipline, a scope statement, and a bulleted includes list in a two-column grid.

Studio Statsportfolio-pro-studio-team-studio-statsA four-figure horizontal strip showing a studio founded year, team size, projects completed, and clients served.

Studio Timelineportfolio-pro-studio-team-studio-timelineTwo column layout with a heading and founder quote card on the left beside a ruled list of year marked studio milestones on the right.

Studio Weekportfolio-pro-studio-team-studio-weekTwo column layout with a heading, exceptions list and note on the left beside a ruled five day breakdown of the studio's working week.

Team Gridportfolio-pro-studio-team-team-gridA six-member team grid showing avatar, name, role, and a one-line bio per card for a design or development studio.

Team Member Cardportfolio-pro-studio-team-team-member-cardA single studio member profile with avatar, bio, a ruled focus-area list, and an availability date in a split layout.

Team Valuesportfolio-pro-studio-team-team-valuesFour numbered studio principles each with a plain description and a ruled cost section naming the honest downside of holding to that principle.

Avatar Quote Rowportfolio-pro-testimonials-avatar-quote-rowThree short quote cards in a row each opening with the avatar and name before the quote, for fast scannable social proof across a range of client types.

Client Interviewportfolio-pro-testimonials-client-interviewA two column testimonial with a client and engagement summary card on the left and four honest question and answer pairs on the right.

Client Logo Quotesportfolio-pro-testimonials-client-logo-quotesThree client cards each pairing a styled wordmark badge with a quote tied to a concrete outcome and an avatar attribution.

Client Quotes Rowportfolio-pro-testimonials-client-quotes-rowThree brief punchy client quotes in a three-column row, each attributed with avatar and name, designed to be scanned in seconds.

Clients Say Gridportfolio-pro-testimonials-clients-say-gridA 2x2 grid of four client quotes each with an avatar, name, role, and company, giving a compact and scannable proof block on a single page section.

Featured Quote Bandportfolio-pro-testimonials-featured-quote-bandA single client quote at display scale inside a full-width bordered band with a small avatar and attribution row below.

Grid of Sixportfolio-pro-testimonials-grid-of-sixSix short client quotes in a three-column card grid with avatars and named role and company attribution per card.

Logo And Quoteportfolio-pro-testimonials-logo-and-quoteTwo client company wordmarks each paired with one attributed quote in a side-by-side row, leading with the brand name before the person.

Logos And Praiseportfolio-pro-testimonials-logos-and-praiseA row of five client wordmarks above two attributed quote cards, combining brand recognition with personal praise in a single section.

Long Form Testimonialportfolio-pro-testimonials-long-form-testimonialA four-paragraph client recommendation with a sticky attribution card naming the person, role, company, and working relationship.

Praise Timelineportfolio-pro-testimonials-praise-timelineA vertical timeline rail of four short client quotes from one project, from kickoff through six months after launch, each with an avatar.

Praise Wallportfolio-pro-testimonials-praise-wallSix short testimonials in a two-column masonry-feeling grid with mixed quote lengths and small attributions showing breadth of trust.

Quote Marqueeportfolio-pro-testimonials-quote-marqueeA static 3-col grid of six short attributed client quotes presenting a scannable horizontal band of social proof without animation.

Quote With Statsportfolio-pro-testimonials-quote-with-statsA client quote paired with a ruled table of four project result figures giving the measurable outcomes behind the praise.

Rating Scorecardportfolio-pro-testimonials-rating-scorecardA two column scorecard with an average rating and per criterion bars on the left and two supporting client quotes on the right.

Recommendation Cardportfolio-pro-testimonials-recommendation-cardA centered card holding a long first-person endorsement with avatar, name, title, and a relationship line naming the project and year.

Scrolling Quotesportfolio-pro-testimonials-scrolling-quotesA horizontal overflow strip of five fixed-width quote cards each attributed with avatar, role, and company.

Single Spotlightportfolio-pro-testimonials-single-spotlightA two-column split with a long detailed quote at heading scale on one side and the recommender, a context image, and an engagement line on the other.

Single With Photoportfolio-pro-testimonials-single-with-photoA single detailed client quote beside a context image and a ruled attribution card naming the role and engagement.

Testimonial Cardsportfolio-pro-testimonials-testimonial-cardsThree testimonial cards in a grid, each quoting a specific measurable outcome with avatar, name, role, and company.

Testimonial Quoteportfolio-pro-testimonials-testimonial-quoteA single large client quote set at heading scale with an avatar, name, role, and company beneath it, for spotlight social proof.

Testimonial Tabsportfolio-pro-testimonials-testimonial-tabsAn interactive switcher showing one featured client quote at large scale above a row of avatar tabs that flip between four clients.

Testimonial With Resultportfolio-pro-testimonials-testimonial-with-resultA testimonial block pairing each client quote with the concrete outcome figure from that engagement, proof and praise shown side by side in a single card.

Three Column Quotesportfolio-pro-testimonials-three-column-quotesThree equal client quote cards each anchored to a named project outcome and attributed with avatar and role.

Two Up Testimonialsportfolio-pro-testimonials-two-up-testimonialsTwo equal quote cards side by side each with an avatar and full attribution, presenting two clients and two distinct proof points at the same visual weight.

Video Testimonial Blueprintportfolio-pro-testimonials-video-testimonial-blueprintA static video testimonial layout with an aspect-video Placeholder frame, a play affordance, client attribution, and a pull-quote caption ready to wire to a real video embed.

Client Reel Listportfolio-pro-video-motion-client-reel-listA ruled list of commissioned films each showing a thumbnail, client name, deliverable description, runtime, year, and a watch link.

Discipline Columnsportfolio-pro-video-motion-discipline-columnsThree columns splitting work by discipline, each with a thumbnail, film count, positioning line, three titles with runtimes, and a link.

Episode Playlistportfolio-pro-video-motion-episode-playlistA series layout with a large play frame and synopsis for the current episode beside a card listing every episode with numbers and durations.

Featured Videoportfolio-pro-video-motion-featured-videoA single video piece highlighted as a full-width play frame above a two-column panel with the description, creative constraint, and a ruled credits list.

Festival Laurelsportfolio-pro-video-motion-festival-laurelsA split section pairing an award-winning film play frame and its logline with a ruled list of festival selections, categories, years, and result badges.

Filmography Timelineportfolio-pro-video-motion-filmography-timelineA chronological filmography grouped by year, each year a large tabular numeral beside ruled rows listing film title, format, client, and runtime.

Motion Breakdownportfolio-pro-video-motion-motion-breakdownA three-stage process section showing one project from storyboard to final, each frame captioned with the motion technique applied.

Play Featureportfolio-pro-video-motion-play-featureA two-column project detail with a video frame and play button on one side and description, discipline pills, and named crew credits on the other.

Reel Gridportfolio-pro-video-motion-reel-gridA three-column grid of video work thumbnails each with a centred play button, a duration badge, and a client and year line.

Reel Heroportfolio-pro-video-motion-reel-heroA fold-filling hero with a large video frame, play button, and director identity column showing name, discipline, three stats, and two CTAs.

Showreel Cardportfolio-pro-video-motion-showreel-cardA single featured reel in a full-width card with a play button, description, discipline tags, duration, year, and a named watch link.

Video Case Studyportfolio-pro-video-motion-video-case-studyA single project told through a Placeholder video frame, a stat strip of production figures, and a three-column brief, approach, and result narrative.

Video Gridportfolio-pro-video-motion-video-gridA three-column tile grid of six video commissions, each with a play affordance, duration badge, title, client type, and year.

Video List Rowsportfolio-pro-video-motion-video-list-rowsA ruled-row videography index listing each film with a small thumbnail, title, client name, duration, year, and a watch link.

Alternating Rowsportfolio-pro-work-grids-alternating-rowsA work layout of full-width two-column rows that flip image and detail sides on each project, with a constraint-led description, a ruled deliverables list, and a case study link per row.

Archive Gridportfolio-pro-work-grids-archive-gridA full-archive grid of nine project tiles with a total count badge and an honest lede noting that older work shows the range.

Bento Work Gridportfolio-pro-work-grids-bento-work-gridAn asymmetric four-column project grid where two tiles span two columns at a wide aspect ratio and four sit at standard size, each captioned with category, role, and year.

Category Sections Gridportfolio-pro-work-grids-category-sections-gridA work grid divided into discipline sections each with a ruled label and a row of project tiles naming the role and year.

Featured And Gridportfolio-pro-work-grids-featured-and-gridOne large lead project with a real summary above a supporting grid of three more, the pick plus the catalog.

Featured Threeportfolio-pro-work-grids-featured-threeThree equal project tiles each with a full-width image, client type, role, year, a one-line outcome description, and a case study link.

Featured Work Gridportfolio-pro-work-grids-featured-work-gridA selected work grid of project tiles that each name the client type, the role, and the year.

Filterable Work Gridportfolio-pro-work-grids-filterable-work-gridA filterable work grid with category chips and a live count that narrows six project tiles by discipline, naming the kind, role, and year per tile.

Grid With Categoriesportfolio-pro-work-grids-grid-with-categoriesA work index that groups project tiles under discipline category headings, each with a scope description and an archive link, so visitors navigate directly to the work type they need.

Hover Gridportfolio-pro-work-grids-hover-gridA six-tile work grid with a permanently revealed overlay strip naming the project and role on each thumbnail, plus static kind and year captions below.

List With Previewportfolio-pro-work-grids-list-with-previewAn interactive work list where selecting a project row swaps the side panel to that project's thumbnail, summary, role, and case study link.

Masonry Gridportfolio-pro-work-grids-masonry-gridA masonry work grid with six Placeholder tiles in mixed aspect ratios and medium and year captions, suited to photography and illustration portfolios.

Masonry With Captionsportfolio-pro-work-grids-masonry-with-captionsA CSS-columns masonry of six project tiles at mixed aspect ratios, each captioned with the project name, role, and year.

Numbered Work Listportfolio-pro-work-grids-numbered-work-listA ruled editorial index of projects as large-numbered rows showing name, role, and year with a hover arrow link on each entry.

One Big Three Smallportfolio-pro-work-grids-one-big-three-smallA featured layout with one large project tile carrying a summary sentence and a view case study link, followed by a row of three smaller supporting tiles.

Recent Work Rowportfolio-pro-work-grids-recent-work-rowA four-card recent work strip with a see-all link at heading level, each card showing a portrait thumbnail, project name, role, and year.

Sticky Split Indexportfolio-pro-work-grids-sticky-split-indexA split work index that pins the heading, intro, and a ruled facts list on the left while project tiles scroll on the right.

Three Column Gridportfolio-pro-work-grids-three-column-gridA dense three-column grid of six square project tiles with name and year captions and a full archive link, for breadth-first portfolios.

Two Column Workportfolio-pro-work-grids-two-column-workAn alternating two-column project list pairing a Placeholder image with a paragraph writeup, role, and year for each engagement.

Work Accordionportfolio-pro-work-grids-work-accordionAn accordion work index of ruled project rows that each expand to a thumbnail, summary, deliverables list, and case study link.

Work By Yearportfolio-pro-work-grids-work-by-yearProjects grouped under ruled year headings with an inline project count, each tile showing the project name, client kind, and role.

Work Index Listportfolio-pro-work-grids-work-index-listA numbered text list of projects showing project name, kind, and year with a trailing arrow and no images.

Work With Quotesportfolio-pro-work-grids-work-with-quotesA two-column work grid where every project tile carries a short client quote with named attribution beneath the thumbnail and caption.

Work With Resultsportfolio-pro-work-grids-work-with-resultsA two-column project grid where each tile pairs a thumbnail with a one-line outcome carrying a highlighted tabular figure beneath the name and role.

Work With Tabsportfolio-pro-work-grids-work-with-tabsA work grid with three discipline tabs switching between four-tile project sets via state, for multi-discipline creatives presenting Design, Code, and Writing separately.

Byline Rowportfolio-pro-writing-portfolio-byline-rowA centred wordmark row of publications where work has appeared, with a summary strip counting pieces placed, years active, and average read time.

Clip Gridportfolio-pro-writing-portfolio-clip-gridA three-column card grid of six writing samples each showing publication, headline, a one-line standfirst, and date.

Editor Quotesportfolio-pro-writing-portfolio-editor-quotesA split layout pairing an identity heading and a ruled working record with a stack of testimonial rows from commissioning editors, each with an avatar.

Essay Listportfolio-pro-writing-portfolio-essay-listA ruled-row essays archive with title, publication name, read time, and date per entry for a scannable writing index.

Excerpt Cardsportfolio-pro-writing-portfolio-excerpt-cardsThree writing samples each opened by a pull-quote blockquote before the title, publication, date, and read-full link.

Featured Clipsportfolio-pro-writing-portfolio-featured-clipsThree standout writing pieces as cards with the publication, headline, an excerpt from the argument, and a read link.

Featured Essayportfolio-pro-writing-portfolio-featured-essayA two-column spotlight on one essay with a Placeholder, a pull-quote excerpt, and a detail list naming publication, date, read time, topic, and audience.

Pitch Processportfolio-pro-writing-portfolio-pitch-processA four step walkthrough of how a commission runs from brief to publication, each step a numbered card with a timing line and deliverable.

Publications Wallportfolio-pro-writing-portfolio-publications-wallA dense ruled cell grid of 18 publication names where work has appeared, with a counted heading that distinguishes bylines from mentions.

Published Listportfolio-pro-writing-portfolio-published-listA ruled list of placed articles and essays showing title, publication, date, and a read link for every byline on record.

Topics Coveredportfolio-pro-writing-portfolio-topics-coveredA six-tile grid mapping the subjects a writer covers with a piece count per topic and a link to each archive.

Writing Heroportfolio-pro-writing-portfolio-writing-heroA two-column writer opener combining an identity heading and ruled meta list with a featured piece card showing publication and read time.

Writing Servicesportfolio-pro-writing-portfolio-writing-servicesThree commission cards naming the kinds of work this writer takes on, each with a pitch, a ruled detail list of length, turnaround, and rate.

Year Archiveportfolio-pro-writing-portfolio-year-archivePublished pieces grouped under large year numerals in a two column ruled layout, each entry carrying its title, publication, and month.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information