Help users to

Learn about health campaigns

Help NHS App users learn about public health campaigns using the campaign card.

Open this example (Card campaign) in a new tab 
<div class="nhsapp-card nhsapp-card--with-media nhsapp-card--dark-blue">
  <div class="nhsapp-card__media">
    <img
      class="nhsapp-card__img"
      src="../../../assets/images/campaign-card-image.jpg"
      alt=""
    />
  </div>

<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a
href="#"
class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-26"
>
Help change the NHS
</a>
<p class="nhsuk-u-margin-top-2">
Have your say on making the NHS fit for the future
</p>
</div>


<svg
class="nhsapp-icon nhsapp-icon--chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</div>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 


{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  classes: 'nhsapp-card--dark-blue',
  href: '#',
  title: 'Help change the NHS',
  titleClasses: 'nhsuk-u-font-size-26',
  descriptionHtml: '<p class="nhsuk-u-margin-top-2">Have your say on making the NHS fit for the future</p>',
  img: {
    src: '../../../assets/images/campaign-card-image.jpg'
  }
}) }}

When to use

Use this pattern on the home screen to promote prioritised public health campaigns that:

Campaigns that are not run by the NHS should ideally have a journey that has been integrated with the NHS App.

How to use

The campaign card consists of an image, a heading and body text. The whole card is one selectable link.

Image

The photography we use on the campaign card is usually decorative rather than informative. This means alt-text is not usually needed. Check the service manual guidance on alt-text to make sure.

Heading

The heading should have a persuasive tone. The wording of existing headings or slogans for the campaign can be a helpful reference point.

There is space for one line of heading text. The maximum character count is 23 characters including spaces.

Body text

The body text should have an informative tone. It should help users understand what they can do if they follow the link.

There is space for two lines of body text. The maximum character count is 75 characters including spaces.

Research

In usability testing, participants noticed and engaged with the campaign card. They responded positively to the tone of the text, the use of photography, and the idea of campaigns being shown on the home screen.

Help improve this pattern

The NHS App design system team would like to hear:

  • how you have used this pattern in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Learn about health campaigns' discussion on GitHub.