Main content

Default - No branding

Urna eget eget mollis scelerisque risus purus id scelerisque vulputate nibh laoreet scelerisque justo ut nunc dui diam condimentum laoreet arcu ipsum nunc consectetur

  Button Text

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

Metus placerat vehicula facilisis dolor vel tempor. Et sit ligula nunc tempor id nullam scelerisque at etiam ipsum. Pretium scelerisque mattis nullam lacinia et curabitur venenatis consectetur ac id laoreet adipiscing arcu suscipit. Odio suscipit purus et mollis. Urna justo amet justo nullam enim vivamus curabitur nibh mattis.

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">

Mixed List:

  1. Condimentum tempor odio
  2. Enim dolor placerat pretium
    • Augue condimentum ante blandit
    • Rhoncus tempor facilisi pretium
  • Curabitur pretium congue
  • Pretium purus metus tempor
    1. Ipsum nibh aenean ipsum
    2. Pellentesque elit consectetur

Number List:

<ul class="list-ordered">
  1. Risus tincidunt rhoncus
  2. Consectetur finibus scelerisque sit
  3. Fringilla facilisis amet ac
  4. Viverra rhoncus aenean
  5. Ipsum curabitur vivamus ultrices
    1. Tempor etiam scelerisque
    2. Mauris nulla neque vivamus
    3. Diam metus augue
  6. Nibh neque venenatis venenatis
  7. Purus curabitur dolor pretium
  8. Dolor nibh aenean
  9. Pellentesque risus id placerat
  10. At sit mattis
  11. Tincidunt congue dolor
  12. Laoreet nullam vulputate justo
  13. Mauris congue et fringilla

Check List:

<ul class="list-checks">
  • Dolor purus vivamus arcu
  • Dictum mollis amet finibus
  • Pellentesque proin nullam
  • Elit vehicula pretium fringilla
  • Mattis pretium nunc
    • Venenatis laoreet ante
    • Fringilla elit justo
    • Tempor vulputate at ipsum
  • Mauris ut ultrices at
  • Curabitur suscipit rhoncus porta

Checkbox List:

<ul class="list-checkbox">
  • Justo laoreet enim
  • Id vel finibus
  • Mauris pretium venenatis facilisis
  • Rhoncus lorem ut ipsum
  • Lorem aenean pellentesque
    • Ligula amet curabitur
    • Tellus vivamus eu
    • Pellentesque ipsum odio dui
  • Sed facilisi odio risus
  • Odio eu ante

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. Congue nulla arcu et
  2. Dictum facilisis consectetur venenatis
  3. Congue justo dolor sed
  4. Lorem justo lacinia
  5. Ultrices placerat facilisi
  6. Lorem blandit justo lacinia
  7. Elit at rhoncus
  8. Condimentum dictum eu

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Ipsum nibh pellentesque
  2. Diam nulla ultrices proin
  3. Fringilla tempor pretium
  4. Consectetur placerat etiam
  5. Diam id dui adipiscing
  6. Etiam tellus mi enim
  7. Porta adipiscing elit
  8. Condimentum dui ultrices
  9. Ut metus adipiscing rhoncus
  10. Mauris diam vel viverra
  11. Laoreet placerat congue
  12. Mattis ante augue
  13. Viverra augue ultrices
  14. Curabitur aenean mauris
  15. Porta lacinia ipsum vivamus
  16. Mollis ac sit scelerisque

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Dolor ut congue vel
  2. Vivamus augue nunc ante
  3. Sed finibus dui porta
  4. Placerat venenatis dolor
  5. Placerat nullam tellus
  6. Vivamus facilisi vulputate
  7. Curabitur vulputate vehicula
  8. Nibh lorem facilisi risus
  9. Adipiscing neque mattis
  10. Enim facilisis risus mauris
  11. Lorem condimentum augue
  12. Tellus nunc ante nullam
  13. Sit at suscipit
  14. Tempor vivamus proin
  15. Risus augue dui
  16. Vehicula nullam facilisis finibus
  17. Vel at vehicula
  18. Porta et facilisi consectetur
  19. Id ultrices ac
  20. Id curabitur aenean dictum
  21. Purus aenean ipsum
  22. Nibh ipsum dui
  23. Mi rhoncus neque urna
  24. Dolor viverra tincidunt

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