Style Guide
Use this template a reference to your brand styles
Colors
Primary
Secondary
Tertiary
Custom Color
Typography
When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
Display-1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
Display-2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
Display-3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
Display-4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
H1 - Prefacing Title - Lorem ipsum dolor sit amet
H2 - Title - Header - Lorem ipsum dolor sit amet, consectetur adipisicing elit
H3 - Subtitle - Secondary Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit
H4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
H5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
H6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
p - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
- li - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- li - Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis.
- li - Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
- li - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- li - Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis.
- li - Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
p.small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
p.large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
p.blog - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
“Blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.”
This is a link lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien magna. Morbi ac arcu eu tortor condimentum pellentesque.
Buttons
Form Styles
Form Title
Custom Section
Add in your own sections