Demo Site

|

Modules

|

Style Guide

|

Theme
Foundations
Rich-Text ElementsTypographyImage SizesTheme Colors
Components
FormsButtonsCardsTagsBadges
Color Theme
Typography Theme
Spacing Theme
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich Text Element styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold

Italic

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

  • Unordered list item
  • Unordered list item
  • Unordered list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Typography Scale
Display
display-xl
display-large
display-medium
display-small
Heading
heading-xxlarge
heading-xlarge
heading-large
heading-medium
heading-small
Label
label-xxlarge
label-xlarge
label-large
label-medium
label-small
Body
body-xxlarge
body-xlarge
body-large
body-medium
body-small
Colors
Primary
Theme
Grayscale
System
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tags
Tag
Tag
Tag
Tag
Badges
Positive
Warning
Error
Neutral
Buttons
Button TextButton TextButton TextButton Text
Large
Medium
Small
Default
Hover
Pressed
Disabled
Cards

Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

star

star

star

star

star

user-circle

Tara F.

3 days ago

Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

star

star

star

star

star

user-circle

Tara F.

3 days ago

Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

star

star

star

star

star

user-circle

Tara F.

3 days ago

Images
Image frame: width: 100%; position: relative 0px; Ratio: 1:1; Fit: Fill;
Img: width 100%; height%; position: absolute (full) / Ratio: Auto; Fit: Fill;
1:1 Square Image
3:2 Landscape Image
2:3 Portrait
16:9 Image
Wrappers
Hero Wrapper
Title goes here
This is body text.
Title Wrapper
Title goes here
This is body text.
Title goes here
This is body text.
Title goes here
This is body text.
Content Wrapper
This is body text.
This is body text.
This is body text.
This is body text.
This is body text.
This is body text.