Layouts

Use the Design System's pre-built layouts to structure content within the page template.

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
Back to top