Styles - Page template

Use this template to keep your pages consistent with other HSE services.

This page template combines boilerplate markup and components needed for a content page and a transactional page. This includes:

  • JavaScript that adds a .js-enabled class, which components with JavaScript behaviour need
  • the skip link, header and footer components
  • favicons, and other page metadata

The examples we give show both HTML and Nunjucks.

You can use the HTML examples if you are not able to use Nunjucks. If you use HTML you’ll need to update it manually when new versions are released.

Default

This example shows the minimum required for an HSE service.

Open this default page template example in new window
Copy default page template code 
<!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, shrink-to-fit=no">
  <meta name="description" content="">

  <title>
    The HSE website - HSE
  </title>

  <link rel="preload" as="font" href="https://assets.hse.ie/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://assets.hse.ie/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
  <link rel="preconnect  dns-prefetch" href="https://www.hse.ie/">
  <link rel="preconnect  dns-prefetch" href="https://assets.hse.ie/" crossorigin>

  <link rel="stylesheet" href="/css/main.css">

  <script src="/js/main.min.js" defer></script>

  <link rel="shortcut icon" href="/hse-frontend/assets/favicons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/hse-frontend/assets/favicons/apple-touch-icon-180x180.png">
  <link rel="mask-icon" href="/hse-frontend/assets/favicons/favicon.svg" color="#005eb8">
  <link rel="icon" sizes="192x192" href="/hse-frontend/assets/favicons/favicon-192x192.png">
  <meta name="msapplication-TileImage" content="/hse-frontend/assets/favicons/mediumtile-144x144.png">
  <meta name="msapplication-TileColor" content="#005eb8">
  <meta name="msapplication-square70x70logo" content="/hse-frontend/assets/favicons/smalltile-70x70.png">
  <meta name="msapplication-square150x150logo" content="/hse-frontend/assets/favicons/mediumtile-150x150.png">
  <meta name="msapplication-wide310x150logo" content="/hse-frontend/assets/favicons/widetile-310x150.png">
  <meta name="msapplication-square310x310logo" content="/hse-frontend/assets/favicons/largetile-310x310.png">

</head>

<body class="">
  <script nonce="random-nonce">
    document.body.className = (
      (document.body.className) ?
      document.body.className + ' js-enabled' :
      'js-enabled');

  </script>

  <a class="hse-skip-link" href="#maincontent">Skip to main content</a>

  <header class="hse-header">

    <div class="hse-width-container hse-header__container">
      <div class="hse-header__logo">
        <a class="hse-header__link" href="/" aria-label="H-S-E - homepage">
          <svg class="hse-logo" width="73" height="54" viewBox="0 0 73 54" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5258 29.1171C41.5258 29.1171 45.1076 23.5048 54.1493 24.6407C63.192 25.7777 66.4905 23.161 66.4905 23.161C66.4905 23.161 60.3334 31.6754 53.1877 29.386C46.0421 27.0954 41.5258 29.1171 41.5258 29.1171Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M35.813 49.0023C35.813 49.0023 39.3959 43.391 48.4387 44.5258C57.4815 45.6639 60.7811 43.0472 60.7811 43.0472C60.7811 43.0472 54.6228 51.5595 47.4761 49.27C40.3305 46.9783 35.813 49.0023 35.813 49.0023Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M47.3302 10.3113C47.3302 10.3113 50.912 4.70007 59.9537 5.83709C68.9954 6.97411 72.2949 4.35742 72.2949 4.35742C72.2949 4.35742 66.1344 12.8696 58.9911 10.5802C51.8466 8.28961 47.3302 10.3113 47.3302 10.3113Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7617 24.0429C29.7617 24.0429 29.1072 24.6544 25.7908 24.6544H16.8031C15.3614 24.6544 15.1578 25.2306 15.1578 25.2306C15.2219 24.8835 15.4131 23.9625 15.4761 23.6198C17.2619 14.0422 18.6677 6.51935 18.7329 6.25603C19.2558 4.18471 21.1148 3.75943 21.1148 3.75943L12.5049 3.74841C12.5049 3.74841 10.745 3.78036 10.1186 6.27255C9.93977 6.992 3.8805 39.7695 2.58835 47.0808C2.29259 48.7554 0.5 49.3526 0.5 49.3526H9.02211C9.02211 49.3526 10.6696 49.2182 11.1138 47.0808C11.7166 44.1886 12.8423 37.7775 14.2717 30.0783C14.4673 28.9248 15.6684 29.0394 15.6684 29.0394H24.2512C24.2512 29.0394 27.0841 29.0945 28.3751 27.6633C29.6672 26.2365 29.7617 24.0429 29.7617 24.0429Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M31.6645 25.18C29.9372 57.8594 5.93065 52.9389 5.93065 52.9389C5.93065 52.9389 5.92166 53.1516 5.92053 53.1846C9.6564 53.9415 37.6473 58.3034 39.4051 28.6671C41.1335 -4.0112 65.1412 0.907069 65.1412 0.907069C65.1412 0.907069 65.1491 0.693327 65.1513 0.661376C61.4132 -0.0944338 33.4245 -4.45962 31.6645 25.18Z" fill="currentColor" />
          </svg>
        </a>
      </div>
    </div>
  </header>

  <div class="hse-width-container ">

    <main class="hse-main-wrapper " id="maincontent" role="main">

      <h1>Default page template</h1>

    </main>
  </div>

  <footer role="contentinfo">
    <div class="hse-footer" id="hse-footer">
      <div class="hse-footer__bottom">
        <div class="hse-width-container">
          <p class="hse-footer__copyright">
            &copy; Health Service Executive
          </p>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
Close default page template code
Copy default page template code 
{% block content %}
  <h1>Default page template</h1>
{% endblock %}
Close default page template code

Customised page template

You can customise the page template, for example, by structuring your page layout, using the organisational header or adding a block before the main container to include a breadcrumbs component.

Content page template

The content page template example includes navigation and search in the header and a breadcrumbs component.

Open this content page template example in new window
Copy content page template code 
<!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, shrink-to-fit=no">
  <meta name="description" content="">

  <title>

    Content page template

  </title>

  <link rel="preload" as="font" href="https://assets.hse.ie/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://assets.hse.ie/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
  <link rel="preconnect  dns-prefetch" href="https://www.hse.ie/">
  <link rel="preconnect  dns-prefetch" href="https://assets.hse.ie/" crossorigin>

  <link rel="stylesheet" href="/css/main.css">

  <script src="/js/main.min.js" defer></script>

  <link rel="shortcut icon" href="/hse-frontend/assets/favicons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/hse-frontend/assets/favicons/apple-touch-icon-180x180.png">
  <link rel="mask-icon" href="/hse-frontend/assets/favicons/favicon.svg" color="#005eb8">
  <link rel="icon" sizes="192x192" href="/hse-frontend/assets/favicons/favicon-192x192.png">
  <meta name="msapplication-TileImage" content="/hse-frontend/assets/favicons/mediumtile-144x144.png">
  <meta name="msapplication-TileColor" content="#005eb8">
  <meta name="msapplication-square70x70logo" content="/hse-frontend/assets/favicons/smalltile-70x70.png">
  <meta name="msapplication-square150x150logo" content="/hse-frontend/assets/favicons/mediumtile-150x150.png">
  <meta name="msapplication-wide310x150logo" content="/hse-frontend/assets/favicons/widetile-310x150.png">
  <meta name="msapplication-square310x310logo" content="/hse-frontend/assets/favicons/largetile-310x310.png">

</head>

<body class="">
  <script nonce="random-nonce">
    document.body.className = (
      (document.body.className) ?
      document.body.className + ' js-enabled' :
      'js-enabled');

  </script>

  <a class="hse-skip-link" href="#maincontent">Skip to main content</a>

  <header class="hse-header">

    <div class="hse-width-container hse-header__container">
      <div class="hse-header__logo">
        <a class="hse-header__link" href="/" aria-label="H-S-E - homepage">
          <svg class="hse-logo" width="73" height="54" viewBox="0 0 73 54" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5258 29.1171C41.5258 29.1171 45.1076 23.5048 54.1493 24.6407C63.192 25.7777 66.4905 23.161 66.4905 23.161C66.4905 23.161 60.3334 31.6754 53.1877 29.386C46.0421 27.0954 41.5258 29.1171 41.5258 29.1171Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M35.813 49.0023C35.813 49.0023 39.3959 43.391 48.4387 44.5258C57.4815 45.6639 60.7811 43.0472 60.7811 43.0472C60.7811 43.0472 54.6228 51.5595 47.4761 49.27C40.3305 46.9783 35.813 49.0023 35.813 49.0023Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M47.3302 10.3113C47.3302 10.3113 50.912 4.70007 59.9537 5.83709C68.9954 6.97411 72.2949 4.35742 72.2949 4.35742C72.2949 4.35742 66.1344 12.8696 58.9911 10.5802C51.8466 8.28961 47.3302 10.3113 47.3302 10.3113Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7617 24.0429C29.7617 24.0429 29.1072 24.6544 25.7908 24.6544H16.8031C15.3614 24.6544 15.1578 25.2306 15.1578 25.2306C15.2219 24.8835 15.4131 23.9625 15.4761 23.6198C17.2619 14.0422 18.6677 6.51935 18.7329 6.25603C19.2558 4.18471 21.1148 3.75943 21.1148 3.75943L12.5049 3.74841C12.5049 3.74841 10.745 3.78036 10.1186 6.27255C9.93977 6.992 3.8805 39.7695 2.58835 47.0808C2.29259 48.7554 0.5 49.3526 0.5 49.3526H9.02211C9.02211 49.3526 10.6696 49.2182 11.1138 47.0808C11.7166 44.1886 12.8423 37.7775 14.2717 30.0783C14.4673 28.9248 15.6684 29.0394 15.6684 29.0394H24.2512C24.2512 29.0394 27.0841 29.0945 28.3751 27.6633C29.6672 26.2365 29.7617 24.0429 29.7617 24.0429Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M31.6645 25.18C29.9372 57.8594 5.93065 52.9389 5.93065 52.9389C5.93065 52.9389 5.92166 53.1516 5.92053 53.1846C9.6564 53.9415 37.6473 58.3034 39.4051 28.6671C41.1335 -4.0112 65.1412 0.907069 65.1412 0.907069C65.1412 0.907069 65.1491 0.693327 65.1513 0.661376C61.4132 -0.0944338 33.4245 -4.45962 31.6645 25.18Z" fill="currentColor" />
          </svg>
        </a>
      </div>

      <div class="hse-header__content">
        <button class="hse-header__toggle-btn hse-header__toggle-btn--menu " id="toggle-menu" aria-controls="hse-main-menu">
          <svg class="hse-icon hse-header__toggle-btn-inactive-icon" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="5" y="5" width="28" height="4" />
            <rect x="5" y="17" width="28" height="4" />
            <rect x="5" y="29" width="28" height="4" />
          </svg>
          <svg class="hse-icon hse-icon__window-close hse-header__toggle-btn-active-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.182 4.182a1 1 0 0 1 1.414 0L12 10.585l6.404-6.402a1 1 0 0 1 1.414 1.414L13.414 12l6.403 6.404a1 1 0 0 1-1.414 1.414L12 13.414l-6.405 6.403a1 1 0 0 1-1.414-1.414L10.585 12 4.182 5.595a1 1 0 0 1 0-1.414Z" fill="#212B32" />
          </svg>
          <span class="hse-header__toggle-btn-label-inactive">Menu</span>
          <span class="hse-header__toggle-btn-label-active">Close</span>
        </button>
        <button class="hse-header__toggle-btn hse-header__toggle-btn--search" id="toggle-search" aria-controls="search">
          <svg class="hse-icon hse-icon__search hse-header__toggle-btn-inactive-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
          </svg>
          <svg class="hse-icon hse-icon__window-close hse-header__toggle-btn-active-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.182 4.182a1 1 0 0 1 1.414 0L12 10.585l6.404-6.402a1 1 0 0 1 1.414 1.414L13.414 12l6.403 6.404a1 1 0 0 1-1.414 1.414L12 13.414l-6.405 6.403a1 1 0 0 1-1.414-1.414L10.585 12 4.182 5.595a1 1 0 0 1 0-1.414Z" fill="#212B32" />
          </svg>
          <span class="hse-u-visually-hidden">Toggle</span>
          <span class="search-text-inactive">Search</span>
          <span class="hse-u-visually-hidden search-text-inactive">collapsed button</span>
          <span class="search-text-active">Close</span>
          <span class="hse-u-visually-hidden search-text-active">expanded button</span>
        </button>
      </div>
    </div>
    <div class="hse-header__search" id="search">
      <div class="hse-width-container">
        <form class="hse-header__search-form" action="https://www.hse.ie/search/" method="get" role="search">
          <div class="hse-form-group">
            <label class="hse-label" for="search-field">Search the website</label>
            <input class="hse-input hse-input--search" id="search-field" name="q" type="search" autocomplete="off">
          </div>
          <button class="hse-search-full__submit" type="submit">
            <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
            </svg>
            <span class="hse-u-visually-hidden">Search</span>
          </button>
        </form>
      </div>
    </div>
    <nav class="hse-header__mainmenu" id="hse-main-menu" role="navigation" aria-label="H-S-E Main Menu">
      <div class="hse-header__mainmenu-primary">
        <div class="hse-width-container">
          <ul class="hse-header__mainmenu-list">
            <li class="hse-header__mainmenu-item hse-header__mainmenu-item-home">
              <a class="hse-header__mainmenu-link" href="/">
                Home
                <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
                </svg>
              </a>
            </li>
            <li class="hse-header__mainmenu-item">
              <a class="hse-header__mainmenu-link" href="#">
                Health A-Z
                <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
                </svg>
              </a>
            </li>
            <li class="hse-header__mainmenu-item">
              <a class="hse-header__mainmenu-link" href="#">
                Live Well
                <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
                </svg>
              </a>
            </li>
            <li class="hse-header__mainmenu-item">
              <a class="hse-header__mainmenu-link" href="#">
                Care and support
                <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
                </svg>
              </a>
            </li>
            <li class="hse-header__mainmenu-item">
              <a class="hse-header__mainmenu-link" href="#">
                Pregnancy
                <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
                </svg>
              </a>
            </li>
            <li class="hse-header__mainmenu-item">
              <a class="hse-header__mainmenu-link" href="#">
                HSE services
                <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <nav class="hse-breadcrumb" aria-label="Breadcrumb">
    <div class="hse-width-container">
      <ol class="hse-breadcrumb__list">
        <li class="hse-breadcrumb__item">
          <a class="hse-breadcrumb__link" href="#">
            Level one
          </a>
        </li>
        <li class="hse-breadcrumb__item">
          <a class="hse-breadcrumb__link" href="#">
            Level two
          </a>
        </li>
        <li class="hse-breadcrumb__item">
          <a class="hse-breadcrumb__link" href="#">
            Level three
          </a>
        </li>
      </ol>
      <p class="hse-breadcrumb__back">
        <a class="hse-breadcrumb__backlink" href="#">Back to Level three</a>
      </p>
    </div>
  </nav>

  <div class="hse-width-container ">

    <main class="hse-main-wrapper " id="maincontent" role="main">

      <div class="hse-grid-row">
        <div class="hse-grid-column-two-thirds">
          <h1>
            Content page template
          </h1>
        </div>
      </div>

    </main>
  </div>

  <footer role="contentinfo">
    <div class="hse-footer" id="hse-footer">
      <div class="hse-footer__top">
        <div class="hse-width-container">

          <div class="hse-grid-row">
            <div class="hse-grid-column-one-half">
              <div class="hse-grid-row">
                <div class="hse-grid-column-one-half hse-footer__spacer">
                </div>
                <div class="hse-grid-column-one-half">
                  <ul class="hse-footer__list hse-footer__content">
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">HSE sites</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">About us</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Contact us</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Profile editor login</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Site map</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Accessibility statement</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Our policies</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Cookies</a>
                      </p>
                    </li>
                  </ul>

                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="hse-footer__bottom">
        <div class="hse-width-container">
          <p class="hse-footer__copyright">
            &copy; Health Service Executive
          </p>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
Close content page template code
Copy content page template code 
{% from 'breadcrumb/macro.njk' import breadcrumb %}

{% block pageTitle %}
  Content page template
{% endblock %}

{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        href: "#",
        title: "Level one"
      },
      {
        href: "#",
        title: "Level two"
      }
    ],
    href: "#",
    title: "Level three"
  }) }}
{% endblock %}

{% block header %}
  {{ header({
      "showNav": "true",
      "showSearch": "true",
      "primaryLinks": [
        {
          "url"  : "#",
          "label" : "Health A-Z"
        },
        {
          'url' : '#',
          'label' : 'Live Well'
        },
        {
          'url'  : '#',
          'label' : 'Care and support'
        },
        {
          'url'  : '#',
          'label' : 'Pregnancy'
        },
        {
          'url' : '#',
          'label' : 'HSE services'
        }
      ]
    })
}}
{% endblock %}

{% block content %}
  <div class="hse-grid-row">
    <div class="hse-grid-column-two-thirds">
      <h1>
        Content page template
      </h1>
    </div>
  </div>
{% endblock %}

{% block footer %}
  {{ footer({
    "links": [
      {
        "URL": "#",
        "label": "HSE sites"
      },
      {
        "URL": "#",
        "label": "About us"
      },
      {
        "URL": "#",
        "label": "Contact us"
      },
      {
        "URL": "#",
        "label": "Profile editor login"
      },
      {
        "URL": "#",
        "label": "Site map"
      },
      {
        "URL": "#",
        "label": "Accessibility statement"
      },
      {
        "URL": "#",
        "label": "Our policies"
      },
      {
        "URL": "#",
        "label": "Cookies"
      }
    ]
  })}}
{% endblock %}
Close content page template code

Transactional page template

The transactional page template example uses the transactional header and a back link component.

Open this transactional page template example in new window
Copy transactional page template code 
<!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, shrink-to-fit=no">
  <meta name="description" content="">

  <title>

    Transactional page template

  </title>

  <link rel="preload" as="font" href="https://assets.hse.ie/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://assets.hse.ie/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
  <link rel="preconnect  dns-prefetch" href="https://www.hse.ie/">
  <link rel="preconnect  dns-prefetch" href="https://assets.hse.ie/" crossorigin>

  <link rel="stylesheet" href="/css/main.css">

  <script src="/js/main.min.js" defer></script>

  <link rel="shortcut icon" href="/hse-frontend/assets/favicons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/hse-frontend/assets/favicons/apple-touch-icon-180x180.png">
  <link rel="mask-icon" href="/hse-frontend/assets/favicons/favicon.svg" color="#005eb8">
  <link rel="icon" sizes="192x192" href="/hse-frontend/assets/favicons/favicon-192x192.png">
  <meta name="msapplication-TileImage" content="/hse-frontend/assets/favicons/mediumtile-144x144.png">
  <meta name="msapplication-TileColor" content="#005eb8">
  <meta name="msapplication-square70x70logo" content="/hse-frontend/assets/favicons/smalltile-70x70.png">
  <meta name="msapplication-square150x150logo" content="/hse-frontend/assets/favicons/mediumtile-150x150.png">
  <meta name="msapplication-wide310x150logo" content="/hse-frontend/assets/favicons/widetile-310x150.png">
  <meta name="msapplication-square310x310logo" content="/hse-frontend/assets/favicons/largetile-310x310.png">

</head>

<body class="">
  <script nonce="random-nonce">
    document.body.className = (
      (document.body.className) ?
      document.body.className + ' js-enabled' :
      'js-enabled');

  </script>

  <a class="hse-skip-link" href="#maincontent">Skip to main content</a>

  <header class="hse-header">

    <div class="hse-width-container hse-header__container">
      <div class="hse-header__logo">
        <a class="hse-header__link" href="/" aria-label="H-S-E - homepage">
          <svg class="hse-logo" width="73" height="54" viewBox="0 0 73 54" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5258 29.1171C41.5258 29.1171 45.1076 23.5048 54.1493 24.6407C63.192 25.7777 66.4905 23.161 66.4905 23.161C66.4905 23.161 60.3334 31.6754 53.1877 29.386C46.0421 27.0954 41.5258 29.1171 41.5258 29.1171Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M35.813 49.0023C35.813 49.0023 39.3959 43.391 48.4387 44.5258C57.4815 45.6639 60.7811 43.0472 60.7811 43.0472C60.7811 43.0472 54.6228 51.5595 47.4761 49.27C40.3305 46.9783 35.813 49.0023 35.813 49.0023Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M47.3302 10.3113C47.3302 10.3113 50.912 4.70007 59.9537 5.83709C68.9954 6.97411 72.2949 4.35742 72.2949 4.35742C72.2949 4.35742 66.1344 12.8696 58.9911 10.5802C51.8466 8.28961 47.3302 10.3113 47.3302 10.3113Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7617 24.0429C29.7617 24.0429 29.1072 24.6544 25.7908 24.6544H16.8031C15.3614 24.6544 15.1578 25.2306 15.1578 25.2306C15.2219 24.8835 15.4131 23.9625 15.4761 23.6198C17.2619 14.0422 18.6677 6.51935 18.7329 6.25603C19.2558 4.18471 21.1148 3.75943 21.1148 3.75943L12.5049 3.74841C12.5049 3.74841 10.745 3.78036 10.1186 6.27255C9.93977 6.992 3.8805 39.7695 2.58835 47.0808C2.29259 48.7554 0.5 49.3526 0.5 49.3526H9.02211C9.02211 49.3526 10.6696 49.2182 11.1138 47.0808C11.7166 44.1886 12.8423 37.7775 14.2717 30.0783C14.4673 28.9248 15.6684 29.0394 15.6684 29.0394H24.2512C24.2512 29.0394 27.0841 29.0945 28.3751 27.6633C29.6672 26.2365 29.7617 24.0429 29.7617 24.0429Z" fill="currentColor" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M31.6645 25.18C29.9372 57.8594 5.93065 52.9389 5.93065 52.9389C5.93065 52.9389 5.92166 53.1516 5.92053 53.1846C9.6564 53.9415 37.6473 58.3034 39.4051 28.6671C41.1335 -4.0112 65.1412 0.907069 65.1412 0.907069C65.1412 0.907069 65.1491 0.693327 65.1513 0.661376C61.4132 -0.0944338 33.4245 -4.45962 31.6645 25.18Z" fill="currentColor" />
          </svg>
        </a>
      </div>
    </div>
  </header>

  <div class="hse-width-container ">

    <div class="hse-back-link hse-u-margin-top-4 hse-u-margin-bottom-0">
      <a class="hse-back-link__link" href="#">
        <svg class="hse-icon hse-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 24" aria-hidden="true">
          <path id="Path" d="M0.664087 12.0002C0.663062 11.823 0.732629 11.6527 0.85742 11.5269L4.19075 8.19353C4.35986 8.02443 4.60634 7.95839 4.83734 8.02028C5.06834 8.08218 5.24878 8.26261 5.31067 8.49362C5.37257 8.72462 5.30653 8.9711 5.13742 9.1402L2.27075 12.0002L5.13742 14.8602C5.39883 15.1216 5.39883 15.5455 5.13742 15.8069C4.876 16.0683 4.45217 16.0683 4.19075 15.8069L0.85742 12.4735C0.732629 12.3477 0.663062 12.1774 0.664087 12.0002Z" />
        </svg>
        Back
      </a>
    </div>

    <main class="hse-main-wrapper hse-main-wrapper--s" id="maincontent" role="main">

      <div class="hse-grid-row">
        <div class="hse-grid-column-two-thirds">
          <h1 class="hse-heading-l">
            Transactional page template
          </h1>
        </div>
      </div>

    </main>
  </div>

  <footer role="contentinfo">
    <div class="hse-footer" id="hse-footer">
      <div class="hse-footer__top">
        <div class="hse-width-container">

          <div class="hse-grid-row">
            <div class="hse-grid-column-one-half">
              <div class="hse-grid-row">
                <div class="hse-grid-column-one-half hse-footer__spacer">
                </div>
                <div class="hse-grid-column-one-half">
                  <ul class="hse-footer__list hse-footer__content">
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Accessibility statement</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Contact us</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Cookies</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Privacy policy</a>
                      </p>
                    </li>
                    <li class="hse-footer__list-item">
                      <p>
                        <a class="hse-footer__list-item-link" href="#">Terms and conditions</a>
                      </p>
                    </li>
                  </ul>

                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="hse-footer__bottom">
        <div class="hse-width-container">
          <p class="hse-footer__copyright">
            &copy; Health Service Executive
          </p>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
Close transactional page template code
Copy transactional page template code 
{% from 'back-link/macro.njk' import backLink %}

{% set mainClasses = "hse-main-wrapper--s" %}

{% block pageTitle %}
  Transactional page template
{% endblock %}

{% block outerContent %}
  {{ backLink({
    "href": "#",
    "text": "Back",
    "classes": "hse-u-margin-top-4 hse-u-margin-bottom-0"
  }) }}
{% endblock %}

{% block header %}
  {{ header({
    "transactionalService": {
        "name": "Service name here",
        "href": "#"
      },
      "showNav": "false",
      "showSearch": "false"
    })
  }}
{% endblock %}

{% block content %}
  <div class="hse-grid-row">
    <div class="hse-grid-column-two-thirds">
      <h1 class="hse-heading-l">
        Transactional page template
      </h1>
    </div>
  </div>
{% endblock %}

{% block footer %}
  {{ footer({
    "links": [
      {
        "URL": "#",
        "label": "Accessibility statement"
      },
      {
        "URL": "#",
        "label": "Contact us"
      },
      {
        "URL": "#",
        "label": "Cookies"
      },
      {
        "URL": "#",
        "label": "Privacy policy"
      },
      {
        "URL": "#",
        "label": "Terms and conditions"
      }
    ]
  })}}
{% endblock %}
Close transactional page template code

Vertical padding is reduced on transactional services using the .hse-main-wrapper--s modifier class. We also recommended you use a smaller page heading size using the .hse-heading-l modifier class.

Changing template content

If you’re using Nunjucks, you can change the template’s content using options.

How you set an option depends on whether it’s a 'variable' option or a 'block' option.

To set a 'variable' option, use set to pass in a single value or string. For example, to add a class to the <main> element using the mainClasses option:

Copy set content page template code 
{% set mainClasses = "hse-main-wrapper--s" %}

To set a 'block' option, use block to pass in a multiline value or HTML markup. For example, to add a block of HTML before the closing element in the page template using the bodyEnd option:

Copy block page template code 
{% block bodyEnd %}
  <div>
    <p>Example text</p>
  </div>
{% endblock %}

To change the components that are included in the page template by default, set their equivalent blocks. For example:

Copy component page template code 
{% from 'header/macro.njk' import header %}

{% block header %}
  {{ header ({
    showSearch: true
  }) }}
{% endblock %}

Options

Options that you can use with the page template
Option name Option type Description
beforeContent Block Add content that needs to appear outside <main> element and <div class="hse-width-container">.
For example: the breadcrumbs component.
bodyAttributes Variable Add attributes to the <body> element. Add each attribute and its value in the bodyAttributes object.
bodyClasses Variable Add a class to the <body> element.
bodyEnd Block Add content just before the closing </body> element.
bodyStart Block Add content after the opening <body> element.
containerClasses Variable Add a class to the container. This is useful if you want to make the page wrapper a fixed width.
content Block Add content that needs to appear centered in the <main> element.
footer Block Override the default footer component.
head Block Add additional items inside the <head> element.
For example: <meta name="description" content="My page description">
header Block Override the default header component.
headIcons Block Override the default icons used for HSE.IE branded pages.
For example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
main Block Override the main section of the page, which by default wraps the <main> element, outerContent block and content block.
mainClasses Variable Add a class to the <main> element.
outerContent Block Add content that needs to appear outside <main> element but inside the <div class="hse-width-container">.
For example: the back link component.
pageTitle Block Override the default page title (<title> element).
skipLink Block Override the default skip link component.

Exploded view of the page template block areas

Open this annotated page template example in new window

Updated: February 2021