font-family: 'Mulish', 'Helvetica Neue', Helvetica, sans-serif;font-weight: 800;
| viewport < 1000px | viewport >= 1000px | line-height | |
|---|---|---|---|
| .h1 | 32px | 2rem | 60px | 3.75rem | (68 / 60) |
| .h2 | 30px | 1.875rem | 50px | 3.125rem | (68 / 60) |
| .h3 | 28px | 1.75rem | 40px | 2.5rem | (48 / 40) |
| .h4 | 24px | 1.5rem | 32px | 2rem | (42 / 32) |
| .h5 | 20px | 1.25rem | 24px | 1.5rem | (34 / 24) |
| .h6 | 16px | 1rem | 20px | 1.25rem | (34 / 20) |
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>global-scss/_type.scss,
line 3
By default, headings are left-aligned. Center and right alignment are also available by applying additional modifier classes.
<h3 class="h3 {{modifier_class}}">Heading 3</h3>global-scss/_type.scss,
line 44
The default color for headings is #1a1a1a. White and gray are also available by applying additional modifier classes.
<h3 class="h3 {{modifier_class}}">Heading 3</h3>global-scss/_type.scss,
line 59
Adds a horizontal bar atop a heading.
<h1 class="h1 -center -line-above">Heading 1</h1>
<h3 class="h3 -center -line-above">Heading 3</h3>
<h6 class="h6 -center -line-above">Heading 6</h6>global-scss/_type.scss,
line 74
font-family: 'Mulish', 'Helvetica Neue', Helvetica, sans-serif;font-size: 18px;font-size: 1.125rem;font-weight: normal;line-height: 1.6; /* (~28.8px) smaller viewports */line-height: 1.77; /* (~31.86px) larger viewports */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend.
Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. </p>
<p>Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. </p>global-scss/_type.scss,
line 274
By default, paragraphs are left-aligned. Center and right alignment are also available by applying additional modifier classes.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p class="{{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>global-scss/_type.scss,
line 297
The default color for paragraphs is #1a1a1a. White and gray are also available by applying additional modifier classes.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p class="{{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>global-scss/_type.scss,
line 312
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="wysiwyg-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<ul>
<li>Lorem ipsum dolor</li>
<li>Sit amet, consectetur
<ul>
<li>Lorem ipsum dolor
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
</li>
<li>Sit amet, consectetur</li>
<li>Adipisicing elit, sed</li>
<li>Do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna</li>
<li>Aliqua. Ut enim</li>
</ul>
</li>
<li>Adipisicing elit, sed</li>
<li>Do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna</li>
<li>Aliqua. Ut enim</li>
</ul>
</div>global-scss/_type.scss,
line 359
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="wysiwyg-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<ol>
<li>Lorem ipsum dolor</li>
<li>Sit amet, consectetur
<ol>
<li>Lorem ipsum dolor</li>
<li>Sit amet, consectetur</li>
<li>Adipisicing elit, sed</li>
<li>Do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna</li>
<li>Aliqua. Ut enim</li>
</ol>
</li>
<li>Adipisicing elit, sed</li>
<li>Do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna</li>
<li>Aliqua. Ut enim</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>global-scss/_type.scss,
line 396
Those people who think they know everything are a great annoyance to those of us who do.
<blockquote>
<p>Those people who think they know everything are a great annoyance to those of us who do.</p>
</blockquote>global-scss/_type.scss,
line 580