Feature cover bento

A features section in two parts: a short heading row (label, h2, one line of lede), then a bento of three core/cover tiles. One tall tile stands on one side; two shorter tiles stack on the other. Each tile carries a small label, a feature title and one line, set on the tile's veil.

The bento is a two-column grid and the tall cover spans both rows, so it is never sized by a number: it stretches to exactly the two short tiles plus the gap between them, whatever the copy or the theme's type does to their height. The top and bottom edges of the pair always meet the tall tile's edges. The collision of one long picture against two squat ones is the composition, and it survives with the colour taken out.

• Tall on the right: the same grid with the tall tile in the second column. It is source order, not a setting: the first short tile, then the tall one, then the second short one, and the grid places them. On a phone the tall tile reads second.

Inherits: every colour (band base, veil contrast, type base on the tiles and contrast in the heading row), the typeface, the spacing scale. Decides: the veil's opacity, the grid, the tile heights (26rem short, 32rem tall when stacked), the 44rem heading measure and the 24rem lede measure. Display type, off the ladder because its size IS the composition: the h2 (40px to 88px) sets the scale the bento answers, and the tall tile's title (30px to 48px) outranks the two short tiles, whose titles stay on the ladder at large. Labels keep their own size. Each cover states its text colour chain, so core's #fff cover text never applies.

Type sits on each photograph only through a core/cover veil: contrast at dimRatio 80 under base type. The veil's colour is a chain and its opacity a number, so the lightest ground the words can land on is the veil over a white photograph, and that is what the contrast gate measures. Lower the veil below 80 and that stops being true. Body text is held to 4.5:1; the tile titles are large display and held to 3:1 at least, though they measure far above it.

The grid asks for two columns no narrower than 20rem. At 1920, 1280 and 820 that is the bento; below about 700px of content width it drops to one column, and the tile order becomes tall, then the two short tiles, each at its own minimum height.

The photographs (select a tile, choose Replace), then the three titles. Keep a title to about four words and the line under it to one sentence.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.