Feature Matrix Compact
Plan headers with CTAs above a compact feature matrix that shades the middle column.
Plan headers with CTAs above a compact feature matrix that shades the middle column.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Feature Matrix Compact opens with a centered heading and a short subheading, then renders a four-column grid below. The leftmost column lists eight feature labels. The three remaining columns each begin with a plan header showing the plan name, monthly price, and a call-to-action button. Below the headers, each row shows whether that feature is included: boolean features display a check icon or a muted dash, and numeric limits show a short text value. The middle column (Pro) sits on a shaded panel that runs the full height of the grid, from the rounded header cap down to the rounded footer, so the featured tier is immediately recognizable without any surrounding card chrome.
All copy is self-contained. The heading, subheading, plan names, prices, CTA
labels, and every feature label can be rewritten to match your product. The
number of feature rows and the numeric limits in each cell are independent, so
you can add or remove rows without touching the column structure. The shaded
panel always tracks whichever plan has featured: true, so swapping the
featured tier is a single flag change.
Reach for this block when buyers need a fast, side-by-side answer to "what do I get at each tier?" without opening a separate comparison page. It fits well on an HR or hiring platform where the key limits (team members, campaigns, approval workflows, SSO) vary meaningfully across plans and a dense matrix is more honest than vague bullet lists. It works better than a simple card stack when you have more than four or five features to compare, because the shared row labels keep the eye moving horizontally rather than jumping between cards.
A natural flow around it on a Marketing Pro page:
Before
After
The block covers three plan tiers and eight comparison rows out of the box. A few ways to adapt it:
featured flag to any plan to move the shaded
panel, or remove it entirely if no tier should be highlighted.Tip: keep feature labels short enough to fit one line in the label column so the rows stay a uniform height and the grid reads cleanly at all viewports.