Main content

Compact

Adipiscing nullam nunc facilisi tincidunt enim neque sit sit arcu venenatis rhoncus ligula venenatis tempor suscipit adipiscing tempor sit rhoncus tellus suscipit

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

Nullam diam rhoncus proin etiam neque finibus placerat diam. Vulputate enim nunc at viverra nunc vivamus venenatis ante lorem vulputate. Ipsum elit enim scelerisque enim. Et id pellentesque curabitur aenean tellus mollis mi rhoncus augue vel vulputate. Elit ipsum fringilla ipsum adipiscing urna viverra sit blandit.

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">
  • Placerat scelerisque facilisi
  • Ultrices mollis blandit ut
  • Purus tempor venenatis
  • Adipiscing viverra dui
    • Mauris fringilla vulputate
    • Arcu etiam ante
  • Justo lacinia fringilla pretium

Mixed List:

  1. Tempor arcu facilisi ligula
  2. Scelerisque blandit suscipit
    • Augue purus ut tellus
    • Etiam ultrices mi
  • Ligula sit facilisis eu
  • Et risus adipiscing ante
    1. Nulla tellus urna
    2. Ut congue rhoncus facilisis

Number List:

<ul class="list-ordered">
  1. Sed suscipit congue congue
  2. Tellus scelerisque venenatis
  3. Tempor condimentum porta
  4. Ac ut pellentesque nunc
  5. Sapien mi neque porta
    1. Rhoncus tellus vel mollis
    2. Dui sit sed
    3. Tempor at blandit etiam
  6. Dictum nibh metus curabitur
  7. Venenatis ipsum nulla aenean
  8. Lorem etiam eget dictum
  9. Justo rhoncus mauris
  10. Ut suscipit curabitur nunc
  11. Nulla sed neque
  12. Ligula tincidunt mollis mattis
  13. At amet lacinia

Check List:

<ul class="list-checks">
  • Lacinia risus porta
  • Adipiscing condimentum nullam
  • Congue curabitur ligula placerat
  • Diam at viverra
  • Porta ac at viverra
    • Sapien pellentesque vulputate
    • Vivamus justo elit elit
    • Diam sed ante
  • Tempor eget mollis
  • Ac pretium dolor ipsum

Checkbox List:

<ul class="list-checkbox">
  • Sit sed enim
  • Blandit nulla facilisis
  • Vel dolor consectetur
  • Ipsum rhoncus mi dolor
  • Facilisi nulla sit venenatis
    • Ante nulla condimentum id
    • Nulla facilisi eget urna
    • Venenatis vulputate laoreet nulla
  • Curabitur enim tincidunt mi
  • Blandit ut sed lacinia

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. Porta proin eget placerat
  2. Nunc enim curabitur
  3. Congue augue aenean nulla
  4. Ante odio consectetur lorem
  5. Mollis finibus arcu
  6. Porta laoreet neque mollis
  7. Condimentum facilisis rhoncus consectetur
  8. Tempor rhoncus enim diam

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Metus ut ut
  2. At augue risus
  3. Risus urna aenean
  4. Mi diam ligula dolor
  5. Justo viverra viverra
  6. Arcu nibh dolor
  7. Ante aenean eget
  8. Ante adipiscing rhoncus dui
  9. Porta porta mattis neque
  10. Aenean amet eu
  11. Justo et mauris
  12. Porta ipsum sapien curabitur
  13. Vulputate eu mollis
  14. Vulputate ante aenean
  15. Finibus tellus purus nunc
  16. Fringilla facilisi neque

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Blandit ac lacinia ac
  2. Ipsum viverra condimentum
  3. Blandit venenatis facilisis amet
  4. Blandit vivamus neque nulla
  5. Scelerisque augue neque mattis
  6. Suscipit mauris consectetur
  7. Enim nibh condimentum ac
  8. Nibh ut vehicula urna
  9. Adipiscing sapien mollis dui
  10. Nullam mi et mattis
  11. Arcu ultrices nullam
  12. Nulla porta mollis mi
  13. Purus sed porta
  14. Ante ac ut ligula
  15. Dolor vel urna purus
  16. Congue ac fringilla laoreet
  17. Suscipit tempor justo blandit
  18. Odio aenean lorem facilisis
  19. Mattis justo et
  20. Sit eu amet tincidunt
  21. Nibh lorem consectetur
  22. Ligula etiam consectetur tincidunt
  23. Ante curabitur neque viverra
  24. Venenatis sed ac

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