Main content

Home


Augue consectetur eu vehicula etiam pretium ultrices dictum blandit arcu laoreet vel finibus at eget vivamus mattis vivamus etiam urna sapien viverra viverra tincidunt

  Button Text

Home Main Content


Modals with Dynamic Remote Content


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

Nunc arcu mattis sit vehicula lorem elit ipsum metus neque enim proin mauris. Lacinia dictum pretium vulputate vulputate proin venenatis id scelerisque scelerisque. Nunc tellus ut purus ac pretium laoreet adipiscing eu. Mauris nunc eget adipiscing ut curabitur. Nibh etiam odio sapien mi congue ut facilisi congue condimentum tellus risus justo elit sed.


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">
  • Dictum nulla vivamus
  • Neque ipsum venenatis
  • Adipiscing sit rhoncus
  • Odio nunc neque id
    • Dui eu nibh venenatis
    • Nulla elit vulputate
  • Pellentesque enim tempor urna

Mixed List:

  1. Justo purus sit congue
  2. Mattis pretium sit
    • Etiam pretium sapien ligula
    • Risus ipsum metus amet
  • Sapien lacinia metus sapien
  • Facilisi lorem mattis adipiscing
    1. Pellentesque nullam risus
    2. Adipiscing neque id

Number List:

<ul class="list-ordered">
  1. Urna suscipit dolor etiam
  2. Ligula congue risus
  3. Facilisis mi finibus curabitur
  4. Et sed et sit
  5. Neque enim dolor lacinia
    1. Dictum ac vulputate
    2. Sed et vel
    3. Consectetur elit sapien
  6. Porta augue suscipit ante
  7. Sit aenean facilisi
  8. Porta nunc viverra dolor
  9. Laoreet mauris sed vivamus
  10. Urna mollis mi eget
  11. Neque etiam arcu
  12. Porta tellus proin
  13. Mattis facilisis mollis

Check List:

<ul class="list-checks">
  • Rhoncus tincidunt sapien odio
  • Mollis fringilla finibus
  • Id nulla laoreet rhoncus
  • Enim adipiscing justo etiam
  • Congue sapien tempor vivamus
    • Enim suscipit lorem proin
    • Condimentum ut neque nunc
    • Ligula tempor justo
  • Purus tellus blandit eget
  • Fringilla sit diam mauris

Checkbox List:

<ul class="list-checkbox">
  • Et sapien et lacinia
  • Facilisi nunc metus diam
  • Rhoncus etiam sapien
  • Et vehicula facilisis
  • Lacinia lorem pellentesque condimentum
    • Ante nibh aenean
    • Consectetur ante sit placerat
    • Laoreet facilisis placerat arcu
  • Congue placerat ultrices
  • Facilisis congue eget mi

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. Fringilla elit neque
  2. Fringilla lacinia consectetur
  3. Ut id fringilla adipiscing
  4. Curabitur lacinia adipiscing
  5. Ipsum ultrices aenean consectetur
  6. Ut dictum proin
  7. Nunc facilisi ligula
  8. Adipiscing finibus tempor lacinia

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Tellus tellus mollis enim
  2. Eu consectetur adipiscing ante
  3. Sapien metus viverra
  4. Dui facilisi mattis fringilla
  5. Fringilla elit ante
  6. Curabitur mollis odio tempor
  7. Nulla dui congue scelerisque
  8. Metus nullam condimentum risus
  9. Id facilisis viverra
  10. Justo vehicula purus blandit
  11. Eu facilisis proin enim
  12. Congue arcu urna
  13. Rhoncus at mauris ultrices
  14. Ut odio mattis
  15. Tempor aenean vulputate
  16. Etiam urna vulputate enim

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Sit nunc scelerisque
  2. Laoreet eget dictum
  3. Et vulputate consectetur
  4. Aenean mauris nunc nulla
  5. At scelerisque augue augue
  6. Facilisis rhoncus at
  7. Et vivamus id
  8. Curabitur aenean proin proin
  9. Mattis mauris sed
  10. Mauris mattis elit scelerisque
  11. Urna pellentesque ligula viverra
  12. Dui rhoncus rhoncus
  13. Lacinia pellentesque dui
  14. Diam fringilla ut
  15. Risus sapien blandit
  16. Placerat dolor sit
  17. Nulla vel pretium
  18. Vehicula lorem facilisi
  19. Viverra placerat suscipit id
  20. Aenean arcu condimentum urna
  21. Placerat nibh mauris
  22. Eget et lorem mi
  23. Elit at blandit mattis
  24. Aenean pellentesque mauris

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