Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien. Vestibulum non molestie ipsum.
Style Guide
Powered by the team at HUSL
Breakpoints
Mobile
Breakpoint: <767px
Left/right margins: 20px
Gutter: 20px
Columns: 2
Tablet
Breakpoint: 1024-768px
Left/right margins: 30px
Gutter: 30px
Columns: 6
Laptop
Breakpoint: 1025-1440px
Left/right margins: 100px
Gutter: 30px
Columns: 12
Desktop
Breakpoint: 1441-1920px
Max-width content area: 1620px
Left/right margins: 150px
Gutter: 40px
Columns: 12
Colors
$brand-purple
$brand-blue-light
$brand-blue
$brand-teal (aka $brand-green)
$brand-yellow
$brand-orange
$brand-pink
$gray-darkest
$gray
$gray-light
Typography
H1 header
(<767px) 30px/30px, (1024-768px) 48px/48px, (1025-1440px) 60px/60px, (1441-1920px) 72/72px
H2 header
(<767px) 24px/30px, (1024-768px) 30px/30px, (1025-1440px) 30px/30px, (1441-1920px) 48/48px
H3 header
(<767px) 21px/28px, (1024-768px) 24px/30px, (1025-1440px) 24px/30px, (1441-1920px) 30/30px
H4 header
(<767px) 18px/28px, (1024-768px) 21px/30px, (>1025px) 21px/30px, (1441-1920px) 24/30px
H5 header
(<767px) 18px/28px, (1024-768px) 18px/28px, (1025-1440px) 21px/30px, (1441-1920px) 21/30px
H6 header
(<767px) 16px/24px, (1024-768px) 16px/24px, (1025-1440px) 16px/24px, (1441-1920px) 18/30px
Body, Large (aka Lead Body)
(<767px) 18px/24px, (1024-768px) 21px/30px, (1025-1440px) 21px/30px, (1441-1920px) 21/30px
Body
(<767px-1440px) 16px/24px, (1441-1920px) 18/30px
Body, Small
(<767px-1440px) 14px/24px, (1441-1920px) 16/34px
- Unordered bullet list item goes here
- Unordered bullet list item lorem ipsum
- Unordered list item goes here
- Ordered bullet list item
- Second bullet list item
- Ordered bullet list item
- Graphic bullet list item goes here
- Graphic bullet list item goes here
- Graphic bullet list item goes here
Block quote example. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est.
John Doe, Company Name
Forms
Tables
| Column 1 Title | Column 2 Title | Column 3 Title |
|---|---|---|
| Item No | Item No | Item No |
| Item No | Item No | Item No |
| Item No | Item No | Item No |
| Item No | Item No | Item No |
| Item No | Item No | Item No |
| Item No | Item No | Item No |
| Item No | Item No | Item No |
Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien.
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien. Vestibulum non molestie ipsum.
Accordion 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum.
Accordion 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio.