# Services bento

> Six rounded service tiles locked into a bento grid: a large photo tile spanning two columns and two rows, two tall tiles beside it, a wide tile and two small figure tiles underneath. Four columns on a desktop, two on a tablet and one on a phone, with every span released cleanly as the grid narrows. Example images are included and can be replaced in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/services-bento.html
Section: Features
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, group, heading, image, paragraph
Keywords: services, bento, grid, tiles, local business, joinery

## Variations (2)

### Bento tiles (the default)

Identical markup in every theme.

Outlined tiles on your base ground with two inverted in your contrast colour, rounded corners throughout and the photographs rounded inside them.

### Birch and teak

This variation states its own colours and states its own type: identical in every theme.

Birch ground, near-black ink, warm white tiles and espresso tiles, teak figures and soft teak buttons, in Georgia over Arial.


---

## The signature moment: six tiles, four shapes, one locked rectangle

**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.

## How it collapses

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.

## What it inherits from your theme

- **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.

## What it decides for itself

- **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.

## What to change first

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`.

## The Birch and teak look

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
400. Every text pair is measured on its painted ground. Take the base if you
want your theme's colours.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(2.75rem, 4.4vw, 4rem) (the tile figures)

## Notes

- 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.

## Included images

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](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.