Top of page
Skip to main content
Main content

Typography

Lead Text:

Lead text is slightly larger and typically appears at the beginning of a page's content.

Paragraph Text:

This appearance is specifically for Cascade WYSIWYG editor areas where users can input rich text into a variety of blocks.

Sometimes WYSIWYG styles have a more or less distinct look and feel than generic text across the website, and this can be used to reflect those styles.

WYSIWYG content should never contain <h1> (heading level one).

Nibh nequ odi risus pellentesque consectetur etiam arcu vel vel curabitur ultrices. Ante neque blandit ligula vel eu finibus justo mauris proin dolor. Adipiscing mauris pellentesque consectetur ultrices ipsum et finibus dictum lacinia et. Urna augue aenean dolor condimentum. Eget ac risus finibus nullam pretium neque dui eget.

Heading Level One

Extra Large (XL) viewport
Large (LG) viewport
Medium (MD) viewport
Small (SM) viewport
Extra Small (XS) viewport
h1 {
  font-size: 4.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169; letter-spacing: -.03em;
}
h1 {
  font-size: 4.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.03em;
}
h1 {
  font-size: 3rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.03em;
}
h1 {
  font-size: 3rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.03em;
}
h1 {
  font-size: 2.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.03em;
}

Heading Level Two

Extra Large (XL) viewport
Large (LG) viewport
Medium (MD) viewport
Small (SM) viewport
Extra Small (XS) viewport
h2 {
  font-size: 2.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #b58500;
  letter-spacing: -.02em;
}
h2 {
  font-size: 2.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #b58500;
  letter-spacing: -.02em;
}
h2 {
  font-size: 2.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #b58500;
  letter-spacing: -.02em;
}
h2 {
  font-size: 2.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #b58500;
  letter-spacing: -.02em;
}
h2 {
  font-size: 1.75rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #b58500;
  letter-spacing: -.02em;
}

Heading Level Three

Extra Large (XL) viewport
Large (LG) viewport
Medium (MD) viewport
Small (SM) viewport
Extra Small (XS) viewport
h3 {
  font-size: 2rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.02em;
}
h3 {
  font-size: 2rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.02em;
}
h3 {
  font-size: 1.75rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.02em;
}
h3 {
  font-size: 1.75rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.02em;
}
h3 {
  font-size: 1.5rem;
  font-family: "Spectral", serif;
  font-weight: bold;
  color: #012169;
  letter-spacing: -.02em;
}

Heading Level Four

Extra Large (XL) viewport
Large (LG) viewport
Medium (MD) viewport
Small (SM) viewport
Extra Small (XS) viewport
h4 {
  font-size: 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #b58500;
  letter-spacing: .05em;
}
h4 {
  font-size: 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #b58500;
  letter-spacing: .05em;
}
h4 {
  font-size: 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #b58500;
  letter-spacing: .05em;
}
h4 {
  font-size: 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #b58500;
  letter-spacing: .05em;
}
h4 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #b58500;
  letter-spacing: .05em;
}
Heading Level Five
Extra Large (XL) viewport
Large (LG) viewport
Medium (MD) viewport
Small (SM) viewport
Extra Small (XS) viewport
h5 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h5 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h5 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h5 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h5 {
  font-size: 1.15rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
Heading Level Six
Extra Large (XL) viewport
Large (LG) viewport
Medium (MD) viewport
Small (SM) viewport
Extra Small (XS) viewport
h6 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
letter-spacing: .05em;
}
h6 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h6 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h6 {
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}
h6 {
  font-size: 1rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #012169;
  letter-spacing: .05em;
}

Document Extenstion Icons:

Links to documents within can be enhanced by attaching the .doc-icon class to the parent element. This will append the corresponding Font Awesome icon.

<ul class="doc-icon">

Bulleted List:

<ul class="list-unordered">
  • Purus diam mattis diam
  • Placerat ac ultrices mi
  • Vel nibh adipiscing
  • Urna congue tincidunt
    • Fringilla lorem nunc sed
    • Ante ut tincidunt ante
  • Vulputate tempor sit

Mixed List:

  1. Ac arcu sit fringilla
  2. Et mollis finibus
    • Curabitur enim odio eget
    • Lorem id nullam
  • Viverra vulputate ante curabitur
  • Justo vulputate consectetur
    1. Arcu vehicula dictum sapien
    2. Amet finibus id lorem

Number List:

<ul class="list-ordered">
  1. Aenean augue sit placerat
  2. Rhoncus risus congue nunc
  3. Lorem vel vivamus etiam
  4. Vehicula elit urna laoreet
  5. Laoreet lorem proin
    1. Ligula porta dui porta
    2. Proin mi condimentum scelerisque
    3. Etiam lacinia tincidunt
  6. Placerat mauris sit lacinia
  7. Diam congue tincidunt nulla
  8. Arcu venenatis arcu ultrices
  9. Consectetur laoreet placerat risus
  10. Et pellentesque mollis vehicula
  11. Nibh rhoncus nullam
  12. Congue eu placerat
  13. Facilisi mollis facilisi

Check List:

<ul class="list-checks">
  • Porta blandit fringilla tempor
  • Amet viverra dolor
  • Neque dui viverra
  • Sapien purus porta
  • Sed odio ultrices dui
    • At nullam laoreet sit
    • Vulputate facilisi finibus odio
    • Tincidunt suscipit lorem
  • Condimentum porta finibus
  • Justo elit proin ac

Checkbox List:

<ul class="list-checkbox">
  • Proin porta id
  • Vehicula ipsum mi
  • Vel vehicula scelerisque adipiscing
  • Nibh ac diam metus
  • Ut sed proin neque
    • Consecteturipsumlorem
    • Laciniaelitblandit
    • Portaatetiam
  • Mattis placerat amet adipiscing
  • Amet ultrices proin venenatis

Note about lists: Only first level lists will have the styles appear. Every nested list needs a class applied (.list-ordered) in order to enable the selected style.

Two column list Small and up

<ol class="list-ordered list-cols list-cols-2">
  1. Pretium dolor amet
  2. Mi facilisis porta
  3. Enim mattis aenean neque
  4. Nulla diam sit mauris
  5. Nibh fringilla vivamus
  6. Elit sapien mauris blandit
  7. Nulla facilisis vulputate
  8. Dui ut laoreet

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Facili siscelerisque amet
  2. Amet curabitur facilisi
  3. Justo enim viverra
  4. Vulputate neque rhoncus
  5. Venenatis ligula adipiscing neque
  6. Nulla mollis enim
  7. Venenatis et id ac
  8. Vehicula curabitur sed porta
  9. Proin adipiscing facilisi aenean
  10. Pellentesque purus curabitur
  11. Eget mi venenatis nullam
  12. Placerat vel at
  13. Facilisi diam urna laoreet
  14. Congue lorem mauris sed
  15. Adipiscing blandit lorem neque
  16. Rhoncus sit scelerisque adipiscing

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Facilisi risus fringilla dolor
  2. Tempor purus augue
  3. Scelerisque tellus aenean suscipit
  4. Ante blandit congue urna
  5. Suscipit mollis sit tincidunt
  6. Ipsum condimentum ultrices sit
  7. Ligula suscipit arcu
  8. Ut mollis suscipit eget
  9. Facilisis lorem enim
  10. Mattis vivamus elit ultrices
  11. Vivamus rhoncus fringilla
  12. Laoreet sit suscipit
  13. Id facilisis viverra
  14. Mi ipsum mattis placerat
  15. At mauris elit
  16. Arcu et ac
  17. Mattis dictum arcu
  18. Porta ipsum finibus
  19. Enim vivamus justo purus
  20. Scelerisque nibh laoreet
  21. Vel venenatis viverra lacinia
  22. Finibus elit vulputate
  23. Curabitur fringilla porta
  24. Justo at sapien nullam

Buttons:

default primary secondary success danger warning info light dark link
 
default primary secondary success danger warning info light dark link

Preformatted Text:

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}

Various Text Formatting:

  • the a tag
  • the abbr tag
  • the acronym tag
  • the b tag
  • the big tag
  • the cite tag
  • the code tag
  • the del tag
  • the s tag
  • the dfn tag
  • the em tag
  • the i tag
  • the ins tag
  • the kbd tag
  • the q tag
  • the samp tag
  • the small tag
  • the span tag
  • the strong tag
  • the sub tag
  • the sup tag
  • the tt tag
  • the var tag
  • the mark tag