Fonts
Play
Headings + Body
Type: Sans Serif
Weights: Normal (400), Medium (500)
Headings
H1 Headings
Element
H2 Headings
Element
H3 Headings
Element
H4 Headings
Element
H5 Headings
Element
H6 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
h5
Class
Typography
paragraph-0.875
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
body_text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
body_text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
button_text
Lorem Ipsum
link
All Ordered Lists
- Example Ordered List
- Example Ordered List
All Unordered Lists
- Example Unordered List
- Example Unordered List
Color
Background
Black
#252525
u-bg-black
White
#ffffff
u-bg-white
violet
F7EDFF
u-bg-violet
blue
8CA5DB
u-bg-blue
Text
Aa
Black
#252525
u-text-black
Aa
White
#ffffff
u-text-white
Aa
Violet
F7EDFF
u-text-yellow
Aa
Blue
8CA5DB
u-text-blue
Components
Buttons wide
Buttons small
Forms
Thank you for your submission!
Oops! Something went wrong while submitting the form.
Thank you for your submission!
Oops! Something went wrong while submitting the form.
Card
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Utilities
Margin
Top
u-mt-1
margin-top: 1rem;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-4
margin-top: 4em;
u-mt-auto
margin-top: auto;
Bottom
u-mb-1.5
margin-bottom: 1.5rem;
u-mb-2
margin-bottom: 2rem;
u-mb-2,25
margin-bottom: 2,25 rem;
u-mb-3
margin-bottom: 3rem;
u-mb-4
margin-bottom: 4em;
u-mb-3.5
margin-bottom: 3.5 rem
u-mb-3.75
margin-bottom: 3.75 rem
Other
u-mr-1
margin-right: 1rem
u-mr-2
margin-right: 2rem
u-ml-1
margin-left: 1rem;
u-ml-2
margin-left: 2rem;
u-ml-mr-1
margin-left-right: 1rem;
u-ml-mr-2
margin-left-right: 2rem;
Padding
Top
u-pt-0
padding-top: 1;
u-pt-1
padding-top: 2rem;
u-pt-2
padding-top: 3rem;
u-pt-4
padding-top: 4rem;
Bottom
u-pb-1
padding-bottom: 1rem;
u-pb-2
padding-bottom: 2rem;
u-pb-3
padding-bottom: 3rem;
u-pb-4
padding-bottom: 4rem;
u-pb-6
padding-bottom: 6rem;
u-pb-6
padding-bottom: 6rem;
Other
u-pl-1
padding-left; 1rem
u-pr-1
padding-right 1rem;
u-pl-2
padding-left 2rem;
u-pr-2
padding-right 2rem;
u-pr-3
padding-right 3rem;
u-pl-3
padding-left 3rem;
u-pl-pr-1
padding-left-right 1rem;
u-pl-pr-2
padding-left-right 2rem;
u-pl-pr-3
padding-left-right 3rem;
Alignment
u-text-center
text-align: center;
u-text-right
text-align: right;
u-text-left
text-align: left;
u-text-left
text-align: justify;
Overflow
u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;
Display + position
u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-d-inline-flex
display: inline-flex;
u-position-relative;
position: relative;
u-position-sticky;
position: sticky;
u-position-sticky;
opacity 70%
u-opacity75
display: none;
opacity 75%
u-opacity50
display: none;
opacity 50%
u-opacity90
display: none;
opacity 90%
u-opacity30
display: none;
opacity 30%
u-opacity10
display: none;
opacity 10%
Size
u-w-100
width: 100%;
u-w-70
whidth70%
u-minh-100vh
width50%
Helpers
u-all-caps
all caps
u-link-cover
Multiple properties
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties
Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-large
padding-global
padding-small
padding-small
padding-section
padding-section-nav
padding-section-footer
padding-section-medium