1. Panel pages Mainly used for top level or landing pages
Possible to use panel pages in lower levels of the website.
Panel pages consist of components which are inserted in each panel.
Best Practice
Limit number of components on the page.

2. Top level pages Start with a hero banner to provide a primary focus
Insert content top-down, in order of importance/relevancy
Use a variety of components for a visually interesting page
Use white space to visually break up the page
Visually interesting pages are created by adding a collection of components to top level pages (landing pages) in the website.
Components are individual panels with specific layouts and functionality to display content.

3. Components
Components are individual panels with specific layouts and functionality to display content.

4. Heading / HERO BANNERS

5. Rich text component
Call to action
Messages
Example 1
Example 2

6. FEATURED CONTENT LISTING e.g News

7. CARDS – 2 columns

8. CARDS – 3 columns

9. CARDS – 4 columns

10. Horizontal Card
PANES

11. LINKED LIST

12. DIRECTORY

13. Pane style
If required, a title, summary content and footer content can be added to pane containing a component (see mock-up below)

14. Example

15. Front Page

16. Landing Page: xxxxxxxxxxx

17. Landing Page: xxxxxxxxxxx