Logos

A row of logos or images with responsive size and spacing options.

Sponsor logo grid on a dark section — Re-Color Logos tints every mark white for a uniform row.

Usage

The Logos block is a parent container for Logo child blocks. It was designed to show off a group of logos — such as sponsors or partners — in a neat, uniform row.

That doesn't mean it is limited to logos. Use it for any content that needs a row of uniform images. Ideally logos are a similar size and style; parent controls help you dial in a pixel-perfect layout. Images expand to fill your max width and height settings while maintaining aspect ratio.

Parent and child blocks

Select Logos for layout, sizing, spacing, opacity, and recolor settings that apply to every child. Select an individual Logo to choose its image and optional link URL.

New Logos blocks start with three Logo children. While the parent is focused, use the Logo inserter after the last image to add more. Click an empty Logo child to open the media library, or use the toolbar image control when a Logo is selected.

Layout (parent)

Justify — horizontal alignment (start, center, end, or space between). Also affects how logos reflow when the row wraps on smaller viewports.
Match By — standardize child size by Width, Height, or Both. Controls which dimension sliders appear.
Logo Height — max height in pixels (hidden when Match By is Width)
Logo Width — max width in pixels (hidden when Match By is Height)
Gap — space between logos horizontally and vertically when wrapped
Opacity — transparency for all logos. Linked logos jump to 100% opacity on hover for a "light up" effect.

Recoloring (parent)

Re-Color Logos — tints SVG or image logos using a CSS mask and a single foreground color
Logo Color — palette color applied when recoloring is enabled (visible when Re-Color Logos is on)

SVG logos are recommended for crisp rendering at any resolution and smaller file sizes.

Individual logos (child)

Each Logo child holds one image:

Click the placeholder or use the toolbar to choose an image
Link URL — set from the child toolbar when the Logo is focused (e.g. link each sponsor logo to their site)

Block width

Logos supports Wide and Full alignment from the block toolbar. Logos wrap to multiple rows as needed while keeping uniform sizing within the row.

Screenshots

Front-end

Same partner logos centered on a full-width band with wavy section edges.
Natural-color logos left-aligned under a heading — wrapping row with gap and max-height controls.

Editor

Parent Logos settings on a dark section — Re-Color Logos on with a white Logo Color tint.
Layout controls — Justify, Logo Size, Gap, and Opacity with brand colors unchanged.