Style Guide

Style Guide

Typography

Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Paragraph LinksBold TextItalic Text

Vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

  • Aenean vulputate eleifend tellus.
  • Lorem ante, dapibus in, viverra quis, feugiat a, tellus.
  • Phasellus viverra nulla ut metus varius laoreet.
  1. Aenean vulputate eleifend tellus.
  2. Lorem ante, dapibus in, viverra quis, feugiat a, tellus.
  3. Phasellus viverra nulla ut metus varius laoreet.

Tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.

“Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae.”

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel,

Cras dapibus. Vivamus elementum semper nisi.

Morbi fames at ullamcorper quam lobortis. Purus tortor orci, risus nullam neque. Montes, nunc ut sem felis scelerisque adipiscing erat turpis sollicitudin. Sit turpis quisque pretium.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Colors

White
Paragraphs
Border
Dark Hover
Additional Background
Background
Accent

Buttons

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

Buttons

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

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

Structure Classes

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

rl-page-wrapper
rl- main-wrapper
rl-container-small
rl-container-medium
rl-container-large
rl-padding-global
rl-padding-section-medium
rl-padding-section-large
rl-button-group