Logo wall

OverviewStyleGuidelinesExamples
  1. Usage
  2. Variants
  3. Layout
  4. Best practices
  1. Usage
  2. Variants
  3. Layout
  4. Best practices

Usage

Use a logo wall when you need to display multiple Red Hat and/or partner logos in a group.

Variants

A logo wall is available in two styles: bordered and borderless. Both variants can be either interactive or static. However, it is recommended to use the bordered variant for interactive logos and the borderless variant for static logos.

Bordered

An example of a bordered logo wall with 6 logos each inside of a bordered container.

Borderless

An example of a borderless logo wall with 6 logos.

Layout

Ensure that all logos are at a size in which they are clearly legible. Use your best judgment to ensure that logos are neither too large nor too small and are proportionate to other elements on the page.

Here are some guidelines to follow if you’re unsure:

  • On desktop, there should be a maximum of 6 logos in a row.
  • On mobile, there should be a maximum of 2 logos in a row.

Responsive sizing

Each logo is in a container. The size of each container and logo is determined by the designer but should abide by best practices. Designers should ensure that all logos are of a similar size and proportionate to each other. Logos are centered vertically and horizontally within the container.

Bordered

Logo sizes may decrease on smaller screens, however the container will retain 16px padding on all sides. Logos are horizontally and vertically aligned.

Borderless

Logo sizes may decrease on smaller screens. Logo containers can adjust margins and padding for smaller screens. Logos are horizontally and vertically aligned.

Best practices

Color contrast

When displaying our partners' logos, it is essential to respect their brand identity by ensuring that their logos meet accessibility standards.

Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast.

Ensure that the color contrast between each logo and the background meets accessibility standards.

 Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast.

Place a logo over a background that does not meet accessibility standards.

Art Direction

When alternating graphics depending on the color palette, You should be careful select only the themable container which is the direct ancestor of the logo wall.

Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast.

Ensure that the color contrast between each logo and the background meets accessibility standards.

 Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast.

Place a logo over a background that does not meet accessibility standards.

See theming developer docs for more information.

<rh-picture> Planned is expected to help with this case

Logo sizes

Example of a borderless logo wall with similarly sized logos that represent each partner evenly.

Because the size and shape of our partners’ logos can vary, make sure to size them similarly so that each partner is evenly represented.

 Example of a borderless logo wall in which the sizes of logos varies and disproportionately represents each partner.

Each logo does not need to be the same height or width.

Alignment

Example of a borderless logo wall in which each logo is horizontally and vertically aligned in its container.

Align logos vertically and horizontally within a container.

 Example of a borderless logo wall in which each logo is aligned to the bottom of the container.

Don’t align all logos to the top or bottom of a container.

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub