Page templates
Updated in March 2026
Use page templates to create consistent layouts across Digital Health and Care Wales services.
Templates help you:
- prototype and test pages quickly
- create consistent user experiences across services
- use familiar layouts and navigation patterns that meet user expectations
Page template structure
Templates show how design system components and patterns work together to create a page.
Top
Contains components that are common across the service, such as:
Main content
Contains the primary page content. Use the layout component to control page width and content structure.
- bottom - for the site footer, which is anchored to the bottom of the browser window
Bottom
Contains the footer and supporting links, such as accessibility, privacy and cookie information.
Background colour
Page templates use the $nhswales-page-background-grey background colour. The British Dyslexia Association's style guide recommends dark text on a light, but not white, background.
This helps:
- reduce visual glare
- support users who prefer lower contrast backgrounds
- make important components stand out, like warning callouts
Public-facing page templates
Public-facing templates are designed for patients, carers and members of the public.
They use top navigation and familiar content layouts to support browsing, finding information and accessing services.
Default page template
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top"><a class="nhsw-site-header__brand" href="/"><span class="nhsw-site-header__logo"><img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales"></span></a></div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<h1 class="nhsw-h1">Default page template</h1>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer><header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top">
<a class="nhsw-site-header__brand" href="/">
<span class="nhsw-site-header__logo">
<img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales">
</span>
</a>
</div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<h1 class="nhsw-h1">Default page template</h1>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>Full width
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top"><a class="nhsw-site-header__brand" href="/"><span class="nhsw-site-header__logo"><img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales"></span></a></div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<a class="nhsw-back-link" href="#">Back</a>
<h1 class="nhsw-h1">Full width</h1>
<p class="nhsw-body">Page content</p>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>{% from "back-link/macro.njk" import nhswBackLink %}
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top">
<a class="nhsw-site-header__brand" href="/">
<span class="nhsw-site-header__logo">
<img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales">
</span>
</a>
</div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
{{ nhswBackLink({ href: "#" }) }}
<h1 class="nhsw-h1">Full width</h1>
<p class="nhsw-body">Page content</p>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>One-half
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top"><a class="nhsw-site-header__brand" href="/"><span class="nhsw-site-header__logo"><img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales"></span></a></div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<a class="nhsw-back-link" href="#">Back</a>
<div class="nhsw-grid-row">
<div class="nhsw-grid-column-one-half">
<h1 class="nhsw-h1">One-half</h1>
<p class="nhsw-body">Page content</p>
</div>
</div>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>{% from "back-link/macro.njk" import nhswBackLink %}
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top">
<a class="nhsw-site-header__brand" href="/">
<span class="nhsw-site-header__logo">
<img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales">
</span>
</a>
</div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
{{ nhswBackLink({ href: "#" }) }}
<div class="nhsw-grid-row">
<div class="nhsw-grid-column-one-half">
<h1 class="nhsw-h1">One-half</h1>
<p class="nhsw-body">Page content</p>
</div>
</div>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>Two-thirds
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top"><a class="nhsw-site-header__brand" href="/"><span class="nhsw-site-header__logo"><img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales"></span></a></div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<a class="nhsw-back-link" href="#">Back</a>
<div class="nhsw-grid-row">
<div class="nhsw-grid-column-two-thirds">
<h1 class="nhsw-h1">Two-thirds</h1>
<p class="nhsw-body">Page content</p>
</div>
</div>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>{% from "back-link/macro.njk" import nhswBackLink %}
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top">
<a class="nhsw-site-header__brand" href="/">
<span class="nhsw-site-header__logo">
<img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales">
</span>
</a>
</div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
{{ nhswBackLink({ href: "#" }) }}
<div class="nhsw-grid-row">
<div class="nhsw-grid-column-two-thirds">
<h1 class="nhsw-h1">Two-thirds</h1>
<p class="nhsw-body">Page content</p>
</div>
</div>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>One-third
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top"><a class="nhsw-site-header__brand" href="/"><span class="nhsw-site-header__logo"><img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales"></span></a></div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<a class="nhsw-back-link" href="#">Back</a>
<div class="nhsw-grid-row">
<div class="nhsw-grid-column-one-third">
<h1 class="nhsw-h1">One-third</h1>
<p class="nhsw-body">Page content</p>
</div>
</div>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>{% from "back-link/macro.njk" import nhswBackLink %}
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top">
<a class="nhsw-site-header__brand" href="/">
<span class="nhsw-site-header__logo">
<img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales">
</span>
</a>
</div>
</div>
</header>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
{{ nhswBackLink({ href: "#" }) }}
<div class="nhsw-grid-row">
<div class="nhsw-grid-column-one-third">
<h1 class="nhsw-h1">One-third</h1>
<p class="nhsw-body">Page content</p>
</div>
</div>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>Customising page templates
Templates can be customised using predefined variables and optional components.
Customisation should support user needs while maintaining consistency across services.
For example, you can add:
- site navigation
- phase banner
- breadcrumbs
- site footer
<header class="nhsw-site-header">
<div class="nhsw-site-header__container nhsw-site-header__container--fluid">
<div class="nhsw-site-header__top">
<a class="nhsw-site-header__brand" href="/"><span class="nhsw-site-header__logo"><img src="/assets/nhsw-logo.svg" alt="Digital Health and Care Wales"></span><span class="nhsw-site-header__title">Service name</span></a>
<div class="nhsw-site-header__account"><div class="nhsw-site-header__account-info"><span class="nhsw-site-header__user"><span class="nhsw-site-header__user-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 11c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg></span><span class="nhsw-site-header__user-name">Jane Doe</span></span></div><a class="nhsw-site-header__logout" href="#">Log out</a></div>
</div>
</div>
</header>
<nav class="nhsw-site-header__nav" aria-label="Primary navigation">
<div class="nhsw-site-header__nav-container">
<ul class="nhsw-site-header__nav-list">
<li><a class="nhsw-site-header__nav-link" href="#"><span>Schools</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>Children</span></a></li>
<li><a class="nhsw-site-header__nav-link nhsw-site-header__nav-link--current" href="#" aria-current="page"><span>Sessions</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>Vaccines</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>Unmatched responses</span><span class="nhsw-tag nhsw-tag--blue nhsw-site-header__nav-badge">5</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>School moves</span><span class="nhsw-tag nhsw-tag--blue nhsw-site-header__nav-badge">4</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>Reports</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>Imports</span><span class="nhsw-tag nhsw-tag--blue nhsw-site-header__nav-badge">0</span></a></li>
<li><a class="nhsw-site-header__nav-link" href="#"><span>Team</span></a></li>
</ul>
</div>
</nav>
<div class="nhsw-phase-banner">
<div class="nhsw-phase-banner__container">
<p class="nhsw-phase-banner__content"><strong class="nhsw-phase-banner__tag">Alpha</strong><span class="nhsw-phase-banner__text">This is a new service. Help us improve it and give your feedback by email.</span></p>
</div>
</div>
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
<nav class="nhsw-breadcrumb" aria-label="breadcrumb">
<p class="nhsw-breadcrumb__mobile-back"><a class="nhsw-back-link" href="#">Back to Level</a></p>
<ol class="nhsw-breadcrumb__list">
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
</ol>
</nav>
<h1 class="nhsw-h1">Customised content page template</h1>
<p class="nhsw-body">Page content</p>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>{% from "header/macro.njk" import nhswHeader %}
{% from "phase-banner/macro.njk" import nhswPhaseBanner %}
{% from "breadcrumb/macro.njk" import nhswBreadcrumb %}
{{ nhswHeader({
serviceName: "Service name",
search: false,
user: { name: "Jane Doe", logoutHref: "#" },
nav: {
items: [
{ text: "Schools", href: "#" },
{ text: "Children", href: "#" },
{ text: "Sessions", href: "#", current: true },
{ text: "Vaccines", href: "#" },
{ text: "Unmatched responses", href: "#", badge: 5 },
{ text: "School moves", href: "#", badge: 4 },
{ text: "Reports", href: "#" },
{ text: "Imports", href: "#", badge: 0 },
{ text: "Team", href: "#" }
]
}
}) }}
{{ nhswPhaseBanner({ tag: "Alpha", text: "This is a new service. Help us improve it and give your feedback by email." }) }}
<main class="nhsw-main-wrapper" id="maincontent">
<div class="nhsw-fluid-container">
{{ nhswBreadcrumb({
items: [
{ text: "Level", href: "#" },
{ text: "Level", href: "#" },
{ text: "Level", href: "#" },
{ text: "Level", href: "#" }
]
}) }}
<h1 class="nhsw-h1">Customised content page template</h1>
<p class="nhsw-body">Page content</p>
</div>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>Dashboard page templates
Dashboard templates are designed for staff who use health and care systems as part of their work.
They use left-hand navigation to support task-based workflows, access to tools and movement between related areas of a service.
Default dashboard
<div class="nhsw-dashboard">
<div class="nhsw-dashboard__sidebar">
<a class="nhsw-dashboard__brand" href="/"><img src="/assets/dhcw-icon.svg" alt=""><span>Service name</span></a>
<nav aria-label="Service navigation">
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link nhsw-dashboard__nav-link--current" href="#" aria-current="page"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3 2 12h3v8h5v-6h4v6h5v-8h3z"></path></svg><span>Home</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3 1 9l11 6 9-4.91V17h2V9L12 3z"></path></svg><span>School immunisations</span></a></li>
</ul>
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 21V3h10v6h6v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2z"></path></svg><span>Locations</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM9 13c-3 0-6 1.5-6 4v2h12v-2c0-2.5-3-4-6-4zm7 0c-.4 0-.8 0-1.2.1 1.2.9 2 2.2 2 3.9v2h5v-2c0-2.5-3-4-5.8-4z"></path></svg><span>Patient search</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 3a7 7 0 1 0 4.2 12.6l5.1 5.1 1.4-1.4-5.1-5.1A7 7 0 0 0 10 3zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"></path></svg><span>Advanced Patient Search</span></a></li>
</ul>
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 10h14v10H5V10z"></path></svg><span>Bookings</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 5h18v14H3V5zm2 2v.5l7 4.5 7-4.5V7l-7 4.5L5 7z"></path></svg><span>Correspondence</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5z"></path></svg><span>User Defaults</span></a></li>
</ul>
</nav>
</div>
<div class="nhsw-dashboard__main">
<div class="nhsw-dashboard__topbar"><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M4 21V3h10v6h6v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2z"/></svg></span>No Location Set</span><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M12 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 11c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg></span>Jane Doe</span><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm-1 4h2v2h2v2h-2v2h-2v-2H9V8h2z"/></svg></span>Aneurin Bevan University Health Board</span><a class="nhsw-dashboard__exit nhsw-link" href="#">Exit</a></div>
<main class="nhsw-dashboard__content" id="maincontent">
<h1 class="nhsw-h1">Default page template</h1>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>
</div>
</div>{% from "dashboard/macro.njk" import nhswDashboard %}
{% call nhswDashboard({
serviceName: "Service name",
nav: [
{ items: [
{ text: "Home", href: "#", icon: "home", current: true },
{ text: "School immunisations", href: "#", icon: "school" }
] },
{ items: [
{ text: "Locations", href: "#", icon: "building" },
{ text: "Patient search", href: "#", icon: "people" },
{ text: "Advanced Patient Search", href: "#", icon: "search" }
] },
{ items: [
{ text: "Bookings", href: "#", icon: "calendar" },
{ text: "Correspondence", href: "#", icon: "envelope" },
{ text: "User Defaults", href: "#", icon: "user" }
] }
],
topbar: {
chips: [
{ text: "No Location Set", icon: "building" },
{ text: "Jane Doe", icon: "user" },
{ text: "Aneurin Bevan University Health Board", icon: "pin" }
],
exit: { text: "Exit", href: "#" }
},
footer: {}
}) %}
<h1 class="nhsw-h1">Default page template</h1>
{% endcall %}Transactional page
Use transactional pages when users need to complete a specific task, such as:
- searching for a patient
- booking an appointment
- completing a form
- updating information
The template uses a back link component.
<div class="nhsw-dashboard">
<div class="nhsw-dashboard__sidebar">
<a class="nhsw-dashboard__brand" href="/"><img src="/assets/dhcw-icon.svg" alt=""><span>Service name</span></a>
<nav aria-label="Service navigation">
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link nhsw-dashboard__nav-link--current" href="#" aria-current="page"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3 2 12h3v8h5v-6h4v6h5v-8h3z"></path></svg><span>Home</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3 1 9l11 6 9-4.91V17h2V9L12 3z"></path></svg><span>School immunisations</span></a></li>
</ul>
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 21V3h10v6h6v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2z"></path></svg><span>Locations</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM9 13c-3 0-6 1.5-6 4v2h12v-2c0-2.5-3-4-6-4zm7 0c-.4 0-.8 0-1.2.1 1.2.9 2 2.2 2 3.9v2h5v-2c0-2.5-3-4-5.8-4z"></path></svg><span>Patient search</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 3a7 7 0 1 0 4.2 12.6l5.1 5.1 1.4-1.4-5.1-5.1A7 7 0 0 0 10 3zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"></path></svg><span>Advanced Patient Search</span></a></li>
</ul>
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 10h14v10H5V10z"></path></svg><span>Bookings</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 5h18v14H3V5zm2 2v.5l7 4.5 7-4.5V7l-7 4.5L5 7z"></path></svg><span>Correspondence</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5z"></path></svg><span>User Defaults</span></a></li>
</ul>
</nav>
</div>
<div class="nhsw-dashboard__main">
<div class="nhsw-dashboard__topbar"><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M4 21V3h10v6h6v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2z"/></svg></span>No Location Set</span><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M12 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 11c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg></span>Jane Doe</span><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm-1 4h2v2h2v2h-2v2h-2v-2H9V8h2z"/></svg></span>Aneurin Bevan University Health Board</span><a class="nhsw-dashboard__exit nhsw-link" href="#">Exit</a></div>
<main class="nhsw-dashboard__content" id="maincontent">
<a class="nhsw-back-link" href="#">Back</a>
<h1 class="nhsw-h1">Transactional page template</h1>
<p class="nhsw-body">Page content</p>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>
</div>
</div>{% from "dashboard/macro.njk" import nhswDashboard %}
{% from "back-link/macro.njk" import nhswBackLink %}
{% call nhswDashboard({
serviceName: "Service name",
nav: [
{ items: [
{ text: "Home", href: "#", icon: "home", current: true },
{ text: "School immunisations", href: "#", icon: "school" }
] },
{ items: [
{ text: "Locations", href: "#", icon: "building" },
{ text: "Patient search", href: "#", icon: "people" },
{ text: "Advanced Patient Search", href: "#", icon: "search" }
] },
{ items: [
{ text: "Bookings", href: "#", icon: "calendar" },
{ text: "Correspondence", href: "#", icon: "envelope" },
{ text: "User Defaults", href: "#", icon: "user" }
] }
],
topbar: {
chips: [
{ text: "No Location Set", icon: "building" },
{ text: "Jane Doe", icon: "user" },
{ text: "Aneurin Bevan University Health Board", icon: "pin" }
],
exit: { text: "Exit", href: "#" }
},
footer: {}
}) %}
{{ nhswBackLink({ href: "#" }) }}
<h1 class="nhsw-h1">Transactional page template</h1>
<p class="nhsw-body">Page content</p>
{% endcall %}Content page
Use content pages to provide information, guidance or support.
Content pages can include breadcrumbs to help users understand where they are within a service.
<div class="nhsw-dashboard">
<div class="nhsw-dashboard__sidebar">
<a class="nhsw-dashboard__brand" href="/"><img src="/assets/dhcw-icon.svg" alt=""><span>Service name</span></a>
<nav aria-label="Service navigation">
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link nhsw-dashboard__nav-link--current" href="#" aria-current="page"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3 2 12h3v8h5v-6h4v6h5v-8h3z"></path></svg><span>Home</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3 1 9l11 6 9-4.91V17h2V9L12 3z"></path></svg><span>School immunisations</span></a></li>
</ul>
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 21V3h10v6h6v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2z"></path></svg><span>Locations</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM9 13c-3 0-6 1.5-6 4v2h12v-2c0-2.5-3-4-6-4zm7 0c-.4 0-.8 0-1.2.1 1.2.9 2 2.2 2 3.9v2h5v-2c0-2.5-3-4-5.8-4z"></path></svg><span>Patient search</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 3a7 7 0 1 0 4.2 12.6l5.1 5.1 1.4-1.4-5.1-5.1A7 7 0 0 0 10 3zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"></path></svg><span>Advanced Patient Search</span></a></li>
</ul>
<ul class="nhsw-dashboard__nav-group">
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 10h14v10H5V10z"></path></svg><span>Bookings</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 5h18v14H3V5zm2 2v.5l7 4.5 7-4.5V7l-7 4.5L5 7z"></path></svg><span>Correspondence</span></a></li>
<li><a class="nhsw-dashboard__nav-link" href="#"><svg class="nhsw-dashboard__nav-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5z"></path></svg><span>User Defaults</span></a></li>
</ul>
</nav>
</div>
<div class="nhsw-dashboard__main">
<div class="nhsw-dashboard__topbar"><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M4 21V3h10v6h6v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v2zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2z"/></svg></span>No Location Set</span><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M12 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 11c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg></span>Jane Doe</span><span class="nhsw-dashboard__chip"><span class="nhsw-dashboard__chip-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm-1 4h2v2h2v2h-2v2h-2v-2H9V8h2z"/></svg></span>Aneurin Bevan University Health Board</span><a class="nhsw-dashboard__exit nhsw-link" href="#">Exit</a></div>
<main class="nhsw-dashboard__content" id="maincontent">
<nav class="nhsw-breadcrumb" aria-label="breadcrumb">
<p class="nhsw-breadcrumb__mobile-back"><a class="nhsw-back-link" href="#">Back to Level</a></p>
<ol class="nhsw-breadcrumb__list">
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
<li class="nhsw-breadcrumb__list-item"><a class="nhsw-breadcrumb__link" href="#">Level</a></li>
</ol>
</nav>
<h1 class="nhsw-h1">Content page template</h1>
<p class="nhsw-body">Page content</p>
</main>
<footer class="nhsw-site-footer">
<div class="nhsw-site-footer__container">
<p class="nhsw-body-s nhsw-site-footer__copyright">© Digital Health and Care Wales</p>
</div>
</footer>
</div>
</div>{% from "dashboard/macro.njk" import nhswDashboard %}
{% from "breadcrumb/macro.njk" import nhswBreadcrumb %}
{% call nhswDashboard({
serviceName: "Service name",
nav: [
{ items: [
{ text: "Home", href: "#", icon: "home", current: true },
{ text: "School immunisations", href: "#", icon: "school" }
] },
{ items: [
{ text: "Locations", href: "#", icon: "building" },
{ text: "Patient search", href: "#", icon: "people" },
{ text: "Advanced Patient Search", href: "#", icon: "search" }
] },
{ items: [
{ text: "Bookings", href: "#", icon: "calendar" },
{ text: "Correspondence", href: "#", icon: "envelope" },
{ text: "User Defaults", href: "#", icon: "user" }
] }
],
topbar: {
chips: [
{ text: "No Location Set", icon: "building" },
{ text: "Jane Doe", icon: "user" },
{ text: "Aneurin Bevan University Health Board", icon: "pin" }
],
exit: { text: "Exit", href: "#" }
},
footer: {}
}) %}
{{ nhswBreadcrumb({
items: [
{ text: "Level", href: "#" },
{ text: "Level", href: "#" },
{ text: "Level", href: "#" },
{ text: "Level", href: "#" }
]
}) }}
<h1 class="nhsw-h1">Content page template</h1>
<p class="nhsw-body">Page content</p>
{% endcall %}Help improve this style
Email the design system team if you have research findings, usability insights or implementation feedback from using these templates.