A NSW Government website
NSW Government
Design System v3.24.4

Layout

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

View in new window

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.

Alternating layouts (visual order only)

Alternating image-and-text layouts can help people scan long pages. In the NSW Design System, this is done by changing the visual order only, while keeping the HTML order logical and consistent.

Screen readers and keyboard focus follow the DOM, not the visual layout. If visual and DOM order diverge, users may hear or tab through content in a sequence that does not match what they see. This relates directly to WCAG 2.2:

To avoid this, alternating layouts must always start with the correct reading order in the HTML (the DOM order for assistive technology).

How it works

  1. Write the HTML in the intended reading order. This ensures mobile users, screen reader users, and keyboard users experience content in the correct sequence.
  2. Use order utilities to swap the visual position at larger breakpoints. Order utilities change how items appear visually, without changing DOM order. This is only appropriate when the DOM order remains a meaningful reading and focus sequence and the visual swap does not change task flow or meaning.

When to use

  • When each pair of items communicates the same idea, such as an image and its related text
  • For non-functional, descriptive content where visual alternation improves scannability

When not to use

  • For functional content such as forms, navigation, or interactive controls
  • When visual order affects task flow or meaning

Do not use tabindex to force focus order to match a visual swap. This creates a separate focus sequence that is difficult to maintain and often causes accessibility issues.

Once the DOM order is correct, apply order utilities at a breakpoint (for example nsw-order-lg-first and nsw-order-lg-last) as a visual enhancement only.

There are 2 order options: prefer first/last utilities for alternating layouts, and only use numeric order when the DOM cannot be changed. See Flex order utilities for details.

Image
Text
Image
Text

Note: nsw-row is a grid row and already uses display: flex (like nsw-display-flex). Its direct child nsw-col elements are flex items, so order utilities apply to the columns.

Use order with care

Order utilities only change the visual order. Screen readers and keyboard focus follow the DOM order, so changing the visual order can misalign what people see, hear, and tab through. Do not use order (or other layout-only CSS) to rearrange functional content like forms, navigation, or controls. Trying to fix this with the tabindex attribute creates a separate focus sequence that can diverge from the DOM and is hard to maintain.

It is only suitable when items communicate the same, non-functional message such as an image and its accompanying text. Always keep the HTML order logical and meaningful for reading and focus, then apply nsw-order-* classes only as a visual enhancement where this does not change the intended sequence. Preserving a meaningful DOM order is key to meeting the intent of WCAG 2.2 SC 1.3.2 Meaningful Sequence and 2.4.3 Focus Order.

Global page structure

The global page structure provides page-level regions that sit outside in-content layout patterns. Use it for persistent, site-wide controls like the Sticky container, mastheads and footers. These regions form the shell of a page and are not composition patterns.

Sticky container

A site-wide container fixed to the bottom of the viewport for critical controls such as Quick Exit and Cookie Consent. It is part of the page shell, not an in-content component.

When to use

  • You need a persistent control that should sit above content at all times.
  • You want a no-JS baseline for safety or compliance, then progressive enhancement.

When not to use

  • For local, in-content notices. Use Section and Alert patterns instead.
  • For content that belongs in the main flow of the page.

HTML baseline

Place the Sticky container as the last child of <body>. Render baseline markup inside it so pages work without JavaScript.

CSS (included in Core)

The Sticky container styling is included with Core so it is available on every page.

Placement

  • Append as the last child of <body>.
  • Do not wrap it in elements that set overflow or transform. These can break sticky positioning.

Accessibility

  • Page shell order stays logical. Main content appears before the Sticky container in the DOM.
  • Controls in the container must have clear text labels and visible focus.
  • Provide a working no-JS baseline. Quick Exit should include a real link that works without JavaScript.

Known limitations

  • Sticky positioning is affected by ancestor overflow or transform. Keep the container as a direct child of <body>.
  • Ensure a z-index above the footer and other fixed elements.

Integration notes

  • Quick Exit and Cookie Consent progressively enhance inside this container.
  • JavaScript can set body padding based on the container height to avoid overlap. The NSW components do this automatically.

Classification

Is this a Layout pattern? No. Layout covers composition patterns inside the page. Global page structure covers the page shell. The Sticky container is part of the shell.