Section 10.1 #Typography.Headings
Headings

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5
This is an h6
Source: sass/utilities/_typography.scss, line 5

Section 10.2 #Typography.Paragraphs
Paragraphs

Paragraph

Note: Our paragraphs have a default margin-bottom of 1rem

Source: sass/utilities/_typography.scss, line 17

Section 10.3 #Typography.Utilities
Typography Utilities

Below are some of our typography utilities.

Source: sass/utilities/_typography.scss, line 30

Section 10.3.1 #Typography.Utilities.Case
Case

Case encompasses both word and sentence case.

Example:

This is uppercase.

This is lowercase.

This is capitalize.

This IS SENTENCE caSe.

Markup:

<p class="text--uppercase">This is uppercase.</p>
<p class="text--lowercase">This is lowercase.</p>
<p class="text--capitalize">This is capitalize.</p>
<p class="text--sentencecase">This IS SENTENCE caSe.</p>
Source: sass/utilities/_typography.scss, line 86

Section 10.3.2 #Typography.Utilities.Color
Color

text-{ color }, text-{ color }--hover combines our greyscale, brand colors, and secondary colors maps.

Greyscale
text-white text-lighter text-light-mid text-light
text-base text-dark text-black
Brand colors
text-navy text-skyblue text-med-blue text-beige
text-peach text-salmon text-brown text-orange

Example:

Brown text, Cyan text on hover, navy text, red on hover

Markup:

<div class="card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <p>
      <span class="text-brown">Brown text</span>,
      <span class="text-cyan--hover">Cyan text on hover</span>,
      <span class="text-navy text-red--hover">navy text, red on hover</span>
    </p>
  </div>
</div>
Source: sass/utilities/_typography.scss, line 36

Section 10.3.3 #Typography.Utilities.General
General

General utilities add class-based css transforms like uppercase and bold. See the chart below for the full list.

General
text--underline text-underline--hover text--bold text--nowrap
text--center text--right text--capitalize text--uppercase
text--lowercase text--sentencecase text--italic
NOTE: A flex-- utility should be used were possible.

The text-underline--hover class will add an animated underline to links or any element you add the class to. By default, the underline color is the standard link color in the platform(light blue). If you want to change the color of the element and the underline on hover you can add a text-{color}--hover class. This will change the color of the underline as well as the element with the hover color class.

Example:

Text underline on hover standard.

Text underline on hover red.

Markup:

<div class="card block-container mb-3 flex--align-center">
  <div class="block">
    <p>Text underline on hover <a class="text-underline--hover">standard</a>.</p>
    <p>Text underline on hover <a class="text-underline--hover text-red--hover">red</a>.</p>
  </div>
</div>
Source: sass/utilities/_typography.scss, line 98

Section 10.3.4 #Typography.Utilities.Sizing
Sizing

text--size-{ size } leverages percetages for smaller or larger text. The defaut font-size is 1rem.

Text sizing
text--size-xxs 50%
text--size-xs 70%
text--size-sm 85%
text--size-md 115%
text--size-lg 125%
text--size-xl 150%
text--size-xxl 200%

Example:

Text xl

Markup:

<div class="card block-container mb-3 flex--align-center">
  <div class="block">
    <p class="text--size-xl">Text xl</p>
  </div>
</div>
Source: sass/utilities/_typography.scss, line 63

Section 10.3.5 #Typography.Utilities.TextShadow
Text Shadow

You can add a text-shadow to an element using colors from our greyscale map.

Greyscale
text--shadow-white text--shadow-lighter text--shadow-light-mid text--shadow-light
text--shadow-base text--shadow-dark text--shadow-black

Example:

This text has a base color shadow.

Markup:

<p class="text--shadow-base">This text has a base color shadow.</p>
Source: sass/utilities/_typography.scss, line 127