Learn 41 Page Patterns concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Introduces a brand, explains its main value, and routes different audiences to useful next steps.
Create a responsive marketing homepage with a concise value proposition, one primary action, audience-relevant proof, scannable feature sections, clear navigation and footer, meaningful heading hierarchy, fast-loading media, and no essential information hidden behind animation.Focuses a visitor on one campaign, offer, or conversion goal with minimal distraction.
Create a focused campaign landing page with message continuity from the referring campaign, one measurable call to action, concise benefits, relevant proof, transparent terms, a short accessible form when needed, responsive content order, and no competing navigation that obscures the goal.Explains how one product capability solves a specific user problem.
Create a product feature page that starts with the user problem and outcome, demonstrates the workflow with accessible media, explains limitations and integrations, includes role-specific proof, links to related documentation, and ends with a clear trial or contact action.Compares plans, costs, limits, and included capabilities so visitors can choose confidently.
Create a transparent pricing page with monthly and annual totals, plan audiences, included limits, tax and renewal notes, an accessible comparison table, one recommended plan that is not misleading, contact-sales handling, responsive stacking, and a route to billing FAQs.Compares products or options across criteria that matter to the intended audience.
Create an honest comparison page with a clear comparison scope, equivalent criteria, sourced claims, last-reviewed date, accessible tables that reflow on mobile, plain-language advantages and tradeoffs, no false checkmark-only claims, and a next step for each suitable audience.Builds trust through the organization’s purpose, people, history, and operating principles.
Create an About page with a specific mission, concise origin story, verifiable milestones, leadership or team context, operating principles, inclusive real imagery with useful alt text, relevant trust links, and clear paths to careers, contact, or governance information.Routes people to the right support, sales, office, or general enquiry channel.
Create a contact page that separates support, sales and general enquiries, states expected response times, provides accessible alternatives to the form, asks only necessary information, validates without losing input, protects sensitive data, and shows address and operating hours as text outside any map.Lets readers browse, filter, and discover a publication’s latest or featured articles.
Create a blog index with one featured story, chronological article cards, meaningful categories, optional local search, author and date metadata, descriptive linked titles, predictable pagination, responsive imagery, and an empty result state that preserves the selected filters.Presents a focused long-form story with readable content, metadata, and related navigation.
Create an accessible article page with one descriptive heading, author and publication metadata, readable line length, semantic sections, captioned media, share actions that do not interrupt reading, source and update information, related content, and print-friendly styling.Combines technical content, local navigation, examples, and next-step links for learning or reference.
Create a documentation page with hierarchical side navigation, breadcrumbs, a descriptive heading, version context, readable prose, syntax-labelled code examples with copy controls, in-page navigation for long content, previous and next links, responsive collapse, and stable deep-link anchors.Helps customers search support content, browse common topics, and reach human assistance.
Create a help center homepage with clearly scoped search, popular tasks, topic categories, recent service notices, contextual contact options, useful no-result recovery, readable article links, and no requirement to sign in before viewing public support information.Orients a signed-in user with relevant work, recent activity, and primary tasks.
Create a signed-in application home page personalized by role and permissions, showing current work, recent items, meaningful alerts and a small set of primary tasks. Preserve navigation context, handle first-use and returning-user states, and avoid turning the page into an unfocused metric dashboard.Consolidates related metrics and visualizations for monitoring or exploratory analysis.
Create an analytics dashboard with a clear purpose and date range, a small set of decision-relevant metrics, global filters, accessible chart alternatives, consistent units and colors, data freshness, loading and partial-error states, responsive single-column collapse, and export that preserves applied context.Lists a manageable collection of records with search, filters, sorting, and creation actions.
Create a collection index page with a descriptive title, create action, scoped search, relevant filters, sort, result count, table or card view chosen for the data, stable row actions, selection feedback, pagination, shareable URL state, and distinct loading, empty, filtered-empty and error states.Shows one record’s identity, status, attributes, relationships, history, and available actions.
Create a record detail page with breadcrumbs, stable identity and status, permission-aware actions, grouped attributes, related records, activity history, clear edit ownership, loading and missing-record states, responsive section navigation, and deep links to important subsections.Keeps a collection and the selected item’s details in one coordinated workspace.
Create a responsive master-detail page with a searchable item list, visible selection, adjacent detail pane on wide screens, back-to-list navigation on compact screens, shareable selected-item URLs, keyboard-accessible rows, and restored list scroll, filters and selection after returning.Provides a dedicated page for creating a new record or editing an existing one.
Create a dedicated create and edit form page with a task-specific heading, clear new-versus-edit context, logical field groups, persistent values after validation, permission-aware fields, save and cancel actions, unsaved-change protection, field errors plus a summary, and an unambiguous success destination.Organizes configuration options into predictable, scoped, and safely saved groups.
Create a settings page with clear account, workspace or system scope; stable section navigation; logically grouped controls; searchable settings only when necessary; explicit save behavior; success and error feedback; permission-aware options; dangerous settings separated; and no reliance on documentation to explain basic controls.Lets a person review and maintain identity, contact, avatar, language, and account information.
Create an account profile page with a clear signed-in identity, separately editable personal and contact details, avatar alternatives, language and time-zone preferences, verification status, privacy-aware visibility, save feedback, session or security links, and a clearly separated account deletion path.Presents chronological events with actors, targets, outcomes, and investigation filters.
Create an activity and audit log page with immutable chronological events, actor-action-target wording, exact timestamps and time zone, severity and outcome, scoped filters, safe search, pagination or cursor loading, permission-aware detail, export metadata, and clear retention limits.Supports scanning, selecting, reading, organizing, and acting on messages or notifications.
Create a responsive inbox page with folders or scopes, unread and selected states, searchable message list, reading pane on wide screens, back navigation on mobile, bulk actions separated from message actions, keyboard navigation, preserved selection, and empty, offline and send-failure recovery states.Displays time-based items across day, week, month, or agenda views.
Create a calendar page with an accessible agenda alternative, localized dates and times, explicit time zone, Today navigation, day, week and month views, keyboard-reachable events, clear overlapping items, availability and conflict states, responsive mobile agenda, and no meaning conveyed by color alone.Combines tools, editable content, context panels, and persistent document actions for focused work.
Create a responsive editor workspace with a named document, stable save status, accessible toolbar groups, primary canvas or editor, optional inspector, undo and redo, keyboard shortcuts that have visible alternatives, resizable panels without focus loss, conflict recovery, and a focused compact-screen mode.Lets shoppers browse, compare, filter, and sort a collection of purchasable products.
Create a product catalog page with category context, product count, useful filters and sort, consistent cards, clear price and availability, responsive image sizing, preserved URL state, accessible quick actions, pagination or deliberate load-more behavior, and distinct no-product, no-filter-match and loading states.Explains one product and supports choosing variants, quantity, delivery, and purchase actions.
Create a product detail page with a descriptive product name, accessible media gallery, price and tax context, availability, variant and quantity controls, delivery and returns summary, primary add-to-cart action, structured specifications, reviews with context, related products, and persistent validation when a required option is missing.Lets shoppers review selected items, quantities, costs, fulfilment, and the path to checkout.
Create a shopping cart page with editable quantities, individually labelled remove actions, stock and fulfilment status, subtotal, discount and estimated total breakdown, saved-for-later handling, update feedback, empty-cart recovery, checkout action, and no surprise fees disguised until a later step.Guides a shopper through contact, delivery, payment, review, and final purchase confirmation.
Create a secure checkout page with clear progress, guest checkout, contact, delivery and payment groups, visible order summary and total, saved input after validation, billing-address reuse, accessible errors, final review before the single submit action, duplicate-payment protection, and explicit post-payment success or recovery.Shows order contents, payment, fulfilment progress, delivery, and support actions.
Create an order detail and tracking page with order reference, current status in text, item and cost summary, payment and delivery addresses, chronological fulfilment updates, carrier link, expected date with uncertainty, invoice access, contextual cancel or return eligibility, and support escalation.Coordinates availability, selection, attendee details, price, and reservation confirmation.
Create a booking page with service and location context, accessible date and time selection, time zone, real-time availability, duration and price, attendee details, cancellation policy before commitment, conflict recovery, a review step, duplicate-booking protection, and calendar-friendly confirmation.Shows the current plan, usage, invoices, payment method, renewal, and plan-management actions.
Create a subscription and billing page with current plan and renewal date, usage versus limits, tax-aware price, payment-method summary, invoices, plan comparison, upgrade and downgrade effects, cancellation consequences, permission checks, prorating explanation, and success or payment-failure feedback.Authenticates an existing user and provides safe recovery or alternate sign-in routes.
Create an accessible sign-in page with email or username and password fields, password-manager support, show-password control, remembered account only when appropriate, rate-limited errors that do not reveal account existence, password recovery, approved single sign-on options, and safe return to the intended destination.Creates a new account while explaining requirements, consent, and the next verification step.
Create a concise sign-up page that asks only necessary information, supports password managers, explains password requirements before entry, validates without clearing fields, distinguishes required consent from optional marketing, links terms and privacy, prevents duplicate submission, and explains email or phone verification after creation.Starts and completes a secure password-reset journey without exposing account existence.
Create a secure password-recovery flow with identifier entry, a neutral response that does not reveal account existence, resend limits, expiring single-use reset links, new-password requirements, password-manager compatibility, invalid and expired-link recovery, session revocation choice, and a clear return to sign in.Confirms control of an email address or phone number using a link or short-lived code.
Create an account verification page that states the masked destination, accepts a paste-friendly one-time code, supports autofill, explains expiry, rate-limits resend, lets users change a mistaken address, handles already-used and expired codes, announces errors accessibly, and preserves the intended post-verification destination.Welcomes a new user, establishes context, and presents a small set of meaningful setup tasks.
Create an onboarding home page tailored to the user’s role, with a concise welcome, progress that reflects meaningful outcomes, three to five actionable setup tasks, sample or starter content, skip and resume behavior, contextual help, accessible completion feedback, and a natural transition into the normal product home.Splits a necessary multi-step configuration into a clear, resumable sequence.
Create a setup wizard page with named steps, current and total progress, one focused task per step, working browser and in-page Back actions, saved progress, conditional steps that remain understandable, a review step before commitment, validation summaries, interruption recovery, and a final route to the configured feature.Explains who invited the recipient, what they will join, and how to accept safely.
Create an invitation acceptance page showing the inviter, trusted workspace identity, role or access being offered, signed-in account context, accept and decline actions, account creation or switching when required, expiry information, invalid or already-used states, and a safe destination after acceptance.Publishes a versioned policy with readable sections, ownership, and change information.
Create a readable legal or policy page with a specific title, effective and last-updated dates, owner and contact route, plain-language summary that does not replace the full text, semantic numbered sections, in-page navigation, stable deep links, print support, version archive, and localization context.Explains cookie categories and lets people change nonessential tracking consent.
Create a cookie settings page with plain-language purposes, always-on essential cookies identified separately, independent nonessential category controls, no preselected optional consent, equal accept and reject choices, explicit save feedback, current preference display, withdrawal support, vendor details, and no tracking before consent where required.States accessibility commitments, known limitations, testing scope, and contact or escalation routes.
Create an accessibility statement page that names the covered service and standard, states conformance honestly, lists known limitations and workarounds, describes testing scope and date, provides an accessible contact route and response target, explains escalation, uses plain language, and remains easy to find from every page.Communicates current service health, incidents, maintenance, and historical reliability outside the product.
Create a public service-status page on resilient infrastructure with an overall status, component-level health, incident start and latest-update times, time zone, maintenance notices, chronological updates, accessible severity labels beyond color, historical uptime context, subscription choices, and a support route for unlisted problems.