Main content

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

Urna lacinia nunc consectetur augue et urna nullam vulputate mollis ac ante vivamus at id. Ultrices mauris lacinia tellus fringilla rhoncus tellus nullam vulputate lacinia nunc. Eu eget eu vel mauris adipiscing porta arcu vel dolor enim finibus sit. Facilisi vehicula at nulla amet. Nibh ligula urna dui dui curabitur odio laoreet eget nullam proin mauris aenean 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">
  • Sed sit diam tincidunt
  • Ultrices viverra finibus vehicula
  • Urna vivamus rhoncus vehicula
  • Laoreet ultrices viverra sapien
    • Dolor urna enim
    • Sit pretium aenean
  • Viverra risus condimentum

Mixed List:

  1. Amet odio ut curabitur
  2. Urna ipsum odio
    • Scelerisque placerat ut
    • Ut diam sed
  • Id et pellentesque eget
  • Id vivamus ante arcu
    1. Odio adipiscing dui elit
    2. Metus pellentesque ut enim

Number List:

<ul class="list-ordered">
  1. Etiam pellentesque consectetur
  2. Porta proin lacinia
  3. Condimentum viverra pretium
  4. Mi ac nunc
  5. Scelerisque nunc purus blandit
    1. Dolor placerat eu
    2. Vulputate tellus mi scelerisque
    3. Porta id metus
  6. Odio placerat mauris finibus
  7. Etiam justo fringilla
  8. Mattis finibus sit
  9. Congue mi vehicula rhoncus
  10. Adipiscing facilisi tempor
  11. Facilisis eu nibh
  12. Arcu congue elit
  13. Vehicula sapien facilisis diam

Check List:

<ul class="list-checks">
  • Congue proin pellentesque lorem
  • Rhoncus etiam eu ipsum
  • Finibus pretium justo mi
  • Mauris finibus vivamus
  • Vulputate etiam amet
    • Facilisi finibus vivamus
    • Laoreet ultrices finibus
    • Mauris tellus venenatis fringilla
  • Finibus nibh at
  • Ultrices placerat sit mauris

Checkbox List:

<ul class="list-checkbox">
  • Vehicula nibh mattis consectetur
  • Viverra vehicula augue
  • Tempor curabitur ut
  • Urna arcu ante
  • Mauris nulla nulla
    • Sed at dui curabitur
    • Mollis aenean tincidunt
    • Mattis purus placerat
  • Adipiscing blandit curabitur
  • Sed vehicula id

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 facilisi lacinia
  2. Ligula lacinia augue mauris
  3. Vulputate urna dictum
  4. Ultrices tempor ipsum vel
  5. Dictum tincidunt arcu laoreet
  6. Justo ut at mattis
  7. Elit congue rhoncus facilisi
  8. Tellus enim id facilisis

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Purus viverra consectetur dolor
  2. Congue sapien aenean enim
  3. Mattis finibus facilisis metus
  4. Mauris nibh neque
  5. Vehicula sit blandit
  6. Pellentesque augue placerat
  7. Metus ante eu
  8. Lacinia purus adipiscing
  9. Vulputate odio etiam
  10. Urna condimentum finibus
  11. Urna augue eu fringilla
  12. Tempor finibus dictum viverra
  13. Facilisi vulputate nulla eu
  14. Metus proin nullam elit
  15. Pretium tellus nunc aenean
  16. Nullam ut ultrices finibus

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Tempor diam proin urna
  2. Venenatis sapien id
  3. Porta dolor blandit
  4. Mattis neque dui
  5. Nunc pellentesque neque
  6. Nullam vel venenatis
  7. Ligula eu lacinia
  8. Facilisi tellus eget nullam
  9. Odio vel pellentesque tempor
  10. Facilisis fringilla placerat
  11. Fringilla adipiscing neque urna
  12. Fringilla dictum elit
  13. Suscipit dictum mi
  14. Enim vel purus id
  15. Ut ligula finibus
  16. Metus tempor vulputate
  17. Lorem vehicula odio
  18. Proin eu vivamus
  19. Facilisis tellus dolor
  20. Elit lorem vehicula
  21. Placerat ante ante
  22. Vivamus adipiscing enim
  23. Urna ante at vivamus
  24. Ligula ante congue

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