Releases: alphagov/govuk-frontend
GOV.UK Frontend v5.6.0
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
New features
Make it easier to navigate complex services with the Service navigation component
We've added a new Service navigation component to help users to navigate services with multiple top-level sections. This replaces the navigation functions of the Header component, which will be deprecated in a future release of GOV.UK Frontend.
This component includes some features we consider experimental. We intend to iterate these features in response to user feedback. These are:
- moving the service name from the Header to the Service navigation
- providing slots for injecting custom HTML into specified locations within the component
We introduced this change in pull request #5206: Service navigation component.
GOV.UK Frontend v5.5.0
This release includes an updated list of organisations and brand colours. We’ve also added a new feature to stop long words from ‘breaking out’ of components.
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
New features
We've updated the list of organisations and brand colours included in Frontend
We've overhauled the list of organisations and organisation brand colours that are shipped with GOV.UK Frontend.
The previous list was outdated and had not kept up with changes to the machinery of government. We’ve updated the list to:
- add all current government departments and their brand colours
- add variants of brand colours that meet a 4.5:1 contrast ratio against white, where required
- provide warnings if defunct organisations are still being referenced in your Sass code
To enable these changes, set the feature flag variable $govuk-new-organisation-colours
to true
before you import GOV.UK Frontend in your Sass files:
// application.scss
$govuk-new-organisation-colours: true;
@import "govuk-frontend/all";
You can also silence warnings about defunct organisations by adding organisation-colours
to the $govuk-suppressed-warnings
setting.
We introduced this change in pull request #3407: Update organisation colours.
Stop long words breaking out of components with govuk-!-text-break-word
We've added a new override class to help display long words with no obvious break points when the space is too narrow to display them on one line. An example of a long word might be an email address entered by a user.
Wrapping the content with the govuk-!-text-break-word
class forces words that are too long for the parent element to break onto a new line.
A confirmation email will be sent to <span class="govuk-!-text-break-word">arthur_phillip_dent.42@peoplepersonalitydivision.siriuscyberneticscorporation.corp</span>.
Sass users can also use the govuk-text-break-word
mixin.
We introduced this change in pull request #5159: Add break-word typography helper.
Recommended changes
Update the $websafe
parameter on the govuk-organisation-colour
function
The govuk-organisation-colour
Sass function's $websafe
parameter has been renamed to $contrast-safe
.
This is to more accurately describe the functionality of the parameter.
The old parameter name will stop working in the next major version of GOV.UK Frontend.
We introduced this change in pull request #3407: Update organisation colours.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
GOV.UK Frontend v5.4.1
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
Recommended changes
Update Breadcrumbs to use nav
and aria-label
We've made changes to the Breadcrumbs component to improve how it appears to screen readers.
We've changed the wrapping element to use the nav
tag to expose it as a navigational landmark, and added an aria-label
attribute to differentiate it as breadcrumb navigation.
This change was introduced in pull request #4995: Update Breadcrumb component to improve screen reader accessibility.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
- #5114: Fix divider width for small checkboxes – thanks to @colinrotherham
- #5043: Refactor the accordion JavaScript
- #5044: Remove session storage checks from accordion JavaScript
- #5060: Reintroduce additional bottom margin to Error Summary content
- #5070: Fix alignment of content in conditional checkboxes and radio buttons
- #5090: Remove redundant tag CSS from phase banner
GOV.UK Frontend v5.4.0
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
This release includes new features to help you include only the components your service uses. Doing this can help reduce the size of the JavaScript and CSS files sent to users, improving their experience.
New features
Create individual components with createAll
We've added a new createAll
function that lets you initialise specific components in the same way that initAll
does.
The createAll
function will:
- find all elements in the page with the corresponding
data-module
attribute - instantiate a component object for each element
- catch errors and log them in the console
- return an array of all the successfully instantiated component objects.
import { createAll, Button, Checkboxes } from 'govuk-frontend'
createAll(Button)
createAll(Checkboxes)
You can also pass a config object and a scope within which to search for elements.
You can find out more about how to use the createAll
function in our documentation.
This change was introduced in pull request #4975: Add createAll
function to initialise individual components.
Use tabular numbers easily with govuk-!-font-tabular-numbers
We've added a new override class for tabular number styling: govuk-!-font-tabular-numbers
.
Using tabular numbers can make it easier for users to read numbers intended for comparison to one another, or for numbers that dynamically update.
It was previously only possible to use tabular numbers by using the govuk-font-tabular-numbers
Sass mixin.
This change was introduced in pull request #4973: Add override class for tabular numbers.
Deprecated features
Importing layers using all
files
You'll see a warning when compiling your Sass if you import any of our layers using the all
file. Importing using the all
files is deprecated, and we’ll remove them in the next major release.
In your import statements, use a trailing /index
rather than /all
to load GOV.UK Frontend's files.
For example:
@import "govuk/index";
instead of@import "govuk/all";
;@import "govuk/<PATH>/index";
instead of@import "govuk/<PATH>/all";
;
You do not need /index
at the end of each import path if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.
This change was introduced in pull request #4955: Rename all
files to index
for our Sass entry points.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
- #4942: Remove duplicate
errorMessage
argument for the password input component - thanks to Tim South for contributing this change - #4961: Fix tree-shaking when importing
govuk-frontend
- #4963: Fix input value not being set if the value was '0' – thanks to @dwp-dmitri-algazin for reporting this issue
- #4971: Fix Error Summary component outputting list HTML when no
errorList
is provided - #442: Update content to streamline installation info
- #438: Split up the 'Import CSS, assets and JavaScript' page
GOV.UK Frontend v5.3.1
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
- #4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black
- #4919: Use canvas colour for cookie banner over hardcoded grey
- #4899: Remove indents from conditional reveals in radios and checkboxes
- #4935: Fix password input button unexpectedly stretching
- #4936: Fix skip link underline being removed when global styles are enabled
- #4938: Fix
attributes
option ignoring values passed from thesafe
filter
GOV.UK Frontend v5.3.0
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
New features
Use the Password input component to help users accessibly enter passwords
The Password input component allows users to choose:
- whether their passwords are visible or not
- to enter their passwords in plain text
This helps users use longer and more complex passwords without needing to remember what they've already typed.
This change was introduced in pull request #4442: Create password input component. Thanks to @andysellick for the original contribution.
Recommended changes
Update the HTML for the Character count component
We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count"
and its form group class="govuk-form-group"
are now combined as the same <div>
. The hint text used as the count message now appears directly after the <textarea>
.
If you're not using Nunjucks macros, then you should:
- move all classes and attributes from the form group
<div>
to the component wrapper<div>
- remove the opening
<div>
and closing</div>
tags used by the form group - check the count message is now directly after the
<textarea>
The following example shows some HTML and the difference once it’s updated.
HTML before:
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
<div class="govuk-form-group">
<!-- // Label, hint, error and textarea -->
</div>
<!-- // Count message -->
</div>
HTML after:
<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
<!-- // Label, hint, error, textarea and count message -->
</div>
Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.
This change was introduced in pull request #4566: Use Character count formGroup
as module wrapper.
Remove redundant role
attributes from elements
We've made minor changes to the HTML of the page template, as well as the header, footer and pagination components.
You can update your HTML to remove the role
attribute from some elements. These include the:
main
role on themain
element in the templatebanner
role on theheader
element in the Header componentcontentinfo
role on thefooter
element in the Footer componentnavigation
role on thenav
element in the Pagination component
These roles were present to support legacy browsers, such as older versions of Internet Explorer. GOV.UK Frontend no longer supports these browsers, so you can now remove these roles.
You do not need to change anything if you're using the Nunjucks versions of the page template or these components,
This change was introduced in pull request #4854: Remove redundant role
attributes.
Fixes
We've fixed an upstream issue in the cssnano npm package that caused elements with transparency to render incorrectly in Internet Explorer 11. This affected the pre-compiled CSS files in the GOV.UK Frontend npm package and GitHub releases for versions 5.0, 5.1 and 5.2. This was fixed in:
- #1573: feat: add preset and plugin options for browserslist in the cssnano repository
- #4829: Bump the postcss group with 2 updates
We've made fixes to GOV.UK Frontend in the following pull requests:
- #4811: Use
KeyboardEvent.key
over deprecatedKeyboardEvent.keyCode
in the Tabs component - #4812: Use
KeyboardEvent.key
over deprecatedKeyboardEvent.keyCode
in the Button component - #4813: Remove deprecated
KeyboardEvent
properties from the Exit this Page component - #4855: Fix mobile product name being misaligned in new type scale
GOV.UK Frontend v5.2.0
In this release, we’ve adjusted our responsive type scale, which is available behind a feature flag. The type scale change is to make text easier to read on smaller screens. We’ve also deprecated the useTudorCrown
parameter.
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
New features
We've adjusted our responsive type scale
We've made the following adjustments to our responsive type scale:
- point 16 now returns 16px across all screen sizes
- point 19 now returns 19px across all screen sizes
- point 24 remains as 24px on large screens
- point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
- point 27 remains as 27px on large screens
- point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
- point 36 remains as 27px on large screens
- point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px
To enable these changes, set the feature flag variable $govuk-new-typography-scale
to true
before you import GOV.UK Frontend in your Sass files:
// application.scss
$govuk-new-typography-scale: true;
@import "govuk-frontend/all";
If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments.
You can read more on upgrading your service to the new type scale in our upgrade guide.
This change was introduced in pull request #2421: Adjust the responsive type scale
Insert custom HTML into component form group wrappers
You can now insert custom HTML into form group wrappers for all components with form fields.
govukInput({
formGroup: {
beforeInput: {
html: "example"
},
afterInput: {
html: "example"
},
}
})
This change was introduced in pull request #4567: Add beforeInput(s)
and beforeInput(s)
options to form groups.
Deprecated features
Stop using the useTudorCrown
parameter in the Heading component
The rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the useTudorCrown
parameter and will remove it in the next major release.
You can now remove the useTudorCrown
parameter, along with any other adjustments made to display the Tudor crown logo in your service.
This change was introduced in pull request #4740: Make Tudor Crown logo the default
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
GOV.UK Frontend v5.1.0
To install this version with npm, run npm install [email protected]
. You can also find more information about how to stay up to date in our documentation.
New features
Update to the new GOV.UK logo
The GOV.UK logo has been updated to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.
If your service uses GOV.UK branding, you must update your service between 19 February and 1 March 2024 to use the new logo.
These changes were made in the following pull requests:
- #4354: Implement the Tudor crown favicons (v5.x)
- #4297: Implement the Tudor crown in the Header component (v5.x)
Include the new logo assets
Multiple new image assets are included in this release. You’ll need to copy these to your service's image assets folder if they’re not being used directly from the Frontend package. By default this folder is located at /assets/images
.
If you’re using Nunjucks, the asset path may have been changed by the assetPath
global variable or assetsPath
parameter on the header component.
Copy the following files from /dist/assets/images
into your assets folder. Any images with the same name as an existing image can be safely overwritten.
- favicon.ico
- favicon.svg
- govuk-icon-180.png
- govuk-icon-192.png
- govuk-icon-512.png
- govuk-icon-mask.svg
- govuk-opengraph-image.png
Update the logo in the header of your page
If you’re using the govukHeader
Nunjucks macro in your service, add the useTudorCrown
parameter to the macro instantiation. This will become the default in a future version of GOV.UK Frontend.
{{ govukHeader({
...
useTudorCrown: true
}) }}
If you’re not using the Nunjucks macro, locate the SVG code for the existing logo and replace it with this updated SVG.
<svg
focusable="false"
role="img"
class="govuk-header__logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 148 30"
height="30"
width="148"
aria-label="GOV.UK"
>
<title>GOV.UK</title>
<path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
</svg>
Add attributes to component form group wrappers
You can now add attributes to the form group wrapper for all components with form fields.
govukRadios({
formGroup: {
attributes: {
"data-attribute": "value"
}
}
})
This change was introduced in pull request #4565: Allow attributes
option on form groups.
Use tabular numbers with the govuk-font-tabular-numbers
mixin
You can now use tabular numbers in your authored Sass by including the new govuk-font-tabular-numbers
mixin.
Previously, you’d use the govuk-font
mixin with the $tabular
parameter. However, the govuk-font
mixin includes styles unrelated to tabular numbers, which are not needed in some contexts.
These additional styles are not included if you use govuk-font-tabular-numbers
. Switching to the new mixin can reduce the size of your compiled CSS without affecting the appearance of pages.
This change was introduced in pull request #4307: Refactor tabular number activation into their own mixin.
Recommended changes
Replace instances of govuk-typography-responsive
with govuk-font-size
We've renamed the Sass mixin govuk-typography-responsive
to govuk-font-size
and have deprecated govuk-typography-responsive
. You can still use govuk-typography-responsive
, but we'll remove it in a future breaking release (GOV.UK Frontend v6.0.0).
This is an experimental change to see if the name govuk-font-size
better communicates the Sass mixin's intended use than the name govuk-typography-responsive
.
We're interested in feedback from the community on this name change, so please let us know what you think through our usual channels.
This change was introduced in pull request #4291: Rename govuk-typography-responsive
to govuk-font-size
.
Remove the aria-labelledby
attribute from accordion sections
If you’re not using our Nunjucks macros, remove the aria-labelledby
attribute from all accordion sections (div
elements that have the govuk-accordion__section-content
class).
This change was introduced in pull request #4628: Remove aria-labelledby
from accordion sections.
Deprecated features
Stop using the element
parameter on buttons
We’ve deprecated the element
Nunjucks parameter and will remove it in the next major release.
In the future, if the href
parameter is set the component will automatically use the <a>
element. If the href
parameter is not set the component will automatically use the <button>
element. It will not be possible to override this change.
This change was introduced in pull request #4646: Deprecate element
parameter on button component.
Stop using govuk-body-xs
, govuk-!-font-size-14
and '14' on the type scale
We’ve deprecated point 14 (14px large screens, 12px small screens) on the GOV.UK Frontend responsive type scale, including font override classes that use point 14:
govuk-body-xs
govuk-!-font-size-14
We’ll remove these classes and point 14 on the type scale in the next major release, GOV.UK Frontend release v6.0.0. With this change in the v6.0.0 release, you’ll no longer be able to call the Sass mixins govuk-font
or govuk-font-size
with $size
set to '14'.
This change was introduced in #4649: Deprecate 14 on the type scale and #4713: Ensure govuk-font-size()
handles string keys.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
- #4157: Dynamically position text within input prefixes and suffixes
- #4150: Header menu button position refactor
- #4093: Refactor positioning of radios and checkboxes
- [#4562: Use CSS custom properties for component
matchMedia()
](https://github.com/alphagov/govuk-frontend/...
GOV.UK Frontend v4.8.0
This release includes the ability to update the crown logo. You must do this between 19 February and 1 March 2024.
We’ll send reminders to our mailing list and cross-government Slack as soon as you can make this change.
New features
Update to the new GOV.UK logo (between 19 February and 1 March 2024)
We’ve updated the GOV.UK logo to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.
If your service uses GOV.UK branding, you must update your service to use the new crown.
These changes were made in the following pull requests:
- #4376: Implement the Tudor crown favicons (v4.x)
- #4278: Implement the Tudor crown in the Header component (v4.x)
- #4677: Adjust the spacing of the new Tudor crown (v4.x) - thanks to @MartinJJones and @monicacrusellasfanlo for contributing this change
Include the new logo assets
Multiple new image assets are included in this release. You’ll need to copy these to your service's image assets folder if they are not being used directly from the Frontend package. By default this folder is located at /assets/images
.
If you’re using Nunjucks, the asset path may have been changed by the assetPath
global variable or assetsPath
parameter on the header component.
Copy the following files from /dist/assets/images
into your assets folder. Any images with the same name as an existing image can be safely overwritten.
- favicon.ico
- govuk-apple-touch-icon-152x152.png
- govuk-apple-touch-icon-167x167.png
- govuk-apple-touch-icon-180x180.png
- govuk-apple-touch-icon.png
- govuk-logotype-tudor-crown.png
- govuk-mask-icon.svg
- govuk-opengraph-image.png
Update the logo in the header of your page
If you are using the govukHeader
Nunjucks macro in your service, add the useTudorCrown
parameter to the macro instantiation.
{{ govukHeader({
...
useTudorCrown: true
}) }}
If you are not using the Nunjucks macro, locate the HTML for the existing crown and replace it with this updated HTML. Make sure the URL for the new PNG fallback image is correct.
<!--[if gt IE 8]><!-->
<svg
aria-hidden="true"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 30"
height="30"
width="32"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
</svg>
<!--<![endif]-->
<!--[if IE 8]>
<img src="/assets/images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
<![endif]-->
GOV.UK Frontend v3.15.0
This release includes the ability to update the crown logo. You must do this between 19 February and 1 March 2024.
We’ll send reminders to our mailing list and cross-government Slack as soon as you can make this change.
New features
Update to the new GOV.UK logo (between 19 February and 1 March 2024)
We’ve updated the GOV.UK logo to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.
If your service uses GOV.UK branding, you must update your service to use the new crown.
These changes were made in the following pull requests:
- #4379: Implement the Tudor crown favicons (v3.x)
- #4380: Implement the Tudor crown in the Header component (v3.x)
- #4711: Adjust Tudor crown spacing (v3) - thanks to @MartinJJones and @monicacrusellasfanlo for contributing this change
Include the new logo assets
Multiple new image assets are included in this release. You will need to copy these to your service's image assets folder if they are not being used directly from the Frontend package. By default this folder is located at /assets/images
.
If you are using Nunjucks, the asset path may have been changed by the assetPath
global variable or assetsPath
parameter on the header component.
Copy the following files from /dist/assets/images
into your assets folder. Any images with the same name as an existing image can be safely overwritten.
- favicon.ico
- govuk-apple-touch-icon-152x152.png
- govuk-apple-touch-icon-167x167.png
- govuk-apple-touch-icon-180x180.png
- govuk-apple-touch-icon.png
- govuk-logotype-tudor-crown.png
- govuk-mask-icon.svg
- govuk-opengraph-image.png
Update the logo in the header of your page
If you are using the govukHeader
Nunjucks macro in your service, add the useTudorCrown
parameter to the macro instantiation.
{{ govukHeader({
...
useTudorCrown: true
}) }}
If you are not using the Nunjucks macro, locate the HTML for the existing crown and replace it with this updated HTML. Make sure the URL for the new PNG fallback image is correct.
<!--[if gt IE 8]><!-->
<svg
aria-hidden="true"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 30"
height="30"
width="32"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
</svg>
<!--<![endif]-->
<!--[if IE 8]>
<img src="/assets/images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
<![endif]-->