Title

Text for your Hero

Button
Illustration of 3 colleagues working on a project

Title

Text for your Banner with caption

Button

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