govuk_publishing_components: Organisation logos
Overview
The Organisation logo component can be used to render organisation logos that use either the Government Identity System, such as HMRC, or have a brand exemption, such as HMPS.
This documentation provides details on how to update and add new logos that are part of the Government Identity System.
Image requirements
The image should be added to app/assets/images/govuk_publishing_components/crests. The image format required is a transparent PNG, with the whitespace trimmed, unless whitespace has been agreed with a designer.
Naming convention
-
$crestthis is usually in the format"[department_abbreviation]_crest"all lowercase with underscores, for examplehmrc_crest -
_18px(deprecated) referred to the font-size used -
_x2(deprecated) was used to provide an @2x image for screens that supported it
Add the CSS required for new organisation logos
If you have added a new organisation logo, you will also need to add the required CSS to ensure it is requested on page load and renders correctly.
The first step is to add a new CSS class name in _organisation-logo.scss.
The class name should be in the format "gem-c-organisation-logo__crest--[LOWERCASE-ORGANISATION-ABBREVIATION]", for example gem-c-organisation-logo__crest--hmrc
The next step is to include the crest mixin to set the background image and styling for the new organisation logo, for example:
.gem-c-organisation-logo__crest--hmrc {
@include crest("hmrc_crest");
}
The value passed to the crest mixin here follows the naming convention mentioned above.
Adjusting the logo height
You can also use the tall-crest mixin to increase the height of the logo. This can be used to help avoid the organisation logo appearing too narrow.
Example used on the MOD organisation logo:
.gem-c-organisation-logo__crest--mod {
@include crest("mod_crest");
@include tall-crest;
}
Ministry of Defence organisation logo preview - https://components.publishing.service.gov.uk/component-guide/organisation_logo/ministry_of_defence/preview
Updating the Organisation logo component YML file
After adding a new logo to the organisation logo component, please add an example of this to the organisation logo component YML file.