Main content

Interior Level 2 short-width

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

Ut justo arcu dui id mi proin pretium. Vivamus mi id dui mi facilisi elit ante mollis. Neque amet ipsum condimentum rhoncus venenatis viverra vulputate metus dui eu blandit pretium pellentesque sapien. Finibus tempor sed facilisis congue elit consectetur viverra ligula elit tempor scelerisque ultrices tempor proin. Ligula eu ultrices diam ac ultrices ligula purus curabitur congue dictum.

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">
  • Sit enim facilisi metus
  • Metus facilisi vivamus
  • Amet ligula lorem
  • Sed augue vehicula
    • Proin curabitur facilisi diam
    • Sapien at tincidunt
  • Et venenatis dictum

Mixed List:

  1. Odio etiam mattis
  2. Vulputate dictum facilisi
    • Nibh ut eu
    • Venenatis purus pretium
  • Pellentesque ut amet arcu
  • Nibh etiam eget
    1. Vivamus ut condimentum vivamus
    2. Nulla scelerisque consectetur

Number List:

<ul class="list-ordered">
  1. Vehicula eget tellus etiam
  2. Sed ipsum id
  3. Dolor etiam ligula ligula
  4. Et ante nullam ut
  5. Nibh curabitur justo
    1. Pretium mollis ligula
    2. Lacinia justo id tempor
    3. At ante adipiscing dolor
  6. Fringilla porta mattis facilisi
  7. Vel tellus ante
  8. Laoreet scelerisque venenatis
  9. Arcu augue risus et
  10. Porta mattis viverra
  11. Vivamus risus ut mollis
  12. Consectetur nullam neque mi
  13. Dolor ipsum elit

Check List:

<ul class="list-checks">
  • Vel tellus ultrices dictum
  • Sit neque laoreet eu
  • Nunc venenatis finibus
  • Mi suscipit neque ligula
  • Porta risus amet
    • Diam justo pretium ipsum
    • Tempor adipiscing justo
    • Lorem scelerisque vivamus proin
  • Etiam at dui
  • Justo curabitur justo ipsum

Checkbox List:

<ul class="list-checkbox">
  • Ut enim nulla purus
  • Justo facilisis sapien
  • Venenatis sapien suscipit
  • Adipiscing mattis facilisis fringilla
  • Condimentum adipiscing nullam
    • Ac ut ultrices dui
    • Et risus mi laoreet
    • Dictum risus elit id
  • Nibh justo tellus vivamus
  • Enim ut ac vehicula

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. Vulputate sapien consectetur
  2. Blandit dui placerat
  3. Venenatis ut nulla dui
  4. Dui tempor mollis
  5. Justo vel at odio
  6. Augue ligula ut
  7. Nunc mollis ipsum facilisis
  8. Justo pretium tempor ac

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Condimentum aenean placerat
  2. Vivamus ligula dui eu
  3. Condimentum vel enim suscipit
  4. Viverra odio odio
  5. Diam viverra pellentesque diam
  6. Augue scelerisque tellus
  7. Congue vulputate lorem
  8. Aenean congue suscipit viverra
  9. Vehicula viverra eget et
  10. Mollis eget laoreet
  11. Purus sed vehicula
  12. Nunc purus at viverra
  13. Nulla lorem vehicula
  14. Dui sapien sapien vulputate
  15. Rhoncus vel tellus vivamus
  16. Adipiscing augue nulla fringilla

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Scelerisque eget vulputate
  2. Suscipit vel vehicula urna
  3. Blandit sed vel risus
  4. Nibh vulputate adipiscing rhoncus
  5. At et sit condimentum
  6. Sed elit vel
  7. Id porta purus
  8. Nibh vivamus viverra
  9. Facilisis mollis proin
  10. Urna amet nulla
  11. Odio metus sit vel
  12. Ante mollis ultrices eu
  13. Vel pretium odio placerat
  14. Arcu arcu etiam
  15. Diam nullam venenatis ipsum
  16. Diam sapien etiam scelerisque
  17. Tempor dui at elit
  18. Diam dui nulla blandit
  19. Odio id pellentesque
  20. Lorem enim consectetur ligula
  21. Diam finibus sapien facilisis
  22. Nibh vehicula justo augue
  23. Ut aenean ac
  24. Sed finibus mauris justo

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