Main content

Default - Megamenu

Dictum dolor elit lorem curabitur justo ligula laoreet adipiscing scelerisque nullam facilisis suscipit blandit condimentum sapien eu odio mollis elit viverra venenatis

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

Aenean id tellus lorem tempor tincidunt finibus adipiscing tempor tempor nulla aenean congue vulputate. Ultrices purus ultrices facilisis ipsum lacinia elit. Nunc enim ligula vulputate tincidunt ante lorem sed. Amet porta nulla sed ligula mi at viverra rhoncus proin ipsum ultrices. Odio consectetur vehicula tincidunt augue ut augue scelerisque lacinia at curabitur.

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">
  • Dui venenatis facilisis
  • Nulla dictum nulla
  • Blandit tellus lacinia
  • Curabitur lacinia justo
    • Mauris dui arcu nunc
    • Enim nibh justo
  • Eget sapien rhoncus neque

Mixed List:

  1. Ipsum odio porta
  2. Ultrices mattis curabitur tincidunt
    • Rhoncus dolor elit venenatis
    • Consectetur rhoncus neque
  • At ipsum vivamus
  • Dolor mattis tincidunt
    1. Mauris laoreet porta odio
    2. Nunc scelerisque neque

Number List:

<ul class="list-ordered">
  1. Ultrices proin nunc lacinia
  2. Mi vehicula suscipit
  3. Mi sapien condimentum tellus
  4. Dictum suscipit sapien
  5. Nulla tincidunt vulputate
    1. Urna facilisis dolor viverra
    2. Mi elit pretium
    3. Mi condimentum risus
  6. Ultrices consectetur risus porta
  7. Vulputate venenatis et
  8. Id condimentum ante
  9. Diam eu urna
  10. Justo arcu at venenatis
  11. Elit congue metus
  12. Porta finibus viverra mollis
  13. Amet rhoncus adipiscing

Check List:

<ul class="list-checks">
  • Amet nunc sapien mattis
  • Mauris scelerisque dictum
  • Ipsum id justo
  • Rhoncus laoreet amet
  • Dictum vivamus eu nunc
    • Purus sapien lacinia facilisi
    • Ac justo venenatis urna
    • Vivamus ipsum mollis
  • Sapien amet amet
  • Dui at sed id

Checkbox List:

<ul class="list-checkbox">
  • Vehicula adipiscing congue
  • Proin ac arcu
  • Metus proin nulla
  • Sit mollis congue
  • Nunc tellus eu ipsum
    • Sit enim porta
    • Dui lorem et at
    • Scelerisque pellentesque dictum metus
  • Tincidunt ut consectetur id
  • Enim odio ipsum sit

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. Facilisis laoreet ac lorem
  2. Eget porta mattis blandit
  3. Rhoncus lacinia odio
  4. Arcu et nunc
  5. Mauris congue nibh
  6. Odio ac diam
  7. Eget augue lorem venenatis
  8. Risus tincidunt mi

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Adipiscing mauris ut ultrices
  2. Fringilla finibus tellus at
  3. Aenean tellus lorem
  4. Tellus at arcu
  5. Dictum tellus venenatis
  6. Amet enim odio
  7. Vehicula enim neque sed
  8. Augue consectetur tellus
  9. Diam ante purus
  10. Mi eu fringilla
  11. Laoreet venenatis vel
  12. Venenatis odio eu
  13. Scelerisque porta amet augue
  14. Ipsum metus facilisis
  15. Sed tincidunt congue sed
  16. Curabitur tincidunt nulla diam

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Neque ipsum mollis
  2. Sit adipiscing odio
  3. Metus lacinia curabitur ac
  4. Diam proin amet eget
  5. Nibh eget et sit
  6. Lorem nunc suscipit
  7. Metus pellentesque elit
  8. Fringilla aenean fringilla
  9. Facilisis sapien nunc vivamus
  10. Enim ante dictum
  11. Placerat facilisi venenatis congue
  12. Finibus curabitur nibh risus
  13. Amet etiam risus lorem
  14. Nunc condimentum porta tincidunt
  15. Laoreet lacinia placerat scelerisque
  16. Facilisi finibus nulla porta
  17. Pretium nibh lacinia mollis
  18. Suscipit vel viverra tempor
  19. Venenatis nunc finibus tincidunt
  20. Diam facilisis metus mollis
  21. Nulla sed augue tempor
  22. Sit etiam mi
  23. Nibh placerat tempor
  24. Laoreet congue venenatis

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