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.

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) (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
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

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 business and trade (preview) 

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: sanitize("Department for<br>Business &amp; Trade"),
    url: "/government/organisations/department-for-business-and-trade",
    brand: "department-for-business-trade",
    crest: "dbt"
  }
} %>

Executive office (preview) 

<%= render "govuk_publishing_components/components/organisation_logo", {
  organisation: {
    name: "Example",
    url: "/government/organisations/",
    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"
  }
} %>

Prime ministers office 10 downing street (preview) 

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

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"
    }
  }
} %>

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
} %>

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
} %>

On a dark background (preview) 

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