Create new pattern for using cards to navigate content

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 - Port Nunjucks syntax highlighting from GOV.UK Design System
 - Support focus and keyboard left/right scrolling on code blocks
+- Split out hub page pattern from card component and updated content
 
 ## 8.7.2 - 2 March 2026
 

app/views/design-system/patterns/hub-page/example/index.njk

@@ -0,0 +1,104 @@
+---
+previewLayout: design-example-wrapper-full
+---
+
+{% extends "layouts/design-example-wrapper-full-layout.njk" %}
+
+{% from "card/macro.njk" import card %}
+{% from "breadcrumb/macro.njk" import breadcrumb %}
+
+{% block beforeContent %}
+  {{ breadcrumb({
+    items: [
+      {
+        href: "#",
+        text: "Home"
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+
+<h1 class="nhsuk-heading-xl">NHS services</h1>
+<p class="nhsuk-body-l">Find out about NHS services such as GPs, pharmacies and hospitals, services near you, and online services to manage your health</p>
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      clickable: "true",
+      headingLevel: 5,
+      heading: "Order a repeat prescription",
+      headingClasses: "nhsuk-heading-xs"
+    }) }}
+  </li>
+</ul>
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      primary: "true",
+      clickable: "true",
+      heading: "GPs",
+      headingClasses: "nhsuk-heading-m",
+      description: "About GP services, including how to find and register with a local GP and how to book an appointment"
+    }) }}
+  </li>
+  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      primary: "true",
+      clickable: "true",
+      heading: "Hospitals",
+      headingClasses: "nhsuk-heading-m",
+      description: "About NHS hospitals, booking and changing appointments with the NHS e-Referral Service and going into hospital"
+    }) }}
+  </li>
+  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      primary: "true",
+      clickable: "true",
+      heading: "Dentists",
+      headingClasses: "nhsuk-heading-m",
+      description: "About NHS dental services, how to find an NHS dentist and how much treatment costs"
+    }) }}
+  </li>
+  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      primary: "true",
+      clickable: "true",
+      heading: "Prescriptions",
+      headingClasses: "nhsuk-heading-m",
+      description: "Find out about prescriptions including charges, repeat prescriptions and if you can get free prescriptions"
+    }) }}
+  </li>
+</ul>
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      clickable: "true",
+      secondary: "true",
+      heading: "Services A to Z",
+      headingClasses: "nhsuk-heading-m",
+      description: "Use our service finder to find other health services"
+    }) }}
+  </li>
+  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      clickable: "true",
+      secondary: "true",
+      heading: "Online services",
+      headingClasses: "nhsuk-heading-m",
+      description: "Get your NHS number and find out how to view test results online"
+    }) }}
+  </li>
+</ul>
+
+{% endblock %}

app/views/design-system/patterns/hub-page/index.njk

@@ -0,0 +1,90 @@
+{% extends "layouts/app-layout.njk" %}
+
+{% set pageTitle = "Hub page" %}
+{% set pageDescription = "Hub pages use cards to help users navigate to the content they need." %}
+{% set pageSection = "Design system" %}
+{% set subSection = "Patterns" %}
+{% set theme = "Pages" %}
+{% set dateUpdated = "December 2025" %}
+{% set backlog_issue_id = "260" %}
+
+{% block beforeContent %}
+  {% include "design-system/patterns/_breadcrumb.njk" %}
+{% endblock %}
+
+{% block bodyContent %}
+
+  {{ designExample({
+    group: "patterns",
+    item: "hub-page",
+    type: "example"
+  }) }}
+
+  <h2 id="when-to-use-this-pattern">When to use this pattern</h2>
+  <p>Use clickable <a href="/design-system/components/card">cards</a> on hub pages to signpost groupings of related content and help users find the content they need.</p>
+  <p>Hub pages work well on large websites. For smaller sites, other components may be enough, for example:</p>
+  <ul>
+    <li><a href="/design-system/components/header#navigation">header navigation</a></li>
+    <li><a href="/design-system/patterns/mini-hub">a mini-hub</a></li>
+    <li>a simple list of links</li>
+  </ul>
+
+  <h2 id="when-not-to-use-this-pattern">When not to use this pattern</h2>
+  <p>Do not use this pattern as a substitute for a clear information architecture. Use the header component, for example, to provide consistent navigation.</p>
+  <p>Do not use cards to help users navigate a transactional journey. But you may use them to help people find your service <a href="/design-system/patterns/start-page">start page</a>.</p>
+
+  <h2 id="how-this-pattern-works">How this pattern works</h2>
+  <p>This pattern uses 3 types of clickable card, the:</p>
+    <ul>
+      <li><a href="#top-task-card">top task card</a></li>
+      <li><a href="#primary-card-with-chevron">primary card with chevron</a></li>
+      <li><a href="#secondary-card">secondary card</a></li>
+    </ul>
+  <p>Hub pages should include primary cards. They do not need to include top task cards or secondary cards.</p>
+  <p>Group cards to show a collection of related topics. Prioritise the cards so the content users need most comes first.</p>
+  <p>Use different card styles to help users understand the importance of different groups of cards.</p>
+
+  <h3 id="top-task-card">Top task card</h3>
+
+  {{ designExample({
+    group: "patterns",
+    item: "hub-page",
+    type: "top-task"
+  }) }}
+
+  <p>Top task cards are small clickable cards.</p>
+  <p>Use them at the top of hub pages above other cards (such as primary cards) to help users quickly access specific information or tasks buried deeper in the navigation. Use them as shortcuts to content or services that are popular with users or meet an important business need.</p>
+  <p>If you want to link to a page just below the hub page, use a primary card instead.</p>
+  <p>Do not use more than 3 top tasks on a hub page.</p>
+
+  <h3 id="primary-card-with-chevron">Primary card (with chevron)</h3>
+
+    {{ designExample({
+      group: "patterns",
+      item: "hub-page",
+      type: "primary-card"
+    }) }}
+
+  <p>Use primary cards on hub pages to signpost groups of information that are important to users.</p>
+  <p>You can include a primary card that links to a single page at a lower level if other primary cards on the same hub page link to groups of content.</p>
+  <p>The chevron icon (from our <a href="/design-system/styles/icons">icon set</a>) helps users know the card will take them to more content. The size of the card helps them understand that the topics these cards link to are more frequently visited or more important than topics signposted by secondary cards.</p>
+  <p>Include a heading, with a link, and descriptive text.</p>
+
+  <h3 id="secondary-card">Secondary card</h3>
+
+  {{ designExample({
+    group: "patterns",
+    item: "hub-page",
+    type: "secondary-card"
+  }) }}
+
+  <p>Use secondary cards on hub pages to signpost groups of information on less important topics. Use them below primary cards which signpost important information.</p>
+  <p>Secondary cards have less visual impact than top tasks or primary cards.</p>
+  <p>Include a heading, with a link, and descriptive text.</p>
+
+  <h2 id="research">Research</h2>
+
+  <p>We tested these 3 card variations as part of an iterative process to improve the NHS website's information architecture and navigation patterns.</p>
+  <p>We tested the cards in usability sessions and monitored analytics to understand how successful they were.</p>
+
+{% endblock %}

app/views/design-system/patterns/hub-page/primary-card/index.njk

@@ -0,0 +1,14 @@
+{% from "card/macro.njk" import card %}
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
+  {{ card({
+    href: "#",
+    primary: "true",
+    clickable: "true",
+    heading: "GPs",
+    headingClasses: "nhsuk-heading-m",
+    description: "About GP services, including how to find and register with a local GP and how to book an appointment"
+  }) }}
+  </li>
+</ul>

app/views/design-system/patterns/hub-page/secondary-card/index.njk

@@ -0,0 +1,14 @@
+{% from "card/macro.njk" import card %}
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
+  {{ card({
+    href: "#",
+    clickable: "true",
+    secondary: "true",
+    heading: "Services A to Z",
+    headingClasses: "nhsuk-heading-m",
+    description: "Use our service finder to find other health services"
+  }) }}
+  </li>
+</ul>

app/views/design-system/patterns/hub-page/top-task/index.njk

@@ -0,0 +1,13 @@
+{% from "card/macro.njk" import card %}
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+    {{ card({
+      href: "#",
+      clickable: "true",
+      headingLevel: 5,
+      heading: "Order a repeat prescription",
+      headingClasses: "nhsuk-heading-xs"
+    }) }}
+  </li>
+</ul>

app/views/includes/_side-nav.njk

@@ -155,6 +155,7 @@
 {% set pages = [
   { title: "A to Z page", url: "/design-system/patterns/a-to-z-page" },
   { title: "Confirmation page", url: "/design-system/patterns/confirmation-page" },
+  { title: "Hub page", url: "/design-system/patterns/hub-page" },
   { title: "Interruption page", url: "/design-system/patterns/interruption-page" },
   { title: "Mini-hub", url: "/design-system/patterns/mini-hub" },
   { title: "Question pages", url: "/design-system/patterns/question-pages" },

app/views/site-map.njk

@@ -133,6 +133,7 @@
             <li><a href="/design-system/patterns/confirmation-page">Confirmation page</a></li>
             <li><a href="/design-system/patterns/find-bsl-content">Find British Sign Language content</a></li>
             <li><a href="/design-system/patterns/help-users-decide-when-and-where-to-get-care">Decide when and where to get care (care cards)</a></li>
+            <li><a href="/design-system/patterns/hub-page">Hub page</a></li>
             <li><a href="/design-system/patterns/interruption-page">Interruption page</a></li>
             <li><a href="/design-system/patterns/know-that-a-page-is-up-to-date">Know that a page is up to date</a></li>
             <li><a href="/design-system/patterns/mini-hub">Mini-hub</a></li>

app/views/sitemap.xml

@@ -334,6 +334,9 @@
   <url>
     <loc>https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care</loc>
   </url>
+  <url>
+    <loc>https://service-manual.nhs.uk/design-system/patterns/hub-page</loc>
+  </url>
   <url>
     <loc>https://service-manual.nhs.uk/design-system/patterns/interruption-page</loc>
   </url>