Skip to navigation Skip to content

Container & Component Layout

This page deals with Containers and their Components. This a default Page Structure - Container added to main. It contains a Rich Text component with the following two styles:

  • Component Layout: Padding Bottom - Small
  • Component Layout: Padding Top - Large

This default Container displays content at 1200 pixels wide.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis felis, mollis vel bibendum in, vehicula vitae lectus. Aenean sed molestie felis. Morbi iaculis purus lacinia turpis dignissim, eu egestas nulla tincidunt. Mauris auctor accumsan tristique. Sed vestibulum diam ex, sit amet rhoncus tellus aliquet varius. Etiam id enim id tortor facilisis tempus in eu elit. Morbi sollicitudin nisl quis elit aliquam auctor.

Fixed width inside a full width container

This a default Page Structure - Container added to Full width container, with the following style added: Container - fixed-width

This style displays the content at a maximum width of 1200px, but is full width when screens are less than 1200px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis felis, mollis vel bibendum in, vehicula vitae lectus. Aenean sed molestie felis. Morbi iaculis purus lacinia turpis dignissim, eu egestas nulla tincidunt. Mauris auctor accumsan tristique. Sed vestibulum diam ex, sit amet rhoncus tellus aliquet varius. Etiam id enim id tortor facilisis tempus in eu elit. Morbi sollicitudin nisl quis elit aliquam auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis felis, mollis vel bibendum in, vehicula vitae lectus. Aenean sed molestie felis. Morbi iaculis purus lacinia turpis dignissim, eu egestas nulla tincidunt. Mauris auctor accumsan tristique. Sed vestibulum diam ex, sit amet rhoncus tellus aliquet varius. Etiam id enim id tortor facilisis tempus in eu elit. Morbi sollicitudin nisl quis elit aliquam auctor.

 

Full width Container

This a default Page Structure - Container added to main, with the following style added: Container - Full Width

Into this container a Rich Text component has been added without any styles applied.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis felis, mollis vel bibendum in, vehicula vitae lectus. Aenean sed molestie felis. Morbi iaculis purus lacinia turpis dignissim, eu egestas nulla tincidunt. Mauris auctor accumsan tristique. Sed vestibulum diam ex, sit amet rhoncus tellus aliquet varius. Etiam id enim id tortor facilisis tempus in eu elit. Morbi sollicitudin nisl quis elit aliquam auctor.

 

Expanded Container

This a default Page Structure - Container added to main, with the following style added: Container - Expanded

Into this container a Rich Text component has been added without any styles applied.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis felis, mollis vel bibendum in, vehicula vitae lectus. Aenean sed molestie felis. Morbi iaculis purus lacinia turpis dignissim, eu egestas nulla tincidunt. Mauris auctor accumsan tristique. Sed vestibulum diam ex, sit amet rhoncus tellus aliquet varius. Etiam id enim id tortor facilisis tempus in eu elit. Morbi sollicitudin nisl quis elit aliquam auctor.

 

Adding full width background

When adding a full width background colour, the process is a little different

The outer container, Splitter (Rows) is added to main-1. No styles applied. Second row is deleted. 

The row not deleted [row 1-8] has Colour Palette - Grey style applied

Rich text container added to row 1-8, no styles applied.

This is a Container component with styles: Colour Palette- Yellow, Common - Highlighted left.

A Rich Text component has been added, no styles applied. Useful if more than one component required in the feature block, see below.

Rich Text component inside a styled Container. The only styles added to this and the CTA component are grid styles.
X
Cookies help us improve your website experience.
By using our website, you agree to our use of cookies.
Confirm