GOV.UK Frontend v5.3.1

To install this version with npm, run npm install govuk-frontend@5.3.1. 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 the safe filter

GOV.UK Frontend v5.3.0

To install this version with npm, run npm install govuk-frontend@5.3.0. 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 the main element in the template
• banner role on the header element in the Header component
• contentinfo role on the footer element in the Footer component
• navigation role on the nav 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 deprecated KeyboardEvent.keyCode in the Tabs component
• #4812: Use KeyboardEvent.key over deprecated KeyboardEvent.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 govuk-frontend@5.2.0. 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:

• #4768: Fix z-index of inputs in Radios and Checkboxes component
• #4784: Fix LibSass calc() compatibility in Radios and Checkboxes

GOV.UK Frontend v5.1.0

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

GOV.UK Frontend v5.0.0

You can find a summary of the main changes to GOV.UK Frontend v5 on the Frontend site. It's important to note our old frameworks (such as GOV.UK Elements) are no longer compatible with this release. It also stops Internet Explorer 11 from running GOV.UK Frontend JavaScript and removes support completely for Internet Explorer 8 to 10.

Your service will not stop working in Internet Explorer 11, but components will look and behave differently without JavaScript. Read more about how we provide support for different browsers.

Service teams should be using a progressive enhancement approach to make sure users can still access any content and complete their tasks.

If you still need to provide support for older versions of Internet Explorer, you should stay on the latest GOV.UK Frontend v4 release.

If you need it, we have a checklist for the changes you might need to make for v5, which you can view or copy (needs a Google account).

Breaking changes

You must make the following changes when you migrate to this release, or your service might break.

Update package file paths for Sass

In preparation for additional build targets, we've moved our package files into a directory called dist.

Replace govuk-frontend/govuk with govuk-frontend/dist/govuk in any Sass @import paths.

For example:

@import "node_modules/govuk-frontend/dist/govuk/all";

If you've added node_modules/govuk-frontend as a Sass import path, update it with the /dist suffix:

loadPaths: [
  'node_modules/govuk-frontend/dist'
]

If you're building your Sass code through Rails Assets Pipeline or Sprockets, refer to the section 'Update package file paths in Rails Assets Pipeline or Sprockets'.

Refer to the detailed guidance on importing using Sass.

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths for Nunjucks

In preparation for additional build targets, we've moved our package files into a directory called dist.

Replace govuk-frontend with govuk-frontend/dist in any nunjucks.configure() search paths:

nunjucks.configure([
  'node_modules/govuk-frontend/dist'
])

Refer to the detailed guidance on using Nunjucks.

These changes were made in the following pull requests:

• #3491: Update Review app to import govuk-frontend via local package
• #3498: Remove built dist and package from source

Update package file paths for assets such as images and fonts 

In preparation for additional build targets, we've moved our package files into a directory called dist.

If you're serving the assets from the GOV.UK Frontend assets folder (node_modules/govuk-frontend/govuk/assets), update your routing to the new assets path : node_modules/govuk-frontend/dist/govuk/assets.

Refer to the detailed guidance on importing assets.

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths in Rails Assets Pipeline or Sprockets

In preparation for additional build targets, we've moved our package files into a directory called dist.

Update the  node_modules/govuk-frontend part of the path to node_modules/govuk-frontend/dist, if you've added the path to GOV.UK Frontend package inside node_modules to:

• Rails Assets Pipeline search path using Rails.application.config.assets.paths
• Sprockets using append_path

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths if including JavaScript directly

In preparation for additional build targets, we've moved our package files into a directory called dist.

If you've set up your routing to serve GOV.UK Frontend's all.js file from node_modules, update the path you're serving to node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.

Update any <script> tag with the new path and filename, if necessary. Make sure they have a type="module" attribute. For example:

<script type="module" src="{path-to-javascript}/govuk-frontend.min.js"></script>

Replace <script>window.GOVUKFrontend.initAll()</script> to import and initialise GOV.UK Frontend using ES modules:

<script type="module">
  import { initAll } from '{path-to-javascript}/govuk-frontend.min.js'

  initAll()
</script>

Refer to the detailed guidance on importing JavaScript.

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths for Node.js and other bundlers

In preparation for additional build targets, we've moved our package files into a directory called dist.

If you're importing GOV.UK Frontend using import ... from 'govuk-frontend' or require('govuk-frontend'), you have nothing to change.

If you're using import to import individual components, replace govuk-frontend/govuk with govuk-frontend/dist/govuk. For example:

import Button from 'govuk-frontend/dist/govuk/components/button/button.mjs'

If you're using require to import individual components, replace govuk-frontend/govuk with govuk-frontend/dist/govuk and update the file name to <COMPONENT_NAME>.bundle.js. For example:

const Button  =  require('govuk-frontend/dist/govuk/components/button/button.bundle.js')

Refer to the detailed guidance on importing JavaScript.

These changes were introduced in #3498: Remove built dist and package from source

Verify your code does not rely on polyfills we have now removed

We have removed polyfills for Internet Explorer 8 to 11:

• DOMTokenList, Element.prototype.classList, Element.prototype.closest, Element.prototype.matches, and Event - required for Internet Explorer 11 and below
• Element.prototype.dataset - required for Internet Explorer 10 and below
• Date.now, Document, Element, Element.prototype.nextElementSibling, Element.prototype.previousElementSibling, Function.prototype.bind, Object.defineProperty, String.prototype.trim and Window - required for Internet Explorer 8

However, because these polyfills create or extend global objects ('polluting the global namespace'), you might have other code in your service unintentionally relying on the inclusion of these polyfills. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.

These changes were introduced in pull request #3570: Remove Internet Explorer 8 to 10 JavaScript polyfills, helpers, config

Stop Internet Explorer 11 and other older browsers running unsupported JavaScript

Add type="module" to all HTML <script> tags that include or bundle GOV.UK Frontend.

This is to stop Internet Explorer 11 and other older browsers running the JavaScript, which relies on features older browsers might not support and could cause errors.

Please note that <script> with type="module" runs JavaScript in a slightly different way than <script> without `type="module". You'll need to assess the impact of these nuances and make sure that:

• when your service code is bundled with GOV.UK Frontend it runs as expected in strict mode
• if you have any code that needs to run after GOV.UK Frontend in its own <script> tag, you'll need to make sure it's using type="module" or [defer](https://developer.mozilla.org/en-US/docs/Web/HTML/Eleme...

GOV.UK Frontend v5.0.0-beta.2

Breaking changes

Update the GOV.UK logo

The GOV.UK logo has been updated to merge the GOV.UK text with the crown graphic. This is to ensure that the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont fail to load. Styles relating to the logo have also been modified.

If you're using the govukHeader Nunjucks macro you don't need to change anything.

Otherwise, to update to the new logo:

1. Remove <span class="govuk-header__logotype-text"> and its content.
2. Remove the <span class="govuk-header__logotype"> around the svg element.
3. Replace the svg element with this updated SVG, ensuring that the class name and attributes are also updated.

This change was made in pull request #4449: Implement transitional crown in the Header component (v5.0).

Check your favicons, app icons and OpenGraph image still work

We've changed the names, formats and sizes of icon assets that we distribute in Frontend. You will want to check that the correct files are in place.

The following files have been added to the assets folder:

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

The following files have been removed from the assets folder:

• images/govuk-apple-touch-icon.png
• images/govuk-apple-touch-icon-152x152.png
• images/govuk-apple-touch-icon-167x167.png
• images/govuk-apple-touch-icon-180x180.png
• images/govuk-mask-icon.svg

If you're not using the Nunjucks page template, you will need to replace the list of icons in the template's head with the following:

<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">

You will need to update the file path to match your assets folder if it's not at the default location.

This change was made in pull request #4445: Implement transitional crown favicons (v5.0).

Recommended changes

We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

Remove the X-UA-Compatible meta tag

Remove the <meta http-equiv="X-UA-Compatible" content="IE=edge"> meta tag from your page template.

Internet Explorer versions 8, 9 and 10 included a feature that would try to determine if the page was built for an older version of IE and would silently enable compatibility mode, which would modify the rendering engine's behaviour to match the older version of IE. Setting this meta tag prevented that behaviour.

IE11 deprecated this meta tag and defaulted to always using IE11's renderer when the page has a HTML5 doctype (<!DOCTYPE html>).

As Frontend no longer supports Internet Explorer versions older than 11, this meta tag can now be removed.

This change was made in pull request #4434: Remove X-UA-Compatible meta tag.

Fixes

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

• #4416: Review and fix HTML attribute trailing spaces etc
• #4444: Fix UMD component exports with duplicate names
• #4492: Improve SupportError when <body class="govuk-frontend-supported"> is not set
• #4450: Update descriptions for Nunjucks macro options + fixes

GOV.UK Frontend v5.0.0-beta.1

Fixes

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

• #4391: Move private workspace packages to devDependencies
• #4394: Improve SupportError when document.body is not set

GOV.UK Frontend v5.0.0-beta.0

New features

Added a new Task list component

We’ve added a new component which creates lists of tasks that users need to complete.

Each task in the list can have a title, status, link and an optional hint. When a link is added, the whole row is clickable.

This change was made in pull request #2261: Task list component..

Added focus style for links containing non-text content

We've added a new focus style for use with non-text content, such as links containing images and focusable elements that are not form controls. This new style paints a visible yellow and black outline around the entire element, ensuring the focus style is visible in all situations.

For links containing images, we've added the govuk-link-image class. You should only use this class on links containing an image. If it also contains text, continue to use govuk-link instead.

<a class="govuk-link-image" href="#">
  <img src="..." alt="...">
</a>

You can use these styles in your own code by including the govuk-focused-box Sass mixin.

This change was made in pull request #3819: Add linked image focus style.

New link styles are now enabled by default

In GOV.UK Frontend v3.12.0 we introduced new link styles which are now enabled by default. They have:

underlines that are consistently thinner and a bit further away from the link text
a clearer hover state, where the underline gets thicker to make the link stand out to users

The new link styles are now enabled by default. If you are setting $govuk-new-link-styles to true in your Sass you can now remove this.

This change was made in:

• pull request #3599: Enable new link styles by default
• pull request #3600: Remove new link styles feature flag

Customise inverse button colours

For non-GOV.UK branded websites, you can now change the colours of inverse buttons - buttons intended for use on dark backgrounds.

To change the inverse button's background colour, set the $govuk-inverse-button-background-colour Sass variable.

To change the inverse button's text colour, set the $govuk-inverse-button-text-colour Sass variable.

@import "node_modules/govuk-frontend/govuk/base";

$govuk-inverse-button-background-colour: govuk-colour("yellow");
$govuk-inverse-button-text-colour: govuk-colour("black");
@import "node_modules/govuk-frontend/govuk/components/button/index";

This change was made in pull request #4043: Add ability to customise inverse button colours.

Precompiled CSS and JavaScript

The precompiled CSS and JavaScript files found in our GitHub releases are now also published to govuk-frontend on npm.

These changes were introduced in:

• pull request #3726: Default to ES modules with single Rollup config
• pull request #4241: Add new govuk-frontend.min.css package bundle

Check your tags align with design changes to the Tag component

We’ve changed the design of the tag component to improve accessibility and readability.

Text within the tag is no longer bold and uppercase with extra letter spacing. It’s now regular 19px text with the first letter of a word capitalised and the rest of the content lowercase. Due to this, there might be changes to the width of existing tags.

The colours have also changed to make them more distinguishable from buttons.

Check your service is using the correct capitalisation in the contents of tags and tags within phase banners.

This change was made in:

• pull request #3502: Tag design changes
• pull request #3731: Remove the first letter modifier from the tag component

Breaking changes

You must make the following changes when you migrate to this release, or your service might break.

"Compatibility mode" features are no longer supported

GOV.UK Frontend no longer supports compatibility with our old frameworks:

• GOV.UK Elements
• GOV.UK Template
• GOV.UK Frontend Toolkit.

You can no longer incrementally add GOV.UK Frontend to an existing service using one of these previous frameworks. We have removed the following Sass variables and one mixin which controlled compatibility mode:

• $govuk-compatibility-govukelements
• $govuk-compatibility-govuktemplate
• $govuk-compatibility-govukfrontendtoolkit
• the compatibility-mode mixin which automatically checked if any of the 3 control variables were set to true

We’ve additionally removed features that were managed using the above variables. The following features and their corresponding variables have now been removed:

• access to the legacy colour palette using $govuk-use-legacy-palette
• access to the legacy font using $govuk-use-legacy-font
• use of legacy tabular fonts using $govuk-font-family-tabular
• the ability to not use rem font sizes using $govuk-typography-use-rem

These changes were introduced in:

• pull request #3622: Remove compatibility mode variables
• pull request #3602: Remove compatibility-mode mixin
• pull request #3576: Remove legacy colour palette
• pull request #3574: Remove legacy and tabular fonts support
• pull request #3576: Remove $govuk-typography-use-rem setting

Update the HTML for warning text

We've removed the .govuk-warning-text__assistive class and its styles from GOV.UK Frontend. This class is unnecessary, as it duplicates the functionality of the .govuk-visually-hidden class already present in Frontend.

If you’re not using Nunjucks macros, update your warning text HTML to replace the govuk-warning-text__assistive class with the govuk-visually-hidden class.

This change was introduced in pull request #3569: Remove unnecessary class from Warning Text component.

Update package file paths

In preparation for additional build targets, we've moved our package files into a directory called dist.

If you’re using Node.js and other bundlers

Replace govuk-frontend/govuk with govuk-frontend/dist/govuk in any JavaScript require() or import file paths.

For example using require():

const Button = require('govuk-frontend/dist/govuk/components/button/button')

For example using import:

import Button from 'govuk-frontend/dist/govuk/components/button/button.mjs'

If you’re including JavaScript directly

Replace GOV.UK Frontend all.js with govuk-frontend.min.js and use <script type="module"> for ES modules:

<script type="module" src="{path-to-javascript}/govuk-frontend.min.js"></script>

Next replace <script>window.GOVUKFrontend.initAll()</script> to import and initialise GOV.UK Frontend using ES modules:

<script type="module">
  import { initAll } from '{path-to-javascript}/govuk-frontend.min.js'
  initAll()
</script>

If you import JavaScript using a different method, you might need to make some changes.

Refer to the detailed guidance on importing JavaScript.

If you’re using Sass

Replace govuk-frontend/govuk with govuk-frontend/dist/govuk in any Sass @import paths.

For example:

@import "node_modules/govuk-frontend/dist/govuk/all";

If you’ve added node_modules/govuk-frontend as a Sass import path, update it with the /dist suffix:

loadPaths: [
  'node_modules/govuk-frontend/dist'
]

If you’re using Nunjucks

Replace govuk-frontend with govuk-frontend/dist in any nunjucks.configure() search paths:

nunjucks.configure([
  'node_modules/govuk-frontend/dist'
])

These changes were made in the following pull requests:

• #3491: Update Review app to import govuk-frontend via local package
• #3498: Remove built dist and package from source

Update the <script> snippet at the top of your <body> tag

Page templates now include a new govuk-frontend-supported class on the <body> tag when GOV.UK Frontend JavaScript components are fully supported.

If you are not using our Nunjucks page template, replace the existing snippet:

<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>

with:

<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>

Update the hash used by your Content Security Policy

If your Content Security Policy uses a hash to let the snippet above run, you'll need to update it from:

sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=

to...