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.

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.