Style Guide

This guide lists out standard elements, un-styled.
Quickly edit your base styling.

How to use

  1. Select the element you want to style below
  2. Open the Style tab (S)
  3. Click the "Select a Class or Tag" field
  4. Under HTML Tag, select the pink "All" tag (e.g. "All H1 Headings")

Sections

Exampe

Headings

H1 Headings

H2 Headings

H3 Headings

H4 Headings

H5 Headings
H6 Headings

Other text stuff

Just a standard Paragraph element

Block Quote
This is some text inside of a div block. (AKA Text block) - You'll need to add a class or tag to style.
  • List and list item (this is a text block, select from Navigator)
  • List and list item
  • List and list item
Just a generic text link
This is a button

Looking to edit your all Body style?

Rich text element (RTE)

Rich text headings (You'll first need to add a class to the RTE)

RTE H1 Heading

RTE H2 Heading

RTE H3 Heading

RTE H4 Heading

RTE H5 Heading
RTE H6 Heading

Example of how to style RTE elements:

Basic form stuff

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

Media elements

Image

Lottie

Video

Youtube Video

Components

Background Video

Tabs

Tab 1
Tab 2
Tab 3

This is just a paragraph element inside the Tab Pane.

Tab 2

Tab 3

Dropdown

Dropdown

Lightbox

Navbar

Slider

Other stuff

Section

To style a section you will need to add a class or tag.

Container

To style a container you will need to add a class or tag.

Figure

Select parent of this paragraph to edit figure tag.

No attribution required - You're free to use, edit and modify as needed. Created by @jonohale