Page

Quickly build an entire NIHR page, including Header and Footer, navigation, and content.

Variations

<!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" />

    <script src="/design-system.bundle.js"></script>
  </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 d-flex">
            <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>
      <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 d-flex">
            <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>
  </body>
</html>

Options to the page() macro

pageTitle: string|null = null: The human-readable page title. Defaults to the site title.
siteTitle: string: The human-readable site title.
stylesheets: Array<str>: The public paths to each CSS file to link into the page.
scripts: Array<str>: The public paths to each JavaScript file to link into the page.
primaryNavigationLinks: Array<PrimaryNavigationLink>: The primary navigation links to show.
pageContent: string: The page's content.
header: object = {}: The Header component's options.
footer: object = {}: The Footer component's options.

Options to PrimaryNavigationLink

path: string: The link's href value as a relative path.
label: string: The human-readable link label.

{% from 'macros/component/page.html' import page %}

{{ page({
    'siteTitle': 'Lorem ipsum',
    'stylesheets': [
        '/design-system.bundle.css',
        '/docs.bundle.css'
    ],
    'scripts': [
        '/design-system.bundle.js'
    ],
    '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
}) }}

Page

Variations

Macro options