Style Guide

A collection of useful components used across this template.
Colours
These are the global colour swatches that are used to brand this website.

You can edit these easily throughout the entire site by clicking on the swatch, and editing the global colour.
Primary and Neutral
Primary One
Primary Two
Neutral One
Neutral One
Neutral Three
Grey
Grey Dark
Grey One
Grey Two
Grey Three

Typography

A complete list of the main type styles used throughout this website template.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Large Text
Large Text Link
Small Text
Small Text Link

Buttons

A set of all the buttons used on this template or customise them to suit your style or brand.

Lists

A set of styled bullets and checklists to give your brand that detailed touch.
Styled bullets
  • Perfect
  • Great
  • Amazing
Checklist
  • Wow!
  • Stunning
  • Exceptional

Richtext

A complete list of the main type styles used throughout this website template.

What’s a Rich Text element?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus. Non curabiture gravida arcu ac tortor dignissim convallis. In iaculis nunc sed augue lacus viverra vitae congue. Tempor orci dapibus ultrices in iaculis. Scelerisque viverra mauris in aliquam sem fringilla ut. Vivamus arcu felis bibendum ut tristique et egestas. Interdum varius sit amet mattis. At unmen consectetur lorem donec massa sapien faucibus et molestie ac. Quam nulla porttitor massa id neque aliquam vestibulum. Vitae turpis massa sed elementum. Nec ultrices dui sapien eget mi. Adipiscing vitae proin sagittis nisl rhoncus. Integer quis auctor elit sed. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Sed nisi lacus sed viverra tellus in hac. Magna fermentum iaculis eu non diam.

Static and dynamic content editing

Molestie a iaculis at erat pellentesque adipiscing. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Scelerisque viverra mauris in aliquam sem fringilla. Morbi blandit cursus risus at ultrices mi tempus. Laoreet non curabitur gravida arcu ac. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Enim nec dui nunc mattis enim ut tellus element sagittis. Purus in mollis nunc sed id semper risus. Bibendum neque egestas congue quisque egestas diam in arcu. Mi quis hendrerit dolor magna. Non odio euismod lacinia at quis risus sed. Risus at ultrices mi tempus imperdiet nulla. Orci ac auctor augue mauris

How to customize formatting for each rich text

Molestie a iaculis at erat pellentesque adipiscing. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Scelerisque viverra mauris in aliquam sem fringilla. Morbi blandit cursus risus at ultrices mi tempus. Laoreet non curabitur gravida arcu ac. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Enim nec dui nunc mattis enim ut tellus element sagittis. Purus in mollis nunc sed id semper risus. Bibendum neque egestas congue quisque egestas diam in arcu. Mi quis hendrerit dolor magna. Non odio euismod lacinia at quis risus sed. Risus at ultrices mi tempus imperdiet nulla. Orci ac auctor augue mauris

How to customize formatting for each rich text

Molestie a iaculis at erat pellentesque adipiscing. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Scelerisque viverra mauris in aliquam sem fringilla. Morbi blandit cursus risus at ultrices mi tempus. Laoreet non curabitur gravida arcu ac. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Enim nec dui nunc mattis enim ut tellus element sagittis. Purus in mollis nunc sed id semper risus. Bibendum neque egestas congue quisque egestas diam in arcu. Mi quis hendrerit dolor magna. Non odio euismod lacinia at quis risus sed. Risus at ultrices mi tempus imperdiet nulla. Orci ac auctor augue mauris

How to customize formatting for each rich text

Molestie a iaculis at erat pellentesque adipiscing. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Scelerisque viverra mauris in aliquam sem fringilla. Morbi blandit cursus risus at ultrices mi tempus. Laoreet non curabitur gravida arcu ac. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Enim nec dui nunc mattis enim ut tellus element sagittis. Purus in mollis nunc sed id semper risus. Bibendum neque egestas congue quisque egestas diam in arcu. Mi quis hendrerit dolor magna. Non odio euismod lacinia at quis risus sed. Risus at ultrices mi tempus imperdiet nulla. Orci ac auctor augue mauris

  1. Hello
  2. Hello
  3. Hello
  4. Hello
Add caption here (It's optional)

Rich Text Guidelines
  1. Number 1-6 is an ordered list
  2. This is a BOLD TEXT
  3. This is an italicised text
  4. This is a Link
  5. This is a normal text
  6. This is a Quote (see below)
Block Quote