Typography (h1 Header)

h2 Heading

h3 Heading

Links

sample link: I'm a sample link! Hover me

Size em(12) for the size. Font weight is 300 ($medium). Color is $color-black. Hover color is $color-biz-blue. Note: no text decorations like underline.

Body

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Page breaks

The blue page break is a common element in the design. It is seen at the top of many pages, under the hero content. For this we use an element, whose styles can be found in _pagebreaks.scss.


Lists

Unordered

  • Lorem ipsum dolor sit amet
    • Phasellus iaculis neque
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit

Colors

Primary Colors

$color-biz-blue: rgb(57,176,213);

$color-nav-gray: rgb(51,51,51);

$color-dark-gray: rgb(51,51,51);

Secondary Colors

$color-font-gray: rgb(103,103,103);

$color-font-gray-secondary: rgb(140,140,140);

$color-sidebar-gray: rgb(183,183,184);

$color-background-gray: rgb(234,183,184);

Tertiary Colors

$biz-blue-accent: #d8eaf3;

$table-header: #31b0d6;

Helper Colors

$color-form-error: #D0021B;

$color-form-success: #A5CC00;;

Tables

# First Name Last Name Email
1 Test User Test1@mapquest.com
2 A Route routes@gmail.com
3 Eskimo Quest test@mapquest.com

Striped Table

# First Name Last Name Email
1 Test User Test1@mapquest.com
2 A Route routes@gmail.com
3 Eskimo Quest test@mapquest.com

Bordered Table

# First Name Last Name Email
1 Test User Test1@mapquest.com
2 A Route routes@gmail.com
3 Eskimo Quest test@mapquest.com

Buttons

Forms

Example block-level help text here.

Custom Foramtting Elements

This gray box is used on the following pages:


Panel heading without title
Panel content

Panel title

Panel content

Footer

Tooltips (none yet)

Alerts (none yet)

Dismissable Alerts