Question layout
Use the question layout for pages in a form.
Sample HTML
<main class="ds_layout ds_layout--question-page">
<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">
<!--
Optional navigation for the form
-->
</div>
<div class="ds_layout__content">
<!--
The form content
-->
</div>
<div class="ds_layout__footer">
<!--
The form footer, such as answer summary
-->
</div>
<div class="ds_layout__sidebar">
<!--
Sidebar content, such as related links
-->
</div>
<div class="ds_layout__feedback">
<!--
Feedback form
-->
</div>
</main>About the question layout
Use the question layout when you're asking users for information in a form. For example, an application form or eligibility checker.
The layout has the following areas:
- header
- brand
- navigation
- form content
- form footer
- sidebar
- feedback
The question 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 question layout
Copy the HTML into the middle of the page template.
Follow form design best practice, for example 'one thing per page' and one-column page structure.
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