Page
Quickly build an entire NIHR page, including Header and Footer, navigation, and content.
Variations
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="container">
<div class="row">
<div class="col-8">
<h1>Lorem ipsum dolor sit amet</h1>
<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>
<h2 class="heading-underline">Etiam justo odio</h2>
<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>
<h2 class="heading-underline">
Donec porta lectus a nisi lobortis
</h2>
<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>
</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="container">
<div class="row">
<div class="col-8">
<h1>Lorem ipsum dolor sit amet</h1>
<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>
<h2 class="heading-underline">Etiam justo odio</h2>
<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>
<h2 class="heading-underline">Donec porta lectus a nisi lobortis</h2>
<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>
</div>
' | safe
}) }}