A NSW Government website
Design System v3.16.0

Layout

Layouts are common page composition patterns that offer ways of structuring components and content.

Page layouts

There are then 3 standard page layouts that can be used to enclose your grid:

  • Full width (Demo)
  • Two column - Left side desktop only (Demo)
  • Two column - Right side (Demo)

Usage

A nsw-container keeps a container width of 1200px and the nsw-page-layout acts as a wrapper to align the content's spacing.

Full width - Main content area

Displays main content area the full width of the container.

Two column - Left side desktop only

Displays a left hand sidebar that is visible on 992px+ viewports, with a main content area that is always visible. (Recommended for side navigation).

Two column - Right side

Displays a right hand sidebar that stacks on 0 - 991px viewports, with main content area that is always visible.