Logo cells: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/logo-cells.html Core Patterns (https://patternpaste.com/patterns/) Logos (https://patternpaste.com/patterns/logos/) Free Standard # Logo cells Ten client logos in a five by two grid of ruled cells, hairlines running both ways and the frame closed on all four sides, so the band reads as a table of clients rather than a row of them. Every cell is the same fixed height and every mark is contained inside it, so a tall square logo and a long horizontal one both sit uncropped at the same optical weight. Example images are included and can be replaced in the editor. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The images. Click each cell and choose your file. - The count. Ten is two full rows. - The cell height. 4.5rem on every image. - The label pair. Delete the right-hand line for a quieter band, or both if the section above already says what this is. The signature moment ## The grid is closed on all four sides Most logo grids are a row of marks floating in space, or a set of marks with rules between them and open edges. Here the rule runs all the way round, so the band stops reading as a display of logos and starts reading as a table of clients: a complete, countable list with a boundary, the way a directory or an index page is bounded. Ten cells, all identical, nothing centred and nothing optically tuned. The regularity is the point, and the closed frame is what makes regularity read as an assertion rather than as a layout. Theme handoff ## What comes from where ### From your theme - Palette. - Every rule. - Typeface. - Spacing scale. ### Set by this pattern - Five across, two down. - The cell height and its padding. - Where each hairline comes from. - The label pair. 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 A full-bleed band holding ten client logos in a five by two grid of ruled cells. A tracked label pair sits above it; the grid itself is hairlines both ways with the frame closed on every side. Core blocks only, and the image blocks include demonstration logos. Choose Replace to select your own marks. This is the image-bearing logo pattern. logo-bar and its plaque set partner names as type, which is the right answer when there are no files to hand. This one is for the buyer who has the files. ### The signature moment: the grid is closed on all four sides Most logo grids are a row of marks floating in space, or a set of marks with rules between them and open edges. Here the rule runs all the way round, so the band stops reading as a display of logos and starts reading as a table of clients: a complete, countable list with a boundary, the way a directory or an index page is bounded. Ten cells, all identical, nothing centred and nothing optically tuned. The regularity is the point, and the closed frame is what makes regularity read as an assertion rather than as a layout. It is built from single hairlines, never doubled ones. Every cell carries a top and a left rule and the wrapper carries a right and a bottom one, so each interior line is drawn exactly once, by the cell to its right or below it, and the outer frame is completed by the wrapper. A grid built by giving every cell all four borders draws every interior line twice and renders at 2px against 1px on the outside, which is the thing that looks slightly wrong and is hard to name. Make it yoursVariations and the edits to make first ### What you change first - The images. Click each cell and choose your file. Use SVG or a transparent PNG; a logo on a white rectangle will show its rectangle against your band, and no setting here can fix that. - The count. Ten is two full rows. Delete whole core/column blocks to go to eight, or add a third core/columns row for fifteen. Keep the rows full: a half-empty last row breaks the closed frame, which is the whole idea. If you have seven marks, use five and drop the weakest two. - The cell height. 4.5rem on every image. Raise it together if your marks are mostly stacked lockups, which need more height for the same optical weight. Change all of them or none. - The label pair. Delete the right-hand line for a quieter band, or both if the section above already says what this is. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Palette. The ground is your base and all type is your contrast, each a fallback chain ending on a colour WordPress itself guarantees. No accent anywhere: an accent's brightness varies by theme and this band is nothing but type and hairlines. - Every rule. The grid is drawn in currentColor, so the hairlines are the same colour as the text they sit beside, in whatever colour your theme puts it. They cannot resolve to nothing and they follow the band when you invert it. - Typeface. The pattern states no font family. The label pair takes your theme's face. - Spacing scale. The band's vertical padding uses the core spacing presets, so it moves with your theme's rhythm. ### What it decides for itself - Five across, two down. Five is what a 1240px measure holds with a cell wide enough for a horizontal wordmark. Below 782px WordPress stacks the columns and the grid becomes a single closed column of ten cells, which is a deliberate list rather than a squeezed grid. - The cell height and its padding. 4.5rem of mark inside roughly 1.5rem of air, which is the proportion that stops a full cell looking crowded and an empty-ish one looking lost. - Where each hairline comes from. Top and left on the cells, right and bottom on the wrapper, as above. - The label pair. A tracked "The client list" against a quieter range line, spread to the two ends of the measure above the grid. ### Contrast The only type in the band is the label pair, set in your contrast on your base, which is the highest-contrast pair every stock block theme guarantees. They are small text and are held to the 4.5:1 body threshold, not the 3:1 large-text one. The hairlines are currentColor, so they carry the same ratio as the text and are never measured against a colour nobody chose. No text sits on an image anywhere in this pattern, which is the other reason the cells hold marks and nothing else. Technical notesBlock mechanics, responsive behaviour and constraints ### How a mark of any proportion fits the cell This is the part that decides whether the band survives contact with real logo files, which arrive at wildly different proportions: a square monogram, a long horizontal wordmark, a tall stacked lockup. Each image block sets width: 100%, a fixed height of 4.5rem, and scale: contain. WordPress serialises that as object-fit: contain; width: 100%; height: 4.5rem on the itself. So: - The box is fixed. Every cell is the same width and every mark occupies the same 72px band of height, whatever the file is. That is what makes ten unrelated marks read as one set. - The mark is never cropped. contain scales the whole file to fit inside that box and letterboxes the remainder, so a tall lockup shrinks until its full height fits and a wide wordmark shrinks until its full width does. Nothing is cut off and nothing is stretched. This is the opposite of the crop rule everywhere else in the catalogue. A photograph uses scale: cover, because a photograph may be cropped and must fill its frame. A logo may not be cropped and must not fill its frame: the empty space around a mark is part of the mark. So logos are the one place contain is correct, and cover here would slice the top off somebody's brand. The consequence to know about: a mark whose file has a lot of built-in padding will look smaller than its neighbours, because contain fits the file, not the ink inside it. Trim the transparent margin off the file rather than raising the height on that one cell. ### Related pattern Logo sector ledger (https://patternpaste.com/pattern/logo-sector-ledger.html) files pairs of logos into labelled sector rows. It is a separate pattern with its own layout and responsive behaviour. ### Included images The copied markup includes demonstration brand logos. 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 ## Logo cells: common questions Does Logo cells need a plugin? No. It is built only from core WordPress blocks (column, columns, group, image and paragraph), so it pastes into the block editor with nothing to install. Will Logo cells match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. 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 Logo cells free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Which WordPress version does it need? Requires a block theme on WordPress 7.0 to 7.1. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. 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 Logos Access Free Plugin None, core blocks only Variations 1 Colour From your theme Type From your theme Motion None Blocks column, columns, group, image, paragraph Presets color 5, spacing 4 WordPress 7.0+ Continue exploring ## Next in Logos Explore all 14 Logos patterns (https://patternpaste.com/patterns/logos/) Shot in Twenty Twenty-Five Logos No plugin needed ### Logo bookends Two rows of partner logos frame a large centred statement. Logos Preview pattern (https://patternpaste.com/pattern/logo-bookends.html) Shot in Twenty Twenty-Five Logos No plugin needed ### Logo claim A social-proof band that argues as well as displays: a display-size claim and a short proof paragraph hold the wide side, and four client logos stack in a narrow ruled rail opposite. Logos Preview pattern (https://patternpaste.com/pattern/logo-claim.html) Shot in Twenty Twenty-Five Logos No plugin needed ### Logo compact strip A concise introduction anchors one end of a shallow band, with four image logos on the other side. Logos Preview pattern (https://patternpaste.com/pattern/logo-compact-strip.html)