Skip to content

GOV.UK Frontend v5.2.0
Compare
Choose a tag to compare
@owenatgov owenatgov released this 21 Feb 11:30
· 391 commits to main since this release
v5.2.0
c862111
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

In this release, we’ve adjusted our responsive type scale, which is available behind a feature flag. The type scale change is to make text easier to read on smaller screens. We’ve also deprecated the useTudorCrown parameter.

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

New features

We've adjusted our responsive type scale

We've made the following adjustments to our responsive type scale:

  • point 16 now returns 16px across all screen sizes
  • point 19 now returns 19px across all screen sizes
  • point 24 remains as 24px on large screens
  • point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
  • point 27 remains as 27px on large screens
  • point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
  • point 36 remains as 27px on large screens
  • point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px

To enable these changes, set the feature flag variable $govuk-new-typography-scale to true before you import GOV.UK Frontend in your Sass files:

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

If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments.

You can read more on upgrading your service to the new type scale in our upgrade guide.

This change was introduced in pull request #2421: Adjust the responsive type scale

Insert custom HTML into component form group wrappers

You can now insert custom HTML into form group wrappers for all components with form fields.

govukInput({
  formGroup: {
    beforeInput: {
      html: "example"
    },
    afterInput: {
      html: "example"
    },
  }
})

This change was introduced in pull request #4567: Add beforeInput(s) and beforeInput(s) options to form groups.

Deprecated features

Stop using the useTudorCrown parameter in the Heading component

The rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the useTudorCrown parameter and will remove it in the next major release.

You can now remove the useTudorCrown parameter, along with any other adjustments made to display the Tudor crown logo in your service.

This change was introduced in pull request #4740: Make Tudor Crown logo the default

Fixes

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

Assets 3