Press Bar

A row of publication logos with an optional heading — the “As featured in” bar. Each logo is a Press Logo block, so you add, reorder and hide them one at a time.

The layout changes shape between mobile and desktop. On desktop it is a single horizontal row with the heading on the left and the logos spread across the space beside it. On mobile it stacks: heading centred on its own line, logos centred below it, wrapping onto as many rows as they need.

The logos render at 80% opacity by default. That is deliberate — the bar is a trust signal sitting behind the page’s own content, not something that should pull the eye away from it.

Settings

Content

Setting	What it does
Heading	The line beside the logos on desktop, above them on mobile. Leave it empty to show the logos on their own. Default “As featured in”.
Heading level	H2 (default), H3, or Plain text. See the note below on choosing.

Logos

Setting	What it does
Logo width	Every logo is scaled to this width, with its height following its own shape. Default 230px. Mobile scales down automatically — there is no separate mobile setting.
Maximum logo height	Stops a tall, narrow logo from out-growing the row. A logo that would exceed this is scaled down to fit rather than cropped. Default 130px. Raise it only if a logo looks cramped; lower it to rein in a tall lockup.
Logo opacity	How strongly the logos read against the background. Default 80%.

Spacing

Setting	What it does
Top / Bottom padding (mobile)	Spacing above and below the section on mobile. Default 1.5rem.
Top / Bottom padding (tablet)	The same for tablet. Default 2rem.
Top / Bottom padding	The same for desktop. Default 2.5rem.
Section ID	Optional anchor, so a link elsewhere on the page can jump here.

Blocks

Accepts Press Logo blocks only.

Tips

Logos are matched on width, not height

Publication wordmarks vary enormously in proportion — “The Washington Post” is a long horizontal line, “CBS” is almost square. Scaling them to a shared height makes the wide ones tower over the compact ones. Matching them on width is what makes the row read evenly.

Maximum logo height is the safety valve: a tall, narrow lockup that would otherwise grow the whole row gets scaled down to fit instead. Nothing is ever cropped.

If a logo still looks oversized next to its neighbours, that’s usually padding baked into the image file rather than a settings problem — crop it and re-upload.

Choosing a heading level

Use Plain text when the line is a label rather than a real section heading — which is usually the case for “As featured in”. It looks identical either way.

Pick H2 or H3 only when the bar is genuinely a titled section of the page, and choose the level that follows the heading above it so the page outline stays in order.

Five logos on desktop, four on mobile

The design is drawn with five logos on desktop. Five don’t sit comfortably in the narrower centred mobile layout, so the design drops one there — use Hide on mobile on the logo you can most afford to lose, and the remaining four settle into a tidy two-by-two.

More than five will still render — the row wraps rather than squashing anything — but the single clean row is what makes it read as a trust bar at a glance. If you have a lot of coverage, pick the strongest names rather than listing everything.

Transparent logo files, please

Upload PNGs with a transparent background, or SVGs. A logo saved on a white rectangle will show that rectangle as a visible white box whenever the section’s background isn’t also white.