Styles menu
Page template
Use the page template to build consistent pages for a service.
About the page template
The template shows where to put Design Standard components and patterns to create a webpage.
The areas of the template and relevant components are:
- top – for components that are common across a site, such as notification banners, cookie banner, skip links, site navigation, and site header
- middle – for the main page content. Use the layout component to arrange the page
- bottom – for the site footer, which is anchored to the bottom of the browser window
Using the template means you can:
- prototype and test pages quickly
- make pages look consistent across your website or application
- meet users’ mental models of where to find functionality, like the site navigation
Page template
<body>
<div class="skip-to-content-container">
<div class="container">
<a class="offscreen skip-to-content" href="#content"> Skip to main content </a>
</div>
</div> <!-- // SKIP TO CONTENT -->
<header class="container-fluid site--header">
<div class="container">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-4 col-sm-12">
<a class="site--header-logo-link" href="/" title="Return to the homepage" aria-label="Return to the homepage">
<img class="site--header-logo" src="images/SEPA-Logo.svg" alt="SEPA">
</a> <!-- // logo -->
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-4 col-sm-12">
<div class="row">
<div class="col-12 site--header-utility d-none d-lg-block d-xl-block d-xxl-block">
<ul class="d-flex float-end">
<li class="ms-3"> <a href="https://www.sepa.org.uk/"> Return to sepa.org.uk </a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header> <!-- // HEADER -->
<nav aria-label="Main navigation" class="navbar navbar-expand-xl container-fluid main--nav">
<div class="container">
<div class="navbar-brand d-lg-block d-xl-none" role="heading" aria-level="2"> Menu </div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Open navigation">
<span class="navbar-toggler-icon"></span>
<span class="visually-hidden"> Open menu </span>
</button>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- NAVIGATION LIST ITEMS -->
</ul>
</div>
</div>
</nav> <!-- // NAVIGATION -->
<div role="region" aria-label="Back to top button">
<button type="button" class="back-to-top--button btn btn-floating" id="back-to-top--btn">
<span class="visually-hidden"> Back to top </span>
<i class="back-to-top--icon fa-solid fa-arrow-up" aria-hidden="true"></i>
</button>
</div> <!-- // BACK TO TOP -->
<main id="content">
<div class="container content--area">
<div class="row">
<!-- MAIN CONTENT -->
<div class="spacer--large"></div>
</div>
</div>
</main>
<footer class="footer footer--bg container-fluid">
<div class="container">
<div class="row">
<!-- FOOTER CONTENT -->
</div>
</div>
</footer> <!-- // FOOTER -->
</body>
Accessibility
The components and patterns in the Design Standard are accessible.
Using the page template ensures that users can find components where they expect to.
You should still test the pages in your service for usability and accessibility.