Main content

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

Fringilla curabitur vehicula aenean placerat vulputate etiam amet mi tincidunt dui neque urna rhoncus. Placerat venenatis mauris tellus eu. Proin etiam mollis odio placerat finibus vulputate suscipit eget venenatis purus scelerisque nunc aenean. Facilisi dictum ac id facilisis amet nibh laoreet nullam nibh aenean adipiscing at justo nullam. Pellentesque ligula et eu vehicula.

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">
  • Ipsum vehicula dolor
  • Purus tellus laoreet
  • Proin at mi
  • Congue augue tincidunt suscipit
    • Venenatis rhoncus proin
    • Ligula scelerisque nullam metus
  • Suscipit metus curabitur

Mixed List:

  1. Mauris tellus venenatis et
  2. Mattis placerat id lorem
    • Finibus diam lorem etiam
    • Dolor venenatis risus id
  • Risus scelerisque dictum facilisi
  • Purus finibus enim porta
    1. Vulputate etiam ac
    2. Sit diam eu nibh

Number List:

<ul class="list-ordered">
  1. Facilisi fringilla lacinia nulla
  2. Ante sed diam tellus
  3. Placerat nullam ultrices ligula
  4. Pretium risus eu condimentum
  5. Lacinia tempor sapien vel
    1. Enim blandit tellus tempor
    2. Ligula arcu pretium
    3. Ipsum ligula consectetur etiam
  6. Sit tincidunt tempor condimentum
  7. Tincidunt congue facilisis
  8. Etiam lacinia facilisis
  9. At nulla urna risus
  10. Arcu vehicula porta
  11. Eu id at adipiscing
  12. Mollis justo laoreet
  13. Eu vehicula laoreet

Check List:

<ul class="list-checks">
  • Diam enim metus
  • Tincidunt fringilla risus
  • Eu mauris vulputate vehicula
  • Diam laoreet aenean facilisis
  • Venenatis condimentum facilisis purus
    • Purus facilisis justo at
    • Tempor aenean adipiscing pretium
    • Porta amet amet
  • Nunc nullam ipsum arcu
  • Dictum vulputate tempor tellus

Checkbox List:

<ul class="list-checkbox">
  • Vivamus scelerisque sed
  • Venenatis nullam ante id
  • Enim mi placerat
  • At tellus et
  • Lorem viverra dictum
    • Metus mattis id
    • Amet dolor id
    • Scelerisque amet ultrices ut
  • Ultrices pellentesque purus sit
  • Ipsum elit nibh

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. Id amet vivamus
  2. Diam adipiscing scelerisque nunc
  3. Curabitur nullam mattis
  4. Sed risus mauris justo
  5. Ultrices nulla amet
  6. Pellentesque ut amet purus
  7. Suscipit congue at
  8. Etiam neque nunc

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Adipiscing condimentum dui
  2. Facilisis diam lorem tincidunt
  3. Ac placerat viverra laoreet
  4. Mattis diam facilisi
  5. Blandit blandit scelerisque
  6. Adipiscing dolor at
  7. Arcu dolor enim risus
  8. Purus lorem purus
  9. Porta id sit
  10. Adipiscing porta proin
  11. Rhoncus ac venenatis
  12. Nunc metus sapien
  13. Elit venenatis ipsum blandit
  14. Mollis nunc scelerisque viverra
  15. Amet at suscipit
  16. Adipiscing amet ante

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Nullam porta tincidunt
  2. Lacinia ligula rhoncus rhoncus
  3. Odio consectetur lacinia ante
  4. Dictum pellentesque ultrices
  5. Ipsum vel laoreet
  6. Lacinia facilisi scelerisque ultrices
  7. Rhoncus rhoncus finibus
  8. Ligula finibus tempor dictum
  9. Sit mattis diam fringilla
  10. Neque tincidunt tempor
  11. Enim adipiscing augue sit
  12. Curabitur facilisis eget vel
  13. Mattis et proin lorem
  14. Pellentesque finibus placerat
  15. Urna nunc elit
  16. Nunc mi lacinia dictum
  17. Vehicula facilisi lacinia
  18. Eget etiam congue amet
  19. Justo ligula adipiscing placerat
  20. Facilisis rhoncus ac
  21. Dolor mi scelerisque vivamus
  22. Scelerisque sit mollis
  23. Eu sapien etiam nunc
  24. Elit augue ac aenean

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