Section 10 #Typography
Typography

Section 10.1 #Typography.Headings
Headings

This is an h1This is an h2This is an h3This is an h4This is an h5This 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