v6.4.0

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

New features

You can now use the Interruption panel to pause the user’s journey and give important information

We’ve introduced an interruption variant of the Panel component.

You can use Interruption panels within Interruption pages to warn users before they:

• do something unusual that’s probably a mistake
• do something that cannot be undone (so you can ask the user “Are you sure?”)
• give an answer that conflicts with existing information

See the guidance on the Design System website for more information on how to use the Interruption panel in your service.

We made this change in pull request #6636: Add interruption panel - thanks to @frankieroberto and the NHS Design System team for contributing this change.

You can now pass day, month, year, error and values options to the Date input component

We've updated the Date input component to add the following Nunjucks options:

• day, month and year options to customise individual items
• an error boolean option to set the error state on individual items
• a values option to set individual item values using a single object

For consistency with other components, the Date input component's error state is now set automatically when errorMessage is provided.

For example, you no longer need to set the "govuk-input--error" class on every item:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    errorMessage: {
      text: "Enter your date of birth"
-   },
-   items: [
-     {
-       name: "day",
-       label: "Day",
-       classes: "govuk-input--width-2 govuk-input--error"
-     },
-     {
-       name: "month",
-       label: "Month",
-       classes: "govuk-input--width-2 govuk-input--error"
-     },
-     {
-       name: "year",
-       label: "Year",
-       classes: "govuk-input--width-4 govuk-input--error"
-     }
-   ]
+   }
  }) }}

If only one field has an error, use the new day, month or year options to set error: true for that field only:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    errorMessage: {
      text: "Date of birth must include a year"
    },
-   items: [
-     {
-       name: "day",
-       label: "Day",
-       classes: "govuk-input--width-2"
-     },
-     {
-       name: "month",
-       label: "Month",
-       classes: "govuk-input--width-2"
-     },
-     {
-       name: "year",
-       label: "Year",
-       classes: "govuk-input--width-4 govuk-input--error"
-     }
-   ]
+   year: {
+     error: true
+   }
  }) }}

When using the GOV.UK Prototype Kit, given the following data object:

{
  "dob-day": "31",
  "dob-month": "3",
  "dob-year": "1980"
}

You can now pass in values: data to automatically set item values:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    namePrefix: "dob",
    values: data
  }) }}

We made this change in pull request #6971: Add date input day, month, year and values options - thanks to @colinrotherham for contributing this change.

Recommended changes

Use inverse-text instead of govuk-colour("white") for text on dark backgrounds that use functional colours

We've introduced a new inverse-text functional colour for text on dark backgrounds that use functional colours such as brand, success and error.

If you're using govuk-colour("white") as a text colour on dark backgrounds that use functional colours, replace govuk-colour("white") with govuk-functional-colour(inverse-text).

However, if you're using a dark background that does not use a functional colour, keep using govuk-colour("white").

In both cases, make sure your text has a minimum contrast of 4.5:1 with the background to meet the 'Contrast (minimum)' criterion of the Web Content Accessibility Guidelines.

We made this change in pull request #7178: Add inverse-text functional colour for white text on solid colour.

Add a <span> element to start buttons containing HTML

We've updated the Button component's Nunjucks macro to add a <span> element around HTML content within start buttons.

This fixes a bug that caused whitespace around inline HTML elements to collapse and button content to wrap incorrectly on narrow screens.

If you're not using our Nunjucks macros, or have fixed this bug in a different way, you can update your code to add a <span> element instead.

You only need to make this change for start buttons containing HTML content, as the bug did not affect other Button component styles or start buttons containing plain text.

We made this change in pull request #7188: Add Nunjucks logic to insert <span> element around HTML in start buttons.

Fixes

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

• #7183: Update exit this page overlay colour to use system colours
• #7197: Improve source spacing for header
• #7268: Stop file upload component from throwing errors when hidden inputs are present - thanks to @peteryates for reporting and fixing this issue.

v6.3.0

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

New features

Use the Generic header component in services not on the GOV.UK website

We've added the Generic header component for services that are not part of the GOV.UK proposition but would still benefit from using GOV.UK Frontend to build their service.

The Generic header component is a version of the GOV.UK header component that you can customise to meet the needs of your service. This includes:

• changing the spacing around the logo
• adding a bottom border with your service's brand colour
• changing the header colour

This was added in pull request #7061: Add Generic Header component.

Fixes

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

• #7168: Fix lack of explicit colour on input prefix and suffixes
• #7169: Fix text on small inline radios wrapping unnecessarily

v6.2.0

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

New features

Use @use to include GOV.UK Frontend styles in Sass

You can now include GOV.UK Frontend as a Sass module with @use or @forward.

@import was deprecated in Dart Sass v1.88.0, and the Sass team will remove it in Dart Sass v3.0.0.

We also plan to deprecate and eventually remove support for @import from GOV.UK Frontend in future releases.

We recommend you migrate to using Sass modules instead of @import everywhere in your Sass, unless your service depends on other Sass libraries that use @import. Mixing @use and @import can lead to duplicated CSS or configuration not being applied due to how Sass loads the included stylesheets.

To include all the styles from GOV.UK Frontend in your compiled stylesheet, replace @import with @use in your Sass file:

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

// Now
// Outputs GOV.UK Frontend's CSS (`@use`) and
// makes the Sass API available without namespacing (`as *`)
@use "node_modules/govuk-frontend/dist/govuk" as *;

To configure any of GOV.UK Frontend's settings when including it in your Sass file, you should now use a with clause listing each setting you want to modify to your @use rule:

// Previously
$govuk-assets-path: "/path/to/assets/";
@import "node_modules/govuk-frontend/dist/govuk";


// Now
@use "node_modules/govuk-frontend/dist/govuk" as * with (
  $govuk-assets-path: "/path/to/assets/"
);

You can also include specific parts of GOV.UK Frontend using Sass.

See the GOV.UK Frontend documentation for more information on including GOV.UK Frontend in your Sass build.

We made this change in pull request #6862: Migration to Sass modules.

Use shorter pkg: URLs to include individual files in Sass

You can now omit the dist/govuk part of the path when including GOV.UK Frontend in your Sass file with a pkg: URL:

// `@import` will soon be deprecated, so use`@use`
// Instead of `"pkg:govuk-frontend/dist/govuk/components/button"`
@use "pkg:govuk-frontend/components/button";

Warning

If you're using @import with pkg: URLs there's a known issue with how Sass loads pkg: URLs with @import.

We recommend you either:

• only use pkg: URLs with @use
• make sure to include index.import in the URLs you import (for example: @import "pkg:govuk-frontend/index.import")

You should migrate any existing uses of @import with pkg: in your service.

We made this change in pull request #6861: Resolve pkg: URLs from dist/govuk and update the review app.

Add custom classes and attributes to the File upload component's wrapper

We've introduced two new parameters to the File upload component's Nunjucks macro: wrapperClasses and wrapperAttributes.

These parameters allow you to define custom classes and HTML attributes for the wrapper of the improved version of the File upload component.

{{ govukFileUpload({
  javascript: true,
  wrapperClasses: "my-custom-class",
  wrapperAttributes: {
    "data-attribute": "value"
  }
}) }}

We made this change in pull request #6933: Code improvements to File upload component.

Recommended changes

Rename the govuk-drop-zone class on the improved File upload component

We've changed the class name of the element that wraps the improved File upload component from govuk-drop-zone to govuk-file-upload-wrapper. govuk-file-upload-wrapper better describes what the element does.

We've now deprecated the previous class name and will remove it in the next major version of GOV.UK Frontend.

If you're using our Nunjucks macros, you do not need to update anything.

We made this change in pull request #6933: Code improvements to File upload component.

Fixes

Error summary no longer outputs the styles for lists

The components/error-summary/_index.scss file was outputting CSS from core/lists, which is not part of the components layer. This was causing a duplication issue with Sass modules.

The components/error-summary/_index.scss file now only outputs the CSS for the Error summary component.

We made this change in pull request #6975: Update index to use all layers and refactor core (again) to avoid duplicated CSS.

Other fixes

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

• #6831: Fix header link hover state in Safari
• #6925: Fix enhanced file upload lacking an error state
• #6959: Fix alignment of jewels and base in govuk-icon PNGs, thanks to @matteason for reporting and fixing this issue
• #7021: Fix small inputs activating hover style when hovering on non-clickable areas

v6.2.0-rc.0

Warning

Do not use in production.
Use this release to prepare for the changes coming in version 6.2.0.

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

New features

Add custom classes and attributes to the File upload component's wrapper

We've introduced two new parameters to the File upload component's Nunjucks macro: wrapperClasses and wrapperAttributes.

These allow you to define custom classes and HTML attributes for the wrapper of the improved version of the File upload.

{{ govukFileUpload({
  javascript: true,
  wrapperClasses: "my-custom-class",
  wrapperAttributes: {
    "data-attribute": "value"
  }
}) }}

We made this change in pull request #6933: Code improvements to File upload component.

Recommended changes

Rename the govuk-drop-zone class on the improved File upload component

The class name of the element that wraps the improved File upload component has been changed from govuk-drop-zone to govuk-file-upload-wrapper. This was to better describe what function the element plays in the component.

The old class name has been deprecated and will be removed in the next major version of GOV.UK Frontend.

If you're using our Nunjucks macros, you don't need to update anything.

We made this change in pull request #6933: Code improvements to File upload component.

Fixes

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

• #6925: Fix enhanced file upload lacking an error state
• #7021: Fix small inputs activating hover style when hovering on non-clickable areas
• #6959: Fix alignment of jewels and base in govuk-icon PNGs, thanks to @matteason for reporting and fixing this issue

v6.2.0-beta.0

New features

Use @use to include GOV.UK Frontend styles in Sass

The use of @import was deprecated in Dart Sass 1.80.0. To prepare for the removal of @import in the next major release of Sass, you can now include GOV.UK Frontend as a Sass module with @use or @forward.

We also plan to deprecate support for @import in GOV.UK Frontend in a future 6.x release and remove it completely in our next major release, v.7.0, so we recommend you start using Sass modules as soon as possible.

To include all the styles from GOV.UK Frontend in your compiled stylesheet, replace @import with @use in your Sass file:

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

// Now
// Outputs GOV.UK Frontend's CSS (`@use`) and
// makes the Sass API available without namespacing (`as *`)
@use "node_modules/govuk-frontend/dist/govuk" as *;

To configure any of GOV.UK Frontend's settings when including it in your Sass file, you should now use a with clause listing each setting you want to modify to your @use rule:

// Previously
$govuk-assets-path: "/path/to/assets/";
@import "node_modules/govuk-frontend/dist/govuk";


// Now
@use "pkg:gov-uk frontend" as * with (
  $govuk-assets-path: "/path/to/assets/"
);

You can also include specific parts of GOV.UK Frontend using Sass.

See the GOV.UK Frontend documentation for more information on including GOV.UK Frontend in your Sass build.

We made this change in pull request #6862: Migration to Sass modules.

Use shorter pkg: URLs to include individual files in Sass

You can now omit the dist/govuk part of the path when including GOV.UK Frontend in your Sass file with a pkg: URL:

// `@import` will soon be deprecated, so use`@use`
// Instead of `"pkg:govuk-frontend/dist/govuk/components/button"`
@use "pkg:govuk-frontend/components/button";

We made this change in pull request #6861: Resolve pkg: URLs from dist/govuk and update the review app.

Fixes

Error summary no longer outputs the styles for lists

The components/error-summary/_index.scss file was outputting CSS from core/lists, which is not part of the components layer. This was causing a duplication issue with Sass modules.

The components/error-summary/_index.scss file now only outputs the CSS for the Error summary component.

We made this change in pull request #6975: Update index to use all layers and refactor core (again) to avoid duplicated CSS.

Other fixes

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

• #6831: Fix header link hover state in Safari

v6.1.0

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

New features

Use Sass functions to configure asset URLs

You can now use Sass functions from meta.get-function in addition to strings to configure:

• $govuk-image-url-function
• $govuk-font-url-function

This will allow the variables to be configured when loading GOV.UK Frontend as a module once we support @use and @forward.

We made this change in pull request #6767: Use Sass functions to configure asset URLs.

Recommended changes

Use <COMPONENT_NAME>/_index.scss to import individual components

We've deprecated each component's _<COMPONENT_NAME>.scss files, which let you import an individual component’s CSS using a single Sass import. We'll remove the _<COMPONENT_NAME>.scss files in the next major release.

If you were using the _<COMPONENT_NAME>.scss files, use the component's _index.scss file instead. For example:

// Previously
@import "govuk/components/button/button";

// Now
@import "govuk/components/button";

We made this change in pull request #6761: Deprecate _<COMPONENT_NAME>.scss files.

Use color: govuk-functional-colour(text) to set the text colour

We've updated how the text colour changes to pure black when printing.

Previously, an additional print media query was included every time you used @include govuk-text-colour:

.my-element {
  color: var(--govuk-text-colour, #0b0c0c);
}

@media print {
  .my-element {
    color: var(--govuk-print-text-colour, #000);
  }
}

Now, only one media query is included at the start of the compiled CSS, changing the value of the --govuk-text-colour custom property:

:root { --govuk-text-colour: #0b0c0c; }

@media print {
  :root { --govuk-text-colour: var(--govuk-print-text-colour, #000); }
}

.my-element {
  color: var(--govuk-text-colour, #0b0c0c);
}

This change allows you to simplify how the text colour is applied to your CSS rulesets.

Replace any instances of @include govuk-text-colour with color: govuk-functional-colour(text).

We'll remove the govuk-text-colour mixin in a future breaking release.

We made this change in pull request #6427: Use custom properties to switch print text to pure black.

Fixes

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

• #6727: Fix slash-div Sass deprecation - thanks to @colinrotherham for raising the issue
• #6730: Fix if-function Sass deprecation
• #6731: Fix global-builtin Sass deprecation
• #6679: Fix summary list cells becoming vertically misaligned when a multi-line inline-block element is present - thanks to @DannyPayne-CH for raising the issue
• #6678: Explicitly set box-shadow colour for focused inputs - thanks to @colinrotherham for raising the issue
• #6787: Use focus-text colour for text link focus state

v6.0.0

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

Breaking changes

Use Dart Sass v1.79.0 or later to compile your Sass stylesheets

GOV.UK Frontend no longer supports Ruby Sass, LibSass or versions of Dart Sass older than v1.79.0. Update your project to Dart Sass v1.79.0 or newer before updating to GOV.UK Frontend v6.0.

We made these changes in the following pull requests:

• #6311: Remove support for Ruby Sass and LibSass
• #6366: Update Dart Sass tests minimum version to 1.79.0

Update to the new type scale

We’ve applied the new type scale that was first introduced in GOV.UK Frontend 5.2.0 as an opt-in feature.

The type scale increases the size of text on small screens, improving legibility and accessibility.

We've also removed size 14 from the type scale. The smallest size in the type scale is now 16.

See the GOV.UK Design System website for an overview of the changes to the type scale.

You should test your service against the new type scale to see if you need to make any adjustments, particularly on small screens.

Stop using size 14 from the type scale

You'll now see an error when compiling your Sass if you pass $size: 14 to the govuk-font-size or govuk-font mixins.

Update your code to use a different size.

We made this change in pull request #6417: Remove 14 from the type scale.

Stop using the govuk-body-xs and govuk-!-font-size-14 classes

Update your service to remove or replace references to the govuk-body-xs or govuk-!-font-size-14 classes.

We've removed these classes from GOV.UK Frontend.

We made this change in pull request #6417: Remove 14 from the type scale.

Remove references to the $govuk-new-typography-scale feature flag

Remove any references to the $govuk-new-typography-scale feature flag from your code. We've now removed this feature flag.

We made this change in pull request #6421: Turn the new type scale on by default.

Use GOV.UK brand colours

We’ve updated GOV.UK Frontend to use the GOV.UK web palette from v1.0 of the GOV.UK brand guidelines.

To improve colour contrast and legibility, we’ve also added:

• 25% and 50% shades for all colours except brown
• a 10% shade for blue

We’ve also made green and its tints and shades slightly darker.

A future version of the brand guidelines will contain these improvements.

Changes to colours in the GOV.UK web palette

The GOV.UK web palette in the brand guidelines reduces the number of named colours but introduces tints and shades for each colour. We've updated GOV.UK Frontend to use the same approach.

We’ve updated these colours:

Colour	Previous colour	Change
green	#00703c	Updated to #0f7a52
red	#d4351c	Updated to #ca3535
purple	#4c2c92	Updated to #54319f
brown	#b58840	Updated to #99704a
pink	#d53880	Renamed to magenta and updated to #ca357c
turquoise	#28a197	Renamed to teal and updated to #158187

We’ve removed these colours:

Colour	Previous colour	Suggested replacement
light-blue	#5694ca	Blue tint 25% (exact match)
light-pink	#f499be	Magenta tint 50% (#e59abe)
light-green	#85994b	Green tint 25% (#4b9b7d)
dark-blue	#003078	Blue shade 50% (#0f385c)
light-purple	#6f72af	Purple tint 25% (#7f65b7)
bright-purple	#912b88	Magenta shade 25% (#98285d)
dark-grey	#505a5f	Black tint 25% (#484949)
mid-grey	#b1b4b6	Black tint 80% (#cecece)
light-grey	#f3f2f1	Black tint 95% (#f3f3f3)

We have not made any changes to black, white, blue, yellow or orange.

We made these changes in the following pull requests:

• #6326: Use brand palette through govuk-colour
• #6335: Update button colours to use govuk_palette
• #6336: Update tag colours to use govuk_palette
• #6337: Update file upload colours to use govuk_palette

Check your service’s colours

If your service uses any custom components, make sure they still work with the GOV.UK web palette in terms of accessibility and design. Where possible, you should use colours from the GOV.UK web palette.

If you’re already using the govuk-colour function in your project, your service will automatically update to use the latest GOV.UK web palette.

If you're using a colour that we’ve renamed or that no longer exists, the govuk-colour function will log a warning and automatically return the suggested replacement.

Use the govuk-colour function to access tints and shades

The govuk-colour function now accepts a $variant option to access tints or shades of a colour.

If you do not set a$variant option, the govuk-colour function will return the primary variant of the colour.

For example:

$app-colour: govuk-colour('blue'); // Returns the 'Primary blue' colour

$component-colour: govuk-colour('red', $variant: 'tint-25') // Returns the 'Red tint 25%' colour

See the GOV.UK web palette on the GOV.UK Design System website for the list of available colours, tints and shades.

Stop using the $govuk-colours variable

We’ve removed the $govuk-colours variable from GOV.UK Frontend. Use the govuk-colour function to access colours from the GOV.UK web palette.

You can no longer override the colour palette in GOV.UK Frontend.

Stop using the govuk-tint and govuk-shade functions

We’ve removed the govuk-tint and govuk-shade functions for applying tints and shades to colours by percentage.

Replace them with tints and shades from the GOV.UK web palette that are as close as possible to the colours you were previously using.

We made this change in pull request #6639: Remove govuk-tint and govuk-shade functions.

Update any light blue, turquoise or pink tags

The govuk-tag--light-blue colour modifier class for tags no longer exists. If you use tags of this colour, update them to use a different colour.

You’ll also need to replace:

• govuk-tag--turquoise with govuk-tag--teal
• govuk-tag--pink with govuk-tag--magenta

We'll remove the govuk-tag--turquoise and govuk-tag--pink modifier classes in a future breaking release.

We made this change in pull request #6416: Deprecate turquoise and pink tag colour modifiers.

Use the new Sass API and CSS custom properties for functional colours

We’ve improved the way we reference colours for essential page elements in GOV.UK Frontend, renaming 'applied colours' to 'functional colours' and making them available as CSS custom properties.

Functional colours are colours playing a specific role in the user interface. For example, there are functional colours for the page background, text and links.

You can reference the custom properties for functional colours in your own CSS code, but do not assign new values to them.

Use govuk-functional-colour to access functional colours

The Sass variables for accessing functional colours are deprecated, and we’ll remove them in a future breaking release.

To make it easier for you to update, the Sass variables for accessing functional colours are still available. However, these variables now return a reference to a custom property, so you’ll get an error message if you have any code that expects a colour.

Update references to these variables to use the govuk-functional-colour function.

Deprecated Sass variable	Replacement govuk-functional-colour call
$govuk-brand-colour	govuk-functional-colour(brand)
$govuk-text-colour	govuk-functional-colour(text)
$govuk-template-background-colour	govuk-functional-colour(template-background)
$govuk-body-background-colour	`govuk-func...

v6.0.0-rc.0

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

Note

These are the changes since v6.0.0-beta.2.

Breaking changes

Stop using the previous GOV.UK logo and colour palette

We’ve made the refreshed (blue-based) GOV.UK branding the default appearance of the GOV.UK header and GOV.UK footer components, and removed the previous (mostly black) branding as an option.

We've also updated the colour palette of the Service navigation and Cookie banner components.

With these changes, the GOV.UK header and GOV.UK footer components should now only be used by services on the GOV.UK website. Services outside of the GOV.UK proposition should stop using the header and footer components and instead create their own.

If you use GOV.UK Frontend's Nunjucks template, you should now remove the govukRebrand feature flag.

If you use GOV.UK Frontend's Nunjucks macros without the template, or have overridden the default header and footer components, you should remove the rebrand parameter from references to the govukHeader and govukFooter macros.

If you do not use the Nunjucks template, remove the govuk-template--rebranded class from the <html> element and update the HTML for icons, Open Graph image, and theme colour to remove references to the rebrand folder.

<meta name="theme-color" content="#1d70b8">
<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="#1d70b8">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/images/govuk-opengraph-image.png">

We made these changes in the following pull requests:

• #6617: Remove rebrand switch from govukLogo
• #6618: Remove rebrand switch logic from GOV.UK Header
• #6619: Remove rebrand switch from govukFooter
• #6621: Remove rebrand flag from template
• #6622: Remove rebrand flag from service navigation
• #6623: Remove rebrand flag from cookie banner

Stop using govuk-tint and govuk-shade

We’ve removed the govuk-tint and govuk-shade functions for applying tints and shades to colours by percentage.

If you currently apply govuk-tint or govuk-shade to any colours, replace them with the closest possible tints and shades listed in the new GOV.UK colour palette.

We made this change in pull request #6639: Remove govuk-tint and govuk-shade functions.

We've replaced core/govuk-frontend-properties with a new custom-properties Sass layer

We've moved the CSS custom properties previously outputted by govuk-frontend-properties from the core Sass layer in GOV.UK Frontend to a new Sass layer: custom-properties. This is to prepare for wider use of custom properties within GOV.UK Frontend in the future.

If you import govuk-frontend-properties directly but do not also import base, replace your import statement to point to custom-properties instead of core/govuk-frontend-properties.

This change was added in pull request #6654: Add new custom-properties Sass layer.

base now outputs CSS when processed

The new custom-properties Sass layer is included within base.scss. This means that base now outputs CSS when processed with Sass, instead of before where it was necessary for processing the Sass in other layers but did not output any CSS itself. This is to ensure that custom properties are consistently available in all the places they need to be.

If you're importing base but do not want it to output CSS, you can replicate base by importing the settings, tools and helpers layers individually.

This change was added in pull request #6606: Enable better control over custom property outputting.

New features

Use the new ‘surface’ functional colours to style distinct content areas

We’ve added a new functional colour set, for instances when areas of content need to be visually separated from other content on the page. We’re calling these ‘surface’ colours and they work together to meet minimum contrast requirements for accessibility.

The new colours are:

• surface-background, which defaults to Blue tint 95% in the GOV.UK colour palette.
• surface-border, which defaults to Blue tint 50%.
• surface-text, which defaults to Black.
• surface-link, which defaults to Blue shade 10%.

We’ve applied the new surface colour set to the Service navigation, Cookie banner, and Footer components.

We made this change in pull request #6659: Add functional colours for Footer, Service navigation, and Cookie banner.

Reference colour from the palette declaratively when redefining functional colours

We've updated how colours can be defined in $govuk-functional-colours to reference colours from the palette without using govuk-colour.

Alongside arbitrary Sass colours, you can now set the values of $govuk-functional-colours to Sass maps with a name and optional variant property matching one of the colours of the palette.

$govuk-functional-colours: (
  brand: (name: 'purple'), // `variant` defaults to `primary`
  template-background: (name: 'purple', variant: 'tint-95')
);
@import "node_modules/govuk-frontend/dist/govuk";

We made this change in pull request #6655: Store references to colours in $govuk-functional-colours.

Use $govuk-output-custom-properties to specify if custom properties are included in your CSS

We've added a new Sass variable $govuk-output-custom-properties which controls if GOV.UK Frontend CSS custom properties are included in your processed CSS or not.

If you import different parts of GOV.UK Frontend in separate stylesheets, this helps you avoid duplicating the CSS declarations for the custom properties.

We made this change in pull request #6606: Enable better control over custom property outputting.

Fixes

Yellow and grey tags have updated colours

Improving on the changes from v6.0.0-beta.1, the yellow tag's text colour has changed to Orange shade 50%. Its background colour has changed to Yellow tint 50%.

The grey tag's text colour has change to Black. Its background colour has changed to Black tint 80%.

These changes were made in pull request #6646: Update tag colours and remove borders.

Other fixes

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

• #6651: Update green palette
• #6449: Refactor Character count method to reduce repeated updates

v5.14.0

New features

The GOV.UK footer component now allows the removal of content licence information

If your service does not provide information under the Open Government Licence (OGL), you can now remove the content licence information from the GOV.UK footer.

If you use Nunjucks, set the contentLicence parameter to null:

{{ govukFooter({
  contentLicence: null
}) }}

We introduced this feature in the following pull requests:

• #6527: Allow false value to turn off contentLicence in GOV.UK Footer – thanks to @NickColley for making this change.
• #6586: Use null rather than false to hide the content licence – thanks to @gunndabad for reporting this issue.

Recommended changes

Add aria-hidden="true" to the Service navigation's menu toggle

The VoiceOver screen reader software for macOS and iPadOS contains bugs that make the menu toggle in the Service navigation accessible to VoiceOver users, even if the button has a hidden attribute.

If you use Nunjucks, you do not have to do anything.

If you do not use Nunjucks to generate your components' HTML, add an aria-hidden="true" attribute to the hidden <button> element of the Service navigation. This means the button will remain hidden for VoiceOver users.

We made this change in pull request #6469: Fix VoiceOver access to hidden Service Navigation menu button.

Fixes

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

• #6351: Preserve already escaped attributes values to prevent double escaping
• #6438: Fix pagination outputting empty links when provided a null or empty value – thanks to @NikhilNanjappa for reporting this issue.
• #6531: Prevent date inputs shifting alignment on iOS 18 – thanks to @rowellx68 for reporting this issue and @colinrotherham for suggesting the fix.
• #6528: Fix hover state on focused small radios
• #6529: Fix rebranded header background being visible when printed – thanks to @lewis-softwire for reporting this issue.
• #6462: Update HMRC brand colour
• #6539: Fix skip link outline being clipped in forced colours mode

v6.0.0-beta.2

Breaking changes

Update Nunjucks blocks around the GOV.UK header

We've changed the page structure around the header to separate the header element (<header>) from the GOV.UK header component. This lets you include other components, such as the Service navigation and Phase banner components, within the header element of each page.

You’ll need to follow different instructions to upgrade, depending on how you create the page headers in your service. In all cases, you should make sure your page includes a single <header> element after you’ve made the changes.

If you use GOV.UK Frontend's template and override the govukHeader component, update references to the header Nunjucks block to use govukHeader instead.

{# Previously #}
{% block header %}
  {{ govukHeader() }}
{% endblock %}

{# Now #}
{% block govukHeader %}
  {{ govukHeader() }}
{% endblock %}

If you do not use GOV.UK Frontend's template but use the govukHeader component, update your template to include a <header> element around the component.

If you do not use the header Nunjucks block at any point, or you're only using the block to remove it, you do not need to change anything.

If you do not use Nunjucks, change the existing GOV.UK header to a <div> element and wrap it, along with any other header components, with a <header> element.

<header class="govuk-template__header">
  <div class="govuk-header">
    [...]
  </div>
  <div class="govuk-service-navigation">
    [...]
  </div>
</header>

We made this change in pull request #6536: Refactor heading to detach element from component.

Use the container block instead of the main block to replace the width container

We've reduced the scope of the main block to only replace the <main> element,
rather than the whole <div class="govuk-width-container"> element.

If you’re using the main block, use the new container block instead.

{# Previously #}
{% block main %}
  <!-- Your markup -->
{% endblock %}

{# Now #}
{% block container %}
  <!-- Your markup -->
{% endblock %}

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Update Nunjucks blocks around the GOV.UK footer

We've changed the page structure around the footer to separate the <footer> element from the GOV.UK footer component. This lets you include other components within the footer element (<footer>) of each page.

You’ll need to follow different instructions to upgrade depending on how you create the page footers in your service. In all cases, you should make sure your page includes a single <footer> element after you’ve made the changes.

If you use GOV.UK Frontend's template and override the govukFooter component, update references to the footer Nunjucks block to use govukFooter instead.

{# Previously #}
{% block footer %}
  {{ govukFooter() }}
{% endblock %}

{# Now #}
{% block govukFooter %}
  {{ govukFooter() }}
{% endblock %}

If you do not use GOV.UK Frontend's template but use the govukFooter component, update your template to include a <footer> element around the component.

If you do not use the footer Nunjucks block at any point, or you're only using the block in order to remove it, you do not need to change anything.

If you do not use Nunjucks, change the existing GOV.UK footer to a <div> element and wrap it with a <footer> element.

<footer class="govuk-template__footer">
  <div class="govuk-footer">
    [...]
  </div>
</footer>

We made this change in pull request #6537: Refactor footer to detach element from component.

New features

Customise the template's <header> element

If you use Nunjucks, you can customise the appearance and content of the template's <header> element with new blocks and variables.

New variables:

• headerClasses applies custom classes to the element
• headerAttributes applies custom HTML attributes to the element

New Nunjucks blocks:

• headerStart inserts HTML immediately after the element's opening tag, and headerEnd inserts HTML immediately before the element's closing tag
• govukHeader lets you customise the govukHeader component without affecting other parts of the header

We made this change in pull request #6536: Refactor heading to detach element from component.

Easily include Service navigation on your page

We've added new ways to include the Service navigation component on a page when using GOV.UK Frontend's Nunjucks template.

If you set the serviceName variable, the page template will add the Service navigation component to the <header> element and show the service name. You can also set the serviceUrl variable to provide a link for the service name.

{% extends "govuk/template.njk" %}
{% set serviceName = "YOUR_SERVICE_NAME" %}
{% set serviceUrl = "YOUR_SERVICE_URL" %}

To help you make further customisations, we've added a govukServiceNavigation Nunjucks block to override the default component.

We made this change in pull request #6541: Add service navigation block to template.

Customise the <div class="govuk-width-container"> element

We've added new variables and blocks to allow you to further customise the <div class="govuk-width-container"> element.

New variables:

• containerAttributes applies custom HTML attributes to the element

New blocks

• containerStart inserts HTML immediately after the element's opening tag
• containerEnd inserts HTML immediately before the element's closing tag

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Use the mainAttributes variable to add attributes to the <main> element

We've added a new mainAttributes variable to apply custom HTML attributes to the <main> element.

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Customise the template's <footer> element

If you use Nunjucks, you can customise the appearance and content of the template's <footer> element with new blocks and variables.

New variables:

• footerClasses applies custom classes to the element
• footerAttributes applies custom HTML attributes to the element

New Nunjucks blocks:

• footerStart inserts HTML immediately after the element's opening tag
• footerEnd inserts HTML immediately before the element's closing tag
• govukFooter lets you customise the govukFooter component without affecting other parts of the footer

We made this change in pull request #6537: Refactor footer to detach element from component.

Recommended changes

Use the govukSkipLink block instead of skipLink

We're deprecating the skipLink block and replacing it with a govukSkipLink block so all blocks replacing GOV.UK Frontend elements have the same name as the component's macro.

{# Previously #}
{% block skipLink %}
  {{ govukSkipLink()}}
{% endblock %}

{# Now #}
{% block govukSkipLink %}
  {{ govukSkipLink()}}
{% endblock %}

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Use the containerStart block instead of beforeContent

We're deprecating the beforeContent block and replacing it with a containerStart block so all blocks adding content at the start of an element are named ...Start to make its name better match what it does.

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Fixes

Add aria-hidden="true" to the Service navigation's menu toggle

If you do not use Nunjucks macros to generate your components' HTML, add an aria-hidden="true" attribute to the hidden <button> element of the Service navigation component.

The VoiceOver screen reader software for macOS and iPadOS contains bugs that make the button accessible to VoiceOver users, even if the button has a hidden attribute. Adding the aria-hidden="true" attribute means the button will remain hidden for VoiceOver users.

We made this change in pull request #6467: Fix VoiceOver access to hidden Service Navigation menu button.

Other fixes

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

• #6351: Preserve already escaped attributes values to prevent double escaping – thanks to @colinrotherham for fixing this issue
• #6462: Update HMRC brand colour
• #6454: Prevent date inputs shifting alignment on iOS 18 – thanks to @rowellx68 for reporting this issue and @colinrotherham for suggesting the fix.
• #6445: Fix skip link outline being clipped in forced colours mode