Style Guide V1.0

Last edited 1 Aug, 2023
Made with 
 by Floxies

Typography

HTML Heading Tags
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
H1 Headings

Heading 1

H2 Headings

Heading 2

H3 Headings

Heading 3

H4 Headings

Heading 4

H5 Headings
Heading 5
H6 Headings
Heading 6
Paragraph Styles
text-size-large

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.

text-size-medium

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.

text-size-regular

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.

text-size-small

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.

text-size-tiny

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.

Font Weights
text-weight-xbold

This is a sentence.

text-weight-bold

This is a sentence.

text-weight-semibold

This is a sentence.

text-weight-normal

This is a sentence.

text-weight-light

This is a sentence.

Text Styles
text-style-underline

This is a sentence.

text-style-strikethrough

This is a sentence.

text-style-italics

This is a sentence.

text-style-uppercase

This is a sentence.

text-style-lowercase

This is a sentence.

Rich Text Formatting
text-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.

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption here

Colours

Colour Styles
colour-pink
colour-blue
colour-yellow
Background Colour Styles
background-color-black
background-color-blue
background-color-white

Buttons

Default Button Styles
button
Button Text
button
is-secondary
Button Text
button
is-small
Button Text
button
is-secondary
is-small
Button Text
Alternative Button Styles
button
is-alt
Button Text
button
is-secondary
is-alt
Button Text
button
is-alt
is-small
Button Text
button
is-secondary
is-alt
is-small
Button Text

Spacing

Margin
margin-
margin-small
margin-medium
margin-large
Padding
padding-
padding-small
padding-medium
padding-large
Containers
container-small
container-medium
container-large
Max-Width
max-width-small
max-width-medium
max-width-large

Shadows

Shadows

Forms

Form Elements
input-field
input-field
is-text-area
input-field
is-select
form-checkbox
form-radio
form-radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.