Style Guide
Colors
primary-0
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
primary-950
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950
Typography
- Headings
- Body Text
- Tagline
.h1 | var(--h1) | var(--line-height-s) | var(--font-600)
This is a sample heading text
.h2 | var(--h2) | var(--line-height-s) | var(--font-600)
This is a sample heading text
.h3 | var(--h3) | var(--line-height-m) | var(--font-600)
This is a sample heading text
.h4 | var(--h4) | var(--line-height-l) | var(--font-600)
This is a sample heading text
.h5 | var(--h5) | var(--line-height-l) | var(--font-600)
This is a sample heading text
.h6 | var(--h6) | var(--line-height-l) | var(--font-600)
This is a sample heading text
.text-xs
This is a sample paragraph text used to demonstrate the body text style.
.text-s
This is a sample paragraph text used to demonstrate the body text style.
.text-m
This is a sample paragraph text used to demonstrate the body text style.
.text-l
This is a sample paragraph text used to demonstrate the body text style.
.text-xl
This is a sample paragraph text used to demonstrate the body text style.
.text-2xl
This is a sample paragraph text used to demonstrate the body text style.
.tagline .tagline--primary
This is a sample tagline text
.tagline .tagline--dark
This is a sample tagline text
.tagline .tagline--light
This is a sample tagline text
Buttons
All .btn styles (tokens, base class, and variants) are currently located in the custom stylesheet: buttons.css (under Advanced CSS → Stylesheets).
.btn-text CSS is located in SuperPower CSS.
.btn
Button.btn .btn--light
Button light.btn .btn--outline
Button outline.btn .btn--small
Button Small.btn
Button + icon.btn-text
Button TextLinks in text
.link .link--dark
This is link in text dark.link .link--light
This is link in text lightShortcodes
.phone-shortcode
.phone-shortcode .phone-shortcode--light
.phone-shortcode .phone-shortcode--secondary
Lists
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
.list-chevron-new
- NEW LIST HERE
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id auctor dui.
- List item
.list-chevron-new .list-chevron-new--fill
- NEW FILL LIST HERE
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id auctor dui.
- List item 3
.list-chevron
- List primary here
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id auctor dui.
- List item 3
.list-fill
- List primary fill here
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id auctor dui.
.list-numbered
- List numbered here
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- List item 3
.list-none
- List item
- List item
- List item
Social Icons
Radius
var(--card-radius)
var(--img-radius)
radius-xs
radius-s
radius-m
radius-l
radius-full