Typography
Type utility classes work together with size, line-height, weights, decorations and alignment to offer versatility across various content use cases.
Heading
Use <h1> - <h6>. The .h1 - .h6 can be used to
override an
element's
default size. The display-1, display-2 and display-3 offer larger sizes
for marketing use.
| Class value | Mobile size | Desktop size | Weight |
|---|---|---|---|
display-1 |
56px | 64px | 600 |
display-2 |
48px | 56px | 600 |
display-3 |
40px | 48px | 600 |
h1 |
32px | 40px | 600 |
h2 |
24px | 32px | 600 |
h3 |
20px | 24px | 600 |
h4 |
18px | - | 600 |
h5 |
16px | - | 600 |
h6 |
14px | - | 600 |
Display 1
Display 2
Display 3
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h4 class="display-1">Display 1<h4> <h4 class="display-2">Display 2<h4> <h4 class="display-3">Display 3<h4> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Lead
Use .text-lead for a leading text.
This is a lead text. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.
This is a body text. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.
<p class="text-lead>...</p>
Paragraph
The <p> tag inherits its font-size and color from the parent element. The default body font
size is 16px with a line-height of 1.5.
| Tag | Font size | Line height |
|---|---|---|
| <p> | inherit | inherit |
This is a body text. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.
<p>...</p>
Line Height
| Class value | Line height |
|---|---|
lh-default
| 1.5 |
lh-condensed |
1.25 |
lh-condensed-ultra |
1 |
lh-0 |
0 |
1.5
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
1.25
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
1
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
0
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<p class="lh-default">...</p> <p class="lh-condensed">...</p>
Text Styles
Typographic weights and styles can be adjusted with utility styles.
| Class value | Property style |
|---|---|
text-weight-light |
font-weight: 300 |
text-weight-normal |
font-weight: 400 |
text-weight-semibold |
font-weight: 500 |
text-weight-bold |
font-weight: 600 |
text-emphasis |
font-style: italic |
text-strong |
font-weight: 500 |
text-uppercase |
text-transform: uppercase |
text-decoration-none |
text-decoration: none |
text-decoration-underline |
text-decoration: underline |
text-decoration-crossout |
text-decoration: line-through |
text-small |
font-size: 12px |
text-align-left |
text-align: left |
text-align-center |
text-align: center |
text-align-right |
text-align: right |
Light weight
Normal weight
Semi-bold weight
Bold weight
Emphasis
Strong
Uppercase
Underline
Cross out
Small
Left align
Center align
Right align
<p class="text-weight-light">Light weight</p> <p class="text-weight-semibold">Semi-bold weight</p> <p class="text-weight-bold">Bold weight</p> <p class="text-emphasis">Emphasis</p>
Link
Use text style utility classes to override the default link style. For example, text-decoration-none
can be used to eliminate the underline.
<a href="#">Link default</a> <a class="text-decoration-none blue-400" href="#">Link no underline</a>
Horizontal Rule
Use the <hr> tag to create horizontal rule.
<hr>
Blockquote & Cite
To add a quote, use the blockquote and cite tags.
| Tag | Font size | Font weight | Margin |
|---|---|---|---|
<blockquote> |
22px | 300 | 2rem 0rem |
<cite> |
14px | 300 | 1rem 0rem |
"This is a quote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
Citation
"This is a body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
<blockquote>
<p>...</p>
<cite>...</cite>
</blockquote>
List
The list utility class list-style-none can be used to eliminate the list style.
Ordered list
- List item 1
- List item 2
- Nested ordered list item 1
- Nested ordered list item 2
- List item 3
- List item 1
- List item 2
- Nested ordered list item 1
- Nested ordered list item 2
- List item 3
<ol class="list-style-none"> <li>...</li> <li>... <ol class="list-style-none"> <li>...</li> <li>...</li> </ol> </li> <li>...</li> <ol>
Unordered list
- List item a
- List item b
- Nested unordered list item a
- Nested unordered list item b
- List item c
<ul>
<li>...</li>
<li>...
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>...</li>
<ul>
Definition list
- Lorem ipsum dolor
- Consectetur adipiscing elit, sed do eiusmod tempor.
- Lorem ipsum dolor
- Consectetur adipiscing elit, sed do eiusmod tempor.
<dl>
<dt>...</gt>
<dd>...</dd>
</dl>
Code & Pre
Code
<div>Code</div>
<code>...</code>
Pre
<pre>Code</pre>
<pre>...</pre>
Kbd
Keyboard shortcut for paste on Mac: command + v
<kbd>...</kbd>
Mark
You can highlight by surrounding the desired text with the <mark> tag.
<mark>...</mark>