Logo marquee strip

A masthead over one quiet row of fourteen client marks, running across a 120px band.

A client strip is read in passing or not at all. This one runs at nine tenths of its own speed under a single label, every plate the same 200 by 120 slot, so a wide mark and a tall one carry exactly the same weight: nobody's logo is bigger than anybody else's because their file is. The pointer eases it back or forward at up to 1.6 times its speed and holds it still in the middle of the band, which is enough control to stop on a name and not enough to turn a credit strip into a toy.

Those are still: a row and a grid, both showing every client at once, both right when the list is short enough to fit. This one is for a list that is not, and it trades "see them all" for "see them all eventually". If the number of clients matters more than the impression of many, use the bar.

It is also the one shape the block does not counter-travel in. There is no second row to oppose, and that is deliberate rather than a smaller version of footer-marquee-words: a client strip is a rule with names on it.

1. The logos. Select the block and use "Fill items from media library" in its toolbar: pick fourteen at once and they are dealt into the items in order. Add or delete items freely; one row is one row however many are in it.
2. The masthead. The label, the heading and the line under it sit OUTSIDE the block, at your theme's own content width, so they are ordinary copy you can edit without going near the row. "Worked with" is a placeholder for whatever the list actually is: stockists, press, accreditations.
3. Item width and height if your marks are a different shape. They are the slot every logo is fitted inside, and the band is the row's own height.
4. Plate off, if you would rather the marks sat straight on the ground.
5. Reach and Hold if the pointer control feels too eager or too dead.

All of it. The plates are your own text colour mixed down, the hairline is the same colour again, the names are set in your theme's face at your theme's weight, and the band's ground is your section's. The label above reaches for role-label and falls back to contrast.

Each mark is a populated core/image at 3:2 with scale: contain, which is the same treatment hero-wall-clients gives a client wall: a logo sits inside its slot at its own proportions rather than being cropped to fill one, so a wide wordmark and a square badge both arrive whole.

Every plate is 200 by 120, stated, so the row is level whatever is dropped into it, and the band is exactly that one row. The gap is 18px. The edges are dissolved, so a name fades out rather than being cut in half.

The row can be stopped, and that is not a setting. This pattern originally turned the press-to-hold off, on the grounds that a client name is read in a glance; an accessibility pass measured it against WCAG 2.2.2 Pause, Stop, Hide, which is a Level A criterion, and a marquee meets all three of its conditions: it moves automatically, it runs for more than five seconds, and it sits beside other content. Every row in every marquee is now focusable and answers a tap, an Enter or a Space.

The running and the pointer control, and nothing else. With the plugin inactive, or with motion switched off in the block's inspector, the label is followed by the fourteen names as a plain stack. A reader who asks for reduced motion always gets the still row.

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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.