Also known as: logos, company
Description
A block that displays multiple logos in a single row or up to 3 stacked rows. 4-6 logos can fit in each row and we can add a swiper to display up to 20 logos total.
Design
Use When
- Displaying logos for corporate sponsors or partners
- Displaying logos for career outcomes
- Displaying 4+ images without taking up much space
Editorial Guidelines
Follow our general Web Copy General Guidelines for headings, introductory copy, and buttons.
Logo limits
- For the stacked layout (multiple rows), the limit is 12-16 logos
- For the swiper layout, the limit is 20 logos
Fields
Introduction/Header, Footer, and Column Structure
Pulls in standard fields for these.
Images (Repeater)
Add images for the block here. You can select multiple images from the media library at once to speed things up.
Image recommendations:
- Images are automatically optimized on this component, so oversized images are totally okay!
- You'll just want to make the image large enough that it won't appear blurry. Logos are typically 512px wide.
- Logos should be PNGs with transparent backgrounds.
- Ideally, all the images will have the same ratio height and width, especially if they don't have a transparent background.
Built in:
- Images are vertically and horizontally centered.
- Image optimization that calculates approximate image size based on columns and screen size, then passes that info to "sizes" attribute to tell the browser, so oversized images won't cause issues.
- Swiper version lazy loads images on hidden slides
Configuration
Maximum Image Height
A number, in pixels, that limits the height of all images. Most useful for when you have a square logo and it's way bigger than the other images.
Top/Bottom Padding
Adds a py- value to each image.
Left/Right Padding
Adds a px- value to each image.
Swiper
Checkbox that puts images in a swiper.
Randomize Order
Checkbox that shuffles the order of the images on load. Most useful when you're using a swiper, and don't want to show favoritism to the first few images.
Randomize After
This field only appears if Randomize Order is checked. Prevents the first X images from randomizing, in case you want to feature the first few images but want the rest random.
Anchor ID
Sets id of the block.
