Styleguide

Typography

HTML Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading styles

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Text sizes

This is text size small

This is text size regular

This is text size medium

This is text size large

This is text size xlarge

Text Weights

Text weight regular

Text weight medium

Text weight semibold

Text weight bold

Text Labels

Text Label
Label
Text Label Primary
Label
Text Label Inverted
Label

Text Links

Text Link
Text Link
Text Link Primary
Back to Instructors home
Back to Instructors home
Text Link Inverted
Back to Instructors home
Back to Instructors home

Nav Links

Nav Link

Text alignment

Text Align Left
Text Align Center
Text Align Right

Text Styles

Text Style Muted
Text style muted
Text Style Muted 2
Text style muted

Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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 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!
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.

Text link

Bold text

Emphasis

Superscript

Subscript

Yoga-Pose-Close-Up-Hero-LummiAI
This is a figure caption

Color

Primary Color 1A
Primary Color 1b
Primary Color 1c
Background Color 1A
Background Color 1B
Background Color 1C
Text Color
Black
White

Buttons

Button Primary
Button
Button
Button Secondary
Button
Button
Button Inverted
Button
Button
Button Outline
Button
Button
Button Light
Button
Button

Icons

Icon small
Icon medium
Icon large
Icon Xlarge

Images

Aspect Ratio Portrait
Smiling Man Portrait Yoga Instructor Lummi AI 1
Aspect Ratio Square
Smiling Woman Portrait Yoga Instructor Lummi AI 4
Aspect Ratio Widescreen
Yoga-Pose-Close-Up-Hero-LummiAI
Aspect Ratio Landscape
Yoga-Pose-Close-Up-Hero-LummiAI

Spacing

Margin

Margin Vertical
Margin Horizontal
Margin Top
Margin Bottom
Margin Left
Margin Right
Margin Huge
Margin XLarge
Margin Large
Margin Medium
Margin Small
Margin XSmall

Padding

Padding 0
Padding Vertical
Padding Horizontal
Padding Top
Padding Bottom
Padding Left
Padding Right
Padding Global
Padding Huge
Padding XLarge
Padding Large
Padding Medium
Padding Small
Padding XSmall
Padding 0

Containers

The available container widths available with this template.

Container XLarge
Container Large
Container Medium
Container Small

Max Widths

Apply max widths as a combo class.

Max Width XSmall
Max Width Small
Max Width Medium
Max Width Large
Max Width XLarge

Grids

Grid 2 Column
Grid 3 Column
Grid 4 Column
Grid 2-1 Column
Grid 1-2 Column

Modifiers

2 Column Tablet
2 Column Landscape
1 Column Tablet
1 Column Landscape
1 Column Portrait

Useful classes

Flex Box Horizontal
Flex Box Vertical
Flex Wrap
Hidden
Hidden Tablet
Hidden Landscape
Hidden Portrait

Other HTML elements

  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
This is some text in a block to describe a block quote. Use it to pull out a piece of text you'd like to highlight.

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 links

Forms

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

Form submission messages

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