A row of logos or images with responsive size and spacing options.
The Logos block is a parent container for Logo child blocks and was designed to show off a group of logos, such as sponsors, in a neat, uniform way.
That doesn’t mean it needs to be confined to logos, however, and you can use this for any content that requires a row of uniform images. The Logos parent container can also hold Text blocks.
These child Logo blocks can hold links. For example, if you have a row of sponsor logos, you could link to each sponsor’s official website.
Ideally, the logos contained in this block are of a similar size and style, but we have include a bunch of options for you to tweak this block to look pixel perfect. The logo images will expand to fill your maximum width and height settings, but will maintain their aspect ratio.
Determines the maximum width in pixels that any child Logo block can expand to fill.
Determines the maximum height in pixels that any child Logo block can expand to fill.
Determines the space between each child Logo block. This will not only determine the horizontal space between logos, but also vertical space when the logos can no longer fit in one line.
Determines the transparency of the child blocks. If a child Logo block has a link, when the user hovers upon it the opacity for that Logo will be set to 100%, essentially causing it to light up as compared to its siblings.
The Logos block supports alignment in the same way as the core Buttons block. Not only will this determine where the logos are aligned in relation to other content on the page, but it will also determine how these logos flow as the viewport decreases down to mobile size. Alignment defaults to Centered, but supports Left or Right.
The Logos block will usually contain Logo block children. We recommend using SVG images if possible to ensure logos remain crisp at any screen resolution. As an added benefit, SVG files are usually the smallest file format when dealing with vector logos, so your page load speeds will thank you!
When focused, you can add a link to a Logo block from the sidebar.
Clicking on a logo block will bring up the media library, where you can choose any image you’d like.
While the Logos block is focused, the block inserter will appear at the right of the last logo. This allows you to add more logos into this block.