v5.0.3

v5.0.3

Fixes

• Adding missing @use imports for spacing and colour helpers from nhsuk-frontend in several components - pull request #417

v5.0.2

v5.0.2

Fixes

• Removed unintended inclusion of the full nhsuk-frontend stylesheet in builds by switching to targeted @use imports for only the mixins/tools required by each component - pull request #412
• Correctly set the new border radius on secondary buttons in the active state - pull request #413

v5.0.1

NHSUK frontend assets refactor (#409)

v5.0.0

v5.0.0 - 9 October 2025

💥 Breaking changes

Bumped nhsuk-frontend version to v10.0.0 in pull request #378 - details are in the nhsuk frontend release notes.

Button group

Deprecated nhsapp-button-group component in pull request #378, as now available in nhsuk-frontend.

Swap nhsapp-button-group → with nhsuk-button-group.

Before:

<div class="nhsapp-button-group">
  <button class="nhsuk-button nhsapp-button">
    Continue
  </button>
  <button class="nhsuk-button nhsuk-button--secondary nhsapp-button">
    Try again
  </button>
</div>

After:

<div class="nhsuk-button-group">
  <button class="nhsuk-button nhsapp-button">
    Continue
  </button>
  <button class="nhsuk-button nhsuk-button--secondary nhsapp-button">
    Try again
  </button>
</div>

Section heading

Deprecated nhsapp-section heading component in pull request #378.

A heading and description option has been added to the cardGroup.

Before:

<div class="nhsapp-section-heading">
  <h2 class="nhsuk-heading-s">Upcoming appointments</h2>
</div>
<p class="nhsuk-u-margin-bottom-5">1 upcoming appointment</p>
<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    ...
  </li>
</ul>

After:

<h2 class="nhsapp-cards__heading">Upcoming appointments</h2>
<p class="nhsapp-cards__description">1 upcoming appointment</p>
<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    ...
  </li>
</ul>

Custom html can be added using params.headingHtml, that will support the depreaction of the view all link, for example:

{{ nhsappCardGroup({
  stacked: true,
  headingHtml:
    '<div class="nhsapp-cards__heading" style="justify-content: space-between; align-items: center; display: flex;">
      <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Services</h2>
      <a class="nhsuk-u-font-size-19 nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap" href="#">View all <span class="nhsuk-u-visually-hidden">services</span></a>
    </div>',
  cards: [
    {
      ...
    }
  ]
}) }}

Icons

Updated icon names, following nhsuk frontend naming conventions in pull request #381.

Before:

nhsapp-icon nhsapp-icon__account

After:

nhsapp-icon nhsapp-icon--account

Card links

Replaced params.html with params.descriptionHtml in pull request 403.

Before:

{{ nhsappCard({
  title: '...',
  html: '...'
}) }}

After:

{{ nhsappCard({
  title: '...',
  descriptionHtml: '...'
}) }}

Updated logic for a card with no link and removed params.readOnly.

Before:

{{ nhsappCard({
  title: 'Card title',
  readOnly: 'true'
}) }}

After:

{{ nhsappCard({
  title: 'Card title'
}) }}

Removed the card link with an icon in pull request 405.

🆕 New features

New (web) header component

Added (web) header component in pull request #390, extending the NHS design system header and adding modifier classes, nhsapp-u-hide-from-tablet and nhsapp-u-hide-until-tablet, to show and hide nav items on different screen sizes.

New NHS App colours

Added NHS App colours in pull request #389.

These are tints and shades extended from the NHS design system used on the NHS App tag and card links components.

Example:

nhsapp-colour("green-light")

Before:

$color_tag-green-background: #c9e6d8;

After:

$color_tag-green-background: nhsapp-colour("green-light");

Card links

Updated card links component styling in pull request #382.

Added new variants for the:

• Account card - using the class nhsapp-card--blue-light.
• Campaign card - using the classes nhsapp-card--blue-dark and nhsapp-card--with-media.

Added isListItem argument to cardGroup macro. If true (default) wrapper is <ul> with each card as <li>. If false uses <div>.

v4.0.0

v4.0.0 - 17 June 2025

Breaking changes

Bumped nhsuk-frontend version to v9.6.2 (PR 321) - details are in the nhsuk frontend release notes.

Deprecated nhsapp-frontend components now available in nhsuk-frontend

Swap nhsapp-button--secondary → with nhsuk-button--secondary

Before:

<button class="nhsuk-button nhsapp-button--secondary nhsapp-button">
  Try again
</button>

After:

<button class="nhsuk-button nhsuk-button--secondary nhsapp-button">
  Try again
</button>

Swap nhsapp-panel → with nhsuk-panel

Before:

<div class="nhsapp-panel">
  <h1 class="nhsapp-panel__title">
    Application complete
  </h1>
  <div class="nhsapp-panel__body">
    We have sent you a confirmation email
  </div>
</div>

After:

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__title">
    Application complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

v3.1.0

Components

• Added secondary card link (PR 269)

Fixes

• Fixed layout shift on secondary button (PR 277)

v3.0.0

Breaking changes

• Bumped nhsuk-frontend version to v9.2.0 (PR 241) - details are in the nhsuk frontend release notes
• Bumped nhsuk-frontend peer dependency version to v9.0.0

Components

• Updated Badge - removing small blue variant

v2.3.0

Fixes

• Icons now use rem sizing to ensure consitency in different contexts

Components

• New Seconday Button styling added
• New Confirmation Panel component

v2.2.0

Fixes

• Badge count now displaying correctly when value is 1
• Cards in combination with a section heading spacing now fixed
• Added missing card param to Nunjucks macro linkAriaLabel

Styles

New icons added. See full commit for list of icons.

v2.1.0

v2.1.0

Updates to guidance and the microsite

Fixes

Card link with badge accessibility fix. Added option to provide aria-hidden to the badge when used with the card link. Plus, changed the badge HTML from a span to a p. This fixes issues we saw with MacOS Voiceover.

Components and styles

• The card component now supports a footer section. The guidance for this will be coming very soon after this release
• The card component now supports a "read only" view. The chevron icon is hidden and the title is no longer a link