Skip to main
The Salvation Army
Request training
Digital experience guide

Page types

This section highlights the different page types available, describes dependancies, blocks that can be used (and where) and potential use-cases.

On this page

Section landing page
One column page
Two column page
Document centre

Section landing page

The section landing page comprises of three sections: top, main and bottom.

Top content: has a full-width header that can use any of the hero block variations.

Main content: The main content area is best suited to blocks that use the fixed container width, and blocks with many columns such as: landing page tiles, logos, 4-column icon combo block, 3 column profile block, statistics.

Bottom content: The bottom sits above the footer and should only comprise of a full-width cta block to direct users towards new content.

When should I use the section landing page?

  • For landing pages (parent pages) with many sub-pages -- these pages act as hubs of navigation to guide users to more detailed content, and this is best laid out with the tile blocks to use as guideposts towards information.
Live example

One column page

The one column page comprises of three sections: top, main and bottom.

Top content: has a full-width header that can use any of the hero block variations.

Main content: The main content area is best suited to blocks that use the fixed container width, and blocks with many columns such as: logos, 4-column icon combo block, 3 column profile block, statistics.

Bottom content: The bottom sits above the footer, and should only comprise of a full-width cta block to direct users towards new content.

When should I use the one column pge?

  • For pages with less content blocks, or for content that displays best in a grid/column format (tile blocks)
Live example

Two column page

The two column page comprises of three sections: top, main and bottom.

Top content: has a full-width header that can use any of the hero block variations.

Main content: the two column page layout has a sticky sidebar of links on the left-hand side, which allows the user to more easily navigate between pages that share the same parent page, and any subpages of the current page. The content in this area has a fixed width, and does not stretch to the edges of the browser window. The sidebar remains sticky only for the length of the main content blocks, and does not continue into the bottom section,

Bottom content: The bottom content sits below the main content, and can accomodate blocks that are both full width, and fixed to the main container size (width of the main navigation). This can be used to create more dynamic layouts and clearer division of sections by alternating the different widths.

When should I use the two column pge?

  • This template should be used when there is a large number of pages sharing a single parent (so similar topics can be explored easily) and when there are many subpages as well, since the sidebar allows for easier navigation than going through the main menu.
  • This template works well on pages with a lot of content and topics that need to be clearly delineated and broken up for user comprehension. 
Live example

Document centre

The document centre is a searchable resource hub that can be linked to a sub-folder of documents and resources to be indexed and made available for download. 

When should I use the document centre?

  • This template is used only for creating a searchable publications directory for reports and resources.
Live example