Page template

Pages built using the Design System should use this template as a starting point.

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>

Page top

This area is used for things that are common across a site, such as notifications, main navigation, and the site header.

Page middle

This is where your main content goes. Use the Design System’s layout component to define how the various parts of a page are arranged.

Page bottom

This area is used for the site footer. It is forced to the bottom of the browser window if a page is shorter than the user’s browser.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top