skip to content

Logo

The logo component is a link back to the local site’s homepage, most commonly included in the Header. This text-based logo replaces purely image-based versions for ease of translation.

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Markup

Since the text itself acts as the accessible label for the ds-logo link, the check mark graphic can be considered decorative. Therefore, it is supplied an empty alt string to suppress its readout in screen readers.

<a class="ds-logo" href="/">
  <img src="https://DemocracyClub.github.io/design-system/images/logo_icon.svg" alt="" />
  <span>democracy club</span>
</a>

Welsh variant

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Welsh versions of the logo should be in English and Welsh, using an <em> element to encapsulate the Welsh translation. The <em> needs to take lang="cy".

<a class="ds-logo" href="/">
  <img src="https://DemocracyClub.github.io/design-system/images/logo_icon.svg" alt="" />
  <span>
    Where Do I Vote?
    <em lang="cy">Ble Ydw i’n Pleidleisio?</em>
  </span>
</a>