govuk-frontend
Advanced tools
Changelog
3.11.0 (Feature release)
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.
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.
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.
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.10.2 (Patch release)
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:
There are no other changes to GOV.UK Frontend in this release.
Changelog
3.10.1 (Patch release)
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.10.0 (Feature release)
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.
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.
Changelog
3.9.1 (Fix release)
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.9.0 (Feature release)
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.
Changelog
3.8.1 (Fix release)
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.8.0 (Feature release)
$govuk-secondary-text-colour
and govuk-colour("dark-grey")
are now darker so users can more clearly read hint text that uses the colour.
The colour now has a contrast ratio of 7:1 against a white background, and helps hint text meet the WCAG 2.1 (AAA) accessibility standard.
This was added in pull request #1827: Make dark grey darker.
The error styling for the:
This means it’s easier for users to tell the difference between a field with an error and a field that's focused.
When an error message is about several fields, make sure you're clear which field has the error. You must not rely on users being able to tell which field has the error styling.
This was added in pull request #1870: Reduce border width of form inputs in the error state.
You can now turn spellcheck on or off in the input, textarea and character count components using the new spellcheck
option instead of the attributes
option.
For example:
{{ govukInput({
spellcheck: true
}) }}
This was added in pull requests:
From GOV.UK Frontend v4.0.0, you'll no longer be able to reference the $govuk-border-width-form-element-error
Sass setting.
Change any references to $govuk-border-width-form-element-error
in your Sass code so they reference $govuk-border-width-form-element
instead.
This was changed in pull request #1870: Reduce border width of form inputs in the error state.
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.7.0 (Feature release)
If a list is hard to read because the items run across multiple lines, you can now add extra spacing between list items using the new govuk-list--spaced
class.
This was added in pull request #1775: Add list--spaced modifier. Thanks to @frankieroberto for raising this issue.
You can now use HTML for a navigation item in the header component, using the new html
option.
This was added in pull request #1819: Add the ability to specify HTML for a navigation item. Thanks to @adamsilver.
You can now import node_modules/govuk-frontend/govuk/base
, instead of importing settings
, helpers
and tools
separately.
GOV.UK Frontend's Sass files now compile to CSS faster, because we've changed the way dependencies work when you import them.
If you already import node_modules/govuk-frontend/govuk/all
in your Sass file, you do not need to do anything. Sass will automatically compile faster.
If you import specific parts of GOV.UK Frontend in your Sass file instead, you can now make Sass compile faster by importing base
then a component's index
file. This will avoid GOV.UK Frontend importing dependencies multiple times.
For example:
@import "node_modules/govuk-frontend/govuk/base";
@import "node_modules/govuk-frontend/govuk/core/all";
@import "node_modules/govuk-frontend/govuk/objects/all";
@import "node_modules/govuk-frontend/govuk/components/button/index";
@import "node_modules/govuk-frontend/govuk/components/footer/index";
@import "node_modules/govuk-frontend/govuk/components/header/index";
Find out more about importing CSS.
This was added in pull request #1804: Allow components to be imported without dependencies. Thanks to @kevindew for raising this issue.
You can now collapse the breadcrumb component on mobile using the new collapseOnMobile
option, so it:
This was added in pull request #1754: Add collapseOnMobile breadcrumbs flag. Thanks to @vanitabarrett and @miaallers.
The back link component is now:
This was added in pull request #1753: Make back link arrow consistent with breadcrumb component. Thanks to @vanitabarrett and @miaallers.
core
and overrides
layers without base
If you import specific files from the core
or overrides
layers, you’ll now see a deprecation warning when compiling Sass if you do not import node_modules/govuk-frontend/govuk/base
first.
To fix the warning, import node_modules/govuk-frontend/govuk/base
first. For example:
@import "node_modules/govuk-frontend/govuk/base";
@import "node_modules/govuk-frontend/core/typography";
If you do not import node_modules/govuk-frontend/govuk/base
first, your service will no longer work from GOV.UK Frontend v4.0.0.
This was added in pull request #1807: Warn if importing core, overrides without dependencies.
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.6.0 (Feature release)
You can now use colour with tags to help distinguish between different tags - or to help draw the user’s attention to a tag if it’s especially important.
This also means you should replace the .govuk-tag--inactive
class with the .govuk-tag--grey
class. .govuk-tag--inactive
is now deprecated, and it will be removed in a future release.
Pull request #1711: Additional Tag modifier classes for different colours.
You can now hide elements when users print a page, using the new govuk-!-display-none-print
class.
Pull request #1723: Add display override for hiding content when printing.
iff
Sass function is now deprecatedYou should no longer use the iff
Sass function. The function is now deprecated, and it will be removed in a future release.
Pull request #1742: Deprecate iff function.