Logo suite

Anatomy

• 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.

Usage

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. 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.

Arrangement

Do

Arrange the logos so that the sizes, heights, colors, and areas of the separate logos create consistency and balance.

Don’t

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.

Color uniformity

Do

Ensure that the colors are consistent across the logos to match the logo bar option. Ensure spacing between logos are consistent.

Don’t

Don’t use logos with inconsistent colors or don’t match the logo bar option. Don’t use inconsistent spacing.

Options

Logo bar appearance

The logo suite offers three appearance options:

• muted: The muted option is suitable for displaying 6+ logos and displays logos in a secondary color. It allows for two rows of logos, maintaining a clean and organized appearance.
• emphasis: The emphasis option is designed for spotlighting 5 or fewer logos in the primary color. 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.

The muted and emphasis variants will automatically be applied if they are not specified. The muted variant will be applied if there are 6 or more logos, and the emphasis variant will be applied if there are 5 or fewer logos.

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 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 5 or fewer logos to create 1 row.

The marquee options allows for different speed options.

Alignment

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.

Accessibility

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.

Related components

• Image: to display a graphical representation.
• Ordered List: to display a list of numbered items.
• Unordered List: to present a collection of items without specific ordering.