Main content

Interior - Two sidebars

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

Congue ligula nibh nunc ante sapien eu. Facilisis etiam eget enim pellentesque pretium placerat porta fringilla adipiscing. Ut sapien condimentum mauris mollis sit ultrices ipsum venenatis etiam amet tellus. Aenean viverra congue rhoncus augue aenean. Vel ipsum proin nulla mollis nibh.

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 eu consectetur
  • Adipiscing lacinia risus
  • Risus dui justo aenean
  • Dui facilisi nulla
    • Ante vulputate congue purus
    • Arcu arcu aenean
  • Id suscipit nullam

Mixed List:

  1. Tincidunt dolor odio amet
  2. Eu venenatis facilisi eget
    • Mollis et mollis mattis
    • Finibus urna nunc vivamus
  • Sit facilisi aenean scelerisque
  • Mollis diam elit
    1. Eget at diam
    2. Vel elit vel

Number List:

<ul class="list-ordered">
  1. Vehicula eget enim odio
  2. Augue consectetur mi nullam
  3. Dolor mattis placerat
  4. Curabitur pellentesque nibh etiam
  5. Risus porta ut adipiscing
    1. Mi arcu pellentesque
    2. Et mollis viverra
    3. Placerat odio amet diam
  6. Vulputate vivamus porta enim
  7. Neque dui eu facilisi
  8. Sed lorem dolor placerat
  9. Congue vehicula ut
  10. Congue at id
  11. Mollis consectetur vulputate mi
  12. Laoreet ut tincidunt fringilla
  13. Neque viverra facilisi tempor

Check List:

<ul class="list-checks">
  • Augue suscipit tempor mauris
  • Urna at porta pellentesque
  • Sed finibus mattis
  • Condimentum dui lacinia finibus
  • Augue lacinia sit
    • Ac id eu
    • Venenatis dictum diam
    • Sit et finibus
  • Ipsum risus lorem vulputate
  • Nullam etiam nulla scelerisque

Checkbox List:

<ul class="list-checkbox">
  • Fringilla aenean vehicula sapien
  • Neque laoreet nulla
  • Facilisis vehicula id
  • Sed justo fringilla mollis
  • Lacinia purus pellentesque vehicula
    • Ut adipiscing neque dolor
    • Consectetur elit purus ac
    • Vehicula purus finibus
  • Condimentum ac adipiscing
  • Ante dolor arcu neque

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. Lacinia blandit ac
  2. Eu amet eget congue
  3. At dictum nullam ligula
  4. At augue mauris
  5. Enim lacinia mollis
  6. Ligula nibh eu ultrices
  7. Nullam sed diam
  8. Arcu curabitur mollis dictum

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Suscipit mattis urna
  2. Ultrices mi venenatis pretium
  3. Lorem urna facilisi
  4. At pellentesque ut
  5. Mauris tellus nunc mattis
  6. Facilisis nulla finibus facilisi
  7. Pellentesque tincidunt nulla odio
  8. Vel nibh rhoncus neque
  9. Vivamus suscipit curabitur facilisi
  10. Ante dictum ante
  11. Ipsum odio porta curabitur
  12. Pellentesque pretium finibus
  13. Ut placerat congue tempor
  14. Adipiscing proin enim
  15. Placerat fringilla dolor
  16. Enim vulputate dolor tincidunt

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Adipiscing facilisi amet lorem
  2. Aenean congue lacinia justo
  3. Venenatis nulla scelerisque nulla
  4. Placerat diam vivamus mollis
  5. Vel rhoncus rhoncus
  6. Justo vel etiam
  7. Nibh tellus id lorem
  8. Ultrices nullam adipiscing nullam
  9. Vel consectetur arcu odio
  10. Urna finibus etiam et
  11. Ante arcu ante nibh
  12. Id ultrices suscipit finibus
  13. Porta viverra odio tempor
  14. Ipsum id vehicula vulputate
  15. Ligula congue mollis mollis
  16. Lorem pretium justo
  17. Viverra tempor eget dictum
  18. Fringilla finibus purus aenean
  19. Scelerisque neque ac sed
  20. Pretium mollis etiam facilisis
  21. Blandit lacinia lorem diam
  22. Amet porta dictum
  23. Rhoncus purus urna adipiscing
  24. At sapien augue

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