1. Government Frontend Component Guide
  2. Organisation logo

Component

Organisation logo

Organisation text with crest and branded border colour

Organisation name must be provided with pre-formatted line breaks. These cannot be inferred from the name alone.

Alternatively a custom organisation logo can be provided as an image.

Data tracking attributes can be provided to add tracking to each organisation logo. This will only apply to organisations with a link. Example here: with_data_attributes

The logo can optionally be wrapped in a heading.

The logo can be set to not take up the full width of the parent container with the inline option.

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Organisation<br>Name"),
    url: "http://www.gov.uk"
  }
} %>

Accessibility acceptance criteria

The crest image itself must be presentational and ignored by screen readers.

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text

Other examples

Single identity (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Single Identity",
    url: "http://www.gov.uk",
    crest: "single-identity"
  }
} %>

Attorney generals office (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Attorney <br>General’s <br>Office"),
    url: "/government/organisations/attorney-generals-office",
    brand: "attorney-generals-office",
    crest: "single-identity"
  }
} %>

Department for business innovation and skills (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Department <br>for Business<br>Innovation &amp; Skills"),
    url: "/government/organisations/department-for-business-innovation-skills",
    brand: "department-for-business-innovation-skills",
    crest: "bis"
  }
} %>

Department for international trade (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Department for<br>International Trade"),
    url: "/government/organisations/department-for-international-trade",
    brand: "department-for-international-trade",
    crest: "dit"
  }
} %>

Executive office (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Prime Minister's Office, 10 Downing Street",
    url: "/government/organisations/prime-ministers-office-10-downing-street",
    brand: "executive-office",
    crest: "eo"
  }
} %>

Home office (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Home Office",
    url: "/government/organisations/home-office",
    brand: "home-office",
    crest: "ho"
  }
} %>

Ministry of defence (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Ministry<br>of Defence"),
    url: "/government/organisations/ministry-of-defence",
    brand: "ministry-of-defence",
    crest: "mod"
  }
} %>

Office of the advocate general for scotland (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Office of the<br>Advocate General<br>for Scotland"),
    url: "/government/organisations/office-of-the-advocate-general-for-scotland",
    brand: "office-of-the-advocate-general-for-scotland",
    crest: "so"
  }
} %>

Office of the leader of the house of commons (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Office of the <br>Leader of the <br>House of Commons"),
    url: "/government/organisations/the-office-of-the-leader-of-the-house-of-commons",
    brand: "the-office-of-the-leader-of-the-house-of-commons",
    crest: "portcullis"
  }
} %>

Wales office (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Wales Office<br>Swyddfa Cymru"),
    url: "/government/organisations/wales-office",
    brand: "wales_office",
    crest: "wales"
  }
} %>

Uk atomic energy authority (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("UK Atomic <br>Energy <br>Authority"),
    url: "/government/organisations/uk-atomic-energy-authority",
    brand: "department-for-business-innovation-skills",
    crest: "ukaea"
  }
} %>

Hm revenue customs (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("HM Revenue<br>&amp; Customs"),
    url: "/government/organisations/hm-revenue-customs",
    brand: "hm-revenue-customs",
    crest: "hmrc"
  }
} %>

Bona vacantia (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Bona Vacantia",
    url: "/government/organisations/bona-vacantia",
    brand: "attorney-generals-office",
    crest: "org"
  }
} %>

Treasury solicitors office (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Treasury <br>Solicitor’s <br>Department"),
    url: "/government/organisations/treasury-solicitor-s-department",
    brand: "attorney-generals-office",
    crest: "org"
  }
} %>

Land registry (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Land Registry",
    url: "/government/organisations/land-registry",
    brand: "department-for-business-innovation-skills",
    crest: null,
    image: {
      url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/69/HMLR_logo.png",
      alt_text: "Land Registry"
    }
  }
} %>

Hm prison service (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "HM Prison Service",
    url: "/government/organisations/hm-prison-service",
    brand: "ministry-of-justice",
    image: {
      url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/321/HMPS.jpg",
      alt_text: "HM Prison Service"
    }
  }
} %>

With data attributes (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Cabinet Office",
    url: "/government/organisations/cabinet-office",
    brand: "cabinet-office",
    crest: "single-identity",
    data_attributes: {
      track_category: "navOrganisationLinkClicked",
      track_action: 1,
      track_label: "/government/organisations/cabinet-office",
      track_options: {
        dimension28: 2,
        dimension29: "Cabinet Office"
      }
    }
  }
} %>

Without a link (preview)

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Cabinet Office",
    brand: "cabinet-office",
    crest: "single-identity"
  }
} %>

As a heading (preview)

The heading_level option takes a number from 1 to 6.

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Cabinet Office",
    url: "/government/organisations/cabinet-office",
    brand: "cabinet-office",
    crest: "single-identity"
  },
  heading_level: 1
} %>

As a heading without a link (preview)

Cabinet Office

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Cabinet Office",
    brand: "cabinet-office",
    crest: "single-identity"
  },
  heading_level: 1
} %>

Inline-block (preview)

This option is useful to stop a large selectable area.

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Cabinet Office",
    url: "/government/organisations/cabinet-office",
    brand: "cabinet-office",
    crest: "single-identity"
  },
  inline: true
} %>