Guide layout
Use the guide layout with the guide content pattern.
Sample HTML for Guide layout
<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.