Trainual | Employee onboarding, SOP, knowledge, and training software

Navbars

Here are the different Navbars to use across the site. Each is a Symbol and can be found in the Symbols tab. Be sure not to copy the parent div nav-wrap found on this page — this unlinks the Sticky property so all can be displayed here.

Colors

Looking for something else? View the contents.

Colors

global
Body background color
Body text color
Headings color
Brand color
Button colors
Button color
Button Hover color
Button Text color
Button Text Hover color
Button Secondary color
Button Secondary Hover color
Button Secondary Text color
Button Secondary Text Hover color
link colors
Link color
Link Hover color
Nav Link color
Nav Link Hover color
Background colors
Background Color 1
Background Color 2
Background Color 3
Background Color 4
Background Color 5
Text Colors
Text Color 1
Text Color 2
Text Color 3
Text Color 4
other Colors
Border color
Shadow color
Input field background color
Input field placeholder color

Typography

Looking for something else? View the contents.

Body Copy

Typography

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
18/32px

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Small
15/24px

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Extra Small
12/150%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Blockquote
18px

Headings

Typography
This is some text
Callout
72px

Aa Bb Cc Dd Ee

Heading 1
56/72px

Aa Bb Cc Dd Ee

Heading 2
48/64px

Aa Bb Cc Dd Ee

Heading 3
40/56px

Aa Bb Cc Dd Ee

Heading 4
32/48px
Aa Bb Cc Dd Ee
Heading 5
24/40px
1Aa Bb Cc Dd Ee
Heading 6
18/32px
1Aa Bb Cc Dd Ee
Heading 7
14/24px

Additional Elements

Typography
  • This is an unordered item.
  • This is an unordered item.
  • This is an unordered item.
List Items - Bullets
1.3em
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.
List Items - Numbered
1.3em
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.
List Items - Lettered
1.3em
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.
List Items - Roman
1.3em

Buttons

Looking for something else? View the contents.

Primary Buttons

Primary, Teal, Outline, Learn More

Layouts

Looking for something else? View the contents.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a heading with some text.

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.

This is a purple highlight with some text.

This is a pink highlight with some text.

This is a green highlight with some text.

This is a green underline with some text.

This is a yellow highlight with some text.

This is a purple highlight with some text.

This is a pink highlight with some text.

This is a green highlight with some text.

This is a green underline with some text.

This is a yellow highlight with some text.

Interested in learning
more about Trainual?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

See Trainual in action

Join us any Tuesday or Thursday for a live demo, and get all your questions answered before you sign up.

By clicking “Accept All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Manage all preferences