[Library] Logos

Catalogue accessStandard

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. Image blocks ship empty for your own files. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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 ship empty, so you point each cell at your own media library.

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.

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.

What you change first

  1. 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.
  2. 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.
  3. 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.
  4. The label pair. Delete the right-hand line for a quieter band, or both if the section above already says what this is.
How a mark of any proportion fits the cell263 words

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

The variation51 words

Sector ledger keeps the same ten marks and opens the frame. It becomes five ruled rows, each a tracked sector label against two marks, with a single vertical rule dividing the label column from the evidence. The base tables the clients; the ledger files them. Same promise, same palette, different reading.

Contrast92 words

The only type in the band is the label pair and the sector labels, 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.

Back to the library

Continue exploring

Next in Logos

Explore all 3 Logos patterns