Back to the pattern library

Logo

The Cloverleaf Symbol was created in 1968 for project facelift, when all the Co-op societies united under one banner. We now use a modernised version that optimised for modern production methods.

Example

Example

HTML

<a class="coop-logo-link" aria-label="Homepage" href="/">
    <img src="/images/logos/coop-logo.svg" alt="Co-op" onerror="this.onerror=null; this.src='/images/logos/coopX2.png'" class="coop-logo">
</a>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

The logo should:

  • only be used at a width of 38px and a height of 40px
  • only be used once per page
  • be the only thing that uses the brand blue
  • Co-op blue
  • $brand
  • rgb(0,177,231)
  • #00B1E7

Accessibility

The Co-op blue should only be used for the logo. It is not accessible for text. The logo should always be in the top left hand corner of the website as this a consistent signpost home for users.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change