Style Guide

Colors

Primary 1

Primary 2

Black

Gray 1

Gray 2

Gray 3

Gray 4

White

Buttons

Button Primary 1 Icon
Icon 01Icon 01
Button Primary 2 Icon
Icon 01Icon 01
Button Black Icon
Icon 02Icon 02
Button Black
Button White Icon
Icon 01Icon 01
Button Link
Icon 03

HTML Headings

H1
All H1 Headings

Heading - H1

H2
All H2 Headings

Heading - H2

H3
All H3 Headings

Heading - H3

H4
All H4 Headings

Heading - H4

H5
All H5 Headings
Heading - H5
H6
All H6 Headings
Heading - H6

Heading classes

Heading H1
Heading H1
Heading H2
Heading H2
Heading H3
Heading H3
Heading H4
Heading H4
Heading H5
Heading H5
Heading H6
Heading H6

Paragraphs

P
All paragraphs

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.

P
Text Lead

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.

P
Text 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.

Inline text elements

P
Text Mark

Suspendisse varius enim in highlight eros elementum tristique.

D
Text Delete

Suspendisse varius enim in highlight eros elementum tristique.

U
Text Underline

Suspendisse varius enim in highlight eros elementum tristique.

B
Text Bold

Suspendisse varius enim in highlight eros elementum tristique.

I
Text Italic

Suspendisse varius enim in highlight eros elementum tristique.

Text alignments

Text Left

Text Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Center

Text Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Right

Text Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote

This is a blockquote. Lorem comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up its enjoyment agreeable depending. Timed voice share led him to widen noisy young. At weddings believed laughing although the material does the exercise of. Up attempt offered ye civilly so sitting to. Of acceptance insipidity remarkably is an invitation.

List Styles

  1. This is an ordered list
  2. This is a list item within an ordered list
  3. Style each list item as you wish
  • This is an unordered list
  • This is a list item within an unordered list
  • Style each list item as you wish
  • This is an unstyled list
  • This is a list item within an unstyled list
  • This is unstyled list, so no need to style it

Rich Text

This is rich text heading

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.

  • This is an unordered list
  • This is a list item within an unordered list
  • Style each list item as you wish
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.

Hero image 01
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.

Form

Input
Textarea
Radio
Checkbox
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Containers

Container
1380px container
Container Medium
1260px container medium
Container Small
1020px container small
Inner Container
800px inner container
Inner Container Small
600px inner container small
Inner Container
Left
800px inner container left

Section Spacings

Section Spacing
Padding Top Bottom 160px
Section Spacing Top
Padding Top 160px
Section Spacing Bottom
Padding Bottom 160px

Margins

Margin bottom 0px
No Margin
Margin bottom 4px
Margin Bottom 4
Margin bottom 8px
Margin Bottom 8
Margin bottom 12px
Margin Bottom 12
Margin Bottom 16px
Margin Bottom 16
Margin bottom 20px
Margin Bottom 20
Margin bottom 24px
Margin Bottom 24
Margin Bottom 28px
Margin Bottom 28
Margin Bottom 32px
Margin Bottom 32
Margin bottom 36px
Margin Bottom 36
Margin bottom 40px
Margin Bottom 40
Margin Bottom 44px
Margin Bottom 44
Margin Bottom 48px
Margin Bottom 48
Margin Bottom 54px
Margin Bottom 54
Margin Bottom 60px
Margin Bottom 60
Margin Bottom 70px
Margin Bottom 70
Margin bottom 80px
Margin bottom 80
More Templates