Article layout

Sample HTML

Show this section

<main class="ds_layout ds_layout--article">
<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__content">
<!--
The article 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 article layout

The article layout is the Design System's default layout.

It's applied automatically to the middle of the page template if you do not specify another layout. 

The layout has the following areas:

• header
• brand
• body content
• sidebar
• feedback

The article 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

When to use the article layout

Use the article layout for standard web pages with body content. 

Article layouts are used on mygov.scot and gov.scot. For example, After you’ve applied for Young Carer Grant on mygov.scot.  

Use the guide layout instead when content is arranged in chapters, as in the guide content pattern. 

How to use the article layout 

Copy the HTML into the middle of the page template.