Skip to content

GOV.UK Frontend v5.10.0-internal.1

Pre-release
Pre-release
Compare
Choose a tag to compare
@romaricpascal romaricpascal released this 15 Apr 11:03
· 242 commits to main since this release
v5.10.0-internal.1
f61ffdf
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

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:

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:

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 new file locations and theme-color, replacing 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">

This change was introduced in pull request #5800: Update favicons, app icons and OpenGraph image

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:

Contributors

matthew-shaw
Assets 3
Loading