Live preview

Components and sections

Every governed library file stays selectable through one responsive component catalog and one live preview shell.

Open catalog Open components Open styleguide Back to library

UI catalog

Selective live preview of the shared UI through one navigation, one filter surface, and one real library directory in the main workspace.

Showroom task

Choose whether you need the library catalog, individual building blocks, or token truth.

Catalog Components Styleguide

Catalog control

The showroom remains a documentation and verification surface for shared UI, not a second product frontend.

Organisms

Filter bar

Search, family, surface, and status stay controlled through the same governed catalog toolbar.

Reset
ORGANISMS REVIEW FRONTEND organisms/pricing-block

Pricing Block

Larger interaction and page blocks for real product surfaces.

Theme
Viewport
Category Marketing and frontend
Surface Frontend
Status Review
Source file resources/ui/organisms/pricing-block/pricing-block.php
System points
  • Shell-adjacent composition
  • Navigation, dialogs, and data
  • Shared UI instead of bespoke views
Series 01 Foundation REVIEW Current

Pricing Block

Larger interaction and page blocks for real product surfaces.

Marketing and frontend Frontend resources/ui/organisms/pricing-block/pricing-block.php
Live preview Desktop
PRICING-PATTERNS 10 references Min 10

Pricing pattern references

Governed pricing patterns composed from shared SaaS Core UI only.

01 SINGLE single-plan pricing-01

Single plan template price

The first pricing example stays minimal: one plan, one action, one simple value story.

  • Minimum viable pricing surface
  • Suitable for one-product offers or pilots
  • No second panel and no comparison noise

Template

Featured

Per month

EUR 29

Shared UI, tenant basics, and showroom access.

  • Tenant setup
  • Shared updates
  • Core support
02 COMPARE dual-compare pricing-02

Two-tier compare pricing

The second step introduces a clean two-plan comparison for straightforward SaaS decisions.

  • Two-card comparison only
  • Good fit for template versus scale positioning
  • Keeps copy and action structure simple

Template

Per month

EUR 29

Shared UI and support essentials.

  • Catalog access
  • Tenant setup
  • Shared updates

Scale

Featured

Per month

EUR 79

Advanced rollout and workspace controls.

  • Supervisor console
  • Provisioning
  • Audit trail
03 TRIPLE featured-triple pricing-03

Featured three-tier pricing

The third step adds the canonical three-plan comparison with a featured middle tier.

  • Classic growth comparison
  • Shared featured-card treatment
  • Works for product and platform offers

Template

Per month

EUR 29

Shared UI, support, and tenant basics.

  • Tenant setup
  • Catalog access
  • Shared updates

Scale

Featured

Per month

EUR 79

Advanced rollout and workspace controls.

  • Supervisor console
  • Provisioning
  • Audit trail

Enterprise

Talk to sales

Custom

Large rollout teams with governance and review.

  • Dedicated support
  • Advanced controls
  • Workspace reviews
04 BILLING-CYCLE billing-cycle pricing-04

Billing-cycle pricing stack

The fourth step introduces billing cadence messaging without inventing a custom pricing widget.

  • Cadence is explained through shared badges and copy
  • No inline switch hacks
  • Keeps the same pricing block underneath
Monthly and yearly ready No local pricing widget

Annual value

Show annual savings through governed badges and plan copy while keeping the same shared pricing organism.

Template

Billed yearly

EUR 24

Save two months while keeping the same template surface.

  • Tenant setup
  • Catalog access
  • Shared updates

Scale

Featured

Billed yearly

EUR 65

Advanced rollout controls with annual commercial clarity.

  • Supervisor console
  • Provisioning
  • Audit trail
05 ENTERPRISE enterprise-quote pricing-05

Enterprise quote pricing

The fifth step introduces a quote-led enterprise tier and procurement guidance.

  • Mixes self-serve and sales-led paths
  • Adds procurement messaging through shared alert surfaces
  • Still uses the governed pricing organism

Platform pricing

Combine self-serve plans with a sales-led enterprise path for larger governance and rollout programs.

Scale

Per month

EUR 79

Advanced rollout and workspace controls.

  • Supervisor console
  • Provisioning
  • Audit trail

Enterprise

Featured

Talk to sales

Custom

Large rollout programs with procurement and governance requirements.

  • Dedicated support
  • Regional rollout playbooks
  • Procurement review

Procurement-safe surface

Enterprise pricing stays compatible with regional procurement, support windows, and governance reviews.

06 LOCALIZED localized-currency pricing-06

Localized currency pricing

The sixth step makes international currency display explicit across the same governed card language.

  • Currency is content, not layout logic
  • Suitable for international landing surfaces
  • Keeps plan cards visually stable across locales
EUR / USD / GBP Locale-safe copy

Regional pricing

Pricing copy can change by market and still keep the same shared card, spacing, and action contract.

Europe

Per month

EUR 79

Commercial baseline for eurozone rollouts.

  • Invoice support
  • European rollout windows
  • Shared UI updates

United States

Per month

USD 89

North American rollout and support alignment.

  • US-friendly invoicing
  • Shared controls
  • Commercial review

United Kingdom

Per month

GBP 72

Localized pricing copy for UK buyer journeys.

  • GBP billing copy
  • Regional handover clarity
  • Shared surface parity
07 USAGE usage-based pricing-07

Usage-based pricing reference

The seventh step adds metered pricing context through supporting metric cards above the shared plans.

  • Metering context comes from shared stat cards
  • Useful for API, automation, and message-volume pricing
  • Keeps card composition consistent

Included

10k

Events / month

Overage

EUR 4

Per 1k events

Usage-led platform pricing

Explain what scales with usage before the buyer reaches the actual commercial plan cards.

Core

Includes 10k events

EUR 49

Start with a stable baseline and scale as traffic grows.

  • 10k events included
  • Shared reporting
  • Usage dashboard

Growth

Featured

Includes 50k events

EUR 129

Higher capacity for multi-tenant operations and automation.

  • 50k events included
  • Priority support
  • Advanced controls
08 BUNDLE bundle-addons pricing-08

Bundle and add-on pricing stack

The eighth step adds modular add-on logic without leaving the shared pricing and card surfaces.

  • Core plans plus add-on cards
  • Good fit for modules, plugins, and governed extensions
  • Maintains one spacing and shell truth

Core plans and governed add-ons

Present the main plan decision first and only then show optional modules and support bundles.

Platform

Featured

Per month

EUR 79

Shared core with rollout and reporting features.

  • Shared UI
  • Workspace controls
  • Audit trail

Analytics add-on

EUR 19 / month

Priority support

EUR 29 / month

Regional onboarding

Custom quote

09 SUPPORT support-guarantee pricing-09

Support and SLA pricing compare

The ninth step combines plan comparison with support guarantee messaging for enterprise buyers.

  • Introduces SLA and support windows
  • Good fit for services and enterprise offers
  • Uses only badges, cards, alerts, and pricing blocks
8x5 / 24x5 SLA-safe copy

Support-aware pricing

Bring SLA, escalation, and support-hour expectations into the governed pricing story without custom markup drift.

Scale

8x5 support

EUR 79

Core rollout support and governed workspace controls.

  • 8x5 support
  • Audit trail
  • Shared updates

Assure

Featured

24x5 support

EUR 149

For buyers that need stronger response targets and approval workflows.

  • 24x5 support
  • Escalation path
  • Governance review

SLA note

Commercial promises and support windows remain explicit and locale-safe in the same shared surface.

10 GLOBAL global-rollout-pricing pricing-10

Global rollout pricing surface

The tenth step combines pricing with timezone-aware handover and regional rollout context.

  • Combines commercial and operational readiness
  • Supports multiple currencies and handover windows
  • Designed for international SaaS rollout pages
Europe/Berlin America/New_York Asia/Singapore

International rollout pricing

Close the journey with pricing that acknowledges currencies, regions, and timezone-safe handover windows.

Europe

Europe/Berlin handover

EUR 79

Governed rollout path for EU operations.

  • Berlin support window
  • Euro pricing copy
  • Shared UI updates

Americas

Featured

New York handover

USD 89

Commercial and support framing for North and South American teams.

  • USD pricing copy
  • Regional handover
  • Shared workflows

APAC

Singapore handover

Custom

Regional rollout path with guided planning and procurement support.

  • Custom planning
  • Timezone-safe onboarding
  • Regional review

Berlin handover

09:00 CET

New York handover

09:00 EST

Singapore handover

09:00 SGT

Category Marketing and frontend
Surface Frontend
Status Review
Source file resources/ui/organisms/pricing-block/pricing-block.php
System points
  • Shell-adjacent composition
  • Navigation, dialogs, and data
  • Shared UI instead of bespoke views

Filter state and count truth

One library total, one filter pool, one active family result count.

The showroom keeps global library count separate from the current filter pool and the active family result set.

Library total 77
Filter pool 77
Active family 22

Current state

Family: Organisms Surface: All surfaces Status: All statuses

Stateful navigation

Show all matching families Reset showroom filters