[Library] Shows the plans and what they cost

Shows the plans and what they cost

What a plan, a tier or an item costs, set out so a buyer picks one and clicks. 10 patterns, 9 variations between them, drawn from 3 sections: every variation is its own copy-paste file, one click from its pattern.

Thumbnails on this page are rendered in Twenty Twenty-Five. Your theme is applied to every live preview, on a pattern's own page.

10patterns
19designs
What it holdsHolds your photographs 3Holds as many entries as you have 5Spells out the facts 1

10 patterns

Compare matrix rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Compare matrix

A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own.

6 blocks · core only · 1 variation Preview Night matrix
Plan comparison table rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Plan comparison table

A three-tier pricing and feature comparison layout: top header cards with plan names, prices, and conversion buttons, followed immediately by an aligned capability table. States no colour and no font of its own.

8 blocks · core only · 1 variation Preview Night plan table
Product spec cards rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Product spec cards

Three product comparison cards in a row: each card carries an empty image frame cropped to 4:3, model name, key technical attributes, pricing, and an action button. States no colour and no font of its own.

10 blocks · core only · 1 variation Preview Night cards
Tier comparison cards rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Tier comparison cards

Three membership tier cards side by side: each card features a tier badge, price headline, ruled checklist of privileges, and a dedicated action button. States no colour and no font of its own.

9 blocks · core only · 1 variation Preview Night tier cards
Visual comparison pillars rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Visual comparison pillars

Three visual comparison pillars side by side: each column carries a 16:9 media frame, capability highlight, feature checklist, and conversion button, with the centre recommendation elevated with a bold border. States no colour and no font of its own.

10 blocks · core only · 1 variation Preview Night pillars
Listing cards rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five ListingsStandard

Listing cards

Six priced items as a grid of cards, each an empty 4:3 frame over a title set deliberately small and a figure set at display size under it, closed by a hairline and one tracked action. The number is the largest thing on the card and the name is the smallest, which is the inverse of every other card in the library. Hand-written core blocks, so it carries workshops, rooms, tickets, plans or a menu without a plugin. States no colour and no font of its own.

6 blocks · core only · 1 variation Preview Figure shelf
Pricing duo rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five PricingStandard

Pricing duo

Two ways to pay for the same thing, head to head and equal, with the saving set in the ruled channel that runs between them. Neither side is taller, tinted or badged: the seam does the arguing. States no colour and no font of its own.

10 blocks · core only · 1 variation Preview Ledger seam
Pricing single rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five PricingStandard

Pricing single

One plan, set as a collision of scales: a price at display size in the left column against a packed ledger of ten ruled currentColor rows in the right, with one action and one reassurance line under the figure. For a product with a single price, where three columns would be an invention. The figure ships as an obvious placeholder. States no colour and no font of its own.

7 blocks · core only · 1 variation Preview Night plan
Pricing tiers rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five PricingStandard

Pricing tiers

Three pricing tiers where the recommended one is genuinely taller than its siblings and inverts to a contrast ground behind a 2px edge on that same chain, so the recommendation is structural rather than a badge. States no colour and no font of its own.

10 blocks · core only Preview
Feature checklist matrix rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Feature checklist matrix

A comprehensive multi-category capability matrix in a fixed core table: features grouped under clear category subheaders across four plan tiers with checkmarks, numerical caps, and plan details. States no colour and no font of its own.

4 blocks · core only · 1 variation Preview Night checklist
No patterns matchClear a filter to see all 10 patterns.

All sections