Main content

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

Venenatis suscipit metus rhoncus curabitur tempor ligula blandit scelerisque id laoreet. Tincidunt metus ultrices justo sed pellentesque lacinia id. Justo mollis dui nullam adipiscing nullam at eu tellus ligula metus. Mollis ut ac diam odio nulla sed facilisi facilisis viverra mauris dui etiam dolor. Ultrices consectetur blandit sapien mauris lorem.

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">
  • Ut eu justo
  • Venenatis justo vivamus
  • Sed mattis nullam
  • Aenean et vivamus nunc
    • Fringilla eget eu
    • Vehicula etiam sapien
  • Mattis pretium nibh

Mixed List:

  1. Ipsum finibus tempor
  2. Adipiscing purus mi vulputate
    • Venenatis condimentum diam nulla
    • Nunc dictum mi justo
  • Congue finibus et ultrices
  • Nulla pretium vehicula amet
    1. Nullam lorem curabitur
    2. Et ligula ut

Number List:

<ul class="list-ordered">
  1. Tellus arcu nullam vulputate
  2. Ut justo neque nunc
  3. Ut curabitur nulla lorem
  4. Venenatis aenean ante
  5. Ut rhoncus blandit eget
    1. Pellentesque metus dolor facilisis
    2. Ut blandit venenatis
    3. Curabitur proin dictum
  6. Neque nunc lacinia facilisis
  7. Pellentesque arcu viverra mauris
  8. Et justo rhoncus
  9. Nunc venenatis vel at
  10. Tellus viverra ipsum enim
  11. Ligula ligula sit
  12. Consectetur lorem etiam blandit
  13. Sapien purus diam

Check List:

<ul class="list-checks">
  • Dui metus congue
  • Tellus facilisis ac pretium
  • Urna enim pretium
  • Ante porta ligula
  • Mollis viverra eget tempor
    • Suscipit odio curabitur ante
    • Scelerisque mi viverra suscipit
    • Urna urna ut tincidunt
  • Viverra tempor nulla
  • Mi augue fringilla

Checkbox List:

<ul class="list-checkbox">
  • Suscipit vivamus purus
  • Sit scelerisque congue
  • Mattis amet aenean ligula
  • Lorem neque diam
  • Rhoncus facilisi scelerisque
    • Mollis tellus condimentum
    • Nibh mi vivamus eu
    • Risus venenatis vel
  • Nullam blandit dictum pretium
  • Vehicula purus tincidunt pretium

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. Pellentesque viverra ipsum
  2. Diam adipiscing vivamus
  3. Etiam proin sed venenatis
  4. Placerat justo eu lorem
  5. Vel facilisi elit
  6. Mollis id sit
  7. Risus nulla nunc
  8. Odio metus amet

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Eget porta diam eu
  2. Finibus vehicula condimentum
  3. Nullam suscipit arcu finibus
  4. Nullam mattis blandit
  5. Ligula aenean justo
  6. Rhoncus justo enim
  7. Lorem justo mauris
  8. Justo sed adipiscing dictum
  9. Lorem enim facilisis id
  10. Urna vivamus placerat
  11. Enim placerat dui etiam
  12. Elit eget congue
  13. Rhoncus nullam justo vivamus
  14. Pellentesque nulla aenean tempor
  15. Ac ante facilisi lacinia
  16. Aenean vulputate blandit

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Nulla lorem ipsum adipiscing
  2. Tempor odio consectetur
  3. Scelerisque vulputate mattis
  4. Augue enim purus aenean
  5. Sit nibh viverra
  6. Nullam elit tincidunt facilisi
  7. Vulputate sed ante id
  8. Vivamus mollis mauris
  9. Purus enim pellentesque
  10. Id vivamus sapien nibh
  11. Justo suscipit eu risus
  12. Enim sapien viverra porta
  13. Eget neque adipiscing urna
  14. Condimentum enim facilisi
  15. Placerat nullam mi
  16. Laoreet laoreet vehicula scelerisque
  17. Tincidunt laoreet consectetur
  18. Ac eget finibus nulla
  19. Congue ut porta augue
  20. Dolor condimentum finibus venenatis
  21. Venenatis curabitur suscipit mauris
  22. Adipiscing vulputate suscipit facilisis
  23. Pellentesque arcu et
  24. Etiam tincidunt fringilla scelerisque

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