Logo bar: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/logo-bar.html Core Patterns (https://patternpaste.com/patterns/) Logos (https://patternpaste.com/patterns/logos/) Catalogue access Standard # Logo bar A social-proof band of five partner logos on one line, held as a tight cluster inside two hairlines that run the full measure, with the label pair spread across the top. Each mark is an image fitted inside an equal column rather than cropped to fill one, and the columns are a core/columns row, so the line can never break however wide a mark draws. The band states no colour and no font of its own; the marks are artwork and carry theirs. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The marks. Replace all five images and write each alt to name the partner. - The count. Five is what the 880px row holds comfortably at this size. - The width of the row. 880px inside a 1240px frame. - The label pair. "Trusted by" and "Since 2014" sit at either end of the space above, at the full measure rather than the row's. - The frame. Delete the lower separator if this band sits directly above a section that already opens with a rule. The signature moment ## A ruled line of marks that cannot break The row is closed at both ends and is guaranteed to stay one line. The five marks sit in five equal core/columns, held to 880 inside two is-style-wide hairlines that run the full 1240 measure, with the label pair pushed to the two ends of the space above. The marks are therefore a tight cluster inside a wide frame rather than five things spread along a rule. Above 782px core gives every column flex-basis: 0 and min-width: 0, so the five share the measure evenly whatever each mark's artwork happens to be and however wide the band is drawn; below 782px core stacks them to one per line, which is a deliberate centred column rather than a ragged last row. There is no width at which two marks end up pinned to opposite edges with a hole between them, and no width at which the frame is left hanging open around three and a half marks. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing scale. - The hairlines. ### Set by this pattern - The height of a mark. - The row is narrower than its frame. - The distribution. - The frame. - Restraint. 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 single horizontal social-proof band: a small label pair, a hairline, five partner marks distributed evenly across the measure, and a second hairline closing it. Core blocks only, so there is nothing to install and nothing to keep updated. ### The signature moment: a ruled line of marks that cannot break The row is closed at both ends and is guaranteed to stay one line. The five marks sit in five equal core/columns, held to 880 inside two is-style-wide hairlines that run the full 1240 measure, with the label pair pushed to the two ends of the space above. The marks are therefore a tight cluster inside a wide frame rather than five things spread along a rule. Above 782px core gives every column flex-basis: 0 and min-width: 0, so the five share the measure evenly whatever each mark's artwork happens to be and however wide the band is drawn; below 782px core stacks them to one per line, which is a deliberate centred column rather than a ragged last row. There is no width at which two marks end up pinned to opposite edges with a hole between them, and no width at which the frame is left hanging open around three and a half marks. That guarantee is what the two hairlines are for. A logo bar is read as one object or it is read as clutter, and the rule above and the rule below are what say where the object starts and stops. Everything else in the band is held back so that the line of marks is the only thing with any weight in it: the labels are 15px, the marks are 5rem tall, and there is nothing else. Make it yoursVariations and the edits to make first ### What you change first - The marks. Replace all five images and write each alt to name the partner. Keep them all at one height rather than sizing them individually: the even row is the design, and per-mark tuning is what makes a logo bar look assembled by hand. - The count. Five is what the 880px row holds comfortably at this size. Four is airier and also correct. Six fits if you drop the height a step or widen the row, and the roster-plaque variation is the answer when you have more names than a line will take. Add or delete a whole core/column; nothing else needs changing. - The width of the row. 880px inside a 1240px frame. Widen it towards 1240 for a looser bar, narrow it for a tighter cluster; this one number is what sets how much the five marks read as a group. - The label pair. "Trusted by" and "Since 2014" sit at either end of the space above, at the full measure rather than the row's. Delete the right-hand one for a quieter band, or both if the section above already says what this is. - The frame. Delete the lower separator if this band sits directly above a section that already opens with a rule. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The pattern states no font family anywhere. Only the labels are type, and they take whatever your theme sets. - Palette. The ground is your base and every piece of text is your contrast, each a fallback chain ending on a colour WordPress itself guarantees, so the band paints in a theme with a full palette and still paints in a theme with none. No accent anywhere: an accent's brightness varies by theme, and there is nothing in this band that can afford to be the wrong weight. - Spacing scale. The band's padding, the gutter between marks and the space around the hairlines all use the core spacing presets, so they move with your theme's rhythm. - The hairlines. Two core/separator blocks, is-style-wide, in your theme's own separator styling, so they follow your text colour rather than stating one. ### What it decides for itself - The height of a mark. 5rem in the strip, 5.5rem on the plaque. Fixed height plus contain is what makes a set of unrelated logos read as one row; the alternative, sizing each by width, gives you a wide mark that dwarfs a square one. - The row is narrower than its frame. The two hairlines run the full 1240 measure and the marks sit inside a nested constrained group at 880 (620 on the plaque), so the gap between two marks is always smaller than the gap between the outer marks and the ends of the rules. Without that the five read as specks scattered along a long line rather than as one set: five equal columns across the whole measure gives each mark a quarter of a metre of air at 1920. A nested constrained group is the way to hold a measure inside a wider band; padding-right on the block is not, because the padding sits outside the layout's max-width and the block ends up the right width in the wrong place. - The distribution. Five equal columns inside that group, each mark centred in its own share. Equal columns plus equal fitted height is what makes the row read as evenly spaced; centring is also what keeps the stacked phone layout tidy, where marks aligned left and right would zigzag. - The frame. Two hairlines enclosing the row, which is what makes it read as a strip rather than as a set of pictures floating in a section. - Restraint. The marks are drawn large enough to be recognised and no larger. A logo bar that shouts competes with the section above it, which it should not do. ### Contrast Every piece of text in the band is your contrast on your base, which is the one pair every stock block theme guarantees and the highest-contrast pair it has. The labels are small text and are held to the 4.5:1 body threshold. The marks are artwork rather than text, so no contrast threshold applies to them and none is claimed. What is claimed is the thing above: they are dark, they need a light ground, and every payload here gives them one, the inverted variation included. Technical notesBlock mechanics, responsive behaviour and constraints ### The marks are images, and they are dark Each mark is a core/image with scale: contain at a fixed 5rem height, so it is fitted inside its share of the row rather than cropped to fill it: marks of different proportions sit at the same optical height and none of them is sliced. The images travel with the blocks as URLs with no attachment id, so nothing in your media library is referenced and no foreign id is copied. What you need to know before you move this band onto a dark ground: logo artwork is dark. These marks are SVGs drawn in currentColor, and an SVG loaded through is a separate document that never sees the page's colour, so it paints pure black no matter what the surrounding text is doing. Measured here in Chromium: the mark's opaque pixels come back rgb(0,0,0) on a page whose color is white. That is a silent failure of exactly the kind this catalogue exists to prevent, and it is why night-band does not simply invert: every mark there sits on its own base plate, and the plate is load-bearing, not decoration. The same applies to any logo you substitute. If your own marks are white artwork, you want them on the dark band and off the plates, and that is a swap you make deliberately rather than a thing that happens to work. Questions ## Logo bar: common questions Does Logo bar need a plugin? No. It is built only from core WordPress blocks (column, columns, group, image, paragraph and separator), so it pastes into the block editor with nothing to install. Will Logo bar match my theme? Choose by variation. Strip, Night band and Roster plaque take your theme’s palette; Chalk and graphite brings its own colours. How many variations does Logo bar have? 4: Strip, Chalk and graphite, Night band and Roster plaque. 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 Logo bar free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 6.1KB of core-block markup, 6 blocks (column, columns, group, image, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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)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 Subscription Plugin None, core blocks only Variations 4 Colour From your theme or its own palette Type From your theme Motion None Blocks column, columns, group, image, paragraph, separator Presets color 5, spacing 5 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 ### Accreditations ledger The trade bodies, schemes and awards behind a builder, an electrician or a clinic, set as a ledger of six ruled cells. Logos Preview pattern (https://patternpaste.com/pattern/accreditations-ledger.html) 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 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. Logos Preview pattern (https://patternpaste.com/pattern/logo-cells.html)