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, orgovuk-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, orgovuk-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