Services bento

Six service tiles for a joiner, fitter or any trade with a few services worth showing off, locked together in a bento grid. It sits in the features section beside feature-cover-bento, which stacks three covers, and services-photo-cards, which lines up six equal priced cards: here no two neighbouring tiles are the same shape.

A two-by-two photo tile, two tall tiles and a wide tile close into a single rectangle with two small figure tiles, every corner rounded and every photograph rounded again inside its tile. The tiles are grid children with their own column and row spans, so the rectangle is the grid itself, not a picture of one. It survives colourlessness because the composition is the shapes: one tile the size of four, two twice as tall as they are wide, one twice as wide as it is tall, and two squares.

1. The six services. Keep the small tiles to a figure and one line.
2. The photographs. Select each image and choose Replace; the rounded corners and the crop stay.
3. The links. The tile link points at #fitted and the button at #survey.

• Typeface. The base states no font family.
• Palette. The ground is your base and the text your contrast. Four tiles are outlined plates (role-plate falling back to base, text role-plate-text falling back to contrast, a currentColor hairline) and two are inverted, contrast behind base type.
• Buttons. The survey button is your theme's button with a stated padding for a 44px target; the tile link is a transparent, underlined core button.

• The spans and the radii. 1.25rem on the tiles, 0.75rem on the photographs inside them.
• Proportion. Section heading on xx-large (hierarchy), the feature tile heading on x-large, the other tiles on large, copy on medium. The figures are off the ladder because their size is the composition.

Off the theme's ladder on purpose, because the size is the composition:

• paragraph at clamp(2.75rem, 4.4vw, 4rem) (the tile figures)

The grid states a minimum column width of 15.5rem and no column count, so it auto-fills: four columns on a desktop, two on a tablet, one on a phone. WordPress releases a column span through a container query once the grid is narrower than the span can fill, so on a phone every tile runs the full width and the tall tiles keep their two rows. The tile order was chosen so that the four, three and two column grids all close with no holes.

A Styled variation with its own colours and type: birch ground #f4efe6, near-black ink #1f1b16, warm white tiles #fffdf8 on a #d8ccb8 hairline, espresso tiles #2a211a, teak #8a4516 for the eyebrow, the figures on the light tiles and a soft-cornered filled button, and a pale teak #eaa56c for the figures on the dark tiles. Headings and figures are Georgia, copy Arial at

1. Every text pair is measured on its painted ground. Take the base if you

want your theme's colours.

• Core blocks only: group, heading, paragraph, image, buttons, button. No plugin, nothing to keep updated.
• Text is measured at 4.5:1 against the ground it actually sits on.

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.