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.
The signature moment
Conversion header locked to feature matrix
A header tier that asks, and a matrix that answers. Three bordered plan cards carry the names, the monthly prices and the buttons; the capability matrix sits directly under them, so the decision and the evidence read as one block. The cards are thirds of the band and the table's columns size to their content, so the two tiers are stacked, not ruled into a single grid.
What it inherits from your theme
- The typeface. No font family is stated anywhere.
- Your colours.
basefor ground,contrastfor text, borders, and buttons.
What happens at 390px112 words
The table states hasFixedLayout: false, so its columns size to their content instead of being forced into equal fractions of the screen. .wp-block-table is a WordPress core overflow-x: auto container, so once the columns need more room than the phone has, the table becomes a horizontal rail inside its own figure: the page never scrolls sideways, the table does, and every column stays whole. Fixed layout would have shredded the words instead, because core sets word-break: break-word on the cells of a fixed table. The figcaption says the table scrolls, because a scroll container with no affordance is a silent failure of its own. No CSS ships to buy any of this.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Night plan table
Fetching the markup…