If a user decides to go back to a previous page, make sure information they have already entered is pre-populated.
-Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant entry.
-{% endcall %} - -{% call wcagNote({id: "wcag-interact-back-links"}) %} - -Make sure no other interactive elements are too close to the Back link component. This is to make sure users can easily interact with it. This relates to WCAG 2.2 success criterion 2.5.8 Target size (minimum).
-{% endcall %} - Where possible, ensure the back link works even when JavaScript is not available. If this is not possible, you should hide the back link when JavaScript is not available. There are 2 ways to use the back link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro. @@ -76,4 +47,4 @@ Use the `govuk-back-link--inverse` modifier class to show a white link on a dark Make sure all users can see the back link – the background colour must have a contrast ratio of at least 4.5:1 with white to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). -{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }} +{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }} \ No newline at end of file diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md index ee578dc231..f63723bfb9 100644 --- a/src/components/breadcrumbs/index.md +++ b/src/components/breadcrumbs/index.md @@ -8,23 +8,9 @@ layout: layout-pane.njk --- {% from "_example.njk" import example %} -{% from "_wcag-callout.njk" import wcagCallout %} -{% from "_wcag-note.njk" import wcagNote %} The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels. -{{ wcagCallout({ - type: "component", - introAction: "use", - name: "Breadcrumbs", - criteria: [ - { - text: "make sure users can interact with the Breadcrumbs component", - anchor: "wcag-interact-breadcrumbs" - } - ] -}) }} - {{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }} ## When to use this component @@ -43,11 +29,6 @@ Always place breadcrumbs at the top of a page, before the `Make sure no other interactive elements are too close to the Breadcrumbs component. This is to make sure users can easily interact with it. This relates to WCAG 2.2 success criterion 2.5.8 Target size (minimum).
-{% endcall %} - There are 2 ways to use the breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro. {{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }} @@ -66,4 +47,4 @@ Use the `govuk-breadcrumbs--inverse` modifier class to show white links and arro Make sure all users can see the breadcrumbs – the background colour must have a contrast ratio of at least 4.5:1 with white to [meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). -{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }} +{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }} \ No newline at end of file diff --git a/src/components/cookie-banner/index.md b/src/components/cookie-banner/index.md index e538e0a9e1..b575e5c5e9 100644 --- a/src/components/cookie-banner/index.md +++ b/src/components/cookie-banner/index.md @@ -8,29 +8,37 @@ layout: layout-pane.njk --- {% from "_example.njk" import example %} -{% from "_wcag-callout.njk" import wcagCallout %} -{% from "_wcag-note.njk" import wcagNote %} +{% from "_brand-callout.njk" import brandCallout %} Allow users to accept or reject cookies which are not essential to making your service work. -{{ wcagCallout({ - type: "component", - introAction: "use the", - name: "Cookie banner", - criteria: [ - { - text: "make sure that items in focus can be seen all times", - anchor: "wcag-see-focus" - }, - { - text: "make sure users can interact with buttons and links in the Cookie banner component", - anchor: "wcag-interact-cookie-banner" - } - ] -}) }} - {{ example({ group: "components", item: "cookie-banner", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }} + + Brand + +See an example of the Cookie banner showing the refreshed GOV.UK branding.
+ +If you use the page template, you'll also get the Cookie banner without having to add it, as it's included by default. However, if you want to customise the default Cookie banner, read the [page template guidance about customising components](/styles/page-template/#changing-template-content). + +{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %} + +Brand changes to the {{title}} component
+From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.
+ +The Cookie banner component’s background colour will change to light blue.
+ +To help service teams in government get ready to use the new branding, we’ve provided several options to update their services.
+{% endcall %} + +### Update to refresh the GOV.UK brand + +If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh. + +You can enable the brand refresh within the GOV.UK header component by setting its `rebrand` option to true. You’ll also need to add some code to your `` and `` elements. + +[See the release notes for more details](https://github.com/alphagov/govuk-frontend/releases) and and other ways to update. + ## When to use this component Use this component if your service sets any cookies on a user’s device. @@ -81,15 +89,7 @@ Make sure the cookie banner does not: Position the cookie banner after the opening `` tag and before the ’skip to main content‘ link. If you're using the Nunjucks page template, use the `bodyStart` block. -{% call wcagNote({id: "wcag-see-focus"}) %} - -Do not make the Cookie banner component ‘sticky’ to the top of the page by using `position: fixed` or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum).
-{% endcall %} - -{% call wcagNote({id: "wcag-interact-cookie-banner"}) %} - -Do not change the padding or margins of buttons and links within the Cookie banner component. This is to make sure there’s adequate space for the user to interact with the buttons and links. This relates to WCAG 2.2 success criterion 2.5.8 Target size (minimum).
-{% endcall %} +Do not make the Cookie banner component ‘sticky’ to the top of the page by using `position: fixed` or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with [WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html). ### Option 1: If you’re only using essential cookies @@ -211,4 +211,4 @@ We decided to remove the visible focus indicator from the confirmation message f - it's the first element, at the very top of the page - it displays in place of the cookie message, which is the last thing the user interacted with -In this scenario, we assume that a visible focus indicator would be more likely to confuse users than to help them. However, we need more research to prove this. +In this scenario, we assume that a visible focus indicator would be more likely to confuse users than to help them. However, we need more research to prove this. \ No newline at end of file diff --git a/src/components/footer/index.md b/src/components/footer/index.md index 770adb0f3a..f6914151b4 100644 --- a/src/components/footer/index.md +++ b/src/components/footer/index.md @@ -8,27 +8,33 @@ layout: layout-pane.njk --- {% from "_example.njk" import example %} -{% from "_wcag-callout.njk" import wcagCallout %} -{% from "_wcag-note.njk" import wcagNote %} +{% from "_brand-callout.njk" import brandCallout %} +{%- from "govuk/components/tag/macro.njk" import govukTag -%} The GOV.UK footer provides copyright, licensing and other information about your service. -{{ wcagCallout({ - type: "component", - introAction: "use the", - name: "GOV.UK footer", - criteria: [ - { - text: "make sure help links can be found in a consistent place on each page", - anchor: "wcag-consistent-links" - } - ] -}) }} - {{ example({ group: "components", item: "footer", example: "default", id: "default-1", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }} + + Brand + +See an example of the GOV.UK footer showing the refreshed GOV.UK branding.
+ If you use the page template, you'll also get the footer without having to add it, as it's included by default. However, if you want to customise the default footer, read the [page template guidance about customising components](/styles/page-template/#changing-template-content). +{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %} + +Brand changes to the {{title}} component
From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.
+ +The updated {{title}} component:
+-
+
- uses a light blue as the background colour, instead of grey +
- adds a thick blue top border +
- adds a small crown logo, in addition to the existing coat of arms +
To help service teams in government get ready to use the new branding, we’ve provided several options to update their services.
+{% endcall %} + ## When to use this component Use the footer at the bottom of every page of your service. @@ -39,6 +45,18 @@ Add a copyright notice to the footer to clarify who owns the copyright. For GOV. Make it clear whether content is available for re-use - and if it is, under what sort of licence. Use an [Open Government Licence](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/) unless you have permission from the National Archives to use a [different type of licence](https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/open-government-licence/other-licences/). +### Update to refresh the GOV.UK brand + + + Brand + + +If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh. + +You can enable the brand refresh within the GOV.UK footer component by setting its `rebrand` option to true. You’ll also need to add some code to your `` and `` elements. + +[See the release notes](https://github.com/alphagov/govuk-frontend/releases) for more details and other ways to update. + ### Footer without links {{ example({ group: "components", item: "footer", example: "default", titleSuffix: "second", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second" }) }} @@ -60,10 +78,9 @@ You can add links to: Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text. -{% call wcagNote({id: "wcag-consistent-links"}) %} +If you include links to ‘help’ pages within the GOV.UK footer component, make sure to place those links consistently within the footer content. -If you include links to ‘help’ pages within the GOV.UK footer component, make sure to place those links consistently within the footer content. Also make sure that ‘help’ links always function in a similar way across each page. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
-{% endcall %} +Also make sure that ‘help’ links always function in a similar way across each page. This is to comply with [WCAG 2.2 success criterion 3.2.6 Consistent help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html). ## Adding secondary navigation @@ -75,4 +92,4 @@ Only add secondary GOV.UK navigation if you’re creating a GOV.UK service, and ### Footer with links and secondary navigation -{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }} +{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }} \ No newline at end of file diff --git a/src/components/header/index.md b/src/components/header/index.md index f0c8941e35..af51ab5743 100644 --- a/src/components/header/index.md +++ b/src/components/header/index.md @@ -8,31 +8,35 @@ layout: layout-pane.njk --- {% from "_example.njk" import example %} -{% from "_wcag-callout.njk" import wcagCallout %} -{% from "_wcag-note.njk" import wcagNote %} +{% from "_brand-callout.njk" import brandCallout %} The GOV.UK header component tells users they’re using a service on GOV.UK and lets them use GOV.UK-wide tools. Also known as the GOV.UK masthead. -{{ wcagCallout({ - type: "component", - introAction: "use the", - name: "GOV.UK header", - criteria: [ - { - text: "make sure all page content can be seen when the user interacts with a dropdown menu", - anchor: "wcag-do-not-cover-content" - }, - { - text: "make sure help links can be found in a consistent place on each page", - anchor: "wcag-consistent-help-links" - } - ] -}) }} - {{ example({ group: "components", item: "header", example: "default", id: "default-1", html: true, nunjucks: true, open: false, loading: "eager" }) }} + + Brand + +See an example of the GOV.UK header showing the refreshed GOV.UK branding.
+ If you use the page template, you'll also get the GOV.UK header without having to add it, as it's included by default. However, if you want to customise the default GOV.UK header, read the [page template guidance about customising components](/styles/page-template/#changing-template-content). +{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %} + +Brand changes to the {{title}} component
+From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.
+ +The updated {{title}} component:
+ +-
+
- uses blue as the background colour, instead of black +
- uses a new logo and wordmark lockup +
- adds 60px in height +
To help service teams in government get ready to use the new branding, we’ve provided several options to update their services.
+{% endcall %} + ## When to use this component If your service is being hosted on one of these domains, use the GOV.UK header component: @@ -57,6 +61,18 @@ This also assures users that they’re in the right place to use your service an For guidance on how to plan your header and navigation, see the [Help users navigate a service pattern](/patterns/navigate-a-service). +### Update to refresh the GOV.UK brand + + + Brand + + +If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh. + +You can enable the brand refresh within the GOV.UK header component by setting its `rebrand` option to true. You’ll also need to add some code to your `` and `` elements. + +[See the release notes for more details](https://github.com/alphagov/govuk-frontend/releases) and and other ways to update. + ### Default GOV.UK header Most services on GOV.UK should use the default GOV.UK header. @@ -92,20 +108,6 @@ We’ve deprecated the [GOV.UK header with navigation](/components/header/with-s Use the Service navigation component to add navigation links instead. -{% call wcagNote({id: "wcag-do-not-cover-content"}) %} - -Do not make header elements, like dropdown menus, ‘sticky’ to the top of the page by using `position: fixed` or any other method. In other words, avoid any implementations that cause menus to sit on top of page content.
-This is to make sure elements do not hide or obscure any content which has a focus applied and comply with WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum).
-{% endcall %} - -In November 2021, [the GOV.UK homepage introduced a menu bar](https://insidegovuk.blog.gov.uk/2021/11/11/launching-gov-uks-new-menu-bar/) that avoids obscuring content by shifting the page down. - -{% call wcagNote({id: "wcag-consistent-help-links"}) %} - -You can add a link to a ‘help’ page in your service’s GOV.UK header component. If you do, the link must be positioned consistently within the header, and must always link to the same place.
-For example, a header link to “Get help with this service” must go to the same place as similar header links elsewhere in your service. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
-{% endcall %} - ### GOV.UK header with One Login GOV.UK One Login maintains their own header on the [Let users navigate to their GOV.UK One Login and sign out easily](https://www.sign-in.service.gov.uk/documentation/design-recommendations/let-users-navigate-sign-out) page. diff --git a/src/components/service-navigation/index.md b/src/components/service-navigation/index.md index bcb0f6a0a4..426132bda8 100644 --- a/src/components/service-navigation/index.md +++ b/src/components/service-navigation/index.md @@ -8,29 +8,32 @@ layout: layout-pane.njk --- {% from "_example.njk" import example %} -{% from "_wcag-callout.njk" import wcagCallout %} -{% from "_wcag-note.njk" import wcagNote %} +{% from "_brand-callout.njk" import brandCallout %} +{% from "govuk/components/inset-text/macro.njk" import govukInsetText %} Service navigation helps users understand that they’re using your service and lets them navigate around your service. -{{ wcagCallout({ - type: "component", - introAction: "use", - name: "Service navigation", - criteria: [ - { - text: "make sure all page content can be seen when the user interacts with a dropdown menu", - anchor: "wcag-do-not-cover-content" - }, - { - text: "make sure help links can be found in a consistent place on each page", - anchor: "wcag-consistent-help-links" - } - ] -}) }} +{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %} + +Brand changes to the {{title}} component
From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.
+ +The updated {{title}} component:
+-
+
- uses light blue as the background colour, instead of grey +
- slightly reduces overall padding +
To help service teams in government get ready to use the new branding, we’ve provided several options to update their services.
+{% endcall %} {{ example({ group: "components", item: "service-navigation", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }} + + Brand + +See an example of the Service navigation showing the refreshed GOV.UK branding.
+ +If you use the page template, you'll also get the Service navigation without having to add it, as it's included by default. However, if you want to customise the default Service navigation, read the [page template guidance about customising components](/styles/page-template/#changing-template-content). + ## When to use this component Use the Service navigation to help users understand that they’re using your service. @@ -45,6 +48,16 @@ This also assures users that they’re in the right place to use your service an For guidance on how to plan your header and navigation, see the [Help users navigate a service pattern](/patterns/navigate-a-service/). +### Update to refresh the GOV.UK brand + + + Brand + + +If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh. + +You can enable the brand refresh within the [component] by setting its `rebrand` option to true. You’ll also need to add some code to your `` and `` elements. + ### Change the blue colour bar under the GOV.UK header to full width To use the GOV.UK header and Service navigation and make them fit together visually, you’ll need to change the bottom blue border of the GOV.UK header to full width. @@ -53,6 +66,12 @@ Apply a class `govuk-header--full-width-border` to the GOV.UK header. {{ example({ group: "components", item: "service-navigation", example: "with-govuk-header", html: true, nunjucks: true, open: false }) }} + + Brand + + +You do not need to change the bottom border of the updated GOV.UK header component with the refreshed GOV.UK branding. + ### Showing your service name only Use the Service navigation component to show your service name. @@ -67,19 +86,9 @@ Show navigation links to let users navigate to different parts of your service a See when and how to show navigation links in the [Help users navigate a service pattern](/patterns/navigate-a-service/). -{% call wcagNote({id: "wcag-do-not-cover-content"}) %} - -Do not make header elements, like dropdown menus, ‘sticky’ to the top of the page by using `position: fixed` or any other method. In other words, avoid any implementations that cause menus to sit on top of page content.
-This is to make sure elements do not hide or obscure any content which has a focus applied and comply with WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum).
-{% endcall %} +You can add a link to a ‘help’ page in your Service navigation component. If you do, the link must be positioned consistently within the header, and must always link to the same place. -In November 2021, [the GOV.UK homepage introduced a menu bar](https://insidegovuk.blog.gov.uk/2021/11/11/launching-gov-uks-new-menu-bar/) that avoids obscuring content by shifting the page down. - -{% call wcagNote({id: "wcag-consistent-help-links"}) %} - -You can add a link to a ‘help’ page in your Service header component. If you do, the link must be positioned consistently within the header, and must always link to the same place.
-For example, a header link to 'Get help with this service' must go to the same place as similar header links elsewhere in your service. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
-{% endcall %} +For example, a link in the Service navigation component to 'Get help with this service' must go to the same place as similar links in the Service navigation component elsewhere in your service. This is to comply with [WCAG 2.2 success criterion 3.2.6 Consistent help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html). ## Use ‘slots’ to add custom elements @@ -101,6 +110,12 @@ There’s a risk that slot contents may look or work differently in a future rel You’ll need to ensure that slot content still works as intended after each update. +## Accessibility + +You can add a link to a ‘help’ page in your Service header component. If you do, the link must be positioned consistently within the header, and must always link to the same place. + +For example, a header link to 'Get help with this service' must go to the same place as similar header links elsewhere in your service. This is to comply with [WCAG 2.2 success criterion 3.2.6 Consistent help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html). + ## Research on this component See the [research section in the Help users navigate a service pattern](/patterns/navigate-a-service/#research-on-this-pattern) for a summary of our research on the GOV.UK header and Service navigation, and how you can share your feedback with us. diff --git a/src/styles/images/index.md b/src/styles/images/index.md index 5d893d6429..4ba2309ecf 100644 --- a/src/styles/images/index.md +++ b/src/styles/images/index.md @@ -10,19 +10,9 @@ order: 13 --- {% from "_example.njk" import example %} -{% from "_wcag-callout.njk" import wcagCallout %} -{% from "_wcag-note.njk" import wcagNote %} Avoid using images for unnecessary decoration. Only use images if there’s a real user need. -{% call wcagCallout({ - name: "Images", - heading: "New WCAG 2.2 criteria affect how you use images" -}) %} - -To meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure any icons and images used in links meet the minimum target size. This is to make sure users can easily interact with the link.
-{% endcall %} - Make sure any information contained in an image can be understood by someone who cannot see it. Also consider partially-sighted users with visual impairments and the assistive technologies they might use. This guidance is for government teams that build online services. To learn how to use images as a GOV.UK content publisher, go to [GOV.UK content guidance for images](https://www.gov.uk/guidance/content-design/images). @@ -72,11 +62,6 @@ Icons can be more useful in case working systems, where users are familiar with Do not use a single icon to represent more than one thing. For example, the search icon (magnifying glass) should only be used for search functionality, and not also for screen magnification. -{% call wcagNote({id: "wcag-icon-focus"}) %} - -Make sure any icons and images used in links are at least 24px by 24px in size, with adequate spacing. This is to make sure users can easily interact with the link. This relates to WCAG 2.2 success criterion 2.5.8 Target size (minimum).
-{% endcall %} - ## Avoid images that contain text Generally, you should avoid using images that contain any sort of text. Use written content or other alternatives wherever possible. diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss index 9099717b9c..4ca5926cef 100644 --- a/src/stylesheets/main.scss +++ b/src/stylesheets/main.scss @@ -443,3 +443,28 @@ pre .language-plaintext { .app-campaign-cookie-banner .govuk-grid-column-two-thirds { width: 100%; } + +.brand-tag-blue { + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(1); + color: #0f385c; + background-color: #d2e2f1; +} + +.brand-tag-green { + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(1); + color: #09442d; + background-color: #cfe7de; +} + +.app-brand-callout { + border-left-color: #11875a; +} + +// Change headings in WCAG callouts to look like H3s, +// even though they semantically are H2s +.app-brand-callout h2 { + @extend %govuk-heading-m; + max-width: 30em; +} diff --git a/views/partials/_brand-callout.njk b/views/partials/_brand-callout.njk new file mode 100644 index 0000000000..278b67e0e4 --- /dev/null +++ b/views/partials/_brand-callout.njk @@ -0,0 +1,17 @@ +{% from "govuk/components/inset-text/macro.njk" import govukInsetText -%} +{% from "govuk/components/tag/macro.njk" import govukTag -%} + +{% macro brandCallout(params) -%} +{% set tagContent -%} + {{- govukTag({ + text: "Brand", + classes: "brand-tag-green" + }) }} + {{ caller() }} + {% endset -%} + +{{ govukInsetText({ + html: tagContent, + classes: "app-brand-callout" +}) }} +{% endmacro %} diff --git a/views/partials/_whats-new.njk b/views/partials/_whats-new.njk index 7cf2ae0845..bd5db5a8fd 100644 --- a/views/partials/_whats-new.njk +++ b/views/partials/_whats-new.njk @@ -4,12 +4,17 @@What’s new
-4 March 2025: We’ve released GOV.UK Frontend v5.9.0
-This release includes a JavaScript enhancement to the File upload component, which makes dragging and dropping files easier for users.
-We’ve also deprecated the options to show a service name, as well as navigation links, in the GOV.UK header component. Both options will be removed from the GOV.UK header in the next breaking release of GOV.UK Frontend.
-Read the full release notes to see what’s changed.
--
Sign up to get update emails about the Design System.
+1 May 2025: Updates to refresh the GOV.UK brand
+From June 2025, parts of the Design System will change to support a wider refresh of the GOV.UK brand. To get ready, we’ve released GOV.UK Frontend v5.10.0.
+Service teams in government should see the new guidance in these components to update to the refreshed GOV.UK branding: +
+-
+
- GOV.UK header component +
- GOV.UK footer component +
- Service navigation component +
- Cookie banner component +
Read the full release notes to see more details on what’s changed.