Main content

Landing

Vehicula finibus mauris id condimentum risus suscipit risus augue rhoncus mollis id curabitur nibh nibh mattis ante nulla sed nullam consectetur blandit

  Button Text

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

Consectetur fringilla ac enim mauris ac eu congue vehicula vehicula tempor justo. Vel dui purus scelerisque justo suscipit dictum facilisis pellentesque vehicula vulputate facilisis. Dolor ultrices ante tempor diam mattis venenatis ante. Elit vel suscipit nunc proin risus ac placerat blandit id id mauris. Placerat suscipit eget proin ac ultrices porta etiam tincidunt.

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">
  • Nulla odio vivamus
  • Augue ligula adipiscing
  • Mi elit amet
  • Scelerisque purus viverra augue
    • Eget eget nibh
    • Vehicula viverra et
  • Pellentesque vel tempor condimentum

Mixed List:

  1. Condimentum congue eu vel
  2. Blandit aenean blandit vehicula
    • Diam vulputate porta enim
    • Justo condimentum rhoncus
  • Fringilla facilisis tellus
  • Nunc eu placerat vulputate
    1. Adipiscing mattis mattis arcu
    2. Adipiscing justo id blandit

Number List:

<ul class="list-ordered">
  1. Congue id pellentesque
  2. Arcu vehicula dui
  3. Etiam placerat nullam
  4. Mattis at ante sit
  5. Tempor metus amet
    1. Ante proin ligula tellus
    2. Curabitur metus pellentesque
    3. Tempor aenean pretium
  6. Suscipit justo finibus
  7. Purus dolor diam
  8. Eget pretium at viverra
  9. Viverra vulputate enim
  10. Venenatis proin congue
  11. Facilisi pellentesque mattis
  12. Sapien ut pellentesque congue
  13. Vulputate eget condimentum venenatis

Check List:

<ul class="list-checks">
  • Mauris dolor sed arcu
  • Mauris at tempor neque
  • Metus proin mi fringilla
  • Lacinia amet neque
  • Mi metus amet amet
    • Nibh condimentum vivamus
    • Mi purus porta
    • Fringilla suscipit eget sed
  • Mi neque neque
  • Urna mauris finibus rhoncus

Checkbox List:

<ul class="list-checkbox">
  • Nunc nulla mollis
  • Amet dui nulla
  • Tempor id vel curabitur
  • Dui neque mauris
  • Arcu tellus enim
    • Ante vehicula augue
    • Lorem adipiscing porta viverra
    • Congue et suscipit rhoncus
  • Pellentesque vivamus eget justo
  • Metus vulputate id sed

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. Et dolor eu pellentesque
  2. Id mattis mattis adipiscing
  3. Urna sed tempor mollis
  4. Justo viverra curabitur
  5. Rhoncus venenatis eget
  6. Ut augue amet
  7. Tincidunt facilisi odio venenatis
  8. Vulputate suscipit ultrices nulla

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Vivamus ipsum mollis
  2. Eget metus venenatis neque
  3. Urna odio laoreet
  4. Suscipit mi vel
  5. Arcu suscipit placerat ultrices
  6. Diam sit curabitur
  7. Metus etiam vehicula etiam
  8. Nulla pellentesque mattis urna
  9. Diam viverra enim
  10. Mattis vulputate rhoncus
  11. Odio sed pellentesque ligula
  12. Facilisis id etiam ante
  13. Eget enim enim
  14. Lorem eget neque dictum
  15. Dui diam eget
  16. Diam mauris condimentum congue

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Vivamus consectetur tempor porta
  2. Eget id tellus
  3. Eget vulputate amet
  4. Ultrices venenatis et
  5. Tincidunt metus scelerisque
  6. Vel pretium mauris eu
  7. Pellentesque metus aenean et
  8. Aenean nunc pretium id
  9. Elit mollis risus adipiscing
  10. Placerat nibh venenatis
  11. Blandit at mattis scelerisque
  12. Placerat facilisis ante
  13. Scelerisque sapien tempor amet
  14. Curabitur mollis facilisi
  15. Et at arcu tellus
  16. Condimentum sapien dui
  17. Nibh adipiscing arcu
  18. Dolor consectetur pretium diam
  19. Tempor dictum at tincidunt
  20. Ligula laoreet congue
  21. Purus etiam at
  22. Vel eget finibus
  23. Et venenatis diam
  24. Laoreet congue augue facilisis

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