Services bento, Pattern Paste Canonical: https://patternpaste.com/pattern/services-bento.html Core Patterns (https://patternpaste.com/patterns/) Features (https://patternpaste.com/patterns/features/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The six services. Keep the small tiles to a figure and one line. - The photographs. Select each image and choose Replace; the rounded corners and the crop stay. - The links. The tile link points at #fitted and the button at #survey. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Buttons. ### Set by this pattern - The spans and the radii. - Proportion. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. ### 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. Make it yoursVariations and the edits to make first ### What to change first - The six services. Keep the small tiles to a figure and one line. - The photographs. Select each image and choose Replace; the rounded corners and the crop stay. - The links. The tile link points at #fitted and the button at #survey. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### 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) Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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 - Every text pair is measured on its painted ground. Take the base if you want your theme's colours. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Services bento: common questions Does Services bento need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Services bento match my theme? Choose by variation. Bento tiles takes your theme’s palette; Birch and teak brings its own colours. How many variations does Services bento have? 2: Bento tiles and Birch and teak. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Services bento free? It is included with a subscription, with every Core Pattern and variation. 56 Core Patterns are free to copy without one. 22KB of core-block markup, 6 blocks (button, buttons, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)How it works Steps cards Four photographic process cards with level tops and descending feet. Each plate carries a replaceable WordPress image, a tracked step label, a short title and one sentence. The grid stretches the cards while their bottom margins draw the stair, reflowing into pairs and then a single column as the page narrows. States no colour and no font of its own. (https://patternpaste.com/pattern/steps-cards.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Features Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, image, paragraph Presets color 7, spacing 5, font-size 4 WordPress 7.0+ Continue exploring ## Next in Features Explore all 30 Features patterns (https://patternpaste.com/patterns/features/) Shot in Twenty Twenty-Five Features No plugin needed ### Working disciplines A wide editorial introduction above four spacious, numbered service cards in a balanced two by two composition. Features Preview pattern (https://patternpaste.com/pattern/feature-working-disciplines.html) Shot in Twenty Twenty-Five Features No plugin needed ### Services photo cards Six service cards for a trade or local business, each a 4:3 photograph, the service name, one line of what is included and a starting price set larger than the name, on a ruled foot beside its booking link. Features Preview pattern (https://patternpaste.com/pattern/services-photo-cards.html) Shot in Twenty Twenty-Five Features No plugin needed ### Values three principles An about-page values band. Features Preview pattern (https://patternpaste.com/pattern/values-three-principles.html)