Logo Grid

This component can be used to showcase logos from our partners or clients.

Logo Grid pattern
When to use

The Logo Grid can be used to showcase our client and partner logos. It should be used sparingly and should not exceed more than eight logos spread across two rows. It can show a minimum of 4 logos. It comes in three themes of Light, Neutral and Forest Green.

  • Keep logos consistent in size and make sure they have enough clear space.
  • Don’t use full colour logos but instead use a negative version in either black or white.

Logo Grid pattern with correct UX

Keep logos consistent in size and make sure they have enough clear space.

Logo Grid pattern with incorrect UX

Don’t use full colour logos but instead use a negative version in either black or white.

Logo Grid pattern in Light theme
Light
Logo Grid pattern in Neutral theme
Neutral
Logo Grid pattern in Forest Green theme
Forest Green
Content & localisation

To ensure that the Logo Grid component remains visually appealing and accommodates different languages, adhere to the following content limitations:

  • Headline: The headline should be short and precise. Ideally fitting across two lines.

  • Body Copy: The body copy should be precise and clear, keeping in line with our tone of voice. Avoid adding paragraphs of text that might overwhelm the user.

By following these guidelines, you ensure that the Logo Grid component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

Logo Grid pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Logo Grid component across different screen sizes.

Logo Grid pattern on mobile
Mobile - 390px
Logo Grid pattern on tablet
Tablet - 768px
Logo Grid pattern on desktop
Desktop - 1440px