Style Guide

HTML Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading Classes

Heading XLarge
Heading Large
Heading Medium
Heading Small
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6

Buttons

Button Text

Label

Cards

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Muted
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.

Card Sizes

Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectu.
XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.

Badge

Default
Muted
Primary

Icon Sizes

Other HTML Elements

All Paragraphs
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Quote - Sample text is being used as a placeholder for real text that is normally present.

TExt classes

Text Xlarge

Text Large

Text Medium

Text Regular

Text Small

Text Tiny

Text Italic

Text Meta

Text Link

Text Alignments

text-align-left
text-align-center
text-align-right

Text ColorS

Text Color Default
Text Color Muted

Backgrounds



Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Placeholder
This is a placeholder image.

List

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hidden Classes

Check the Navigator to see the hidden section below. This section contains utility classes like padding, margin and container.

Inverse

Buttons

Button Text

Badge

Inverse

Label

Inverse
Label
Label
Inverse Muted
Label
Label

Cards

Inverse
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.

Inverse Text ColorS

Text Color Default
Text Color Muted

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