Navbar

Colors

.bg-lightest-blue
.text-lightest-blue
#E2ECF0
rgb(226,236,240)
.bg-lighter-blue
.text-lighter-blue
#63A7C6
rgb(99,167,198)

Blue

.bg-blue
.bg-primary
.bg-brand
.text-blue
.text-primary
.text-brand
#2180AE
rgb(33,128,174)
.bg-darker-blue
.text-darker-blue
#18597B
rgb(24,89,123)
.bg-darkest-blue
.text-darkest-blue
#12445F
rgb(18,68,95)
.bg-lightest-light-blue
.text-lightest-light-blue
#EAFAFC
rgb(234,250,252)
.bg-lighter-light-blue
.text-lighter-light-blue
#B9E2E3
rgb(185,226,227)

Light Blue

.bg-light-blue
.text-light
-blue
#89CED3
rgb(137,206,211)
.bg-darker-light-blue
.text-darker-light
-blue
#6DA4A9
rgb(109,164,169)
.bg-darkest-light-blue
.text-darkest-light
-blue
#4E868B
rgb(78,134,139)
.bg-lightest-orange
.text-lightest-orange
#FFF3EA
rgb(255,243,234)
.bg-lighter-orange
.text-lighter-orange
#FFB982
rgb(255,185,130)

Orange

.bg-orange
.text-orange
#FF9B4C
rgb(255,155,76)
.bg-dark-orange
.text-dark-orange
#E3741E
rgb(227,116,30)
.bg-darkest-orange
.text-darkest-orange
#BF6016
rgb(191,96,22)
.bg-lightest-purple
.text-lightest-purple
#E1E4F7
rgb(225,228,247)
.bg-lighter-purple
.text-lighter-purple
#878CA9
rgb(135,140,169)

Purple

.bg-purple
.text-purple
#545C82
rgb(84,92,130)
.bg-darker-purple
.text-darker-purple
#3C415B
rgb(60,65,91)
.bg-darkest-purple
.text-darkest-purple
#2C3043
rgb(44,48,67)
.bg-lightest-green
.text-lightest-green
#E1F8F0
rgb(225,248,240)
.bg-lighter-green
.text-lighter-green
#63CCA7
rgb(99,204,167)

Green

.bg-green
.text-green
#21B480
rgb(33,180,128)
.bg-darker-green
.text-darker-green
#187E59
rgb(24,126,89)
.bg-darkest-green
.text-darkest-green
#135D41
rgb(19,93,65)
.bg-lightest-red
.text-lightest-red
#FCE5E5
rgb(252,229,229)
.bg-lighter-red
.text-lighter-red
#D97272
rgb(217,114,114)

Red

.bg-red
.text-red
#CF4E4E
rgb(207,78,78)
.bg-dark-red
.text-dark-red
#A53E3E
rgb(165,62,62)
.bg-darkest-red
.text-darkest-red
#7A2828
rgb(122,40,40)

Buttons

default state

Blue
.btn .btn-blue
Light Blue
.btn .btn-blue
Orange
.btn .btn-blue
Purple
.btn .btn-green
Green
.btn .btn-orange
Red
.btn .btn-red
Blue
.btn .btn-solid-blue
Light Blue
.btn .btn-solid-light-blue
Orange
.btn .btn-solid-orange
Purple
.btn .btn-solid-purple
Green
.btn .btn-solid-green
Red
.btn .btn-solid-red
Here's a full-width button
.btn .btn-block
Here's a full-width button
.btn .btn-solid .btn-block

Typography

Body Copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
body, p {
         font-family: 'Roboto', sans-serif;
         font-weight: 300;
         font-size: 18px; color: #333;
         line-height: 24px;
        }

Heading 1

h1, .h1 {
          font-size: 4em;
          font-weight: 900;
          line-height: 1em;
        }

Heading 2

h2,.h2 { 
         font-size: 3em; 
         font-weight: 900;
         line-height: 1em;
       }

Heading 3

h3, .h3 {
          font-size: 2em;
          font-weight: 700;
          line-height: 1em;
        }

Heading 4

h4, .h4 {
          font-size: 1.75em;
          font-weight: 700;
          line-height: 1em;
        }
Heading 5
h5, .h5 {
          font-size: 1.5em;
          font-weight: 700;
          line-height: 1em;
         }
Heading 6
h6, .h6 {
          font-size: 1.25em;
          font-weight: 600;
          line-height: 1em;
        }
Color Text Classes
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
.text-lightest-blue
.text-lighter-blue
.text-blue / .text-primary / .text-brand
.text-darker-blue
.text-darkest-blue
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
.text-lightest-light-blue
.text-lighter-light-blue
.text-light-blue
.text-darker-light-blue
.text-darkest-light-blue
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
.text-lightest-orange
.text-lighter-orange
.text-orange
.text-darker-orange
.text-darkest-orange
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
.text-lightest-purple
.text-lighter-purple
.text-purple
.text-darker-purple
.text-darkest-purple
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
.text-lightest-green
.text-lighter-green
.text-green
.text-darker-green
.text-darkest-green
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
.text-lightest-red
.text-lighter-red
.text-red
.text-darker-red
.text-darkest-red

Forms

Panels, Boxes, & Wells, Oh My

Containers

Hey look at me!

I'm a fancy jumbotron. Use me to call attention to text, a featured article, pictures of cats, or basically anything else you really want the user to look at!

Learn More

List Groups

  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item
  • This is an active list item
  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item
  • List group item heading    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
  • List group item heading    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Cards

Galaxy

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

.card .bg-blue .bg-galaxy-gr

Fire

.card .bg-orange .bg-fire-gr

Sunset

.card .bg-purple .bg-sunset-gr

Ocean

.card .bg-light-blue .bg-ocean-gr

Blue

.card .bg-blue .bg-blue-gr

Light Blue

.card .bg-light-blue .bg-light-blue-gr

Orange

.card .bg-orange .bg-orange-gr

Purple

.card .bg-purple .bg-purple-gr

Green

.card .bg-green .bg-green-gr

Red

.card .bg-red .bg-red-gr

Hover state

Hover

Panels

Brand Audit
Panels are laid out using div blocks.

The main container is the first div block and then every other block is placed inside it.

To match the header color, use its background class.

<div class="panel panel-black">
   <div class="panel-heading bg-black">
      Black Panel
   </div>

   <div class="panel-body">
     Panel Body
   </div>

  <div class="panel-footer">
     Panel Footer
   </div>
</div>
.panel .panel-default
Brand Audit
Panel body
.panel .panel-blue
Brand Audit
Default Panel
.panel .panel-purple
Brand Audit
Panel body
.panel .panel-light-blue
Brand Audit
Panel body
.panel .panel-green
Brand Audit
Panel body
.panel .panel-orange
Brand Audit
Panel body
.panel .panel-red

Logos

The Triangle

Horizontal & HOrizontal White

Vertical & HOrizontal White

Vertical Grayscale & Vertical Grayscale White

Horizontal Grayscale & Vertical Grayscale White

Footer

help desk software