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>

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

  1. List item 1
  2. List item 2
    1. Nested ordered list item 1
    2. Nested ordered list item 2
  3. List item 3
  1. List item 1
  2. List item 2
    1. Nested ordered list item 1
    2. Nested ordered list item 2
  3. 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>