Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

If you edit styles here, they will change across the site

H1

Lorem ipsum dolor sit amet

H2

Lorem ipsum dolor sit amet

H3

Lorem ipsum dolor sit amet

H4
Lorem ipsum dolor sit amet
H5
Lorem ipsum dolor sit amet
H6

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.

Paragraph 18

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.

Paragraph 16

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.

Paragraph 14
Lorem ipsum dolor sit amet
Block Quote
  1. Lorem ipsum
  2. Dolor sit
  3. Amet consectetur
ordered List & List items
  • Lorem ipsum
  • Dolor sit
  • Amet consectetur
Unordered List & List items
Lorem ipsum
Text Link 18
Lorem ipsum
Text Link 16
Lorem ipsum
Text Link 14
Lorem ipsum
Text Link 12
View Project
Button
View Project
Button 100% width
View Project
Button
View Project
Button 100% width
Right Arrow Button
Right Arrow Button 100% Width
Down Arrow Button
Download Button
View Project
Button
View Project
Button
Right Arrow Button
Right Arrow Button 100% Width
Down Arrow Button
Download Button
View Project
Button Outline
View Project
Button Outline 100% width
View Project
Button Outline
View Project
Button Outline 100% width
View Project
Button Outline
View Project
Button Outline 100% width

What’s a Rich Text element?

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.

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!

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 using the "When inside of" nested selector system.

This is a 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 using the "When inside of" nested selector system.

"I’ve been training with Ian since damaging my knee and undergoing surgery. Working with Ian although tough – is enjoyable and very rewarding. The changes the sessions have made to me physically and mentally have been significant and I’m currently the fittest I’ve been in years! Highly recommended."
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 using the "When inside of" nested selector system.

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 using the "When inside of" nested selector system.

  • xfgdfgdgdfgd
  • dfsfsf
Rich Text

What’s a Rich Text element?

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.

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!

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 using the "When inside of" nested selector system.

This is a 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 using the "When inside of" nested selector system.

"I’ve been training with Ian since damaging my knee and undergoing surgery. Working with Ian although tough – is enjoyable and very rewarding. The changes the sessions have made to me physically and mentally have been significant and I’m currently the fittest I’ve been in years! Highly recommended."
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 using the "When inside of" nested selector system.

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 using the "When inside of" nested selector system.

  • xfgdfgdgdfgd
  • dfsfsf
Rich Text White

What’s a Rich Text element?

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.

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!

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 using the "When inside of" nested selector system.

This is a 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 using the "When inside of" nested selector system.

"I’ve been training with Ian since damaging my knee and undergoing surgery. Working with Ian although tough – is enjoyable and very rewarding. The changes the sessions have made to me physically and mentally have been significant and I’m currently the fittest I’ve been in years! Highly recommended."
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 using the "When inside of" nested selector system.

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 using the "When inside of" nested selector system.

  • xfgdfgdgdfgd
  • dfsfsf
Rich Text

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Text colors

Black 95%
#0d0d0d
Black 90%
#191919
Black 80%
#333333

Main colors

Deep Purple
#291433
Russian Violet
#342051
Russian Violet
#3e2b86
Golden Yellow
#fab72d
Mustard Yellow
#ffde4a
Deep Sky Blue
#009dc5
Sky Blue
#98d4e4
Chocolate Orange
#ec6707
Princeton Orange
#ef7918
Rubine Red
#d0004e
Paradise Red
#ea4c6e
Apple Green
#89bd24
Green Crayola
#d7e4a0

Neutral colors

Cultured White
#f8f8f9
White Smoke
#f4f3f5
Lavender Gray
#beb8c1

Logo

These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

Primary Logo - Full Colour
Primary Logo Drop - Full Colour
Primary Logo - BLACK
Primary Logo Drop- BLACK
Primary Logo - Reverse Colour
Primary Logo Drop - Reverse Colour
Primary Logo - WHITE
Primary Logo Drop - White

Components

These are a few example components.

Name
Email
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Columns

Getting Started

Columns need to be nested within  a "row" and a direct child of a "container".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 
col
col
col
col
col
col
col
col
col
col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".
 no-gutters
no-gutters
no-gutters
no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.
col
col
col
col

Columns - Responsive Grid

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"
col-m-1
col-m-11
col-m-2
col-m-10
col-m-3
col-m-9
col-m-4
col-m-8
col-m-5
col-m-7
col-m-6
col-m-6
col-m-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"
col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"
col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.
col-4
col-8
col-6
col-6
col-3
col-2
col-7

Rows - Alignment

Vertical Alignment

Align-Start

To align columns from the top, combine a class of  "align-start" preceded by the class of "row"
align-start
align-start
align-start

Align-Center

To align columns from the center, combine a class of  "align-center" preceded by the class of "row"
align-center
align-center
align-center

Align-End

To align columns from the bottom, combine a class of  "align-end" preceded by the class of "row"
align-end
align-end
align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of  "justify-start" preceded by the by class of "row"
justify-start
justify-start

Justify-Center

To align columns from the right, combine a class of  "justify-center" preceded by the class of "row"
justify-center
justify-center

Justify-End

To align columns from the right, combine a class of  "justify-end" preceded by the class of "row"
justify-end
justify-end

Justify-Between

To evenly space columns between each-other, combine a class of  "justify-between" preceded by the class of "row"
justify-between
justify-between

Justify-Around

To evenly space columns around each-other, combine a class of  "justify-around" preceded by the class of "row"
justify-around
justify-around

Self-Align Columns

To individually self-align columns, combine a class of  "self-start", "self-center", "self-end" preceded by the by class of "col"
self-start
self-center
self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"
order-last
order-first