Style Guide

Powered by the team at UpTrending

Colors

$brand-primary #0B5A93
$brand-secondary #F06A4D
$brand-tertiary #3EDBFF
$gray-dark #122938
$gray #36424A
$gray-lightest #F7F7F7

Typography

Aa Zz

Montserrat

Aa Zz

Work Sans, Light

H1 header

(>1025px) 72px/72px, (1024-768px) 60px/60px, (<767px) 30px/30px

H2 header

(>1025px) 36px/36px, (1024-768px) 30px/30px, (<767px) 24px/30px

H3 header

(>1025px) 30px/30px, (1024-768px) 24px/30px, (<767px) 21px/28px

H4 header

(>1025px) 24px/24px, (1024-768px) 21px/28px, (<767px) 18px/24px
H5 header
(>1025px) 21px/28px, (1024-768px) 21px/28px, (<767px) 18px/24px
H6 header
(>1025px) 18px/24px, (1024-768px) 21px/28px, (<767px) 18px/24px

Body

16px/24px

Lead Body

(>1025px) 21px/30px, (1024-768px) 21px/30px, (<767px) 18px/24px
Bullet List (unordered)
  • List item goes here
  • Another list item goes here that wraps to two lines lorem ipsum dolor sit amet
  • List item goes here
  • Another list item goes here
  • List item goes here
  • Another list item goes here
Bullet List (ordered)
  1. List item goes here
  2. Another list item goes here that wraps to two lines lorem ipsum dolor sit amet
  3. List item goes here
  4. Another list item goes here
  5. List item goes here
  6. Another list item goes here
Block Quote Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id. Vivamus vestibulum nibh fermentum mauris aliquet, vitae tincidunt ante pellentesque. Integer malesuada posuere sagittis.

Cras non lacinia augue. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est. Nulla at nibh a nisl consequat suscipit quis id neque. Nunc interdum ipsum dolorat ante semper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id.

Forms

Please provide a valid email address
Select Dropdown
  • 1
  • 2
  • 3
  • 4

Tables

Column 1 Title Column 2 Title Column 3 Title
Item 1 Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 2 Item 2 Mauris semper, eros eget interdum finibus
Item 3 Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 4 Item 4 Mauris semper, eros eget interdum finibus
Item 5 Item 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 6 Item 6 Mauris semper, eros eget interdum finibus

Icons

.icon-facebook-circle .icon-facebook
.icon-twitter-circle .icon-twitter
.icon-linkedin-circle .icon-linkedin
.icon-google-plus-circle .icon-google-plus
.icon-youtube-circle .icon-youtube
.icon-plus-circle .icon-plus
.icon-minus-circle .icon-minus
.icon-check-circle .icon-check
.icon-close-circle .icon-close
.icon-info .icon-info-circle
.icon-question-circle .icon-question
.icon-play-circle .icon-play
.icon-play
.icon-chevron-up
.icon-chevron-right
.icon-chevron-left
.icon-chevron-down
.icon-search
.icon-user
.icon-users