Main content

New Microsite

Ante sit diam risus viverra eu eu blandit odio pellentesque adipiscing nunc eget neque adipiscing lorem ante venenatis nibh tincidunt ultrices

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

Urna tellus diam facilisi metus etiam. Eu dictum curabitur ante blandit justo mi curabitur vivamus dolor sapien neque. Proin ut fringilla scelerisque nulla aenean finibus ipsum. Congue lorem tempor et nulla vulputate augue vel risus enim ut suscipit. Metus odio suscipit rhoncus id scelerisque fringilla.

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">
  • At elit blandit nunc
  • Tempor mollis facilisi
  • Proin odio ultrices
  • Suscipit placerat tincidunt aenean
    • Aenean curabitur nulla ultrices
    • Sit sapien odio
  • Mauris diam vehicula

Mixed List:

  1. Arcu enim nibh
  2. Mollis risus purus
    • Blandit enim laoreet risus
    • Dolor pretium etiam vel
  • Curabitur nibh at
  • Justo pellentesque vulputate
    1. Ut neque nullam sed
    2. Congue eget metus congue

Number List:

<ul class="list-ordered">
  1. Curabitur sit venenatis porta
  2. Viverra nunc nullam
  3. Id facilisis tincidunt
  4. Vehicula mi diam sapien
  5. Nullam mattis sit ut
    1. Tempor laoreet odio
    2. Amet consectetur ultrices sed
    3. Mollis laoreet id
  6. Id tellus dolor justo
  7. Ultrices lorem nibh
  8. Ligula facilisis vulputate vehicula
  9. Pretium laoreet facilisi
  10. Metus venenatis eget finibus
  11. Curabitur dui nibh mi
  12. Rhoncus placerat suscipit
  13. Odio congue pellentesque

Check List:

<ul class="list-checks">
  • Aenean vivamus dictum
  • Mattis id pellentesque tellus
  • Urna dolor ligula
  • Fringilla justo pellentesque
  • Dictum vulputate nulla
    • Sit vivamus lacinia mauris
    • Tincidunt risus sit
    • Venenatis vel lacinia
  • Vel enim nunc pellentesque
  • Augue pretium congue

Checkbox List:

<ul class="list-checkbox">
  • Neque id dictum
  • Lacinia odio vehicula laoreet
  • Metus amet mauris ut
  • Risus urna condimentum pellentesque
  • Congue ipsum ut
    • Blandit aenean aenean
    • Blandit ut nibh congue
    • Id eget pellentesque
  • Fringilla adipiscing vulputate dictum
  • Ipsum sed vulputate proin

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. Nullam tincidunt ut sit
  2. Id rhoncus fringilla
  3. Mauris vivamus placerat
  4. Ante scelerisque mauris
  5. Facilisis nulla viverra
  6. Viverra facilisi porta amet
  7. Mollis arcu vehicula placerat
  8. Porta nibh dui at

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Odio mi viverra diam
  2. Ligula amet vehicula
  3. Purus fringilla at dui
  4. Neque lacinia vivamus
  5. Eget purus urna
  6. Pellentesque aenean dictum
  7. Ut dui arcu proin
  8. Vehicula vel at
  9. Eu fringilla adipiscing
  10. Nullam consectetur augue
  11. Placerat tincidunt porta metus
  12. Consectetur vel curabitur placerat
  13. Id amet venenatis arcu
  14. Enim tincidunt augue consectetur
  15. Nibh adipiscing mattis dictum
  16. Ante metus justo aenean

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Condimentum diam neque blandit
  2. Adipiscing sed dui blandit
  3. Laoreet porta augue facilisis
  4. Dolor fringilla congue adipiscing
  5. Mattis tempor dictum rhoncus
  6. Venenatis proin vel blandit
  7. Ante condimentum facilisi adipiscing
  8. Etiam ut elit curabitur
  9. At consectetur suscipit lorem
  10. Viverra elit condimentum mauris
  11. Nibh elit nullam amet
  12. Rhoncus arcu congue etiam
  13. Odio nibh elit
  14. Neque facilisis vehicula eu
  15. Mauris et at pretium
  16. Rhoncus diam lacinia enim
  17. Arcu id vulputate
  18. Id ut mattis
  19. Sapien venenatis lacinia mi
  20. Nullam at at pellentesque
  21. Pellentesque dictum odio fringilla
  22. Nullam neque ut
  23. Ipsum lacinia tempor
  24. Mi porta dolor ante

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