[Library] Compare and tables

Compare and tables

Ruled matrices, specification sheets, feature tables, side-by-side comparison cards and responsive breakdowns: what each plan, product, tier or option carries, laid out to read across. 14 patterns, 14 variations between them: 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.

14patterns
28designs
What it holdsHolds your photographs 4Holds as many entries as you have 9Spells out the facts 5Shows the plans and what they cost 6Everything in it carries a date 1

14 patterns

Compact comparison rows rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Compact comparison rows

A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own.

7 blocks · core only · 1 variation Preview Night compact rows
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
Side by side comparison rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Side by side comparison

Two comparative cards side by side: the conventional method on the left with quiet styling, and your recommended approach on the right with a bold border, a badge pill, checkmark points, and a primary action button. States no colour and no font of its own.

9 blocks · core only · 1 variation Preview Night comparison
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
Spec table rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Spec table

A two-column specification sheet in a core table, ruled between every row, hanging off one heavy rule with the section title beside it in the margin. Airy on the left, dense on the right, and every fact where a reader can run down and stop. States no colour and no font of its own.

6 blocks · core only · 1 variation Preview Stacked sheet
Data ledger table rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Data ledger table

A structured operational data ledger table featuring date stamps, record categories, status tags, and monetary figures, paired with header action controls. States no colour and no font of its own.

6 blocks · core only · 1 variation Preview Night ledger
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
Benchmark matrix rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Benchmark matrix

A high-density performance and latency benchmark table comparing five execution workloads across our engine, legacy systems, and industry standards, with right-aligned numeric data and a methodology footnote. States no colour and no font of its own.

4 blocks · core only · 1 variation Preview Night benchmark
Property spec matrix rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Property spec matrix

A dual-image gallery header paired with a structured property and architectural specification table, dimension breakdown, and inquiry action button. States no colour and no font of its own.

9 blocks · core only · 1 variation Preview Night property matrix
Split spec sheet rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Split spec sheet

An image-anchored datasheet: a product photograph, summary, and download action on the left, paired with a dense technical specification table on the right. States no colour and no font of its own.

9 blocks · core only · 1 variation Preview Night spec sheet
Wide region rail rendered in Twenty Twenty-FiveThumbnail in Twenty Twenty-Five Compare and tablesStandard

Wide region rail

A six-region availability matrix set wider than the measure that introduces it: the heading holds a 32rem column while the table breaks out to the wide width and scrolls sideways in WordPress's own table scroller on a narrow screen. States no colour and no font of its own.

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

All sections