Main content

Interior Level 1 short-width

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).

Consectetur ipsum aenean facilisis neque metus pretium pellentesque. Suscipit eget enim nullam eu porta pellentesque lorem etiam sapien. Diam ultrices nibh facilisis pellentesque ligula. Elit lorem pretium mattis enim ultrices odio ut. Risus consectetur sapien neque vivamus etiam purus suscipit ante ut nunc curabitur urna ipsum vivamus.

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">
  • Blandit proin diam ligula
  • Etiam sit facilisis porta
  • Et ac consectetur
  • Mollis neque pellentesque
    • Viverra tellus facilisis
    • Id purus condimentum
  • Neque viverra eu

Mixed List:

  1. Enim dictum sit
  2. Condimentum nullam dui dolor
    • Vulputate lacinia etiam
    • Venenatis amet metus urna
  • Nulla curabitur sed mollis
  • Enim curabitur porta
    1. Porta pretium ultrices
    2. Pretium neque neque

Number List:

<ul class="list-ordered">
  1. Facilisi facilisi nunc
  2. Arcu eget consectetur amet
  3. Nulla finibus ipsum
  4. Metus mauris neque
  5. Augue ligula mattis
    1. Vivamus ut ac
    2. Dictum curabitur diam finibus
    3. Elit odio metus
  6. Mauris facilisis viverra nunc
  7. Sapien viverra placerat
  8. Aenean condimentum neque finibus
  9. Mi vulputate placerat
  10. Lorem consectetur porta
  11. Odio facilisis at nullam
  12. Nullam consectetur dictum
  13. At finibus venenatis

Check List:

<ul class="list-checks">
  • Lorem vehicula facilisi
  • Dictum viverra augue condimentum
  • Ut purus enim
  • Nunc proin condimentum
  • Diam dolor id
    • Sapien nunc ut
    • Porta pellentesque pellentesque diam
    • Augue metus tellus condimentum
  • Finibus nulla lorem
  • Vulputate tincidunt placerat nulla

Checkbox List:

<ul class="list-checkbox">
  • Id sapien pellentesque
  • Vehicula nunc eu nullam
  • Eget lorem id
  • Metus nunc vehicula
  • Vel dictum viverra
    • Ante mi viverra
    • Pellentesque mollis etiam
    • Viverra risus elit ipsum
  • Blandit finibus lacinia nunc
  • Scelerisque mattis nulla sapien

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. Metus blandit proin finibus
  2. Congue fringilla tempor
  3. Tempor dictum nulla
  4. Metus augue facilisi enim
  5. Nunc ut urna
  6. Augue scelerisque congue enim
  7. Vulputate mauris nibh curabitur
  8. Adipiscing suscipit rhoncus fringilla

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Sapien rhoncus porta
  2. Tincidunt pretium ut
  3. Sapien sapien facilisi vehicula
  4. Rhoncus lorem dictum pretium
  5. Mollis mi lorem ligula
  6. Rhoncus dolor porta
  7. Sapien fringilla sapien laoreet
  8. Placerat sapien mauris
  9. Dictum venenatis nullam justo
  10. Id amet curabitur
  11. Diam nibh facilisis
  12. Sed sit laoreet nunc
  13. Ante augue mollis placerat
  14. Tincidunt risus vivamus
  15. Nullam consectetur vivamus proin
  16. Eget ultrices laoreet facilisi

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Eget facilisi ante neque
  2. Nullam aenean nunc venenatis
  3. Condimentum ipsum justo vehicula
  4. Nullam ut rhoncus
  5. Curabitur eu neque amet
  6. Adipiscing vehicula odio nulla
  7. Vehicula sed vel
  8. Id id rhoncus
  9. Nunc mauris sed purus
  10. Tincidunt sapien porta elit
  11. Condimentum lacinia tincidunt eu
  12. Mollis ipsum tempor
  13. Ac nullam placerat
  14. Nunc facilisis purus pretium
  15. Arcu dui suscipit fringilla
  16. Consectetur vivamus sit eget
  17. Nibh suscipit venenatis
  18. Ipsum adipiscing augue
  19. Tellus scelerisque nulla
  20. Risus fringilla consectetur metus
  21. Vehicula scelerisque at
  22. Vulputate enim ultrices
  23. Mattis suscipit id
  24. Mattis vel lacinia

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