Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 


We try not to hide content from the customer so great thought should be exercised before deciding to use an accordion to contain content.



When the section title of the accordion is clicked/tapped the tray slides open and the chevron turns clockwise and points upwards.

Mini or Maxi

The only difference between these two accordions are the font size, with ‘Mini’ using BodyR and ‘Maxi’ using S4R.


Content area

The content area can take most components including Rich Text, Images, Tables and Column Splits.

Care must be taken that on the larger breakpoints text does not run full width. Content can always be contained with a 800px max width container.

Note: See component library for full specification and responsive behaviour.


Accordion - Mini

Accordion – Maxi
     Follows same principles as the ‘Mini’ but has a larger font size at S4R