Logo wall
On this page
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
Borderless
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.
Ensure that the color contrast between each logo and the background meets accessibility standards.
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.
Ensure that the color contrast between each logo and the background meets accessibility standards.
Place a logo over a background that does not meet accessibility standards.
See theming developer docs for more information.
<rh-picture>
Logo sizes
Because the size and shape of our partners’ logos can vary, make sure to size them similarly so that each partner is evenly represented.
Each logo does not need to be the same height or width.
Alignment
Align logos vertically and horizontally within a container.
Don’t align all logos to the top or bottom of a container.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.