Page template
Use the page template to build consistent pages for a service.
About the page template
The template shows where to put Design System 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
Sample HTML
<body>
<div class="ds_page">
<div class="ds_page__top">
<!--
Notifications
Site header
Site navigation
-->
</div>
<div class="ds_page__middle">
<!--
Main content
-->
</div>
<div class="ds_page__bottom">
<!--
Footer
Scripts
-->
</div>
</div>
</body>Accessibility
The components and patterns in the Design System 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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback