Layouts

About layouts in the Design System  

Layouts structure the main content of the page to reflect a content pattern. 

The layout specifies where elements or components are placed in the middle of the page template. 

We provide 6 pre-built layouts for the most common content patterns: 

• article (default layout) 
• guide 
• navigation
• question pages in forms 
• search results with filters
• search results without filters

These layouts are responsive to changes in screen size.  

You can create custom layouts if there’s a need for them in your service. 

How to use Design System layouts 

The pre-built layouts are included in the Design System’s CSS.  

To add a layout, paste the HTML into the middle of the page template. 

Use the layout that corresponds to the content pattern. For example, use the guide layout for a guide page such as Adult Disability Payment on mygov.scot.   

If you do not specify a layout, the default article layout is applied. 

Custom layouts    

You can create custom layouts by either:  

• building a new layout from scratch 
• adapting one of the pre-built layouts by adding or removing layout areas 

We recommend building layouts using CSS Grid, like the Design System’s pre-built layouts.

You can use the functions and mixins in the Design System’s SCSS files to help you build layouts more easily. 

Before you start building a layout you’ll need to:  

• map out and name the areas in the layout – sketches can help with this  
• decide how areas of the layout behave at viewport size breakpoints