Recent Entries

Tech (12)

From Release notes from govuk-frontend at 2026-01-29 11:43:29

To install this version with npm, run <code>npm install govuk-frontend@6.0.0-rc.0</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <div class="markdown-alert markdown-alert-note"><svg class="octicon octicon-info mr-2" height="16" version="1.1" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>NoteThese are the changes since <a href="https://github.com/alphagov/govuk-frontend/releases/v6.0.0-beta.2">v6.0.0-beta.2</a>. </div> <h2>Breaking changes</h2> <h3>Stop using the previous GOV.UK logo and colour palette</h3> 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 <a href="https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk" rel="nofollow">services on the GOV.UK website</a>. Services outside of <a href="https://www.gov.uk/government/publications/govuk-proposition" rel="nofollow">the GOV.UK proposition</a> 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 <code>govukRebrand</code> 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 <code>rebrand</code> parameter from references to the <code>govukHeader</code> and <code>govukFooter</code> macros. If you do not use the Nunjucks template, remove the <code>govuk-template--rebranded</code> class from the <code><html></code> element and update the HTML for icons, Open Graph image, and theme colour to remove references to the <code>rebrand</code> folder. <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto"><pre><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"></pre></div> We made these changes in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6617">#6617: Remove rebrand switch from govukLogo</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6618">#6618: Remove rebrand switch logic from GOV.UK Header</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6619">#6619: Remove rebrand switch from govukFooter</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6621">#6621: Remove rebrand flag from template</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6622">#6622: Remove rebrand flag from service navigation</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6623">#6623: Remove rebrand flag from cookie banner</a></li> </ul> <h3>Stop using <code>govuk-tint</code> and <code>govuk-shade</code></h3> We’ve removed the <code>govuk-tint</code> and <code>govuk-shade</code> functions for applying tints and shades to colours by percentage. If you currently apply <code>govuk-tint</code> or <code>govuk-shade</code> to any colours, replace them with the closest possible tints and shades listed in the new GOV.UK <a href="https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss">colour palette</a>. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6639">pull request #6639: Remove <code>govuk-tint</code> and <code>govuk-shade</code> functions</a>. <h3>We've replaced <code>core/govuk-frontend-properties</code> with a new <code>custom-properties</code> Sass layer</h3> We've moved the CSS custom properties previously outputted by <code>govuk-frontend-properties</code> from the <code>core</code> Sass layer in GOV.UK Frontend to a new Sass layer: <code>custom-properties</code>. This is to prepare for wider use of custom properties within GOV.UK Frontend in the future. If you import <code>govuk-frontend-properties</code> directly but do not also import <code>base</code>, replace your import statement to point to <code>custom-properties</code> instead of <code>core/govuk-frontend-properties</code>. This change was added in <a href="https://github.com/alphagov/govuk-frontend/pull/6654">pull request #6654: Add new <code>custom-properties</code> Sass layer</a>. <h3><code>base</code> now outputs CSS when processed</h3> The new <code>custom-properties</code> Sass layer is included within <code>base.scss</code>. This means that <code>base</code> 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 <code>base</code> but do not want it to output CSS, you can replicate <code>base</code> by importing the <code>settings</code>, <code>tools</code> and <code>helpers</code> layers individually. This change was added in <a href="https://github.com/alphagov/govuk-frontend/pull/6606">pull request #6606: Enable better control over custom property outputting</a>. <h2>New features</h2> <h3>Use the new ‘surface’ functional colours to style distinct content areas</h3> 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: <ul> <li><code>surface-background</code>, which defaults to Blue tint 95% in the GOV.UK colour palette.</li> <li><code>surface-border</code>, which defaults to Blue tint 50%.</li> <li><code>surface-text</code>, which defaults to Black.</li> <li><code>surface-link</code>, which defaults to Blue shade 10%.</li> </ul> We’ve applied the new surface colour set to the Service navigation, Cookie banner, and Footer components. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6659">pull request #6659: Add functional colours for Footer, Service navigation, and Cookie banner</a>. <h3>Reference colour from the palette declaratively when redefining functional colours</h3> We've updated how colours can be defined in <code>$govuk-functional-colours</code> to reference colours from the palette without using <code>govuk-colour</code>. Alongside arbitrary Sass colours, you can now set the values of <code>$govuk-functional-colours</code> to Sass maps with a <code>name</code> and optional <code>variant</code> property matching one of the colours of the palette. <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>$govuk-functional-colours: ( brand: (name: 'purple'), // `variant` defaults to `primary` template-background: (name: 'purple', variant: 'tint-95') ); @import "node_modules/govuk-frontend/dist/govuk";</pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6655">pull request #6655: Store references to colours in <code>$govuk-functional-colours</code></a>. <h3>Use <code>$govuk-output-custom-properties</code> to specify if custom properties are included in your CSS</h3> We've added a new Sass variable <code>$govuk-output-custom-properties</code> 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 <a href="https://github.com/alphagov/govuk-frontend/pull/6606">pull request #6606: Enable better control over custom property outputting</a>. <h2>Fixes</h2> <h3>Yellow and grey tags have updated colours</h3> 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 <a href="https://github.com/alphagov/govuk-frontend/pull/6646">pull request #6646: Update tag colours and remove borders</a>. <h3>Other fixes</h3> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6651">#6651: Update green palette</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6449">#6449: Refactor Character count method to reduce repeated updates</a></li> </ul>

From Release notes from govuk-frontend at 2026-01-14 11:30:30

GOV.UK Frontend v5.14.0

<h2>New features</h2> <h3>The GOV.UK footer component now allows the removal of content licence information</h3> 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 <code>contentLicence</code> parameter to <code>null</code>: <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{{ govukFooter({ contentLicence: null }) }}</pre></div> We introduced this feature in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6527">#6527: Allow false value to turn off contentLicence in GOV.UK Footer</a> – thanks to <a class="user-mention notranslate" href="https://github.com/NickColley">@NickColley</a> for making this change.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6586">#6586: Use <code>null</code> rather than <code>false</code> to hide the content licence</a> – thanks to <a class="user-mention notranslate" href="https://github.com/gunndabad">@gunndabad</a> for reporting this issue.</li> </ul> <h2>Recommended changes</h2> <h3>Add <code>aria-hidden="true"</code> to the Service navigation's menu toggle</h3> 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 <code>hidden</code> 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 <code>aria-hidden="true"</code> attribute to the hidden <code><button></code> element of the Service navigation. This means the button will remain hidden for VoiceOver users. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6469">pull request #6469: Fix VoiceOver access to <code>hidden</code> Service Navigation menu button</a>. <h2>Fixes</h2> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6351">#6351: Preserve already escaped <code>attributes</code> values to prevent double escaping</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6438">#6438: Fix pagination outputting empty links when provided a null or empty value</a> – thanks to <a class="user-mention notranslate" href="https://github.com/NikhilNanjappa">@NikhilNanjappa</a> for reporting this issue.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6531">#6531: Prevent date inputs shifting alignment on iOS 18</a> – thanks to <a class="user-mention notranslate" href="https://github.com/rowellx68">@rowellx68</a> for reporting this issue and <a class="user-mention notranslate" href="https://github.com/colinrotherham">@colinrotherham</a> for suggesting the fix.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6528">#6528: Fix hover state on focused small radios</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6529">#6529: Fix rebranded header background being visible when printed</a> – thanks to <a class="user-mention notranslate" href="https://github.com/lewis-softwire">@lewis-softwire</a> for reporting this issue.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6462">#6462: Update HMRC brand colour</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6539">#6539: Fix skip link outline being clipped in forced colours mode</a></li> </ul>

From Release notes from govuk-frontend at 2025-12-18 12:01:36

GOV.UK Frontend v6.0.0-beta.2

<h2>Breaking changes</h2> <h3>Update Nunjucks blocks around the GOV.UK header</h3> We've changed the page structure around the header to separate the header element (<code><header></code>) 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 <code><header></code> element after you’ve made the changes. If you use GOV.UK Frontend's template and override the <code>govukHeader</code> component, update references to the <code>header</code> Nunjucks block to use <code>govukHeader</code> instead. <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{# Previously #} {% block header %} {{ govukHeader() }} {% endblock %} {# Now #} {% block govukHeader %} {{ govukHeader() }} {% endblock %}</pre></div> If you do not use GOV.UK Frontend's template but use the <code>govukHeader</code> component, update your template to include a <code><header></code> element around the component. If you do not use the <code>header</code> 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 <code><div></code> element and wrap it, along with any other header components, with a <code><header></code> element. <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto"><pre><header class="govuk-template__header"> <div class="govuk-header"> [...] </div> <div class="govuk-service-navigation"> [...] </div> </header></pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6536">pull request #6536: Refactor heading to detach element from component</a>. <h3>Use the <code>container</code> block instead of the <code>main</code> block to replace the width container</h3> We've reduced the scope of the <code>main</code> block to only replace the <code><main></code> element, rather than the whole <code><div class="govuk-width-container"></code> element. If you’re using the <code>main</code> block, use the new <code>container</code> block instead. <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{# Previously #} {% block main %}  {% endblock %} {# Now #} {% block container %}  {% endblock %}</pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6538">pull request #6538: Make Page template options besides header and footer follow conventions</a>. <h3>Update Nunjucks blocks around the GOV.UK footer</h3> We've changed the page structure around the footer to separate the <code><footer></code> element from the GOV.UK footer component. This lets you include other components within the footer element (<code><footer></code>) 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 <code><footer></code> element after you’ve made the changes. If you use GOV.UK Frontend's template and override the <code>govukFooter</code> component, update references to the <code>footer</code> Nunjucks block to use <code>govukFooter</code> instead. <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{# Previously #} {% block footer %} {{ govukFooter() }} {% endblock %} {# Now #} {% block govukFooter %} {{ govukFooter() }} {% endblock %}</pre></div> If you do not use GOV.UK Frontend's template but use the <code>govukFooter</code> component, update your template to include a <code><footer></code> element around the component. If you do not use the <code>footer</code> 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 <code><div></code> element and wrap it with a <code><footer></code> element. <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto"><pre><footer class="govuk-template__footer"> <div class="govuk-footer"> [...] </div> </footer></pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6537">pull request #6537: Refactor footer to detach element from component</a>. <h2>New features</h2> <h3>Customise the template's <code><header></code> element</h3> If you use Nunjucks, you can customise the appearance and content of the template's <code><header></code> element with new blocks and variables. New variables: <ul> <li><code>headerClasses</code> applies custom classes to the element</li> <li><code>headerAttributes</code> applies custom HTML attributes to the element</li> </ul> New Nunjucks blocks: <ul> <li><code>headerStart</code> inserts HTML immediately after the element's opening tag, and <code>headerEnd</code> inserts HTML immediately before the element's closing tag</li> <li><code>govukHeader</code> lets you customise the <code>govukHeader</code> component without affecting other parts of the header</li> </ul> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6536">pull request #6536: Refactor heading to detach element from component</a>. <h3>Easily include Service navigation on your page</h3> 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 <code>serviceName</code> variable, the page template will add the Service navigation component to the <code><header></code> element and show the service name. You can also set the <code>serviceUrl</code> variable to provide a link for the service name. <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{% extends "govuk/template.njk" %} {% set serviceName = "YOUR_SERVICE_NAME" %} {% set serviceUrl = "YOUR_SERVICE_URL" %}</pre></div> To help you make further customisations, we've added a <code>govukServiceNavigation</code> Nunjucks block to override the default component. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6541">pull request #6541: Add service navigation block to template</a>. <h3>Customise the <code><div class="govuk-width-container"></code> element</h3> We've added new variables and blocks to allow you to further customise the <code><div class="govuk-width-container"></code> element. New variables: <ul> <li><code>containerAttributes</code> applies custom HTML attributes to the element</li> </ul> New blocks <ul> <li><code>containerStart</code> inserts HTML immediately after the element's opening tag</li> <li><code>containerEnd</code> inserts HTML immediately before the element's closing tag</li> </ul> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6538">pull request #6538: Make Page template options besides header and footer follow conventions</a>. <h3>Use the <code>mainAttributes</code> variable to add attributes to the <code><main></code> element</h3> We've added a new <code>mainAttributes</code> variable to apply custom HTML attributes to the <code><main></code> element. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6538">pull request #6538: Make Page template options besides header and footer follow conventions</a>. <h3>Customise the template's <code><footer></code> element</h3> If you use Nunjucks, you can customise the appearance and content of the template's <code><footer></code> element with new blocks and variables. New variables: <ul> <li><code>footerClasses</code> applies custom classes to the element</li> <li><code>footerAttributes</code> applies custom HTML attributes to the element</li> </ul> New Nunjucks blocks: <ul> <li><code>footerStart</code> inserts HTML immediately after the element's opening tag</li> <li><code>footerEnd</code> inserts HTML immediately before the element's closing tag</li> <li><code>govukFooter</code> lets you customise the <code>govukFooter</code> component without affecting other parts of the footer</li> </ul> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6537">pull request #6537: Refactor footer to detach element from component</a>. <h2>Recommended changes</h2> <h3>Use the <code>govukSkipLink</code> block instead of <code>skipLink</code></h3> We're deprecating the <code>skipLink</code> block and replacing it with a <code>govukSkipLink</code> block so all blocks replacing GOV.UK Frontend elements have the same name as the component's macro. <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{# Previously #} {% block skipLink %} {{ govukSkipLink()}} {% endblock %} {# Now #} {% block govukSkipLink %} {{ govukSkipLink()}} {% endblock %}</pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6538">pull request #6538: Make Page template options besides header and footer follow conventions</a>. <h3>Use the <code>containerStart</code> block instead of <code>beforeContent</code></h3> We're deprecating the <code>beforeContent</code> block and replacing it with a <code>containerStart</code> block so all blocks adding content at the start of an element are named <code>...Start</code> to make its name better match what it does. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6538">pull request #6538: Make Page template options besides header and footer follow conventions</a>. <h2>Fixes</h2> <h3>Add <code>aria-hidden="true"</code> to the Service navigation's menu toggle</h3> If you do not use Nunjucks macros to generate your components' HTML, add an <code>aria-hidden="true"</code> attribute to the hidden <code><button></code> 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 <code>hidden</code> attribute. Adding the <code>aria-hidden="true"</code> attribute means the button will remain hidden for VoiceOver users. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6467">pull request #6467: Fix VoiceOver access to <code>hidden</code> Service Navigation menu button</a>. <h3>Other fixes</h3> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6351">#6351: Preserve already escaped <code>attributes</code> values to prevent double escaping</a> – thanks to <a class="user-mention notranslate" href="https://github.com/colinrotherham">@colinrotherham</a> for fixing this issue</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6462">#6462: Update HMRC brand colour</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6454">#6454: Prevent date inputs shifting alignment on iOS 18</a> – thanks to <a class="user-mention notranslate" href="https://github.com/rowellx68">@rowellx68</a> for reporting this issue and <a class="user-mention notranslate" href="https://github.com/colinrotherham">@colinrotherham</a> for suggesting the fix.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6445">#6445: Fix skip link outline being clipped in forced colours mode</a></li> </ul>

From Release notes from govuk-frontend at 2025-11-17 15:24:10

GOV.UK Frontend v6.0.0-beta.1

<h2>Breaking changes</h2> <h3>Use the <code>govuk-functional-colour</code> function to access functional (formerly applied) colours in Sass</h3> We've renamed and restructured our applied colours in Sass, and we've changed how you access them in your own code. They are now called functional colours. If you were using the value of one of the variables in <a href="https://github.com/alphagov/govuk-frontend/blob/v5.13.0/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss"><code>settings/_colours-applied.scss</code></a>, use the new <code>govuk-functional-colour</code> function to output a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var" rel="nofollow"><code>var()</code> call</a> referencing the colour. <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>.a-component { // color: $govuk-text-colour color: govuk-functional-colour(text); }</pre></div> <table> <thead> <tr> <th>Removed Sass variable</th> <th><code>govuk-functional-colour</code> call</th> </tr> </thead> <tbody> <tr> <td><code>$govuk-brand-colour</code></td> <td><code>govuk-functional-colour(brand)</code></td> </tr> <tr> <td><code>$govuk-text-colour</code></td> <td><code>govuk-functional-colour(text)</code></td> </tr> <tr> <td><code>$govuk-template-background-colour</code></td> <td><code>govuk-functional-colour(template-background)</code></td> </tr> <tr> <td><code>$govuk-body-background-colour</code></td> <td><code>govuk-functional-colour(body-background)</code></td> </tr> <tr> <td><code>$govuk-print-text-colour</code></td> <td><code>govuk-functional-colour(print-text)</code></td> </tr> <tr> <td><code>$govuk-secondary-text-colour</code></td> <td><code>govuk-functional-colour(secondary-text)</code></td> </tr> <tr> <td><code>$govuk-focus-colour</code></td> <td><code>govuk-functional-colour(focus)</code></td> </tr> <tr> <td><code>$govuk-focus-text-colour</code></td> <td><code>govuk-functional-colour(focus-text)</code></td> </tr> <tr> <td><code>$govuk-error-colour</code></td> <td><code>govuk-functional-colour(error)</code></td> </tr> <tr> <td><code>$govuk-success-colour</code></td> <td><code>govuk-functional-colour(success)</code></td> </tr> <tr> <td><code>$govuk-border-colour</code></td> <td><code>govuk-functional-colour(border)</code></td> </tr> <tr> <td><code>$govuk-input-border-colour</code></td> <td><code>govuk-functional-colour(input-border)</code></td> </tr> <tr> <td><code>$govuk-hover-colour</code></td> <td><code>govuk-functional-colour(hover)</code></td> </tr> <tr> <td><code>$govuk-link-colour</code></td> <td><code>govuk-functional-colour(link)</code></td> </tr> <tr> <td><code>$govuk-link-visited-colour</code></td> <td><code>govuk-functional-colour(link-visited)</code></td> </tr> <tr> <td><code>$govuk-link-hover-colour</code></td> <td><code>govuk-functional-colour(link-hover)</code></td> </tr> <tr> <td><code>$govuk-link-active-colour</code></td> <td><code>govuk-functional-colour(link-active)</code></td> </tr> </tbody> </table> Although we've now deprecated the Sass variables, they're still available to make your migration easier. However, if your code was using the Sass variables to do computations using the <a href="https://sass-lang.com/documentation/modules/color/" rel="nofollow">Sass colour API</a>, a compilation error will occur. This is because the variables now store a Sass string with a <code>var()</code> call, rather than a Sass colour. <h3>Use <code>$govuk-functional-colours</code> to redefine functional (formerly applied) colours</h3> We've restructured our applied colours in Sass. They are now called functional colours, and we've changed the way you redefine them. If you were redefining a custom value for the functional colour before importing GOV.UK Frontend, you can still do this by assigning a map of the colours you want to change to the <code>$govuk-functional-colours</code> variable. <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>// This will be merged with the default functional colours of GOV.UK Frontend // redefining the 'brand' colour to `rebeccapurple` $govuk-functional-colour: ( brand: rebeccapurple ); @import 'pkg:govuk-frontend';</pre></div> Note that you can only redefine existing functional colours, not add new functional colours. This is to make sure there's a clear separation between colours from GOV.UK Frontend and colours from your own project. <h3>We've ended support for Ruby Sass and LibSass</h3> GOV.UK Frontend no longer supports Ruby Sass or LibSass. You must update your project to <a href="https://sass-lang.com/dart-sass/" rel="nofollow">Dart Sass</a> to continue using GOV.UK Frontend. Support for Ruby Sass ended in 2019, and LibSass was deprecated in 2020. A number of Sass implementations, including Node Sass, SassC and sass-rs, are dependent upon LibSass. GOV.UK Frontend no longer supports these implementations. The Sass developers have provided guides for: <ul> <li><a href="https://sass-lang.com/ruby-sass/" rel="nofollow">migrating from Ruby Sass to Dart Sass</a></li> <li><a href="https://sass-lang.com/blog/libsass-is-deprecated/#how-do-i-migrate" rel="nofollow">migrating from LibSass to Dart Sass</a></li> </ul> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6311">pull request #6311: Remove support for Ruby Sass and LibSass</a>. <h3>We've set our minimum Dart Sass version to 1.79</h3> GOV.UK Frontend will no longer support services using Dart Sass versions earlier than 1.79. If you're using an earlier version of Dart Sass, your service's Sass may break, as GOV.UK Frontend may use features in Dart Sass that are not available in earlier versions. If you're using an earlier version of Dart Sass than 1.79, see <a href="https://github.com/sass/dart-sass/releases">the Dart Sass releases</a> and follow their release notes to upgrade to version 1.79 or later to continue using GOV.UK Frontend. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6366">pull request #6366: Update Dart Sass tests minimum version to 1.79.0</a>. <h3>Update references to <code>govuk-pagination__item--ellipses</code> class from the HTML for the Pagination component</h3> We deprecated the <code>govuk-pagination__item--ellipses</code> class in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.13.0">GOV.UK Frontend 5.13.0</a>, and we've now removed it. If you're not using Nunjucks macros, you should update instances of this class to use the <code>govuk-pagination__item--ellipsis</code> class instead. If you're using Nunjucks macros, you don't need to change anything. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6382">pull request #6382: Remove deprecated <code>govuk-pagination__item--ellipses</code> class</a>. <h3>Update the class on the GOV.UK logo link in the Header component</h3> We've updated the value of the <code>class</code> attribute on the link to the GOV.UK homepage to <code>govuk-header__homepage-link</code>. If you're not using Nunjucks macros, you'll need to update this class manually. <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto"><pre> <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage"> [...] </a>  <a href="//gov.uk" class="govuk-header__homepage-link"> [...] </a></pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6423">pull request #6423: Remove service name and navigation from Header component</a>. <h3>Stop including the service name and navigation items in the Header component</h3> We deprecated including the service name and navigation in the Header in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.9.0">GOV.UK Frontend 5.9.0</a>. We've now removed this functionality. Service names and service-level navigation should now use the <a href="https://design-system.service.gov.uk/components/service-navigation/" rel="nofollow">Service navigation component</a>. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6423">pull request #6423: Remove service name and navigation from Header component</a>. <h3>Stop importing GOV.UK Frontend's Sass using <code>all</code></h3> We deprecated GOV.UK Frontend's <code>all.scss</code> file and partials in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.8.0">GOV.UK Frontend 5.8.0</a> and replaced them with equivalent <a href="https://sass-lang.com/documentation/at-rules/use/#index-files" rel="nofollow">Sass <code>index</code> files</a>. We've now removed the <code>all.scss</code> files entirely. With the move to Dart Sass, you can now simplify how you import Sass from GOV.UK Frontend. <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>// Before @import "govuk/all"; @import "govuk/components/all" // After @import "govuk"; @import "govuk/components"</pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6412">pull request #6412: Remove <code>all.scss</code> file and partials</a>. <h3>Update to the new organisation colour palette</h3> We updated the organisation colour palette in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.9.0">GOV.UK Frontend 5.9.0</a>. The new palette was initially opt-in using the <code>$govuk-new-organisation-colours</code> feature flag. The updated palette is now the only palette available, so you can remove the feature flag from your code. As part of this work, we removed the deprecated <code>$websafe</code> parameter of the <code>govuk-organisation-colour</code> function. Use the <code>$contrast-safe</code> parameter when calling the function instead. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6390">pull request #6390: Remove legacy organisation colour palette</a>. <h3>Update references to deprecated organisations in the organisation colour palette</h3> We've removed deprecated organisations from the organisation colour palette. These organisations had ceased to exist or had been renamed prior to the start of 2025. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6426">pull request #6426: Remove deprecated organisation colours</a>. <h3>Stop using the <code>govuk-responsive-typography</code> Sass mixin</h3> We renamed the <code>govuk-responsive-typography</code> Sass mixin to <code>govuk-font-size</code> in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0">GOV.UK Frontend 5.1.0</a>. We've now removed the previous name entirely. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6387">pull request #6387: Remove <code>govuk-responsive-typography</code> mixin</a>. <h3>Stop using the <code>--govuk-frontend-breakpoint</code> CSS custom properties</h3> We renamed CSS custom properties starting <code>--govuk-frontend-breakpoint</code> to begin with <code>--govuk-breakpoint</code> in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.11.0">GOV.UK Frontend 5.11.0</a>. We've now removed the previous names for these properties. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6385">pull request #6385: Remove <code>--govuk-frontend-breakpoint</code> CSS properties</a>. <h3>Remove references to the <code>$govuk-show-breakpoints</code> feature flag</h3> The <code>$govuk-show-breakpoints</code> feature flag was deprecated and rendered non-operational by the media query changes introduced in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.13.0">GOV.UK Frontend 5.13.0</a>. This flag was only intended for use as a local development aid and not for production services, and we've now removed it. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6384">pull request #6384: Remove <code>$govuk-show-breakpoints</code> feature flag</a>. <h3>Stop using the <code>element</code> parameter of the Button component</h3> We deprecated the <code>element</code> parameter of the Button component Nunjucks macro in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0">GOV.UK Frontend 5.1.0</a>, and we've now removed it. The component is now output as a link if the <code>href</code> parameter is set. Otherwise, it's a <code>button</code> element. This means it's no longer possible to use <code>input</code> elements for buttons. Buttons using <code>input</code> are less flexible than <code>button</code> elements in terms of styling and content allowed within them, so we want to avoid using them. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6383">pull request #6383: Remove element parameter from Button component</a>. <h3>Stop using <code>$govuk-canvas-background-colour</code></h3> We renamed <code>$govuk-canvas-background-colour</code> to <code>$govuk-template-background-colour</code> in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.0">GOV.UK Frontend 5.10.0</a>. We've now removed the previous variable entirely. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6413">pull request #6413: Remove <code>$govuk-canvas-background-colour</code></a>. <h3>Stop using St. Edward's Crown and the <code>useTudorCrown</code> parameter</h3> GOV.UK updated its logo to replace the St. Edward's Crown with the Tudor Crown in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0">GOV.UK Frontend 5.1.0</a>. The Tudor Crown became the default in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.2.0">5.2.0</a>, which is when we deprecated the option to switch between crowns. We've now removed the Header component's <code>useTudorCrown</code> parameter and assets relating to the St. Edward's Crown. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6414">pull request #6414: Remove <code>useTudorCrown</code> parameter and St. Edwards crown assets</a>. <h3>Stop using <code>govuk-body-xs</code>, <code>govuk-!-font-size-14</code> and '14' as a possible font size in <code>govuk-font</code></h3> We deprecated 14 as a point on our <a href="https://design-system.service.gov.uk/styles/type-scale/" rel="nofollow">type scale</a> in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0">GOV.UK Frontend 5.1.0</a>. We've now removed it as an option, along with the typography classes that used it: <ul> <li><code>govuk-body-xs</code></li> <li><code>govuk-!-font-size-14</code></li> </ul> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6417">pull request #6417: Remove 14 from the type scale</a>. <h3>We've updated our responsive type scale</h3> We updated our responsive type scale behind the feature flag <code>$govuk-new-typography-scale</code> in <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.2.0">GOV.UK Frontend 5.2.0</a>. These type scale changes are now on by default, and we've removed the <code>$govuk-new-typography-scale</code> feature flag. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6421">pull request #6421: Turn the new type scale on by default</a>. <h2>Recommended changes</h2> <h3>Rename turquoise and pink coloured tags</h3> We've renamed 2 of the Tag component's colour modifier classes to be in line with GOV.UK Frontend's new colour palette: <ul> <li><code>govuk-tag--turquoise</code> is now <code>govuk-tag--teal</code></li> <li><code>govuk-tag--pink</code> is now <code>govuk-tag--magenta</code></li> </ul> Rename your tags to reflect these changes, as we'll be removing <code>govuk-tag--turquoise</code> and <code>govuk-tag--pink</code> in a future breaking release. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6416">pull request #6416: Deprecate turquoise and pink tag colour modifiers</a>. <h3>Check that the GOV.UK logo links to the GOV.UK homepage</h3> We've updated the default value of <code>homepageUrl</code> to point to the GOV.UK homepage. The previous default value pointed at the root of the current domain. On services, this caused the GOV.UK logo to link to the homepage of the service, rather than the GOV.UK homepage. Unless you operate a GOV.UK branded product, the GOV.UK logo should always link to the homepage of GOV.UK. Use the <a href="https://design-system.service.gov.uk/components/service-navigation/" rel="nofollow">Service navigation component</a> to provide a link to a local homepage. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6418">pull request #6418: Update default <code>homepageUrl</code> to point to GOV.UK homepage</a>. <h2>New features</h2> <h3>The GOV.UK footer component now allows the removal of OGL Content Licence information</h3> If your service does not provide information under the Open Government Licence (OGL), you can now remove it from the GOV.UK footer. If you're using Nunjucks, set the <code>contentLicence</code> parameter to <code>false</code>: <div class="highlight highlight-text-html-nunjucks notranslate position-relative overflow-auto"><pre>{{ govukFooter({ contentLicence: false }) }}</pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6191">#6191: Allow removal of Content Licence information in the GOV.UK footer component</a>. Thanks to <a class="user-mention notranslate" href="https://github.com/NickColley">@NickColley</a> for making this change. <h2>Fixes</h2> <h3>Tags now have borders for improved legibility</h3> We've reviewed the design of the tag component in response to changes from the new GOV.UK brand colour palette. Tags now have a 1px border, with the colour based on the background colour of the tag. This makes tags easier to distinguish against white backgrounds. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6379">pull request #6379: Add borders to tags</a>. <h3>Other fixes</h3> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/5311">#5311: Remove non-operational value parameter from file upload component</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6434">#6434: Fix rebranded header background being visible when printed</a> - thanks to <a class="user-mention notranslate" href="https://github.com/lewis-softwire">@lewis-softwire</a> for reporting this issue</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6447">#6447: Fix pagination outputting empty links when provided a null or empty value</a> – thanks to <a class="user-mention notranslate" href="https://github.com/NikhilNanjappa">@NikhilNanjappa</a> for reporting this issue</li> </ul>

From Release notes from govuk-frontend at 2025-10-31 14:52:06

GOV.UK Frontend v6.0.0-beta.0

To install this version with npm, run <code>npm install govuk-frontend@6.0.0-beta.0</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>Breaking changes</h2> <h3>Use GOV.UK brand colours</h3> We’ve updated GOV.UK Frontend to use the web palette defined by the <a href="https://www.gov.uk/government/publications/govuk-brand-guidelines" rel="nofollow">GOV.UK Brand guidelines</a>, as well as the 25% and 50% shades when they exist for a given colour. <h4>Check your service’s colours</h4> Our components now use the colours of the GOV.UK web palette. If you’re using any custom colours, you’ll need to make sure they still work well with the new web palette in terms of accessibility and design. If possible, you should use the GOV.UK brand colours instead. <h4>Use the <code>govuk-colour</code> function to access GOV.UK brand colours</h4> You can use the <code>govuk-colour</code> function to fetch colours from the GOV.UK web palette. This function allows you to access both primary colours and their variants, such as tints and shades. When the function receives only the colour name, it’ll return the primary variant of that colour. For example: <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>$app-colour: govuk-colour('blue'); // Returns the ‘Primary blue’ colour</pre></div> Use the new <code>$variant</code> parameter of the <code>govuk-colour</code> function to access the tints and shades of a colour defined by the GOV.UK brand. <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>$component-colour: govuk-colour('red', $variant: 'tint-25') // Returns the “Red tint 25%” colour $other-component-colour: govuk-colour('green', $variant: 'shade-50') // Returns the “Green shade 50%” colour</pre></div> You can find the list of possible colour names in the GOV.UK brand guidelines. <h4>If you’re already using the <code>govuk-colour</code> function</h4> If you’re already using the <code>govuk-colour</code> function in your project, colours from the GOV.UK web palette will now be applied automatically when you call the function. If the colour name exists in the GOV.UK web palette, the function returns the primary variant for that colour. The colour remains the same for<code>‘blue</code>, <code>yellow</code> and <code>orange</code>, but the following colours will see a slight change: <table> <thead> <tr> <th>Colour</th> <th>Old colour hex</th> <th>New colour hex</th> </tr> </thead> <tbody> <tr> <td><code>green</code></td> <td><code>#00703c</code></td> <td><code>#11875a</code></td> </tr> <tr> <td><code>red</code></td> <td><code>#d4351c</code></td> <td><code>#ca3535</code></td> </tr> <tr> <td><code>purple</code></td> <td><code>#4c2c92</code></td> <td><code>#54319f</code></td> </tr> <tr> <td><code>brown</code></td> <td><code>#b58840</code></td> <td><code>#99704a</code></td> </tr> </tbody> </table> Some of the GOV.UK brand colours are slightly different from the colours that were returned by <code>govuk-colour</code> before GOV.UK Frontend v6.0. That means you’ll need to check that the colours still work correctly where you applied them in your project, in terms of accessibility and design. To make it easier to upgrade, in cases where a colour name does not exist in the GOV.UK brand palette (for example, <code>bright-purple</code>), the function will return the closest colour from the GOV.UK brand palette but produce a deprecation warning. We recommend that you update your calls to <code>govuk-colour</code> with deprecated colour names to use a colour from the GOV.UK brand, such as the one suggested in the deprecation warning message. <code>govuk-colour</code> now maps colour names that no longer exist from the old palette to the new palette, as described in the following table. You can use this list to assess and update your use of <code>govuk-colour</code>. <table> <thead> <tr> <th>Old colour name</th> <th>Old colour hex</th> <th>New colour name</th> <th>New colour hex</th> </tr> </thead> <tbody> <tr> <td><code>light-pink</code></td> <td><code>#f499be</code></td> <td>Magenta tint 50%</td> <td><code>#e59abe</code></td> </tr> <tr> <td><code>pink</code></td> <td><code>#d53880</code></td> <td>Primary magenta</td> <td><code>#ca357c</code></td> </tr> <tr> <td><code>light-green</code></td> <td><code>#85994b</code></td> <td>Green tint 25%</td> <td><code>#4da583</code></td> </tr> <tr> <td><code>turquoise</code></td> <td><code>#28a197</code></td> <td>Primary teal</td> <td><code>#158187</code></td> </tr> <tr> <td><code>light-blue</code></td> <td><code>#5694ca</code></td> <td>Blue tint 25%</td> <td><code>#5694ca</code></td> </tr> <tr> <td><code>dark-blue</code></td> <td><code>#003078</code></td> <td>Blue shade 50%</td> <td><code>#0f385c</code></td> </tr> <tr> <td><code>light-purple</code></td> <td><code>#6f72af</code></td> <td>Purple tint 25%</td> <td><code>#7f65b7</code></td> </tr> <tr> <td><code>bright-purple</code></td> <td><code>#912b88</code></td> <td>Magenta shade 25%</td> <td><code>#98285d</code></td> </tr> <tr> <td><code>dark-grey</code></td> <td><code>#505a5f</code></td> <td>Black tint 25%</td> <td><code>#484949</code></td> </tr> <tr> <td><code>mid-grey</code></td> <td><code>#b1b4b6</code></td> <td>Black tint 80%</td> <td><code>#cecece</code></td> </tr> <tr> <td><code>light-grey</code></td> <td><code>#f3f2f1</code></td> <td>Black tint 95%</td> <td><code>#f3f3f3</code></td> </tr> </tbody> </table> <h4>If you’re using the <code>$govuk-colours</code> variable</h4> We’ve removed the <code>$govuk-colours</code> variable from GOV.UK Frontend, to only allow access to the colours through the <code>govuk-colour</code> function. If you were accessing the GOV.UK Frontend colours with <code>map-get($govuk-colours, <COLOUR_NAME>)</code>, you’ll now need to use <code>govuk-colour(<COLOUR_NAME>)</code>. We made these changes in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6326">#6326: Use brand palette through <code>govuk-colour</code></a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6335">#6335: Update button colours to use <code>govuk_palette</code></a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6336">#6336: Update tag colours to use <code>govuk_palette</code></a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6337">#6337: Update file upload colours to use <code>govuk_palette</code></a></li> </ul> <h3>Stop using the <code>$legacy</code> parameter in the <code>govuk-colour</code> function</h3> We’ve removed the <code>$legacy</code> parameter of the <code>govuk-colour</code> function, so you should remove any usage of it. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6326">pull request #6326: Use brand palette through <code>govuk-colour</code></a>. <h3>Stop using <code>govuk-tint</code> and <code>govuk-shade</code></h3> The <code>govuk-tint</code> and <code>govuk-shade</code> functions for applying tints and shades to colours by percentage are now deprecated and no longer work. They now only return the colour you pass to them, as well as a Sass warning. We’ll remove the <code>govuk-tint</code> and <code>govuk-shade</code> functions in the final release of 6.0.0. We recommend replacing them with tints and shades from the new GOV.UK colour palette that are as close as possible to your existing implementation. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6341">pull request #6341: Deactivate <code>govuk-tint</code> and <code>govuk-shade</code> functions</a>. <h2>Fixes</h2> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6338">#6338: Fix hover state on focused small radios</a></li> </ul>

From Release notes from govuk-frontend at 2025-10-23 09:08:47

GOV.UK Frontend v4.10.1

To install this version with npm, run <code>npm install govuk-frontend@4.10.1</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>Fixes</h2> We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to <a class="user-mention notranslate" href="https://github.com/matteason">@matteason</a> for reporting this. If you're using the <code>govukHeader</code> Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code: <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto"><pre><svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 60" height="30" width="162" fill="currentcolor" 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="226" cy="36" r="7.3"></circle> <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path> </svg></pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6036">pull request #6036: Fix some wordmark artifacts at high zoom levels</a>. We've also made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6029">#6029: Fix background colour of .govuk-template--rebranded</a></li> </ul>

From Release notes from govuk-frontend at 2025-10-23 09:08:14

GOV.UK Frontend v5.11.0

To install this version with npm, run <code>npm install govuk-frontend@5.11.0</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>New features</h2> <h3>The Service navigation component no longer uses a menu on mobile for a single link</h3> If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a Menu toggle on mobile if there's only one navigation link. You can control this behaviour using the new <code>collapseNavigationOnMobile</code> Nunjucks option. If you're not using our Nunjucks macros, you can recreate this behaviour by omitting the Menu <code><button></code> element when there is only one navigation item. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6016">pull request #6016: Don’t use menu for service nav with a single link</a>. <h3>Add inverse styling to Service navigation for use on product pages</h3> If you enable the GOV.UK rebrand, you can now add the <code>govuk-service-navigation--inverse</code> class to the Service navigation component to use white links on a blue background. This allows the rebranded GOV.UK header and Service navigation components to flow seamlessly with any following components that have a blue background, as is common on <a href="https://platforms.service.gov.uk/" rel="nofollow">GOV.UK Digital Service Platform</a> pages. We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6015">pull request #6015: Add inverse variant to Service navigation component</a>. <h3>You'll now see a deprecation warning if you're using LibSass</h3> If you're using the deprecated LibSass library, you'll now see this deprecation warning when compiling your Sass: <blockquote> It looks like you may be using LibSass to compile your Sass. LibSass is deprecated and will not be supported by the next major version of GOV.UK Frontend. See <a href="https://sass-lang.com/libsass/" rel="nofollow">https://sass-lang.com/libsass/</a> for more information. To silence this warning, update <code>$govuk-suppressed-warnings</code> with key: "libsass" </blockquote> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/5993">pull request #5993: Warn if Sass is compiled using libsass</a>. <h2>Deprecated features</h2> <h3>Replace references to CSS custom properties for breakpoints</h3> We've renamed the CSS custom properties for breakpoints to simplify the prefix from <code>--govuk-frontend</code> to just <code>--govuk</code>. <table> <thead> <tr> <th>Old name</th> <th>New name</th> </tr> </thead> <tbody> <tr> <td>--govuk-frontend-breakpoint-mobile</td> <td>--govuk-breakpoint-mobile</td> </tr> <tr> <td>--govuk-frontend-breakpoint-tablet</td> <td>--govuk-breakpoint-tablet</td> </tr> <tr> <td>--govuk-frontend-breakpoint-desktop</td> <td>--govuk-breakpoint-desktop</td> </tr> </tbody> </table> You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0). We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6014">pull request #6014: Simplify prefix for breakpoint custom properties</a>. <h2>Fixes</h2> We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to <a class="user-mention notranslate" href="https://github.com/matteason">@matteason</a> for reporting this. If you're using the <code>govukHeader</code> Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code: <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto"><pre><svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 60" height="30" width="162" fill="currentcolor" 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="226" cy="36" r="7.3"></circle> <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path> </svg></pre></div> We made this change in <a href="https://github.com/alphagov/govuk-frontend/pull/6036">pull request #6036: Fix some wordmark artifacts at high zoom levels</a>. We've also made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6011">#6011: Derive rebranded tints from $govuk-brand-colour</a> – thanks to <a class="user-mention notranslate" href="https://github.com/tamoreton">@tamoreton</a> for proposing this change</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6018">#6018: Fix layout of Service navigation in Edge when forced colours are enabled</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6019">#6019: Fix service nav wrapper not filling available width</a> – thanks to <a class="user-mention notranslate" href="https://github.com/joelanman">@joelanman</a> for reporting and fixing this issue</li> </ul>

From Release notes from govuk-frontend at 2025-10-23 09:07:50

GOV.UK Frontend v5.13.0

To install this version with npm, run <code>npm install govuk-frontend@5.13.0</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>New features</h2> <h3>Use Sass functions to create custom media queries</h3> We've added new Sass functions to help write <code>@media</code> and <code>@container</code> queries, mixins and functions whilst still using GOV.UK Frontend's <code>$govuk-breakpoints</code> setting. You can create <code>min-width</code> and <code>max-width</code> queries using the <code>govuk-from-breakpoint</code> and <code>govuk-until-breakpoint</code> functions: <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>.element { color: red; @media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} { color: blue; } }</pre></div> You can get the configured value of a breakpoint using <code>govuk-breakpoint-value</code>: <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>@function wider-than-tablet($width) { @return $width > govuk-breakpoint-value(tablet); }</pre></div> Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring <code>@container</code> queries. <div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto"><pre>$component-breakpoints: ( small: 300px, medium: 500px, large: 750px ); .element { color: red; @container #{govuk-from-breakpoint(small, $component-breakpoints)} { color: blue; } }</pre></div> We've rewritten the internals of the <code>govuk-media-query</code> mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected. We made these changes in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6264">#6264: Add media query functions</a>.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6265">#6265: Rewrite <code>govuk-media-query</code>, remove dependency on <code>sass-mq</code></a>.</li> </ul> <h2>Recommended changes</h2> <h3>Rename ellipses HTML class in pagination to ellipsis</h3> Within the pagination component, change the <code>govuk-pagination__item--ellipses</code> class to <code>govuk-pagination__item--ellipsis</code>. We introduced this change in <a href="https://github.com/alphagov/govuk-frontend/pull/5882">pull request #5882: Rename ellipses html class to ellipsis</a>. Thanks to <a class="user-mention notranslate" href="https://github.com/frankieroberto">@frankieroberto</a> for making this change. <h2>Fixes</h2> <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6223">#6223: Account for multiple attribute when enhancing a File Input</a>. Thanks to <a class="user-mention notranslate" href="https://github.com/deberny">@deberny</a> for reporting this issue.</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6297">#6297: Output deprecation warning if $govuk-show-breakpoints is true</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6304">#6304: Fix long filenames in enhanced file upload not wrapping</a>. Thanks to <a class="user-mention notranslate" href="https://github.com/wardt7">@wardt7</a> for reporting this issue.</li> </ul>

From Release notes from govuk-frontend at 2025-10-23 09:07:30

GOV.UK Frontend v5.12.0

To install this version with npm, run <code>npm install govuk-frontend@5.12.0</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>New features</h2> <h3>Use the <code>govuk-focused-form-input</code> mixin to style focus states for form inputs</h3> You can now use the <code>govuk-focused-form-input</code> mixin to style the focus state in your own form input components. Thanks to <a class="user-mention notranslate" href="https://github.com/patrickpatrickpatrick">@patrickpatrickpatrick</a> for suggesting this change. <h2>Fixes</h2> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6222">#6222: Fall back to the 'other' translation in older browsers that do not support <code>Intl.PluralRules</code> and remove fallback logic</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6232">#6232: Remove fieldset indentation from checkboxes and radios</a> – thanks to <a class="user-mention notranslate" href="https://github.com/RichardBradley">@RichardBradley</a>, <a class="user-mention notranslate" href="https://github.com/devkokov">@devkokov</a> and <a class="user-mention notranslate" href="https://github.com/nathdolan">@nathdolan</a> for reporting this issue</li> </ul>

From Release notes from govuk-frontend at 2025-10-23 09:06:36

GOV.UK Frontend v5.11.2

To install this version with npm, run <code>npm install govuk-frontend@5.11.2</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>Fixes</h2> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6138">#6138: Fix file upload being invisible when using the 'JavaScript enhanced' version with an empty label</a> – thanks to <a class="user-mention notranslate" href="https://github.com/JoPintoPaul">@JoPintoPaul</a> for reporting this issue</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6164">#6164: Fix handling of scope being null when calling <code>createAll()</code> or <code>initAll()</code></a> – thanks to <a class="user-mention notranslate" href="https://github.com/colinrotherham">@colinrotherham</a> for reporting and fixing this issue</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6184">#6184: Fix thickness of underlines on previous and next pagination links in Safari</a> – thanks to <a class="user-mention notranslate" href="https://github.com/frankieroberto">@frankieroberto</a> for reporting this issue</li> </ul>

From Release notes from govuk-frontend at 2025-07-17 15:22:24

GOV.UK Frontend v5.11.1

To install this version with npm, run <code>npm install govuk-frontend@5.11.1</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>Fixes</h2> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6047">#6047: Fix text within the inverse Service navigation variant not appearing in white</a> – thanks to <a class="user-mention notranslate" href="https://github.com/peteryates">@peteryates</a> for reporting this issue</li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6084">#6084: Output hexadecimal colours for <code>govuk-shade</code> and <code>govuk-tint</code></a></li> </ul>

From Release notes from govuk-frontend at 2025-06-11 14:20:14

GOV.UK Frontend v5.11.0-internal.0

<div class="markdown-alert markdown-alert-caution"><svg class="octicon octicon-stop mr-2" height="16" version="1.1" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>CautionThis 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.11 </div> To install this version with npm, run <code>npm install govuk-frontend@5.11.0-internal.0</code>. You can also find more information about <a href="https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version" rel="nofollow">how to stay up to date</a> in our documentation. <h2>New features</h2> <h3>The Service navigation component no longer uses a menu on mobile for a single link</h3> If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a 'Menu' toggle if there is only one navigation item. You can control this behaviour using the new <code>collapseNavigationOnMobile</code> Nunjucks option. If you are not using our Nunjucks macros, you can recreate this behaviour by omitting the 'Menu' <code><button></code> element if there is only one navigation item. This change was introduced in <a href="https://github.com/alphagov/govuk-frontend/pull/6016">pull request #6016: Don’t use menu for service nav with a single link</a>. <h3>Added inverse styling to Service navigation for use on product pages</h3> When the GOV.UK rebrand is enabled, you can now add the <code>govuk-service-navigation--inverse</code> class to the Service navigation component to use white links on a blue background. This allows the rebranded GOV.UK header and Service navigation to flow seamlessly with subsequent components that have a blue background, as is common on <a href="https://platforms.service.gov.uk/" rel="nofollow">GOV.UK Digital Service Platform</a> pages. This change was made in <a href="https://github.com/alphagov/govuk-frontend/pull/6015">pull request #6015: Add inverse variant to Service navigation component</a>. <h2>Deprecated features</h2> <h3>Replace references to CSS custom properties for breakpoints</h3> We've renamed the CSS custom properties for breakpoints to simplify the prefix from <code>--govuk-frontend</code> to just <code>--govuk</code>. <table> <thead> <tr> <th>Old name</th> <th>New name</th> </tr> </thead> <tbody> <tr> <td>--govuk-frontend-breakpoint-mobile</td> <td>--govuk-breakpoint-mobile</td> </tr> <tr> <td>--govuk-frontend-breakpoint-tablet</td> <td>--govuk-breakpoint-tablet</td> </tr> <tr> <td>--govuk-frontend-breakpoint-desktop</td> <td>--govuk-breakpoint-desktop</td> </tr> </tbody> </table> You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0). This change was introduced in <a href="https://github.com/alphagov/govuk-frontend/pull/6014">pull request #6014: Simplify prefix for breakpoint custom properties</a>. <h2>Fixes</h2> We've made fixes to GOV.UK Frontend in the following pull requests: <ul> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6018">#6018: Fix layout of Service navigation in Edge when forced colours are enabled</a></li> <li><a href="https://github.com/alphagov/govuk-frontend/pull/6019">#6019: Fix service nav wrapper not filling available width</a>, thanks to <a class="user-mention notranslate" href="https://github.com/joelanman">@joelanman</a> for reporting and fixing this issue</li> </ul>