Typography
Fonts
The default site font is Solitas Serif. Other fonts in the Solitas Serif Family of Fonts can be used by applying a class to the text as needed.
<span class="solitasSerifNormBook">Solitas Serif Norm Book</span><span class="solitasSerifNormBookIt">Solitas Serif Norm Book It</span><span class="solitasSerifNormRegular">Solitas Serif Norm Regular</span><span class="solitasSerifNormDemi">Solitas Serif Norm Demi</span><span class="solitasSerifNormBold">Solitas Serif Norm Bold</span><span class="solitasNormLight">Solitas Norm Light</span><span class="solitasNormBook">Solitas Norm Book</span><span class="solitasNormBookIt">Solitas Norm Book It</span><span class="solitasNormDemi">Solitas Norm Demi</span><span class="signatureScript">Signature Script</span>Typography
Heading 1 - Solitas Serif 36px,
line-height: 1.125, letter-spacing: -1px
<h1>Heading 1</h1> OR <div class="h1">Heading 1</div>Heading 2 - Solitas Serif Norm Regular 40px,
line-height: 1.125
<h2>Heading 2</h2> OR <div class="h2">Heading 2</div>Heading 3 - Solitas Serif 20px,
line-height: 1.125
<h3>Heading 3</h3> OR <div class="h3">Heading 3</div>Heading 4 - Solitas Serif 16px,
line-height: 1.125
<h4>Heading 4</h4> OR <div class="h4">Heading 4</div>Heading 5 - Solitas Serif 16px,
line-height: 1.125
<h5>Heading 5</h5> OR <div class="h5">Heading 5</div>Hero Script - Solitas Serif 16px,
line-height: 1.125
<h5>Heading 5</h5> OR <div class="h5">Heading 5</div>Body Text: Solitas Book, 16px, line-height 1.5
p + p: margin-bottom 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante erat, rutrum non arcu sed, ornare elementum ante. Aliquam bibendum justo vitae placerat malesuada. Aliquam dignissim sem eu sollicitudin euismod. Mauris sodales lorem a nulla finibus, in euismod lorem iaculis.
Sed semper tincidunt placerat. Cras suscipit dui orci, eu fermentum metus rhoncus sed. Nunc maximus feugiat ultrices. Donec non purus metus. Sed ut magna in nisi sollicitudin elementum at ac lorem. Morbi in dui pellentesque, congue ante sit amet, dignissim ligula. Curabitur eu quam a sapien convallis aliquam nec vitae dui. Ut cursus mauris quis metus gravida consequat. Vivamus a sapien eget dui egestas ullamcorper vel tristique lectus. Quisque mollis diam et odio lacinia, id faucibus elit congue.
Blockquotes
"Solitas Norm, 18px, line-height 1.125 My rep took my ideas and ran with them. She came up with a concept we later implmented, it has increased efficiency tenfold. In doing so, we have saved countless hours of labor and saved thousands of dollars on material costs."
Grid
Hanson uses the Bootstrap 4 12 column grid system. To read about how to use the bootstrap 4 grid system, please review the bootstrap 4 documentation here: https://getbootstrap.com/docs/4.5/layout/grid/
Below is a basic example of the grid layout. There are alot of variations that can be made for laying out a grid. This example does not show a breakpoint applied to the columns. To make the columns expand to full width at specific breakpoints you can add the keywords xs, sm, md, lg, xl to the grid classes. For example .col-md-6 will be 6 columns wide for the medium breakpoint and above, below the medium breakpoint it will become 12 columns which is full width. Please review the documentation for a more in depth look at how to use the grid system.
