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>.