Guide layout
Use the guide layout with the guide content pattern.
Sample HTML
<main class="ds_layout ds_layout--guide">
<div class="ds_layout__header">
<!--
A ds_page-header component or other header content
-->
</div>
<div class="ds_layout__partner">
<!--
Optional partner branding
-->
</div>
<div class="ds_layout__navigation">
<!--
The contents navigation for the guide
-->
</div>
<div class="ds_layout__content">
<!--
The guide page content
-->
</div>
<div class="ds_layout__sidebar">
<!--
Sidebar content, such as related links
-->
</div>
<div class="ds_layout__feedback">
<!--
Feedback form
-->
</div>
</main>About the guide layout
Use the guide layout with the guide content pattern. Guides arrange content into 2 or more chapters that the user can navigate between.
Guides are used on mygov.scot. For example, Young Carer Grant on mygov.scot.
The layout has the following areas:
- header
- brand
- navigation
- body content
- sidebar
- feedback
The guide layout changes depending on the width of the browser window. On small displays the areas are stacked.
On large displays:
- the sidebar and brand move to the right of the other areas
- a blank column is introduced
How to use the guide layout
Copy the HTML into the middle of the page template.
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