Skip to content

GOV.UK Frontend v5.1.0
Compare
Choose a tag to compare
@querkmachine querkmachine released this 05 Feb 15:48
· 1302 commits to main since this release
v5.1.0
eb8b345
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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:

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:

Assets 3
Loading