Headings

All available styles for headings. Preview web fonts here.

Heading H1

Tag: h1

Heading H1

Font-family: Proxima Nova Light webfont

Font-size: 60px

Font-weight: 200

Heading H2

Tag: h2

Heading H2

Font-family: Proxima Nova SemiBold webfont

Font-size: 36px

Font-weight: 400

Heading H3

Tag: h3

Heading H3

Font-family: Proxima Nova Light webfont

Font-size: 20px

Font-weight: 200

Heading H4

Tag: h4

Heading H4

Font-family: Proxima Nova Bold webfont

Font-size: 18px

Font-weight: 500

Hero Banner
Class name: .large

Font-family: Proxima Nova SemiBold webfont

Font-size: 40px

Font-weight: 400

Section Header Light
Class name: .headerlight

Font-family: Proxima Nova SemiBold webfont

Font-size: 25px

Font-weight: 400

White Subhead
Class name: .whitesubhead

Font-family: Proxima Nova Light webfont

Font-size: 18px

Font-weight: 200

Regular Subhead
Class name: .regularsubhead

Font-family: Proxima Nova Light webfont

Font-size: 18px

Font-weight: 200

Intro Heading 1
Class name: .intro-heading-1

Font-family: Proxima Nova Light webfont

Font-size: 40px

Font-weight: 200

Three Column Heading Type 1
Class name: .three-column-heading-type-1

Font-family: Proxima Nova Bold webfont

Font-size: 18px

Font-weight: 500

Three Column Heading Type 2
Class name: .three-column-heading-type-2

Font-family: Proxima Nova SemiBold webfont

Font-size: 18px

Font-weight: 400

Three Column Heading Type 3
Class name: .three-column-heading-type-3

Font-family: Proxima Nova Bold webfont

Font-size: 17px

Font-weight: 500

Three Column Heading Type 4
Class name: .three-column-heading-type-4

Font-family: Proxima Nova Bold webfont

Font-size: 22px

Font-weight: 500

Three Column Heading Type 5
Class name: .three-column-heading-type-5

Font-family: Proxima Nova Regular webfont

Font-size: 32px

Font-weight: 300

Three Column Box Subheading
Class name: .three-column-box-subheading

Font-family: Proxima Nova Bold webfont

Font-size: 17px

Font-weight: 500

Large Subhead
Class name: .large-subhead

Font-family: Proxima Nova Regular webfont

Font-size: 17px

Font-weight: 300

Miscellaneous

Miscellaneous styles for elements.

Fact Block Text
Class name: .fact-block--num

Font-family: Proxima Nova Light webfont

Font-size: 100px

Font-weight: 200

Fact Block Subtext
Class name: .fact-block--text

Font-family: Proxima Nova Regular webfont

Font-size: 32px

Font-weight: 300

Blockquote. This can span multiple lines
and contain line breaks.
Tag: blockquote

Blockquote. This can span multiple lines
and contain line breaks.

Font-family: Proxima Nova Thin webfont

Font-size: 32px

Font-weight: 100

Paragraphs

Body copy.
A weekend in Capitola, a wildflower drive in Monterey, ancient pictographs in Utah, and the Golden Gate National Recreational Area share the spotlight in the Spring issue. Also learn tips on how to avoid driving distractions.
Class name: .body

Font-family: Proxima Nova Light webfont

Font-size: 17px

Font-weight: 200

Body copy bold.
A weekend in Capitola, a wildflower drive in Monterey, ancient pictographs in Utah, and the Golden Gate National Recreational Area share the spotlight in the Spring issue. Also learn tips on how to avoid driving distractions.
Class name: .bodybold

Font-family: Proxima Nova Bold webfont

Font-size: 17px

Font-weight: 500

Footer text.
A weekend in Capitola, a wildflower drive in Monterey, ancient pictographs in Utah, and the Golden Gate National Recreational Area share the spotlight in the Spring issue. Also learn tips on how to avoid driving distractions.
Class name: .footertext

Font-family: Proxima Nova Regular webfont

Font-size: 14px

Font-weight: 300

Grey footer text.
A weekend in Capitola, a wildflower drive in Monterey, ancient pictographs in Utah, and the Golden Gate National Recreational Area share the spotlight in the Spring issue. Also learn tips on how to avoid driving distractions.
Class name: .greyfootertext

Font-family: Proxima Nova Regular webfont

Font-size: 14px

Font-weight: 300

Lists

Various list styles

  1. First
  2. Second
  3. Third

Ordered list

<ol><li>First</li><li>Second</li><li>Third</li></ol>
  • First
  • Second
  • Third

Unordered list

<ul><li>First</li><li>Second</li><li>Third</li></ul>
  • First
  • Second
  • Third
Tag: ul.two-col-list

Two column unordered list

<ul class="two-col-list"><li>First</li><li>Second</li><li>Third</li></ul>
  • First item
  • Second item
  • Third item
Tag: ul.checkmarks

List with the green check signs

<ul class="checkmarks"><li>First item</li><li>Second item</li><li>Third item</li></ul>
  • First item
  • Second item
  • Third item
  • Fourth item
Tag: ul.two-col-checkmarks

Two column list with the green check signs

<ul class="two-col-checkmarks"><li>First item</li><li>Second item</li><li>Third item</li><li>Fourth item</li></ul>

Icons

Icons that are used and reserved for any cases.

Code: e936

Class name:

icon-icon-cruise

Code: e92f

Class name:

icon-icon-rmrs

Code: e92d

Class name:

icon-icon-member2

Code: e92e

Class name:

icon-icon-mag3

Code: e92b

Class name:

icon-icon-bank

Code: e92c

Class name:

icon-icon-palmtree

Code: e980

Class name:

icon-icon-chat1

Code: e97d

Class name:

icon-icon-auto5

Code: e97e

Class name:

icon-icon-suv1

Code: e97f

Class name:

icon-icon-truck1

Code: e97c

Class name:

icon-icon-travelagent1

Code: e97b

Class name:

icon-icon-mag2

Code: e97a

Class name:

icon-icon-cycle1

Code: e978

Class name:

icon-icon-licplate1

Code: e977

Class name:

icon-icon-gig

Code: e972

Class name:

icon-icon-app1

Code: e971

Class name:

icon-icon-mag1

Code: e970

Class name:

icon-icon-gift1

Code: e942

Class name:

icon-icon-paw1

Code: e96f

Class name:

icon-icon-flame1

Code: e96c

Class name:

icon-icon-boat1

Code: e96d

Class name:

icon-icon-travelcard1

Code: e969

Class name:

icon-icon-seal1

Code: e96a

Class name:

icon-icon-battcharge1

Code: e96b

Class name:

icon-icon-tickets1

Code: e962

Class name:

icon-icon-aaa1

Code: e961

Class name:

icon-icon-rv1

Code: e95b

Class name:

icon-icon-dental1

Code: e95c

Class name:

icon-icon-family1

Code: e95d

Class name:

icon-icon-health1

Code: e95e

Class name:

icon-icon-health2

Code: e95f

Class name:

icon-icon-health3

Code: e960

Class name:

icon-icon-pets1

Code: e929

Class name:

icon-icon-icon-passport

Code: e90c

Class name:

icon-icon-icon-visastamp

Code: e9ba

Class name:

icon-icon-icon-grad

Code: e952

Class name:

icon-icon-icon-offices-sm

Code: e953

Class name:

icon-icon-icon-account-sm

Code: e90d

Class name:

icon-icon-icon-insurance

Code: e90b

Class name:

icon-icon-icon-automotive

Code: e90e

Class name:

icon-icon-icon-discounts

Code: e90f

Class name:

icon-icon-icon-financial

Code: e930

Class name:

icon-icon-icon-mainnav-auto

Code: e931

Class name:

icon-icon-icon-mainnav-discount

Code: e932

Class name:

icon-icon-icon-mainnav-finance

Code: e933

Class name:

icon-icon-icon-mainnav-ins

Code: e934

Class name:

icon-icon-icon-mainnav-member

Code: e935

Class name:

icon-icon-icon-mainnav-travel

Code: e909

Class name:

icon-icon-navbar-icon-administrative-dashboards

Code: e913

Class name:

icon-icon-icon-account

Code: e90a

Class name:

icon-icon-icon-account-old

Code: e910

Class name:

icon-icon-icon-offices

Code: e911

Class name:

icon-icon-icon-search

Code: e912

Class name:

icon-icon-icon-travel

Code: e902

Class name:

icon-icon-right-arrow

Code: e903

Class name:

icon-icon-up-arrow

Code: e904

Class name:

icon-icon-down-arrow

Code: e905

Class name:

icon-icon-left-arrow

Code: e900

Class name:

icon-icon-towicon

Code: e916

Class name:

icon-icon-youtube3

Code: e963

Class name:

icon-icon-aar1

Code: e964

Class name:

icon-icon-checklist2

Code: e965

Class name:

icon-icon-coupon1

Code: e966

Class name:

icon-icon-glass1

Code: e967

Class name:

icon-icon-fuel1

Code: e968

Class name:

icon-icon-flat1

Code: f900

Class name:

icon-icon-motorcycle

Code: e91c

Class name:

icon-icon-battery

Code: e91d

Class name:

icon-icon-brake-svc

Code: e91e

Class name:

icon-icon-safety-inspection

Code: e91f

Class name:

icon-icon-cooling-sys

Code: e920

Class name:

icon-icon-ac-inspection

Code: e921

Class name:

icon-icon-fan

Code: e922

Class name:

icon-icon-maintenance

Code: e923

Class name:

icon-icon-oil-filter-lube

Code: e924

Class name:

icon-icon-fuel-injection

Code: e925

Class name:

icon-icon-tire-rotation

Code: e926

Class name:

icon-icon-service-discount

Code: f902

Class name:

icon-icon-cancel-circle

Code: f901

Class name:

icon-icon-icon-motorcycle

Code: f903

Class name:

icon-icon-icon-rv

Code: e927

Class name:

icon-icon-home

Code: e919

Class name:

icon-icon-office

Code: e974

Class name:

icon-icon-newspaper

Code: e96e

Class name:

icon-icon-pencil2

Code: e914

Class name:

icon-icon-icon-images

Code: e915

Class name:

icon-icon-icon-camera

Code: e928

Class name:

icon-icon-icon-book

Code: e95a

Class name:

icon-icon-library

Code: e975

Class name:

icon-icon-file-text

Code: e976

Class name:

icon-icon-profile

Code: e973

Class name:

icon-icon-phone

Code: e951

Class name:

icon-icon-envelop

Code: e957

Class name:

icon-icon-location

Code: e91b

Class name:

icon-icon-icon-tour-location

Code: e955

Class name:

icon-icon-icon-tour-duration

Code: e979

Class name:

icon-icon-alarm

Code: e959

Class name:

icon-icon-calendar

Code: e954

Class name:

icon-icon-icon-printer

Code: e956

Class name:

icon-icon-display

Code: e944

Class name:

icon-icon-icon-mobile

Code: e98e

Class name:

icon-icon-key2

Code: e958

Class name:

icon-icon-aid-kit

Code: e9a3

Class name:

icon-icon-icon-spoon-knife

Code: e9af

Class name:

icon-icon-icon-airplane

Code: e9b2

Class name:

icon-icon-accessibility

Code: e9b4

Class name:

icon-icon-icon-shield

Code: e9d4

Class name:

icon-icon-sun

Code: e9d9

Class name:

icon-icon-star-full

Code: e901

Class name:

icon-icon-checkmark

Code: ea1c

Class name:

icon-icon-play3

Code: ea8a

Class name:

icon-icon-google3

Code: e917

Class name:

icon-icon-facebook

Code: ea92

Class name:

icon-icon-instagram

Code: e92a

Class name:

icon-icon-twitter

Code: e91a

Class name:

icon-icon-linkedin2

Code: ead7

Class name:

icon-icon-yelp

Code: f001

Class name:

icon-icon-music

Code: f004

Class name:

icon-icon-heart

Code: f00c

Class name:

icon-icon-check

Code: e918

Class name:

icon-icon-times

Code: f018

Class name:

icon-icon-icon-road

Code: f023

Class name:

icon-icon-lock

Code: f040

Class name:

icon-icon-pencil

Code: f053

Class name:

icon-icon-chevron-left

Code: f054

Class name:

icon-icon-chevron-right

Code: f067

Class name:

icon-icon-plus

Code: f068

Class name:

icon-icon-minus

Code: f06a

Class name:

icon-icon-exclamation-circle

Code: e091

Class name:

icon-icon-plane

Code: f077

Class name:

icon-icon-chevron-up

Code: f078

Class name:

icon-icon-chevron-down

Code: f079

Class name:

icon-icon-retweet

Code: f07a

Class name:

icon-icon-shopping-cart

Code: f07b

Class name:

icon-icon-folder

Code: f07c

Class name:

icon-icon-folder-open

Code: f07d

Class name:

icon-icon-arrows-v

Code: f07e

Class name:

icon-icon-arrows-h

Code: f080

Class name:

icon-icon-bar-chart-o

Code: f082

Class name:

icon-icon-facebook-square

Code: f083

Class name:

icon-icon-camera-retro

Code: f084

Class name:

icon-icon-key

Code: f085

Class name:

icon-icon-gears

Code: f086

Class name:

icon-icon-comments

Code: f087

Class name:

icon-icon-thumbs-o-up

Code: f090

Class name:

icon-icon-sign-in

Code: f091

Class name:

icon-icon-trophy

Code: f092

Class name:

icon-icon-github-square

Code: f093

Class name:

icon-icon-upload

Code: f094

Class name:

icon-icon-lemon-o

Code: f095

Class name:

icon-icon-phone1

Code: f096

Class name:

icon-icon-square-o

Code: f098

Class name:

icon-icon-phone-square

Code: f09a

Class name:

icon-icon-facebook-f

Code: f09b

Class name:

icon-icon-github

Code: f09c

Class name:

icon-icon-unlock

Code: f09d

Class name:

icon-icon-credit-card

Code: f09e

Class name:

icon-icon-rss

Code: f0a7

Class name:

icon-icon-hand-o-down

Code: f0a8

Class name:

icon-icon-arrow-circle-left

Code: f0a9

Class name:

icon-icon-arrow-circle-right

Code: f0aa

Class name:

icon-icon-arrow-circle-up

Code: f0ab

Class name:

icon-icon-arrow-circle-down

Code: f0ac

Class name:

icon-icon-icon-globe

Code: f0ae

Class name:

icon-icon-tasks

Code: f0b0

Class name:

icon-icon-filter

Code: f0b1

Class name:

icon-icon-briefcase

Code: f0b2

Class name:

icon-icon-arrows-alt

Code: f0c0

Class name:

icon-icon-users

Code: f0c1

Class name:

icon-icon-link

Code: f0c2

Class name:

icon-icon-cloud

Code: f0c3

Class name:

icon-icon-flask

Code: f0d6

Class name:

icon-icon-money

Code: f0eb

Class name:

icon-icon-lightbulb-o

Code: f0f1

Class name:

icon-icon-stethoscope

Code: f0fa

Class name:

icon-icon-medkit

Code: f108

Class name:

icon-icon-desktop

Code: f109

Class name:

icon-icon-laptop

Code: f13d

Class name:

icon-icon-anchor

Code: f1ae

Class name:

icon-icon-child

Code: f21e

Class name:

icon-icon-heartbeat

Code: f236

Class name:

icon-icon-hotel

Code: e069

Class name:

icon-icon-add

Code: e000

Class name:

icon-icon-error

Code: e552

Class name:

icon-icon-local_pizza

Code: e323

Class name:

icon-icon-icon-mouse

Code: f052

Class name:

icon-icon-primitive-dot

Code: f099

Class name:

icon-icon-twitter1

Code: f0cb

Class name:

icon-icon-list-ol

Code: f0cc

Class name:

icon-icon-strikethrough

Code: f0cd

Class name:

icon-icon-underline

Code: f0ce

Class name:

icon-icon-table

Code: f0d0

Class name:

icon-icon-magic

Code: f0d3

Class name:

icon-icon-pinterest-square

Code: f0d7

Class name:

icon-icon-caret-down

Code: f0d8

Class name:

icon-icon-caret-up

Code: f0d9

Class name:

icon-icon-caret-left

Code: f0da

Class name:

icon-icon-caret-right

Code: f0e3

Class name:

icon-icon-legal

Code: f0e4

Class name:

icon-icon-tachometer

Code: f0e5

Class name:

icon-icon-comment-o

Code: f0e6

Class name:

icon-icon-comments-o

Code: f0e8

Class name:

icon-icon-sitemap

Code: f0e9

Class name:

icon-icon-icon-umbrella

Code: f0ea

Class name:

icon-icon-paste

Code: f0ec

Class name:

icon-icon-exchange

Code: f0ed

Class name:

icon-icon-cloud-download

Code: f0ee

Class name:

icon-icon-cloud-upload

Code: f0f0

Class name:

icon-icon-user-md

Code: f0fb

Class name:

icon-icon-fighter-jet

Code: f0fc

Class name:

icon-icon-beer

Code: f0fe

Class name:

icon-icon-plus-square

Code: f100

Class name:

icon-icon-angle-double-left

Code: f101

Class name:

icon-icon-angle-double-right

Code: f102

Class name:

icon-icon-angle-double-up

Code: f103

Class name:

icon-icon-angle-double-down

Code: f106

Class name:

icon-icon-angle-up

Helper Classes

Left aligned
Class name: .left-align
Right aligned
Class name: .right-align
Centered
Class name: .centered

Disclaimer

Tag: p.disclaimer

Disclaimer

Disclaimer (BOA)

Tag: p.disclaimer-boa

Disclaimer (BOA)

Colors

Defined colors for entire project

  • HEX: #0075DB
    Sass: $aaa-lt-blue

  • HEX: #00529b
    Sass: $aaa-blue

  • HEX: #123D74
    Sass: $aaa-dk-blue

  • HEX: #036ecd
    Sass: $aaa-link-color

  • HEX: #f9f9f9
    Sass: $aaa-ltr-gray

  • HEX: #ccc
    Sass: $aaa-lt-gray

  • HEX: #999
    Sass: $aaa-gray

  • HEX: #666
    Sass: $aaa-dk-gray

  • HEX: #333
    Sass: $aaa-dkr-gray

  • HEX: #e6e6e6
    Sass: $aaa-callout-gray

  • HEX: #5cb85c
    Sass: $aaa-green

  • HEX: #cc3333
    Sass: $aaa-red

  • HEX: #6d6e70
    Sass: $icon-color

  • HEX: #aaaaaa
    Sass: $icon-hover