Template Guide

Templates are ready to use page layouts available for different content needs, they help get sites and applications up quicker.

The following templates use a mix of design system components and application specific functionality, this allows modularity whilst also ensuring framework specific functionality like document title components can be used.

Template base

Template base is a primitive template that allows for custom layouts to be created within. It contains a Header and Footer, the content region doesn't have a Main container which allows any type of content to be inserted an an unstyled way void of the HTML5 main element. This template requires HTML5 semantic elements to be inserted into the page content, as such the MainContainer and ContentStack has been entered within the page structure.

Main with navigation

Utilising a left sided navigation and main content region, this is a responsive layout. The side navigation is wrapped in a NavContainer and isn't editable via the template. The content output in the MainContainer is the unique content per page. TemplateMainWithNav is used to display this template.

Two column

A responsive layout that displays at full page width, it uses TemplateBase and therefore requires MainContent and ContentStack to be output within the page structure.

Two column max width

A responsive layout that displays at a max width of 75em (1200 pixels), it uses TemplateMaxWidth and therefore requires MainContent and ContentStack to be output within the page structure. The columns widths and breakpoints can be controlled as required.

Three column

A responsive layout that displays at full page width, it uses TemplateMain and outputs the MainContainer in the page structure. Additionally by entering the withContentStack prop a ContentStack can be output immediately after the MainContent which surrounds all child entered content.

Three column max width

A responsive layout that displays at a max width of 75em (1200 pixels), it uses TemplateMaxWidth and therefore requires MainContent and ContentStack to be output within the page structure. The columns widths and breakpoints can be controlled as required.