Style Guide
Powered by UpTrending Team
Colors
$brand-blue
$brand-orange
$brand-green
$brand-teal
$brand-gold
$gray-darkest
$gray
$gray-light
Typography
h1 Header
(>1025px) 48px/48px, (1024-768px) 36px/36px, (<767px) 32px/36px
H2 Header
(>1025px) 32px/36px, (1024-768px) 30px/30px, (<767px) 24px/30px
H3 Header
(>1025px) 24px/32px, (1024-768px) 21px/28px, (<767px) 21px/28px
H4 Header
(>1025px) 24px/32px, (1024-768px) 21px/28px, (<767px) 21px/28px
H5 Header
(>1025px) 24px/32px, (1024-768px) 21px/28px, (<767px) 21px/28px
H6 Header
(>1025px) 20px/28px, (1024-768px) 18px/24px, (<767px) 18px/24px
Lead Body
(>1025px) 18px/24px, (1024-768px) 18px/24px, (<767px) 18px/24px
Body
16px/28px
- In hac habitasse platea dictumst. Suspendisse aliquet massa nibh, ut commodo turpis congue at. Nam tempor urna eget maximus tincidunt.
- Ordered list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci.
- Fusce et magna sed orci laoreet pellentesque nec in purus.
- Ordered list item goes here.
- Ordered list item 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.
- Ordered list item goes here.
Graphic bullet list item goes here
Graphic bullet 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
“I always have a positive experience when dealing with ChiroTouch but today was exceptional. I had a problem and they went above and beyond to try and find a solution for me. The effort was definitely appreciated.”
Irondequoit Chiropractic Center
Buttons & Links
Split CTAs
Split CTAs – Hover
Hyperlink Example
Forms
Tables
| Column 1 Titlte | Column 2 Title | Column 3 Title |
|---|---|---|
| Item 1 | Item 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Item 2 | Item 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Item 3 | Item 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Item 3 | Item 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Item 3 | Item 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Item 3 | Item 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Item 3 | Item 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Navigation
Navigation
Tab 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.
Tab 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. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien. Vestibulum non molestie ipsum.
Tab 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. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien. Vestibulum non molestie ipsum.
Tab 4 – 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.
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.
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.
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.