Page
Quickly build an entire NIHR page, including Header and Footer, navigation, and content.
Examples
open this example in its own window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lorem ipsum</title>
<link
rel="shortcut icon"
href="https://www.nihr.ac.uk/favicon.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="/design-system.bundle.css" />
<link rel="stylesheet" href="/docs.bundle.css" />
</head>
<body class="bg-grey-10">
<header class="pt-3 pb-3 bg-white main-header">
<div class="container">
<div class="row">
<div class="col-md-8">
<a
href="/"
title="National Institute for Health and Care Research (NIHR)"
class="main-logo"
><img
src="https://www.nihr.ac.uk/layout/4.0/assets/logos/nihr-master-logo-325px.png"
alt="The NIHR logo"
/>
</a>
</div>
</div>
</div>
</header>
<nav
id="main-navigation"
class="navbar navbar-expand-lg navbar-light bg-light bg-grey-20"
>
<div class="container">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav"></ul>
</div>
</div>
</nav>
<main class="pt-0">
<div class="row">
<div class="col-8">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
suscipit pellentesque magna dapibus efficitur. Ut vel enim eu tellus
semper suscipit. Sed lobortis, sapien id convallis efficitur, tortor
diam ultricies felis, ac fermentum dolor velit quis odio. Praesent
placerat tortor felis, non egestas magna pulvinar vel. Mauris
pretium dolor vitae molestie posuere. In sit amet ex mauris. In
facilisis, eros quis varius fermentum, lorem erat mattis nulla, quis
pulvinar ligula mi vitae felis. In pellentesque iaculis eros in
facilisis. Morbi convallis lorem porta cursus feugiat. Aliquam
molestie porttitor lorem. Sed eleifend tempus est, at hendrerit
massa mattis ac. Nulla sed facilisis purus, ac pretium justo.
Aliquam semper magna et dolor fermentum, a vestibulum elit rutrum.
Nulla quis turpis ut augue mattis iaculis. Fusce luctus blandit
hendrerit.
</p>
<p>
Etiam justo odio, pharetra nec tincidunt sed, elementum vel tortor.
Pellentesque maximus ante id justo tincidunt aliquet at ut est. Ut
ullamcorper faucibus sagittis. Mauris bibendum cursus bibendum. Sed
sed laoreet mi, eget ullamcorper nibh. Fusce elit neque, luctus
vitae congue et, varius ac dolor. Phasellus vehicula urna vitae erat
accumsan, id volutpat elit ornare. Fusce aliquet turpis dapibus nisi
blandit, et eleifend quam malesuada. Sed ut ante ac felis placerat
vulputate. In ac arcu sit amet dui porta accumsan.
</p>
<p>
Sed lacinia condimentum luctus. Etiam congue quam ac urna euismod
mattis commodo vulputate nulla. Aliquam eu mi in urna dignissim
ultrices. Suspendisse non dolor vel enim aliquam maximus id vel
dolor. Proin scelerisque diam sit amet nisi volutpat, eu tristique
ex volutpat. Etiam fringilla mollis placerat. Pellentesque sed
tincidunt eros, quis convallis risus. Fusce tincidunt laoreet lorem,
eu consequat lacus maximus in. Aliquam nulla eros, congue eu nisl a,
mollis tempus arcu. Fusce at lectus nec nibh aliquam sollicitudin
quis ac tortor. Maecenas auctor odio sed scelerisque porta.
</p>
<p>
Donec porta lectus a nisi lobortis, vitae pretium est commodo. Fusce
vitae tempus ipsum. Nullam tincidunt ante vitae neque imperdiet
porttitor. Sed pretium turpis vel rutrum pellentesque. Phasellus
convallis mi eget est euismod, ut ornare augue vestibulum. Duis
commodo justo eros, sed egestas lacus blandit at. Nam id blandit
nisi. Etiam scelerisque ex ipsum, consequat venenatis ante gravida
a. Cras id massa nec libero sollicitudin rhoncus id ut nisi.
</p>
<p>
Nunc nisl ipsum, volutpat condimentum volutpat sit amet, mattis non
mi. Duis bibendum nunc imperdiet pellentesque tincidunt. Suspendisse
porta ante nec semper imperdiet. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum finibus, odio sed laoreet
semper, lorem neque dignissim neque, quis scelerisque quam ante sit
amet turpis. Cras semper nunc id bibendum pellentesque. Suspendisse
sapien ex, tempor id facilisis non, facilisis et ligula. Fusce sed
ex sit amet nunc cursus egestas. Pellentesque ac lorem sit amet
purus varius finibus. Donec magna leo, vulputate et sagittis at,
pulvinar non nibh. Nunc sed justo tincidunt, auctor lorem quis,
laoreet nibh.
</p>
</div>
</div>
</main>
<footer class="main-footer">
<div class="container">
<div class="row">
<div
class="col d-flex align-items-stretch justify-content-between flex-column"
>
<ul class="social-media-links mb-5">
<li>
<a href="https://en-gb.facebook.com/OfficialNIHR/"
><i class="fa-brands fa-facebook-f"
><span class="visually-hidden">Facebook</span></i
></a
>
</li>
<li>
<a href="https://www.linkedin.com/company/nihr-research"
><i class="fa-brands fa-linkedin-in"
><span class="visually-hidden">LinkedIn</span></i
></a
>
</li>
<li>
<a href="https://twitter.com/NIHRresearch"
><i class="fa-brands fa-x-twitter"
><span class="visually-hidden">Twitter</span></i
></a
>
</li>
<li>
<a href="https://www.youtube.com/NIHRtv"
><i class="fa-brands fa-youtube"
><span class="visually-hidden">Youtube</span></i
></a
>
</li>
</ul>
</div>
<div class="col-auto">
<a
href="https://www.gov.uk/government/organisations/department-of-health-and-social-care"
class="funded-by-department-of-health-and-social-care-logo"
>
<img
src="https://www.nihr.ac.uk/layout/4.0/assets/logo-dhsc-reversed.png"
alt="Logo of the Department of Health & Social Care"
/>
</a>
</div>
</div>
<div class="row">
<div class="col">
<ul class="bottom-nav">
<li>© NIHR</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="/design-system.bundle.js"></script>
</body>
</html>
Options to the page() macro
Options to PrimaryNavigationLink
{% from 'macros/component/page.html' import page %}
{{ page({
'siteTitle': 'Lorem ipsum',
'pageContent': '
<div class="row">
<div class="col-8">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit pellentesque magna dapibus
efficitur. Ut vel enim eu tellus semper suscipit. Sed lobortis, sapien id convallis efficitur, tortor diam
ultricies felis, ac fermentum dolor velit quis odio. Praesent placerat tortor felis, non egestas magna
pulvinar vel. Mauris pretium dolor vitae molestie posuere. In sit amet ex mauris. In facilisis, eros quis
varius fermentum, lorem erat mattis nulla, quis pulvinar ligula mi vitae felis. In pellentesque iaculis eros
in facilisis. Morbi convallis lorem porta cursus feugiat. Aliquam molestie porttitor lorem. Sed eleifend
tempus est, at hendrerit massa mattis ac. Nulla sed facilisis purus, ac pretium justo. Aliquam semper magna
et dolor fermentum, a vestibulum elit rutrum. Nulla quis turpis ut augue mattis iaculis. Fusce luctus
blandit hendrerit.
</p>
<p>
Etiam justo odio, pharetra nec tincidunt sed, elementum vel tortor. Pellentesque maximus ante id justo
tincidunt aliquet at ut est. Ut ullamcorper faucibus sagittis. Mauris bibendum cursus bibendum. Sed sed
laoreet mi, eget ullamcorper nibh. Fusce elit neque, luctus vitae congue et, varius ac dolor. Phasellus
vehicula urna vitae erat accumsan, id volutpat elit ornare. Fusce aliquet turpis dapibus nisi blandit, et
eleifend quam malesuada. Sed ut ante ac felis placerat vulputate. In ac arcu sit amet dui porta accumsan.
</p>
<p>
Sed lacinia condimentum luctus. Etiam congue quam ac urna euismod mattis commodo vulputate nulla. Aliquam eu
mi in urna dignissim ultrices. Suspendisse non dolor vel enim aliquam maximus id vel dolor. Proin
scelerisque diam sit amet nisi volutpat, eu tristique ex volutpat. Etiam fringilla mollis placerat.
Pellentesque sed tincidunt eros, quis convallis risus. Fusce tincidunt laoreet lorem, eu consequat lacus
maximus in. Aliquam nulla eros, congue eu nisl a, mollis tempus arcu. Fusce at lectus nec nibh aliquam
sollicitudin quis ac tortor. Maecenas auctor odio sed scelerisque porta.
</p>
<p>
Donec porta lectus a nisi lobortis, vitae pretium est commodo. Fusce vitae tempus ipsum. Nullam tincidunt
ante vitae neque imperdiet porttitor. Sed pretium turpis vel rutrum pellentesque. Phasellus convallis mi
eget est euismod, ut ornare augue vestibulum. Duis commodo justo eros, sed egestas lacus blandit at. Nam id
blandit nisi. Etiam scelerisque ex ipsum, consequat venenatis ante gravida a. Cras id massa nec libero
sollicitudin rhoncus id ut nisi.
</p>
<p>
Nunc nisl ipsum, volutpat condimentum volutpat sit amet, mattis non mi. Duis bibendum nunc imperdiet
pellentesque tincidunt. Suspendisse porta ante nec semper imperdiet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum finibus, odio sed laoreet semper, lorem neque dignissim neque, quis scelerisque
quam ante sit amet turpis. Cras semper nunc id bibendum pellentesque. Suspendisse sapien ex, tempor id
facilisis non, facilisis et ligula. Fusce sed ex sit amet nunc cursus egestas. Pellentesque ac lorem sit
amet purus varius finibus. Donec magna leo, vulputate et sagittis at, pulvinar non nibh. Nunc sed justo
tincidunt, auctor lorem quis, laoreet nibh.
</p>
</div>
</div>
' | safe
}) }}