Style Guide

Powered by the team at UpTrending

Colors

$primary1 #404040
$primary2 #3996AA
$primary3 #F36100
$body1 #004C54
$body2 #4D4D4D
$body3 #F9F9F9

Typography

Aa Zz

Heebo

H1 header

(>1025px) 4.5rem/1em, (1024-768px) 3.75rem/1em, (<767px) 1.875rem/1em

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) 18px/24px, (<767px) 18px/24px

Body

16px/1.5em

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
Column 1 Title Item 1 Column 2 TitleItem 1 Column 3 TitleLorem ipsum dolor sit amet, consectetur adipiscing elit
Column 1 Title Item 2 Column 2 Title Item 2 Column 3 Title Mauris semper, eros eget interdum finibus
Column 1 Title Item 3 Column 2 Title Item 3 Column 3 TitleLorem ipsum dolor sit amet, consectetur adipiscing elit
Column 1 Title Item 4 Column 2 Title Item 4 Column 3 TitleMauris semper, eros eget interdum finibus
Column 1 Title Item 5 Column 2 Title Item 5 Column 3 TitleLorem ipsum dolor sit amet, consectetur adipiscing elit
Column 1 Title Item 6 Column 2 Title Item 6 Column 3 TitleMauris 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