GOV.UK Frontend v5.10.2

To install this version with npm, run npm install govuk-frontend@5.10.2. 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:

• #5968: Apply header logo right padding only when menu button is visible

GOV.UK Frontend v4.10.0

We do not plan to make any further updates to GOV.UK Frontend v4. Consider upgrading to GOV.UK Frontend v5 to get the latest changes.

To install this version with npm, run npm install govuk-frontend@4.10.0. You can also find more information about how to stay up to date in our documentation.

New features

Prepare to use the refreshed GOV.UK brand

We’ve added features from the latest version of GOV.UK Frontend to help more services implement GOV.UK’s refreshed brand. Ahead of the brand’s go-live date of 25 June 2025, you should prepare your service by updating its code. You’ll then need to deploy the changes to production on 25 June 2025 or as soon after this date as possible.

The changes affect these components:

• GOV.UK header
• GOV.UK footer
• Cookie banner

The changes also affect the theme-color metadata and updated assets, including:

• icons
• Open Graph image
• manifest.json

To help you get ready, we've published this release, which includes several features to make the necessary updates across your service:

• updated markup for the GOV.UK header component (with the refreshed logo) and GOV.UK footer component (adding the crown logo)
• a new govuk-template--rebranded HTML class to apply updated styles from our CSS
• a new set of assets for icons, Open Graph image and page metadata

You’ll need to serve the new assets in your service. After that, what you’ll need to do depends on the code in your service and if you use GOV.UK Frontend:

• with its Nunjucks page template and macros
• with its Nunjucks macros (without the page template)
• without using Nunjucks

Add the brand refresh assets to your project

GOV.UK Frontend provides updated assets for the icons, Open Graph image and manifest.json to reflect the refreshed brand. These assets are available in the dist/govuk/assets/rebrand folder of the package.

Additionally, for the brand refresh, we’ve changed the names, formats and sizes of icon assets we distribute in Frontend.

Check that you’ve copied the following files from the /assets/rebrand/ directory to the correct place and are serving them at the correct URLs:

• manifest.json
• images/favicon.ico
• images/favicon.svg
• images/govuk-icon-180.png
• images/govuk-icon-192.png
• images/govuk-icon-512.png
• images/govuk-icon-mask.svg
• images/govuk-opengraph-image.png

If you serve the assets from the GOV.UK Frontend assets folder, make sure you’re serving the assets inside the dist/govuk/assets/rebrand folder correctly at <YOUR-SITE-URL>/assets/rebrand.

If you copy the font and image files into your application, you’ll need to copy the dist/govuk/assets/rebrand folder to <YOUR-APP>/assets/rebrand. If you use an automated task to copy the files, you may need to update your task to automatically copy our new folder.

Use the refreshed GOV.UK brand if you're using our Nunjucks page template

If you can edit your Nunjucks environment, you can add a govukRebrand global value to your environment, with a value of true. This global value makes the affected components use new styles for the brand refresh and display the updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component).

nunjucksEnv.addGlobal('govukRebrand', true)

If you cannot edit your Nunjucks environment, you can use our new govukRebrand 'variable' option from our page template, which makes:

• the Cookie banner component use new styles for the brand refresh
• the GOV.UK header and GOV.UK footer components rendered in the header and footer blocks display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component)

If you’ve overridden the header or footer block, see the next sections to make sure your header or footer displays the updated assets.

Use set to assign the govukRebrand variable a value of true and enable the new styles:

{% set govukRebrand = true %}

Do not place this code snippet between any block and endblock lines. Place it on a separate line.

If you’ve previously customised the template's assetPath, assetUrl or opengraphImageUrl options, you may need to update these to point to the location of the updated icons, Open Graph image and manifest.json.

Use the refreshed GOV.UK brand if you're using Nunjucks macro (without the page template)

You can do this by adding the updated styles for these components:

• GOV.UK header
• GOV.UK footer
• Cookie banner

Add the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

Enable the refreshed GOV.UK logo by adding rebrand: true to the GOV.UK header component configuration.

{{ govukHeader({
  rebrand: true
}) }}

Enable the GOV.UK crown in the GOV.UK footer component by addingrebrand: true to the component configuration.

{{ govukFooter({
  rebrand: true
}) }}

To use our updated social icon assets, change the HTML inside your element to use the new file path (from /assets/ to /assets/rebrand/) and theme-color metadata.

<meta name="theme-color" content="#1d70b8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/rebrand/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/rebrand/images/govuk-opengraph-image.png">

Use the refreshed GOV.UK brand if you're not using Nunjucks

To use the refreshed GOV.UK brand if you’re not using Nunjucks, start by adding the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

As you make changes, use the examples on our website to check your updates:

• GOV.UK header
• GOV.UK footer
• Cookie banner

We've updated the GOV.UK logo to merge the GOV.UK text with the crown graphic. This makes sure the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont, fail to load. To use the updated logo, replace the <svg> element and ‘GOV.UK’ text inside govuk-header__logotype-text <span> element in your header with the following SVG code to display the refreshed GOV.UK logo:

<svg
  xmlns="http://www.w3.org/2000/svg"
  focusable="false"
  role="img"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
  <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2....

GOV.UK Frontend v5.10.1

To install this version with npm, run npm install govuk-frontend@5.10.1. You can also find more information about how to stay up to date in our documentation.

Brand refresh fixes

We’ve fixed the colour of the dot in the refreshed GOV.UK logo as well as made some fixes to the implementation of the brand refresh in GOV.UK Frontend. We did this in the following pull requests:

• #5962: Fix colour of refreshed GOV.UK logo's dot
• #5905: Fix unnecessary whitespace after logo
• #5920: Fix transparency around edge of rebranded favicon.ico, thanks to @matteason for reporting and fixing this issue

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5908: Fix footer licence link reflowing on focus in Safari
• #5919: Update deprecation warning message to make it clearer how to update to new organisation colour palette
• #5953: Move organisation legacy colour palette warning into the govuk-organisation-colour mixin
• #5918: Fix govuk-font-size mixin outputting the wrong font properties for size 14 text when compiled using libsass, thanks to @oscarduignan for reporting this issue
• #5896: Fix character count not having error border colour when rendered with error message, thanks to @gunjam for fixing this issue

GOV.UK Frontend v5.10.0

To install this version with npm, run npm install govuk-frontend@5.10.0. You can also find more information about how to stay up to date in our documentation.

New features

Prepare to use the refreshed GOV.UK brand

We’ve added features to GOV.UK Frontend to implement GOV.UK’s refreshed brand. Ahead of the brand’s go-live date of 25 June 2025, prepare your service by updating its code. You’ll then need to deploy the changes to production on 25 June 2025 or as soon after this date as possible.

These changes affect these components:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

These changes also affect the theme-color metadata and assets, including:

• icons
• Open Graph image
• manifest.json

To help you get ready, we've published this release, which includes several features to make the necessary updates across your service:

• updated markup for the GOV.UK header component (with the refreshed logo) and GOV.UK footer component (adding the crown logo)
• a new govuk-template--rebranded HTML class to apply updated styles from our CSS
• a new set of assets for icons, Open Graph image and page metadata

You’ll need to serve the new assets in your service. What you’ll need to do after that depends on the code in your service and if you use GOV.UK Frontend:

• with its Nunjucks page template and macros
• with its Nunjucks macros (without the page template)
• without using Nunjucks
• using the Prototype Kit

Add the brand refresh assets to your project

GOV.UK Frontend provides updated assets for the icons, Open Graph image and manifest.json to reflect the refreshed brand. These assets are available in the dist/govuk/assets/rebrand folder of the package.

If you serve the assets from the GOV.UK Frontend assets folder, make sure the assets inside the dist/govuk/assets/rebrand folder are served correctly at <YOUR-SITE-URL>/assets/rebrand.

If you copy the font and image files into your application, you’ll need to copy the dist/govuk/assets/rebrand folder to <YOUR-APP>/assets/rebrand. If you use an automated task to copy the files, you may need to update your task to automatically copy our new folder.

Use the refreshed GOV.UK brand if you're using our Nunjucks page template

If you can edit your Nunjucks environment, you can add a govukRebrand global value to your environment, with a value of true. This global value makes the affected components use new styles for the brand refresh and display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component).

nunjucksEnv.addGlobal('govukRebrand', true)

If you cannot edit your Nunjucks environment, you can use our new govukRebrand 'variable' option from our page template, which makes:

• the Service navigation and Cookie banner components use new styles for the brand refresh
• the GOV.UK header and GOV.UK footer components rendered in the header and footer blocks display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component)

If you’ve overridden the header or footer block, see the next sections to make sure your header or footer displays the updated assets.

Use set to assign the govukRebrand variable a value of true and enable the new styles:

{% set govukRebrand = true %}

Do not place this snippet between any block and endblock lines. Place it on a separate line.

If you’ve previously customised the template's assetPath, assetUrl or opengraphImageUrl options, you may need to update these to point to the location of the updated icons, Open Graph image and manifest.json.

Use the refreshed GOV.UK brand if you're using Nunjucks macro (without the page template)

You can do this by adding the updated styles for these components:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

Add the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

Enable the refreshed GOV.UK logo by adding rebrand: true to the GOV.UK header component configuration.

{{ govukHeader({
  rebrand: true
}) }}

Enable the GOV.UK crown in the GOV.UK footer component by addingrebrand: true to the component configuration.

{{ govukFooter({
  rebrand: true
}) }}

Update the links to the assets. Change the HTML inside your <head> element to use the new file locations (from /assets/ to /assets/rebrand/) and theme-color. Replace any existing definitions.

<meta name="theme-color" content="#1d70b8">
<link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/rebrand/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/rebrand/images/govuk-opengraph-image.png">

Use the refreshed GOV.UK brand if you're not using Nunjucks

You also can use the refreshed GOV.UK brand if you’re not using Nunjucks.

Start by adding the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

As you make changes, use the examples on our website to check your updates:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

Replace the <svg> element in your header with the following SVG code to display the refreshed GOV.UK logo:

<svg
  xmlns="http://www.w3.org/2000/svg"
  focusable="false"
  role="img"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
  <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8...

GOV.UK Frontend v5.10.0-internal.1

Caution

This version must not be used in production, only to help you prepare ahead of time to the changes that will be brought by GOV.UK Frontend 5.10

To install this version with npm, run npm install govuk-frontend@5.10.0-internal.1. You can also find more information about how to stay up to date in our documentation.

New features

Use the refreshed GOV.UK brand

Placeholder for instructions on enabling the brand and when it's allowed to be deployed to live.

If you're not using our page template:

1. Add the govuk-template--rebranded to the <html> element of your page to use the rebranded styles of Footer and Cookie banner components.

We've added a new govukRebrand 'variable' option to our page template. It makes the Header, Footer, Service navigation and Cookie banner components use new styles for the brand refresh and display updated content (new logo in the Header component, crown in the Footer component).

Use set to assign it true and enable the new styles:

{% set govukRebrand = true %}

This snippet should not be placed between any block and endblock lines and instead be a separate line.

These changes affect the Header, Footer, Service navigation, and Cookie banner components. Make sure they still work as expected after enabling the refreshed brand.

These changes were made in the following pull requests:

• #5796: Update template background colour and components using it
• #5806: Update background colour of Cookie banner for brand refresh
• #5797: Add refreshed brand to service navigation component
• #5798: Add mixin to help rebrand specific properties
• #5793: Add GOV.UK logo macro
• #5794: Add redesigned header component

Update to the new GOV.UK logo

The GOV.UK logo has been updated to introduce a refreshed logotype design. This can be enabled using the feature flag described in the previous section.

If you're not using the GOV.UK template, but are using the GOV.UK header Nunjucks macro, you can enable this new logo by inserting rebrand: true into the component configuration.

{{ govukHeader({
  rebrand: true
}) }}

If you're not using our Nunjucks macros, update your logo HTML to use the new SVG code.

<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 60" height="30" width="162" class="govuk-header__logotype" aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
  <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8-2-3.1-4.4-4.1-7.1-.9-2.7-1.4-5.6-1.4-8.7s.5-6,1.4-8.7,2.3-5.1,4.1-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.7-1.7h0ZM152.9,50.4c1.9,0,3.6-.4,5-1.1,1.4-.7,2.7-1.7,3.6-3,1-1.3,1.7-2.8,2.2-4.5.5-1.7.8-3.6.8-5.7v-.2c0-2-.3-3.9-.8-5.7-.5-1.7-1.3-3.3-2.2-4.5-1-1.3-2.2-2.3-3.6-3-1.4-.7-3.1-1.1-5-1.1s-3.6.4-5,1.1c-1.5.7-2.7,1.7-3.6,3s-1.7,2.8-2.2,4.5c-.5,1.7-.8,3.6-.8,5.7v.2c0,2.1.3,4,.8,5.7.5,1.7,1.2,3.2,2.2,4.5,1,1.3,2.2,2.3,3.6,3,1.5.7,3.1,1.1,5,1.1ZM189.1,58l-12.3-44h9.8l8.4,32.9h.3l8.2-32.9h9.7l-12.3,44M262.9,50.4c1.3,0,2.5-.2,3.6-.6,1.1-.4,2-.9,2.8-1.7.8-.8,1.4-1.7,1.9-2.9.5-1.2.7-2.5.7-4.1V14h8.6v28.5c0,2.4-.4,4.6-1.3,6.6-.9,2-2.1,3.6-3.7,5-1.6,1.4-3.4,2.4-5.6,3.2-2.2.7-4.5,1.1-7.1,1.1s-4.9-.4-7.1-1.1c-2.2-.7-4-1.8-5.6-3.2s-2.8-3-3.7-5c-.9-2-1.3-4.1-1.3-6.6V14h8.7v27.2c0,1.6.2,2.9.7,4.1.5,1.2,1.1,2.1,1.9,2.9.8.8,1.7,1.3,2.8,1.7s2.3.6,3.6.6h0ZM288.5,14h8.7v19.1l15.5-19.1h10.8l-15.1,17.6,16.1,26.4h-10.2l-11.5-19.7-5.6,6.3v13.5h-8.7"></path>
</svg>

These changes were made in the following pull requests:

• #5793: Add GOV.UK logo macro
• #5857: Increase spacing in logo to 3 dots, increase viewbox size
• #5794: Add redesigned header component

Display the GOV.UK crown in the Footer component

The GOV.UK Footer has been updated to display the GOV.UK crown before its content, as a visual 'full stop' at the end of the page. This can be enabled using the feature flag described in the previous section.

If you're not using the GOV.UK template, but are using the GOV.UK footer Nunjucks macro, you can display the crown by inserting rebrand: true into the component configuration.

{{ govukFooter({
  rebrand: true
}) }}

If you're not using our Nunjucks macros, update your footer HTML to adding the following SVG code inside the <div> with the govuk-width-container class
child of the <footer> with govuk-footer element.

<svg
  focusable="false"
  role="presentation"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 32 30"
  height="30"
  width="32"
  class="govuk-footer__crown"
>
  <g>
    <circle cx="10.1" cy="8.8" r="1.8"></circle>
    <circle cx="5.2" cy="11.7" r="1.8"></circle>
    <circle cx="1.9" cy="16.6" r="1.8"></circle>
    <circle cx="16" cy="15.3" r="1.8"></circle>
    <circle cx="21.9" cy="8.8" r="1.8"></circle>
    <circle cx="26.8" cy="11.7" r="1.8"></circle>
    <circle cx="30.1" cy="16.6" r="1.8"></circle>
    <circle cx="16" cy="15.3" r="1.8"></circle>
    <path d="m16.7 4.9.2-.2 2.3 1.2V2.5l-2.3.7s-.1-.2-.2-.2l.9-2.9h-3.4l.9 2.9s-.2.1-.2.2l-2.3-.7v3.4l2.3-1.2.2.2-1.3 4c-.5 1.4.6 2.9 2.1 2.9s2.5-1.4 2.1-2.9l-1.3-4Zm2 14s-1.7 1.9-2.1 3c1.1 0 2.1-.3 3.2-1.4l-.4 4.3c-1-1.4-2.2-2-2.9-1.9 0 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-1-2.2-.9-3.8 1.2-5.4 1.5 2 1.3 3.7-.6 5.5 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-2.9-.6 0-1.2.3-2 .8l1.2-4c.3 1.1.7 1.9 1.1 2.3.3-.8.2-1.4 0-2.7l2.5.9c-1.3 1.8-2.6 4.3-3.7 8.8-3.7-.5-7.9-.8-12.3-.8s-8.6.3-12.3.8c-1.1-4.4-2.3-7-3.7-8.8l2.5-.9c-.2 1.3-.3 1.9 0 2.7.4-.4.8-1.1 1.1-2.3l1.2 4c-.7-.5-1.3-.8-2-.8 1.2 2.5 2.6 3.1 3.5 2.9 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.5C9 18.4 9 20 8.1 22.2c1.2-1.4 3.2-.7 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.3c1.1 1.1 2.1 1.4 3.2 1.4-.4-1.2-2.1-3-2.1-3h5.3Z"></path>
  </g>
</svg>

Update the GOV.UK icons, OpenGraph image, manifest file, and theme colour

The icon and OpenGraph image assets have been updated to reflect the refreshed brand.

If you're using the GOV.UK template and use these assets directly from GOV.UK Frontend, this can be enabled using the feature flag described in the previous section.

If you normally copy these assets from Frontend to a location within your service, the changed files are located in the /assets/rebrand directory.

If you have previously customised the template's assetPath, assetUrl or opengraphImageUrl options, you may need to update these to point to the new assets.

If you're not using the GOV.UK template, update your HTML to use the n...

GOV.UK Frontend v5.10.0-internal.0

Caution

This version must not be used in production, only to help you prepare ahead of time to the changes that will be brought by GOV.UK Frontend 5.10

To install this version with npm, run npm install govuk-frontend@5.10.0-internal.0. You can also find more information about how to stay up to date in our documentation.

New features

Use the refreshed GOV.UK brand

Placeholder for instructions on enabling the brand and when it's allowed to be deployed to live.
If you're not using our page template:

1. Add the govuk-template--rebranded to the <html> element of your page to use the rebranded styles of Footer and Cookie banner components.

These changes affect the Header, Footer, Service navigation, and Cookie banner components. Make sure they still work as expected after enabling the refreshed brand.

These changes were made in the following pull requests:

• #5796: Update template background colour and components using it
• #5806: Update background colour of Cookie banner for brand refresh
• #5797: Add refreshed brand to service navigation component
• #5798: Add mixin to help rebrand specific properties
• #5793: Add GOV.UK logo macro
• #5794: Add redesigned header component

Update to the new GOV.UK logo

The GOV.UK logo has been updated to introduce a refreshed logotype design. This can be enabled using the feature flag described in the previous section.

If you're not using the GOV.UK template, but are using the GOV.UK header Nunjucks macro, you can enable this new logo by inserting rebrand: true into the component configuration.

{{ govukHeader({
  rebrand: true
}) }}

If you're not using our Nunjucks macros, update your logo HTML to use the new SVG code.

<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 163 30" height="30" width="163" class="govuk-header__logotype" aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="10.1" cy="8.8" r="1.8"></circle>
    <circle cx="5.2" cy="11.7" r="1.8"></circle>
    <circle cx="1.9" cy="16.6" r="1.8"></circle>
    <circle cx="16" cy="15.3" r="1.8"></circle>
    <circle cx="21.9" cy="8.8" r="1.8"></circle>
    <circle cx="26.8" cy="11.7" r="1.8"></circle>
    <circle cx="30.1" cy="16.6" r="1.8"></circle>
    <circle cx="16" cy="15.3" r="1.8"></circle>
    <path d="m16.7 4.9.2-.2 2.3 1.2V2.5l-2.3.7s-.1-.2-.2-.2l.9-2.9h-3.4l.9 2.9s-.2.1-.2.2l-2.3-.7v3.4l2.3-1.2.2.2-1.3 4c-.5 1.4.6 2.9 2.1 2.9s2.5-1.4 2.1-2.9l-1.3-4Zm2 14s-1.7 1.9-2.1 3c1.1 0 2.1-.3 3.2-1.4l-.4 4.3c-1-1.4-2.2-2-2.9-1.9 0 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-1-2.2-.9-3.8 1.2-5.4 1.5 2 1.3 3.7-.6 5.5 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-2.9-.6 0-1.2.3-2 .8l1.2-4c.3 1.1.7 1.9 1.1 2.3.3-.8.2-1.4 0-2.7l2.5.9c-1.3 1.8-2.6 4.3-3.7 8.8-3.7-.5-7.9-.8-12.3-.8s-8.6.3-12.3.8c-1.1-4.4-2.3-7-3.7-8.8l2.5-.9c-.2 1.3-.3 1.9 0 2.7.4-.4.8-1.1 1.1-2.3l1.2 4c-.7-.5-1.3-.8-2-.8 1.2 2.5 2.6 3.1 3.5 2.9 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.5C9 18.4 9 20 8.1 22.2c1.2-1.4 3.2-.7 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.3c1.1 1.1 2.1 1.4 3.2 1.4-.4-1.2-2.1-3-2.1-3h5.3Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="113.6" cy="18" r="3.7"></circle>
  <path d="M47.4,18.1c0,.9.1,1.8.3,2.7s.6,1.6,1.1,2.3c.5.7,1.1,1.2,1.8,1.6.7.4,1.6.6,2.6.6s1.8-.2,2.4-.5c.7-.3,1.2-.7,1.6-1.2.4-.5.7-1,.8-1.5s.2-1,.2-1.5v-.2h-5.5v-3.3s9.8,0,9.8,0v12h-3.8v-2.7c-.3.4-.6.8-1,1.2-.4.4-.9.6-1.4.9-.5.2-1.1.4-1.7.6s-1.2.2-1.9.2c-1.6,0-3-.3-4.2-.9-1.2-.6-2.3-1.4-3.1-2.4s-1.5-2.2-1.9-3.5-.7-2.8-.7-4.4.2-3,.7-4.4c.5-1.4,1.2-2.5,2.1-3.5s2-1.8,3.3-2.4,2.7-.9,4.3-.9,2,.1,2.9.4c.9.2,1.8.6,2.5,1,.8.4,1.4,1,2,1.6.6.6,1.1,1.3,1.4,2.1l-3.8,2.2c-.2-.5-.5-.9-.8-1.3-.3-.4-.7-.7-1.1-1-.4-.3-.9-.5-1.4-.7s-1.1-.2-1.8-.2c-1,0-1.9.2-2.6.6-.7.4-1.3.9-1.8,1.6s-.8,1.4-1.1,2.3c-.2.9-.3,1.8-.3,2.7h0c0,.1,0,.1,0,.1ZM76.5,6.9c1.6,0,3.1.3,4.3.9s2.4,1.4,3.3,2.4,1.6,2.2,2,3.5.7,2.8.7,4.4-.2,3-.7,4.4c-.5,1.4-1.2,2.5-2,3.5s-2,1.8-3.3,2.4-2.7.9-4.3.9-3.1-.3-4.3-.9-2.4-1.4-3.2-2.4-1.6-2.2-2-3.5-.7-2.8-.7-4.4.2-3,.7-4.4,1.2-2.5,2-3.5,2-1.8,3.2-2.4,2.7-.9,4.3-.9ZM76.5,25.2c.9,0,1.8-.2,2.5-.5s1.3-.9,1.8-1.5.9-1.4,1.1-2.2c.2-.9.4-1.8.4-2.8h0c0-1.1-.1-2.1-.4-3s-.6-1.6-1.1-2.3c-.5-.6-1.1-1.1-1.8-1.5s-1.6-.5-2.5-.5-1.8.2-2.5.5c-.7.4-1.3.9-1.8,1.5s-.9,1.4-1.1,2.3-.4,1.8-.4,2.8h0c0,1.2.1,2.1.4,3,.2.9.6,1.6,1.1,2.2.5.6,1.1,1.1,1.8,1.5.7.4,1.6.5,2.5.5ZM94.6,29l-6.1-22h4.9l4.2,16.5h.2l4.1-16.5h4.9l-6.1,22h-6ZM131.5,25.2c.6,0,1.2,0,1.8-.3s1-.5,1.4-.9c.4-.4.7-.9.9-1.4.2-.6.4-1.3.4-2V7h4.3v14.2c0,1.2-.2,2.3-.7,3.3-.4,1-1.1,1.8-1.8,2.5s-1.7,1.2-2.8,1.6c-1.1.4-2.3.6-3.5.6s-2.5-.2-3.5-.6c-1.1-.4-2-.9-2.8-1.6s-1.4-1.5-1.8-2.5c-.4-1-.7-2.1-.7-3.3V7s4.3,0,4.3,0v13.6c0,.8.1,1.5.4,2,.2.6.6,1.1,1,1.4.4.4.9.7,1.4.9s1.1.3,1.8.3h0ZM144.2,7h4.4v9.6s7.8-9.6,7.8-9.6h5.4l-7.5,8.8,8,13.2h-5.1l-5.7-9.9-2.8,3.1v6.7s-4.4,0-4.4,0V7Z"></path>
</svg>

These changes were made in the following pull requests:

• #5793: Add GOV.UK logo macro
• #5794: Add redesigned header component

Footer component top border is now consistent with GOV.UK

We've updated the border of the Footer component so it matches the border used on GOV.UK. This will provide a more consistent experience for users as they navigate from GOV.UK to services.

This change was introduced in pull request #5792: Update footer top border to be consistent with GOV.UK

Royal Arms in the Footer component now matches the text's colour

We've updated the colour of the Royal Arms in the GOV.UK footer so it matches the text colour in browsers supporting the filter CSS property.

This improves its accessibility and reduces the number of colours used in the footer.

This change was introduced in pull request #5801: Update colour of the copyright logo using CSS

Deprecated features

Deprecation of $govuk-canvas-background-colour

The responsibilities of the $govuk-canvas-background-colour were unclear due to its naming and use by components outside of its description.

We're replacing it with a $govuk-template-background-colour variable, with a more appropriate name and better defined role to control only the background colour of the <html> element and background colour of elements that need to match for visual continuity, such as in the Footer and Cookie banner components.

If you were using $govuk-canvas-background-colour to match the background colour of the <html> element then use $govuk-template-background-colour instead.

If you were using $govuk-canvas-background-colour to set the background colour in your custom styling to light-grey then use govuk-colour('light-grey') instead.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5785: Add missing Sass imports of components depended on - thanks to @matthew-shaw for reporting this issue and proposing a fix

GOV.UK Frontend v5.9.0

To install this version with npm, run npm install govuk-frontend@5.9.0. You can also find more information about how to stay up to date in our documentation.

New features

Use our improved File upload component

We've added a JavaScript enhancement to the File upload component which:

• makes the component easier to use for drag and drop
• allows the text of the component to be translated
• fixes accessibility issues for users of Dragon, a speech recognition software
  This improvement is opt-in, as it's a substantial visual change which risks shifting other content on the page.

To enable this improvement for your users, you'll first need to update the markup of your File upload component:

• if you use our Nunjucks macro, using the new javascript option of govukFileUpload

{{ govukFileUpload({
	id: "file-upload",
	name: "photo",
	label: {
		text: "Upload your photo"
	},
	javascript: true
}) }}

• if you're using HTML, wrapping the <input type="file"> of the File upload markup in a <div class="govuk-drop-zone" data-module="govuk-file-upload">

<div class="govuk-form-group">
	<label class="govuk-label" for="file-upload-1">
		Upload your photo
	</label>
	<div class="govuk-drop-zone" data-module="govuk-file-upload">
		<input class="govuk-file-upload" id="file-upload" name="photo" type="file">
	</div>
</div>

If you're importing components individually in your JavaScript, which we recommend for better performance, you'll then need to import and initialise the new FileUpload component.

import {FileUpload} from 'govuk-frontend'
createAll(FileUpload)

This change was introduced in pull request #5305: Add progressively enhanced File Upload component

Form control components now have default id attributes

If you're using the included Nunjucks macros, these components now automatically use the value of the name parameter for the id parameter:

• Text input
• Textarea
• Password input
• Character count
• File upload
• Select

You’ll only have to provide the name parameters if they both have the same value.

The Date input component still requires an id attribute.

This change was introduced in pull request #5658: Update form control components to set a default id based on name.

Deprecated features

Move service name and navigation links from the GOV.UK header to Service navigation component

We’ve deprecated the option to show a service name in the GOV.UK header component. This option will be removed from the GOV.UK header in the next breaking release of GOV.UK Frontend.

We recommend updating your service to use the Service navigation component as soon as possible.

Previously, we deprecated the option to show navigation links in the GOV.UK header component. This option will be removed as well, along with the GOV.UK header JavaScript component, since its only purpose was to make the navigation links responsive.

This change was introduced in pull request #5721: Add deprecation field and deprecate header navigation.

Migrate to the new organisation colour palette

The legacy organisation colour palette has been deprecated and will be removed in the next major version.

If your service uses the organisation colour palette, make sure that things still look as expected with the $govuk-new-organisation-colours feature flag enabled.

This change was introduced in pull request #5627: Deprecate legacy organisation colour palette.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5628: Add focused error state to Character count - thanks to @edwardhorsford for reporting this issue
• #5717: Fix prototype kit sass import path - thanks to @joelanman
• #5720: Fix summary card actions appearance when there are lots of links
• #5728: Prevent menu button being overlaid at high zoom levels - thanks to @govindmalurwardwp for reporting this issue

Additional thanks to @colinrotherham for:
#5607: Fix compiler error "does not satisfy the constraint 'ObjectNested'"
#5239: Consider JSDoc @import for non-exported types

GOV.UK Frontend v5.8.0

To install this version with npm, run npm install govuk-frontend@5.8.0. You can also find more information about how to stay up to date in our documentation.

New features

Use our base configurable component to build your own configurable component

We've added a ConfigurableComponent class to help you build your own configurable components. It extends our Component class and allows you to focus on your components' specific features by handling these shared behaviours across components:

• checking that GOV.UK Frontend is supported
• checking that the component is not already initialised on its root element
• checking the type of the root element and storing it for access within the component as this.$root
• taking a configuration object as a parameter and then storing it for access within the component as this.config
• merging a passed configuration object with configuration options specified on the data attributes of the root element

We introduced this change in:

• #5499: Rename GOVUKFrontendComponentConfigurable, export ConfigurableComponent
• #5456: Refactor Accordion to extend from a GOVUKFrontendConfigurableComponent

Deprecated features

Importing Sass using govuk/all

You'll see a warning when compiling your Sass if you import all of GOV.UK Frontend's styling using govuk/all. Importing using the all file is deprecated, and we’ll remove it in the next major release.

In your import statements, use a trailing /index rather than /all to load GOV.UK Frontend's files:

• @import "govuk/index"; instead of @import "govuk/all";

You do not need /index at the end of each import path if you’re using Dart Sass.

This change was introduced in pull request #5518: Deprecate govuk/all.scss and only reference govuk/index.scss internally.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5533: Fix UMD files overriding existing global

GOV.UK Frontend v5.7.1

To install this version with npm, run npm install govuk-frontend@5.7.1. You can also find more information about how to stay up to date in our documentation.

Recommended changes

Stop setting a value for File upload components

The File upload component currently supports a value parameter, which populates the value HTML attribute of the input.

However, since no modern browser supports passing a value to a file input, we've made the decision to remove this parameter. It has been deprecated and will be removed in a future version of GOV.UK Frontend.

We introduced this change in pull request #5330: Deprecate File upload component's value parameter.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5396: Update various department brand colours

GOV.UK Frontend v5.7.0

To install this version with npm, run npm install govuk-frontend@5.7.0. You can also find more information about how to stay up to date in our documentation.

New features

The Royal Arms has been updated

The Royal Arms in the GOV.UK footer has been updated to reflect the version introduced by King Charles III.

If your service does not use the image directly from the Frontend package, you should ensure the new image is being copied to your service’s image assets folder. 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 govuk-crest.svg file from /dist/assets/images into your assets folder.

You can safely delete the old image files, named govuk-crest.png and govuk-crest-2x.png.

We introduced this change in pull request #5376: Update the Royal Arms graphic in footer (v5.x).

Components will not longer initialise twice on the same element

GOV.UK Frontend components now throw an error if they've already been initialised on the DOM Element they're receiving for initialisation.
This prevents components from being initialised more than once and therefore not working properly.

We introduced this change in pull request #5272: Prevent multiple initialisations of a single component instance

Respond to initialisation errors when using createAll and initAll

We've added a new onError option for createAll and initAll that lets you respond to initialisation errors.
The functions will continue catching errors and initialising components further down the page if one component fails to initialise,
but this option will let you react to a component failing to initialise. For example, to allow reporting to an error monitoring service.

We introduced this change in:

• pull request #5252: Add onError to createAll
• pull request #5276: Add onError to initAll

Check if GOV.UK Frontend is supported

We've added the isSupported function to let you check if GOV.UK Frontend is supported in the browser running your script.
GOV.UK Frontend components check this automatically, but you may want to use the isSupported function to avoid running some code when GOV.UK Frontend is not supported.

We introduced this change in pull request #5250: Add isSupported to all.mjs

Use our base component to build your own components

We've added a Component class to help you build your own components. It allows you to focus on your components' specific features by handling these shared behaviours across components:

• checking that GOV.UK Frontend is supported
• checking that the component is not already initialised on its root element
• checking the type of the root element and storing it for access within the component as this.$root

We introduced this change in:

• pull request #5350: Export a base Component class.
• pull request #5354: Refactor the root type check in GOVUKFrontendComponent

New brand colour

We've added a brand colour for the Serious Fraud Office in pull request #5389.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #5278: Fix service navigation mobile toggle spacing
• #5331: Fix Warning Text font weight when <strong> styles are reset
• #5352: Only apply margin to details summary when open
• #5089: Fix details expanded state not announced on iOS
• #5332: Improve how licence description wraps in the footer