GOV.UK Frontend v3.14.0

New features

Set text alignment with override classes

You can now use the govuk-!-text-align-left, govuk-!-text-align-centre and govuk-!-text-align-right CSS classes to set text alignment on elements.

This was added in pull request #2368: Add text-align override classes. Thanks to Ed Horsford for reporting this issue.

Define negative spacing using the govuk-spacing function

You can now pass the negative equivalent of a point from the spacing scale to the govuk-spacing function to get negative spacing.

For example, govuk-spacing(1) returns 5px, and govuk-spacing(-1) returns -5px.

This was added in pull request #2367: Allow govuk-spacing to output negative spacing. Thanks to Chris Hill-Scott for reporting this issue.

Fixes

• #2366: Prevent panel text overflowing when zoomed in on mobile - thanks to Phil Sherry for reporting this issue.

GOV.UK Frontend v3.13.1

3.13.1 (Fix release)

Fixes

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

• #2264: Improve focus state for radio and checkbox controls in forced colors mode (for example, Windows High Contrast Mode) – thanks to @adamliptrot-oc for reporting this issue
• #2265: Do not remove focus outline from disabled link buttons in forced colors mode
• #2273: Fix invisible footer on Open Government Licence logo in forced colors mode – thanks to @oscarduignan for reporting this issue
• #2277: Fix invisible start button chevron in forced colors mode
• #2290: Improve support for Internet Explorer 11 with Windows High Contrast Mode
• #2306: Add max-width to file upload component
• #2312: Remove padding-right from details component

GOV.UK Frontend v3.13.0

New features

Add a 'none' option and 'or' divider to checkboxes

You can now add a 'none' option to checkboxes. For example, 'None of the above' or 'None of these options apply to me'.

Use the 'none' option to allow users to state that none of the checkboxes apply to them. Otherwise, users would have to work out that they should leave all the checkboxes unticked.

You can now also add an 'or' divider before the 'none' option. Use the 'or' divider to make the 'none' option more visible to users.

This was added in pull request #2151: Add 'None of the above' and 'or' divider to checkboxes. Thanks to @frankieroberto for contributing this improvement.

Add a nonce attribute to inline scripts

If your service has a Content Security Policy (CSP), you can now add a nonce attribute to inline scripts within the Nunjucks page template. To do this, set the cspNonce Nunjucks variable. However, you should only add this attribute if you're not able to include the hash for the inline scripts in your CSP.

Make sure you understand the security implications of using this attribute, as wrong implementation could affect your service’s security.

Read more about how to configure your CSP to work with GOV.UK Frontend.

This was added in pull request #2245: Allow the CSP nonce attribute to be set on the inline script in the page template. Thanks to @natcarey for contributing this issue and its solution.

Fixes

We've made the following fixes in pull request #2229: Change approach to fallback PNG in the header to fix blank data URI from triggering Content Security Policy error:

• fix blank data URI from triggering CSP error
• fix alignment of fallback PNG in the header

We’ve also made fixes in the following pull requests:

• #2228: Fix display of checkboxes in Internet Explorer 8
• #2237: Fix GOV.UK logo disappearing on light background in Windows High Contrast Mode
• #2251: Disable ink skipping for underlines in hover state

GOV.UK Frontend v3.12.0

New features

Links are easier to read and have a clearer hover state (opt-in)

Links now have underlines that are consistently thinner and a bit further away from the link text.

Links also have a clearer hover state, where the underline gets thicker to make the link stand out to users.

These changes are an opt-in feature because you may:

• need to make changes to your service to introduce these new link styles consistently
• want to avoid opting in if you have links within a multiple-column layout in your CSS - there is a Chromium bug that affects such links

To enable this feature, set $govuk-new-link-styles to true before you import GOV.UK Frontend in your Sass:

// application.scss
$govuk-new-link-styles: true;
@import "govuk-frontend/all";

If you have created your own link styles, you should review them to ensure their use is consistent across your service.

To make it easier to be consistent in your use of link styles, we’ve also introduced new mixins and modifier classes for:

• removing underlines
• displaying white text on dark backgrounds

These new link styles will be enabled by default in a future major version of GOV.UK Frontend.

This was added in pull request #2183: Updates to link styles and link hover states.

Style links to remove underlines

You can now remove underlines from links by using either the:

• govuk-link-style-no-underline mixin in your Sass, or
• govuk-link--no-underline class in your HTML

An underline still appears when the user hovers their cursor over the link.

This was added in pull request #2214: Add no-underline mixin and modifier class.

Style links on dark backgrounds

You can now style links on dark backgrounds to use white text colour by using either the:

• govuk-link-style-inverse mixin in your Sass, or
• govuk-link--inverse class in your HTML

This was added in pull request #2213: Add inverse link mixin and modifier class.

Add links styled as buttons to cookie banners

You can now add links styled as buttons to cookie banners. For example, you can set the Hide button to be a link styled as a button that reloads the page. Use this feature if you set non-essential cookies on the server and want to help users keep their place using progressive enhancement.

This feature is enabled by default.

This was added in pull request #2164: Enable cookie banner to set link styled as a button.

Fixes

• #2132: Improve vertical alignment of phase banner tag on mobile devices – thanks to @matthewmascord for contributing this issue.
• #2157: Use pointer cursor for 'Menu' button in header – thanks to @MalcolmVonMoJ for contributing this issue.
• #2171: Fix padding on GOV.UK logo affecting hover and focus states
• #2186: Fix display of warning text in Edge when Windows High Contrast Mode is enabled
• #2192: Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets
• #2201: Set -webkit-appearance: button on file upload so text is aligned in Safari
• #2205: Stop file upload component 'jumping' on focus
• #2212: Add underline to crown copyright link in footer

GOV.UK Frontend v3.11.0

New features

Allow users to accept or reject cookies with a cookie banner

You can now use cookie banners to allow users to accept or reject cookies which are not essential for making your service work.

This was added in pull request #2131: Add cookie banner component and button groups.

Group buttons and links

You can now use a button group when you place two or more buttons together.

Any links you include within a button group now line up visually with the buttons.

Read more about button groups on the Design System’s button page.

This was added in pull request #2114: Add button groups for use in cookie banner.

Change the style of table captions

You can now make table captions larger or smaller by applying the govuk-table__caption--xl, govuk-table__caption--l, govuk-table__caption--m or govuk-table__caption--s classes.

This was added in pull request #2048: Add modifiers for table captions.

Fixes

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

• #2045: Stop same-site cookies from being wiped when printing in Internet Explorer 11 – thanks to @gunjam for contributing this issue.
• #2080: Fix JavaScript error when character count ID starts with a number - thanks to @josef-vlach for reporting this issue.
• #2092: Use tabular numbers for character count message - thanks to @quis for contributing this issue.
• #2093: Only output space after breadcrumbs class if there’s an additional class – thanks to @frankieroberto for contributing this issue.
• #2133: Remove user-agent default 2px horizontal margins on buttons in Safari

GOV.UK Frontend v3.10.2

Fixes

We’ve made fixes to the fixtures you can use to check your HTML matches GOV.UK Frontend.

These changes were made in the following pull requests:

• #2031: Include hidden status of the component examples in published fixtures – thanks to @andymantell for contributing this
• #2043: Fixes for a couple of component examples / fixtures – thanks to @andymantell for contributing this as well!
• #2071: Use non-bool type strings for attributes in test fixtures – thanks to @matthew-shaw for contributing this

There are no other changes to GOV.UK Frontend in this release.

GOV.UK Frontend v3.10.1

Fixes

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

• #2035: Fix hairline gap between notification banner header and outer border on high resolution screens in Chrome/Edge (Blink)
• #2036: Explicitly set the text colour for notification banner content, rather than using the user-agent default text colour
• #2042: Wrap notification banner content at 2/3 grid width

GOV.UK Frontend v3.10.0

New features

Update users with notification banners

You can now use notification banners to tell users about events that occur elsewhere in your service. For example, when they need to complete tasks.

This was added in pull request #1935: Create notification banner component.

Customise input mode in the date component

You can now change which keyboard type displays for mobile and tablet users. This enables users to enter characters other than numbers when they use the date input. To change the keyboard type, set the inputmode when you use the Nunjucks macro options.

This was added in pull request #1975: Enable custom inputmode for date input component. Thanks to @foaly-nr1 for contributing this issue.

GOV.UK Frontend v3.9.1

Fixes

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

• #1967: Fix navigation links in the header not being announced by screen readers - thanks to @paulrobertlloyd for reporting this issue and to @adamsilver for their help resolving it.

GOV.UK Frontend v3.9.0

New features

Add a prefix or suffix to a text input component

You can now use prefixes and suffixes in the text input component to help users enter things like currencies and measurements.

This was added in pull request #1816: Add input prefix and suffix. Thanks to @simonwhatley and the GOV.UK Coronavirus Services Team.

Test if your HTML matches GOV.UK Frontend

You can now use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.

This was added in pull request #1925: Generate fixtures.json files for components on build:package. Thanks to everyone who fed back on our test fixtures proposal.

Customise navigation in the header component

If you use the header component with navigation, you can now:

• customise the section's aria-label text
• add navigation items without links

Customise aria-label text

You can use the new:

• navigationLabel option to set the aria-label text for the navigation section
• menuButtonLabel option to set the aria-label text for the button that hides or shows the navigation section on mobile

For example:

{{ govukHeader({
    navigationLabel: "Custom navigation section aria-label",
    menuButtonLabel: "Custom menu button aria-label"
}) }}

The default labels are now:

• Navigation menu for navigationLabel
• Show or hide navigation menu for menuButtonLabel

This was added in pull requests:

• #1905: Set navigation and mobile menu labels of the header component with new options
• #1943: Change header menu button label - thanks to @domoscargin for raising this issue

Add navigation items without links

To add a navigation item without a link, use the text or html option to add the item but do not use the href option.

For example:

{{ govukHeader({
    navigation: [
    {
      html: "<form method='post' action='url.com'>
              <input type='submit' class='app-logout-button-style' value='Log out' />
            </form>"
    }
  ]
}) }}

This was added in pull request #1921: Make it possible to exclude link from header navigation item.

Fixes

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

• #1918: Add new brand colour for FCDO - thanks to @deborahchua and @beccapearce for contributing this
• #1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads
• #1947 Add print styles for the panel component