Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

H1

h1. If you edit styles here, they will change across the site

H2

h2. Lorem ipsum dolor sit amet

H3

h3. Lorem ipsum dolor sit amet

H4

h4. Lorem ipsum dolor sit amet

H5
h5. Lorem ipsum dolor sit amet
H5 subtitle1
subtitle1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
H6
h6. Lorem ipsum dolor sit amet
H6 subtitle2
subtitle2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Paragraph body1

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.

Paragraph body1 bold

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.

Paragraph body2

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.

Paragraph body2 bold

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.

caption

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.

caption bold

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.

body1 link
body1 Link
body2 link
body2 Link
caption link
Caption Link
nav link
Nav Link
button contained
Button TextButton TextButton Text
button outlined
Button TextButton TextButton Text
Button Text
Button Text
button outlined
Button TextButton TextButton Text

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Primary
N/a
pallete.primary.main
#252E5D
pallete.primary.dark
#192041
Secondary
pallete.secondary.light
#E8F0FF
pallete.secondary.main
#1B55F5
pallete.secondary.dark
#123bab
Error
pallete.error.light
#FFEBEE
pallete.error.main
#ff1744
pallete.error.dark
#b2102f
Warning
pallete.warning.light
#FFFBD8
pallete.warning.main
#ffb300
pallete.warning.dark
#b27d00
Info
pallete.info.light
#E8F0FF
pallete.info.main
#01579b
pallete.info.dark
#0C2977
Success
pallete.success.light
#E8F5E9
pallete.success.main
#43A047
pallete.success.dark
#2e7031
Background
palette.background.default
#FFFFFF
palette.background.paper
#F5F7FA
palette.background.silver
#F5F7FA
Divider
palette.divider
#CCCED9
N/a
N/a
Typography
pallete.text.disabled
#CCCED9
palette.text.secondary
#878999
palette.text.primary
#252E5D

Components

These are a few example components.

Header
Footer