Title

Text for your Hero

Button
Illustration of 3 colleagues working on a project

Title

Text for your Banner with caption

Button
Laptop displaying graphs and note pad

h1 Text Block

h2 Text Block

h3 Text Block

h4 Text Block

h5 Text Block
h6 Text Block

p Text block
i Text block
b Text block

  1. List
  2. List
  3. List
  • List
  • List
  • List

Supports

Center

Right

Text with Button

Allows the same formatting as the Text component

Button

The main body of your Quote

Alt Text

Author

Job / Company

  • Title

  • Alt

    Card Title

    This is the card text. All formatting options, including:

    H1

    h2

    h3

    h4

    h5
    h6
  • Alt

    Card Title

    This is the card text. All formatting options, including:

    Bold

    Italics

  • Alt

    Card Title

    This is the card text. All formatting options, including:

    1. Lists
    2. Lists
    3. Lists
    • Lists
    • Lists
    • Lists
Alt
[Alt]

Typography

Let's get this straight, h1 - h6 with a class of .title

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Backgrounds Colours

Some of the colours will have hardcoded inversed text colours to ensure there are no contrast issues

.bg-brand-purple HEX: #6469B4
.bg-brand-blue HEX: #CBE3EB
.bg-brand-pink HEX: #F0C6CC
.bg-brand-green HEX: #64E2A9
.bg-brand-yellow HEX: #FDE99A
.bg-brand-grey HEX: #C7D3E3
.bg-brand-orange HEX: #FF8250
.bg-brand-charcoal HEX: #262626

Text Colours

Not intelligent. Always ensure there are no contrast issues

.text-brand-purple
.text-brand-blue
.text-brand-pink
.text-brand-green
.text-brand-yellow
.text-brand-grey
.text-brand-orange
.text-brand-charcoal
.text-brand-white