[Library] Logos

Catalogue accessStandard

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. The rail is the only ruled thing in the section, so the marks read as the evidence for the sentence beside them rather than as decoration under it. Image blocks ship empty for your own files, each contained in a fixed cell so no mark is cropped. 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 social-proof band that makes an argument. The wide side carries a tracked eyebrow, a display-size claim and a short proof paragraph on a held measure; the narrow side carries four client logos stacked in a closed rail. Core blocks only, and the image blocks ship empty, so you point each cell at your own media library.

It is the third answer in the logos section and it does a different job from the other two. logo-bar and its plaque display set names. logo-cells tables ten files. This one asserts something and then shows the marks that back it up, so it belongs on an about page or above a contact section rather than as a quiet strip under a hero.

The signature moment

The evidence is ruled and the argument is not

There is exactly one rule in this pattern and it is drawn around the logos. The claim, the proof paragraph and the footnote have no border, no plate and no ground of their own; they are bare type on the band. The marks sit inside a rail closed on all four sides with a hairline between each one.

That single asymmetry is what makes the section argue. A ruled box reads as a record, a citation, a list of references, and putting one next to unruled prose makes the prose read as a statement and the box read as its footnote. Reverse it, or rule both halves, and the band collapses back into two columns of stuff. Density contrast does the rest: one side is airy and set at three different sizes, the other is a regular stack of identical cells.

The scale collision is deliberate too. The claim runs at up to 54px and the labels either side of it at 15px, with nothing in between except the reading paragraph. There is no mid-sized subheading anywhere, which is what keeps the sentence loud in a section that is otherwise very quiet.

What it inherits from your theme

  • Palette. The ground is your base and every piece of 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 type, hairlines and other people's logos.
  • Every rule. The rail is drawn in currentColor, so it is the same colour as the text beside it in whatever colour your theme sets, cannot resolve to nothing, and follows the band if you invert it.
  • Typeface. The pattern states no font family. The claim takes your theme's face, which is the thing worth looking at first: a display serif and a grotesque want slightly different tracking at this size.
  • Spacing scale. The band's padding and the gaps between the three parts of the argument use the core spacing presets.

What it decides for itself

  • 62 / 38. The argument takes the wide side and the marks the narrow one, which is the ratio that lets the claim break into two or three lines while the rail stays narrow enough to read as a column rather than as a second panel.
  • A held measure. The proof paragraph and its footnote sit in a nested constrained group at 34rem, not the full 62% column, so the reading line stays around 65 characters. The claim is deliberately not held: a display line wants the whole column.
  • The type ramp. Eyebrow and footnote at clamp(0.875rem, 1vw, 0.9375rem), the reading paragraph at clamp(max(1rem, 16px), 1.15vw, 1.1875rem) at 1.6 line-height, the claim at clamp(2.125rem, 4.2vw, 3.375rem) at 1.05 with negative tracking.
  • Four marks, one per row. Four is what balances a three-line claim plus a four-line paragraph. It is a column, not a grid: a second mark per row turns the rail back into the table that logo-cells already is.

What you change first

  1. The claim. It is the pattern. Make it a sentence somebody could disagree with; a claim that says "trusted by leading brands" gives the rail nothing to be evidence for.
  2. The proof paragraph. Put a number in it. The paragraph is the only place in the logos section where a specific fact fits, which is the whole reason this pattern exists.
  3. The images. Click each cell and choose your file. Use SVG or a transparent PNG; a logo on its own white rectangle will show that rectangle against your band, and no setting here can fix it.
  4. The count. Four core/group cells in the rail. Add a fifth by duplicating one, and give it the same top hairline the others have; the first cell is the only one without, because the rail's own top border draws that line. Beyond six the rail outgrows the argument and you want logo-cells instead.
  5. The labels. "Why they come back" and "The evidence" head the two halves. Delete both for a plainer band; delete only one and the row loses its alignment at the top.
How a mark of any proportion fits the cell204 words

Real logo files arrive at wildly different proportions: a square monogram, a long horizontal wordmark, a tall stacked lockup. So each image block sets width: 100%, a fixed height of 3.5rem, and scale: contain, which WordPress serialises as object-fit: contain; width: 100%; height: 3.5rem on the <img>.

The box is fixed, so all four marks occupy the same 56px band of height and read as one set. The mark is never cropped: contain scales the whole file until it fits inside that box and leaves the remainder empty, so a tall lockup shrinks on height and a wide wordmark shrinks on width, and nothing is cut off or stretched.

This is the opposite of the crop rule used everywhere else in the catalogue. A photograph uses scale: cover, because it may be cropped and must fill its frame. A logo may not be cropped and must not fill its frame: the space around a mark is part of the mark. The one thing to watch is a file with a lot of built-in transparent padding, which will look smaller than its neighbours because contain fits the file and not the ink inside it. Trim the file rather than raising the height on one cell.

At 39055 words

Below 782px WordPress stacks the two columns, so the argument reads first and the rail follows it full width. The marks are still contained in fixed cells, so they get wider and stay the same height, which is the correct behaviour for a logo and the reason the cells are not set as a proportion.

The variation82 words

Masthead takes the claim out of its column and runs it across a 46rem measure at the top of the band, then puts the rail and the proof paragraph in the row beneath it, marks on the left. The base makes the marks the counterweight to the headline; the masthead makes the headline the title of the whole band and sets the marks level with the reading, so the section opens louder and argues more quietly. Same palette, same promise, different structure.

Contrast93 words

Everything readable in the band is your contrast on your base, the highest contrast pair every stock block theme guarantees. The eyebrows, the footnote and the paragraph are small text held to the 4.5:1 body threshold; the claim is genuinely large text, above 34px at every width, so it would pass at 3:1, but it is on the same pair and is measured at the body threshold anyway. The rail is currentColor, so it carries the text's own ratio. No type sits on an image anywhere: the cells hold marks and nothing else.

Back to the library

Continue exploring

Next in Logos

Explore all 3 Logos patterns