Page template

[davidhunter08]

A page template combines boilerplate markup and components needed for all pages.

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

NHS design system guidance on page templates

[davidhunter08]

Problem

The current NHS App page template mark-up doesn't use the nhsuk frontend page template classes:

<main id="maincontent" class="webLayout">
    <div class="nhsuk-width-container">

        [content goes here]

    </div>
</main>

Relying on the last item on the page for bottom spacing:

When the last item on the page has no bottom margin the spacing is incorrect:

Solution

Refactor the page template mark-up to use the nhsuk frontend page template classes:

<div class="nhsuk-width-container">
    <main class="nhsuk-main-wrapper " id="maincontent" role="main">
      <div class="nhsuk-grid-row">
        <div class="nhsuk-grid-column-two-thirds">

          [content goes here]

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