Heading Classes

rl-heading-style-h1

Heading 1

rl-heading-style-h2

Heading 2

rl-heading-style-h3

Heading 3

rl-heading-style-h4

Heading 4

rl-heading-style-h5
Heading 5
rl-heading-style-h6
Heading 6

Text Classes

rl-text-style-large
This is some text inside of a div block.
rl-text-style-medium
This is some text inside of a div block.
rl-text-style-regular
This is some text inside of a div block.
rl-text-style-small
This is some text inside of a div block.
rl-text-style-tiny
This is some text inside of a div block.
rl-text-style-subheading
This is some text inside of a div block.
rl-text-style-link
This is some text inside of a div block.

Buttons

rl-button
Button
rl-button-small
Button
rl-button-secondary
Button
rl-button-secondary-small
Button
rl-button-link
Button

Form Elements

rl-field-label
rl-form-input
rl-form-text-area
rl-form-select-input
rl-form-checkbox
rl-form-radio
rl-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Colors

rl-black
rl-white
rl-gray
greentrue25
greentrue50
greentrue100
greentrue200
greentrue300
greentrue400
greentrue500
greentrue600
greentrue700
greentrue800
greentrue900

Structure Classes

Defined and flexible core structure we can use on all or most pages.

rl-page-wrapper
rl- main-wrapper
rl-container-medium
rl-container-small
rl-container-large
rl-padding-global
rl-padding-section-medium
rl-padding-section-large
rl-button-group
graytrue25
graytrue50
graytrue100
graytrue200
graytrue300
graytrue400
graytrue500
graytrue600
graytrue700
graytrue800
graytrue900
teal25
teal50
teal100
teal200
teal300
teal400
teal500
teal600
teal700
teal800
teal900
blue25
blue50
blue100
blue200
blue300
blue400
blue500
blue600
blue700
blue800
blue900
yellow25
yellow50
yellow100
yellow200
yellow300
yellow400
yellow500
yellow600
yellow700
yellow800
yellow900