Page types
-
Mini-hub
Mini-hubs are a way of presenting a number of pages about 1 topic on the NHS website.
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
<div class="nhsuk-width-container">
<ol class="nhsuk-breadcrumb__list">
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/">Home</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/conditions">Health A to Z</a></li>
</ol>
<p class="nhsuk-breadcrumb__back">
<a class="nhsuk-breadcrumb__backlink" href="/conditions">
<span class="nhsuk-u-visually-hidden">Back to </span>
Health A to Z
</a>
</p>
</div>
</nav>
<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent" role="main">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h1>
<span role="text">
What is AMD?
<span class="nhsuk-caption-xl nhsuk-caption--bottom">
<span class="nhsuk-u-visually-hidden">
-
</span>
Age-related macular degeneration (AMD)
</span>
</span>
</h1>
<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">
<h2 class="nhsuk-u-visually-hidden">Contents</h2>
<ol class="nhsuk-contents-list__list">
<li class="nhsuk-contents-list__item" aria-current="page">
<span class="nhsuk-contents-list__current">What is AMD?</span>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="/design-example/patterns/mini-hub/example-symptoms?fullpage=true">Symptoms</a>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Getting diagnosed</a>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Treatments</a>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Living with AMD</a>
</li>
</ol>
</nav>
<ul>
<li><strong>Age-related macular degeneration (AMD) is a common condition that affects the middle part of your vision.</strong> It usually first affects people in their 50s and 60s.</li>
<li><strong>It doesn't cause total blindness.</strong> But it can make everyday activities like reading and recognising faces difficult.</li>
<li><strong>Without treatment, your vision may get worse.</strong> This can happen gradually over several years ("dry AMD"), or quickly over a few weeks or months ("wet AMD").</li>
<li><strong>The exact cause is unknown.</strong> It's been linked to smoking, high blood pressure, being overweight and having a family history of AMD.</li>
</ul>
<p class="nhsuk-body-s nhsuk-u-margin-top-7 nhsuk-u-secondary-text-color">
Page last reviewed: 27 March 2018<br>
Next review due: 27 March 2021
</p>
<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
<ul class="nhsuk-list nhsuk-pagination__list">
<li class="nhsuk-pagination-item--next">
<a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="/design-example/patterns/mini-hub/example-symptoms?fullpage=true">
<span class="nhsuk-pagination__title">Next</span>
<span class="nhsuk-u-visually-hidden">:</span>
<span class="nhsuk-pagination__page">Symptoms</span>
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</main>
</div>{% from 'breadcrumb/macro.njk' import breadcrumb %}
{% from 'contents-list/macro.njk' import contentsList %}
{% from 'pagination/macro.njk' import pagination %}
{% block outerContent %}
{{ breadcrumb({
items: [
{
href: "/",
text: "Home"
}
],
href: "/conditions",
text: "Health A to Z"
}) }}
{% endblock %}
{% block content %}
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h1>
<span role="text">
What is AMD?
<span class="nhsuk-caption-xl nhsuk-caption--bottom">
<span class="nhsuk-u-visually-hidden">
-
</span>
Age-related macular degeneration (AMD)
</span>
</span>
</h1>
{{ contentsList({
items: [
{
href: "#",
text: "What is AMD?",
current: "true"
},
{
href: "/design-example/patterns/mini-hub/example-symptoms?fullpage=true",
text: "Symptoms"
},
{
href: "#",
text: "Getting diagnosed"
}
,
{
href: "#",
text: "Treatments"
}
,
{
href: "#",
text: "Living with AMD"
}
]
}) }}
<ul>
<li><strong>Age-related macular degeneration (AMD) is a common condition that affects the middle part of your vision.</strong> It usually first affects people in their 50s and 60s.</li>
<li><strong>It doesn't cause total blindness.</strong> But it can make everyday activities like reading and recognising faces difficult.</li>
<li><strong>Without treatment, your vision may get worse.</strong> This can happen gradually over several years ("dry AMD"), or quickly over a few weeks or months ("wet AMD").</li>
<li><strong>The exact cause is unknown.</strong> It's been linked to smoking, high blood pressure, being overweight and having a family history of AMD.</li>
</ul>
<p class="nhsuk-body-s nhsuk-u-margin-top-7 nhsuk-u-secondary-text-color">
Page last reviewed: 27 March 2018<br>
Next review due: 27 March 2021
</p>
{{ pagination({
"nextUrl": "/design-example/patterns/mini-hub/example-symptoms?fullpage=true",
"nextPage": "Symptoms"
}) }}
</div>
</div>
{% endblock %}The mini-hub is made up of:
- a heading and sub-heading which sit at the top of the page
- a contents list component underneath the heading
- the pagination component which goes at the bottom of the page
When to use this pattern
Use mini-hubs to present information on 1 complex topic spread over 2 to 8 pages.
We've found that mini-hubs help users understand complex topics. They break the topic down into manageable chunks and help users digest the information in a way that meets their needs.
But this isn't the case for all of the NHS website. (We explain more in the Research section on this page.) Test the pattern with your users to make sure that it works for your content.
When not to use this pattern
Do not use mini-hubs:
- for pages that are about more than 1 topic
- in a transactional service
Elements of the mini-hub
Heading and sub-heading
Put an H1 heading at the top of the page. The first thing in the H1 heading should be the name of the page you're on, not the mini-hub topic.
Put the mini-hub topic underneath the page heading. We include it in the same H1 with class="nhsuk-caption-xl" which makes it look like a sub-heading.
The page heading and topic are both part of the H1 but the page heading looks more important than the topic. (We explain why we do this in the Research section on this page.)
In this example, "What is AMD?" is the heading for the page. "Age-related macular degeneration (AMD)" is the topic.
<h1>
<span role="text">
What is AMD?
<span class="nhsuk-caption-xl nhsuk-caption--bottom">
<span class="nhsuk-u-visually-hidden">
-
</span>
Age-related macular degeneration (AMD)
</span>
</span>
</h1>Contents list
Use a contents list at the top of the page, underneath the heading and sub-heading, to help users navigate around a small group of related pages (up to 8 pages), for example a group of pages about a specific health condition. The example on this page is from the NHS website information about AMD.
<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">
<h2 class="nhsuk-u-visually-hidden">Contents</h2>
<ol class="nhsuk-contents-list__list">
<li class="nhsuk-contents-list__item" aria-current="page">
<span class="nhsuk-contents-list__current">What is AMD?</span>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Symptoms</a>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Getting diagnosed</a>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Treatments</a>
</li>
<li class="nhsuk-contents-list__item">
<a class="nhsuk-contents-list__link" href="#">Living with AMD</a>
</li>
</ol>
</nav>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 |
|---|---|---|---|
| Name items | Type array | Required true | Description Array of content list items objects. |
| Name items[].href | Type string | Required true | Description href value to use within each content list item label. |
| Name items[].text | Type string | Required true | Description Text to use within each content list item label. |
| Name current | Type boolean | Required false | Description Set the current active page. |
| Name classes | Type string | Required false | Description Classes to add to the content list container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to items in the content list. |
{% from 'contents-list/macro.njk' import contentsList %}
{{ contentsList({
items: [
{
href: "#",
text: "What is AMD?",
current: "true"
},
{
href: "#",
text: "Symptoms"
},
{
href: "#",
text: "Getting diagnosed"
}
,
{
href: "#",
text: "Treatments"
}
,
{
href: "#",
text: "Living with AMD"
}
]
}) }}Pagination
Use pagination at the bottom of the page to help users navigate around a small group of related pages (up to 8 pages), for example a group of pages about a specific health condition.
<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
<ul class="nhsuk-list nhsuk-pagination__list">
<li class="nhsuk-pagination-item--previous">
<a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="#">
<span class="nhsuk-pagination__title">Previous</span>
<span class="nhsuk-u-visually-hidden">:</span>
<span class="nhsuk-pagination__page">Treatments</span>
<svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
</svg>
</a>
</li>
<li class="nhsuk-pagination-item--next">
<a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="#">
<span class="nhsuk-pagination__title">Next</span>
<span class="nhsuk-u-visually-hidden">:</span>
<span class="nhsuk-pagination__page">Symptoms</span>
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
</svg>
</a>
</li>
</ul>
</nav>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 |
|---|---|---|---|
| Name previousUrl | Type string | Required true | Description The value of the previous link href attribute. |
| Name previousPage | Type string | Required true | Description The text of the previous link. |
| Name nextUrl | Type string | Required true | Description The value of the next link href attribute. |
| Name nextPage | Type string | Required true | Description The text of the next link. |
| Name classes | Type string | Required false | Description Classes to add to the pagination container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the pagination container. |
{% from 'pagination/macro.njk' import pagination %}
{{ pagination({
"previousUrl": "#",
"previousPage": "Treatments",
"nextUrl": "#",
"nextPage": "Symptoms"
}) }}Research on this pattern
We developed the mini-hub pattern for NHS website pages about health conditions.
We ran 3 rounds of research and tested our information about AMD with a range of users, including disabled people and people with low digital literacy. The Digital Accessibility Centre also tested the pattern.
We found that:
- the structure and labelling of the pages fitted users' mental model and helped them understand the structure of the content
- the active link formatting in the contents list helped users know where they were and, in some cases, it helped them choose the information that was relevant to them
- most users (including a user with very low digital skills) used the pagination to navigate through pages and knew it was related to the contents list at the top of the page
Heading structure
At first we made the mini-hub topic the main H1 heading but, when users navigated between pages, it was not obvious to them which page they were on. In some cases they did not realise they had moved between pages. It was only when we made the page heading into the larger H1 heading that users were clear which page they were on.
We found that screen readers struggled to pronounce the heading and sub-heading together and that confused people. So we've used <span> tags around the headings in the <h1></h1> to help screen readers read more naturally. We've also included <span class="nhsuk-u-visually-hidden">-</span> to add a natural pause.
Where this pattern did not work
We tried using this pattern for information about medicines and found that users did not understand that the separate pages of a mini-hub made up a whole medicines topic. Users expected to see all the information about a medicine on 1 long page.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: April 2021