Section 11.1 #Typography.Headings
Headings

Example:

Heading 1

Roboto Slab, 500, #003f70

Heading 2

Roboto, sans-serif, 500, #666

Heading 3

Roboto, sans-serif, 500, #666

Heading 4

Roboto, sans-serif, 500, #666

Heading 5

Roboto, sans-serif, 500, #666

Heading 6

Roboto, sans-serif, 500, #666

Markup:

<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <h1>Heading 1</h1>
  </div>
  <div class="block block-6">
    <p class="mb-0">Roboto Slab, 500, #003f70</p>
  </div>
</div>
<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <h2>Heading 2</h2>
  </div>
  <div class="block block-6">
    <p class="mb-0">Roboto, sans-serif, 500, #666</p>
  </div>
</div>
<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <h3>Heading 3</h3>
  </div>
  <div class="block block-6">
    <p class="mb-0">Roboto, sans-serif, 500, #666</p>
  </div>
</div>
<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <h4>Heading 4</h4>
  </div>
  <div class="block block-6">
    <p class="mb-0">Roboto, sans-serif, 500, #666</p>
  </div>
</div>
<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <h5>Heading 5</h5>
  </div>
  <div class="block block-6">
    <p class="mb-0">Roboto, sans-serif, 500, #666</p>
  </div>
</div>
<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <h6>Heading 6</h6>
  </div>
  <div class="block block-6">
    <p class="mb-0">Roboto, sans-serif, 500, #666</p>
  </div>
</div>
Source: sass/utilities/_typography.scss, line 5

Section 11.2 #Typography.Paragraphs
Paragraphs

Example:

Paragraph

Inter UI, sans-serif, 1rem

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

Markup:

<div class="pui-card block-container mb-3 flex--align-center">
  <div class="block block-6">
    <p>Paragraph</p>
  </div>
  <div class="block block-6">
    <p class="mb-0">Inter UI, sans-serif, 1rem</p>
    <p class="mb-0"><strong>Note:</strong> Our paragraphs have a default margin-bottom of 2rem</p>
  </div>
</div>
Source: sass/utilities/_typography.scss, line 59

Section 11.3 #Typography.Utilities
Typography Utilities

Below are some of our typography utilities.

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

Section 11.3.1 #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
Secondary colors
text-red text-olive text-purple text-yellow
text-pink text-cyan text-violet text-blue
text-green text-teal text-gold

Example:

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

Markup:

<div class="pui-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 80

Section 11.3.2 #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--uppercase text--underline text--bold text--nowrap
text--center text--right
text-underline--hover
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="pui-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 136

Section 11.3.3 #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="pui-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 113

Section 11.3.4 #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 164