Main Logo
Logo
Your brand logo variants.
Colours
Your brand colour palette.
brand Colours
Primary Orange
#b86340
Logo Green
#556055
Primary - 200
#f49f67
Primary - 400
#d1744b
Primary - 600
#a35738
Primary - 800
#743e28
Vanilla
#d8c8b1
Light Green
#b2ae9c
Soft Orange
#dab78d
Body Colours
Body Text
#353c35
Medium Grey
#899989
Body Background
#f0ebe5
Process Colours
Alert
#f87572
Info
#78b8f2
Success
#78de9e
Warning
#f3c472
Text Colours
text-color-primary
text-color-body-dark
text-color-body-light
text-color-black
text-color-grey
Background Colours
background-color-primary
background-color-primary-200
background-color-primary-400
background-color-primary-600
background-color-primary-800
background-color-body-light
background-color-body-text-dark
background-color-grey
background-color-process-info
background-color-process-alert
background-color-process-success
background-color-process-warning
background-color-logo
background-color-vanilla
background-color-light-green
background-color-soft-orange
Textures
Background and overlay textures.
Paper Texture
Paper Texture - Primary
Paper Texture - Dark
Core Type
The core font is System UI font.
Standard Headings
H1
Sample text is being used as a placeholder.
H2
Sample text is being used as a placeholder as real text.
H3
Sample text helps you understand how real text may look on your website.
H4
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H5
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Heading Classes
heading-display
heading-xlarge
heading-large
heading-medium
heading-small
heading-xsmall
Body Copy
All Paragraphs
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Buttons
Icon styles and sizes.
Text Utilities
The core font is System UI font.
Text Weights
text-weight-light
text-weight-normal
text-weight-bold
text-weight-xbold
Text Block Styles
All Block Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
All Block Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-quote is-feature-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Unordered List
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
ordered List
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Truncated Text
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
Text Alignment
text-align-left
text-align-center
text-align-right
Icons
Icon styles and sizes.
.icon
Social Icons
Graphic Icons
Rich Text
Icon styles and sizes.
.text-rich-text
Rich text headline
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A sample block quote inside a rich text block. Sample text is being used as a placeholder for real text that is normally present.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Image with caption
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element. Here is some Bold Text, some Italicised Text and a text link.
Media embed sample
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Forms
Form elements and options.
Form Elements
Thank you!
Your submission has been received!
Your submission has been received!
Oops! Something went wrong while submitting the form.
Dropdown
Tab component styles.
.Dropdown
Dropdown
Tabs
Tab component styles.
Tab Component
Content 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Content 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Content 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Notifications
Colour coded notification components.
Process Notifications
Standard notification component.
Standard notification component.
Alert! Something went wrong while submitting the form.
Success! That went well.
Warning! Something’s not quite right.