Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Logo wall

Overview Style Guidelines Examples
  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.

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.
© 2021-2024 Red Hat, Inc. Deploys by Netlify