Use a logo suite to present a list logos, such as sponsors or vendors.
On this page
On this page
- Heading: an optional main title of the logo suite.
- Description: optional information that describes the logos shown.
- Logobar: a space for a list of logos, with three appearance options.
- Divider: an optional divider to separate the logo suite from following content.
Use the logo suite component to showcase a list of logos, such as for clients, sponsors, or related enterprises.
A logo suite is intended to build credibility, trust, and provide social proof by displaying consistent logos.
Logo suite should be used for groups of logos more than 4 and less than 12. In scenarios hoping to showcase more than 12 logos, considering stacking two components together. To create the best visual consistency and balance, rearrange and resize the logos when necessary to create similar area distribution and attention to each of the logos.
Arrange the logos so that the sizes, heights, colors, and areas of the separate logos create consistency and balance.
Don’t place logos without considering the spatial balance of the logo suite. Rearrange the logos to prevent using more than two rows or imbalance.
Do publish the logo suite with context. Introduce the logos and, when applicable, share how the logos have been grouped together.
Don’t use the logo suite without a heading/description. Consider turning off a visible description if needed.
Ensure that the colors are consistent across the logos to match the logo bar option. Ensure spacing between logos are consistent.
Don’t use logos with inconsistent colors or don’t match the logo bar option. Don’t use inconsistent spacing.
The logo suite offers three appearance options:
muted: The muted option is suitable for displaying 6+ logos and displays logos in a
secondarycolor. It allows for two rows of logos, maintaining a clean and organized appearance.
emphasis: The emphasis option is designed for spotlighting ~5 logos in the
primarycolor. It displays logos larger, drawing more attention to the logos.
marquee: The marquee option provides a flowing logo animation and can accommodate up to 12 logos. It is ideal for scenarios with limited page real estate.
All three options on the logo bar contains an optional divider. This divider can serve as a visual separator. These three options can be used adjacently.
Use the default muted option when displaying 6-12 logos across two rows. 2 rows (when using 6-12 logos).
The emphasis option can be used to spotlight logos. It is best used with 6 or less logos to create 1 row.
The marquee options allows for different speed options.
The logo suite comes with start and center align options. Only the heading and description will have visible changes to their alignment as logos will be consistently center aligned to create balance. By default, the logo suite is aligned to the start of the page.
Always ensure that a heading is provided to the logo suite. Headings provide leading context to the logos shown, and serve as a navigation hook for assistive technologies. It can be visually hidden if needed.