
Style Guide
Powered by the team at HUSL
Colors
.text/.bg-primary1
.text/.bg-primary2
.text/.bg-primary3
.text/.bg-primary4
.text/.bg-primary5
.text/.bg-body1
.text/.bg-body2
.text/.bg-body3
H1 header
(>1025px) 72px/72px, (1024-768px) 60px/60px, (<767px) 30px/30px 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.
H2 header
(>1025px) 48px/48px, (1024-768px) 30px/30px, (<767px) 24px/30px 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.
H3 header
(>1025px) 30px/30px, (1024-768px) 24px/30px, (<767px) 21px/28px 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.
H4 header
(>1025px) 24px/24px, (1024-768px) 21px/28px, (<767px) 18px/24px 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.
H5 header
(>1025px) 21px/28px, (1024-768px) 21px/28px, (<767px) 18px/24px 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.
H6 header
(>1025px) 18px/24px, (1024-768px) 18px/24px, ( <767px) 18px/24px 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.
Lead Body
(>1025px) 21px/30px, (1024-768px) 21px/30px, (<767px) 18px/24px 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.
Body
16px/24px 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.
Bullet List (unordered)
- List Item goes here
- Another list item goes here that wraps to two lines lrem ipsum dolor sit amet
- List Item goes here
Bullet List (ordered)
- List Item goes here
- Another list item goes here that wraps to two lines lrem ipsum dolor sit amet
- 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.”
– John Doe
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.
Table
Column 1 Title | Column 2 Title | Column 3 Title |
---|---|---|
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
Navigation
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.