Before you upgrade, please take note of any breaking changes and deprecation notices which may affect your site. View the Upgrade Guide to see examples of how to address breaking changes.

New features ✨

<header class="image">
  <div class="blurred-50">
  • new Grid classes to span cells over multiple columns - .grid__cell--span-2, .grid__cell--span-3, and .grid__cell--span-4 #848
<div class="grid grid--cols-3">
  <div class="grid__cell grid__cell--span-2"></div>
  • new grid mixin to enable older components to use the grid #848
.component {
  @mixin grid;
  @mixin grid-3-cols;
  • new grid-cell-span-2, grid-cell-span-3, and grid-cell-span-4 mixins to enable older components to span multiple columns #848
.component {
  @mixin grid;
  @mixin grid-3-cols;

  &:first-child {
    @mixin grid-cell-span-2;

Bug fixes 🐛

  • Styled Table now retains a default white background colour when it's nested inside an element with the .alt, or .bg-alt class #838
  • Buttons containing a link to an email address now have the same line-height as other buttons #840
  • tables nested inside Event Details now have the correct max-width and margin set #841
  • Text helpers now ensure their properties have precedence over everything else #843

Deprecation notice⚠️

  • removed .black Tabs variation as it was almost identical to the Alternate tab colour variation. It now defaults to the default variation #847
  • .grid--fill-first and .grid--fill-last classes have been deprecated and will be removed in a later version. .grid__cell--span-[2,3,4] can be used in its place #848
  • .grid--row has been removed as the Grid still functions correctly without it #848

Other changes

  • refactored Grid from flexbox to grid to allow more flexibility with the grid columns #848
  • updated grid-4-cols mixin breakpoint to match other mixins #848
  • updated Grid, Cards, Injected Footer, and Theme pages to use .grid__cell #848
  • refactored Injected Footer to use .grid__cell--span-[2,3,4] #848
  • converted grid mixins to js #848
  • removed Aligned title typography-level-2 override #837
  • Lead paragraph now fits inside other components better #846
  • removed custom .lead overrides in pathfinders and tabs #846
  • created e2e test to ensure preview-banner adds the correct class to the body tag #826

Documentation updates