Main content

WYSIWYG

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

Mollis viverra elit ipsum nunc purus augue justo dui etiam viverra consectetur nullam adipiscing. Ipsum urna vivamus diam pretium consectetur ligula. Ante condimentum neque consectetur dui finibus suscipit scelerisque augue vel metus pretium finibus neque mauris. Pellentesque scelerisque justo aenean blandit mi placerat blandit rhoncus facilisis vivamus dolor dictum scelerisque tellus. Viverra ut mattis arcu elit mattis ligula dui nulla pretium ipsum tempor.

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">
  • Pretium enim id
  • Lacinia pellentesque vehicula etiam
  • Risus sit nullam purus
  • Eget sed nibh
    • Dolor dolor placerat
    • Justo facilisis ac
  • Condimentum tempor venenatis

Mixed List:

  1. Vulputate neque urna laoreet
  2. Eu mollis facilisis proin
    • Proin neque consectetur
    • Venenatis arcu curabitur
  • Elit aenean purus
  • Consectetur mollis pellentesque tincidunt
    1. Neque dictum viverra
    2. Justo enim laoreet etiam

Number List:

<ul class="list-ordered">
  1. Dolor dictum pretium mollis
  2. Amet neque porta
  3. Finibus sapien pellentesque
  4. Vulputate justo eget et
  5. Vehicula etiam ante vivamus
    1. Pretium mollis suscipit odio
    2. Tempor ultrices rhoncus enim
    3. Ut blandit curabitur vulputate
  6. Consectetur sed risus sapien
  7. Tempor odio rhoncus
  8. Purus etiam amet
  9. Tincidunt purus pellentesque adipiscing
  10. Facilisis pellentesque ipsum
  11. Scelerisque vel curabitur porta
  12. Placerat sed et
  13. Dictum augue porta amet

Check List:

<ul class="list-checks">
  • Congue venenatis rhoncus
  • Aenean enim eu purus
  • Risus purus dui
  • Adipiscing eget nibh augue
  • Viverra sapien consectetur
    • Lorem condimentum vehicula eu
    • Porta curabitur sed sapien
    • Mauris mi elit
  • Mauris finibus nibh nullam
  • Sapien sed ante

Checkbox List:

<ul class="list-checkbox">
  • Ligula laoreet mauris
  • Mollis sapien eu fringilla
  • Dolor placerat ante
  • Ut adipiscing elit
  • Mi venenatis proin dolor
    • Blandit ultrices consectetur
    • Fringilla arcu ac vehicula
    • Aenean arcu purus
  • Lorem ante elit amet
  • Mollis nulla fringilla

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. Dui ultrices vivamus
  2. Augue sapien et facilisi
  3. Eu eget neque
  4. Venenatis et mauris
  5. Amet etiam mauris ac
  6. Eget laoreet purus mi
  7. Proin blandit tellus enim
  8. Enim scelerisque ultrices

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. At sed viverra sed
  2. Tellus ac fringilla
  3. Tellus vivamus mattis
  4. Mauris tempor diam vulputate
  5. Diam metus viverra curabitur
  6. Venenatis dui nunc
  7. Eu id fringilla nibh
  8. Viverra dolor tellus placerat
  9. Odio neque metus suscipit
  10. Placerat curabitur metus
  11. Suscipit finibus curabitur
  12. Ut etiam scelerisque
  13. Pretium vel elit
  14. Ut dictum dolor odio
  15. Et mattis nullam
  16. Dolor enim finibus nunc

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Blandit pretium ultrices dictum
  2. Sapien vel purus justo
  3. Diam ligula ultrices
  4. Congue mattis mauris
  5. Mollis ac amet adipiscing
  6. Augue placerat adipiscing mattis
  7. Finibus finibus ipsum ultrices
  8. Rhoncus placerat tincidunt eget
  9. Facilisi etiam adipiscing
  10. Ante nunc elit
  11. Ligula odio etiam urna
  12. Vulputate nunc diam adipiscing
  13. Finibus facilisis sit pretium
  14. Elit sed at ac
  15. Facilisi porta metus
  16. Eu pretium mollis
  17. Finibus purus ligula odio
  18. Viverra arcu sit eget
  19. Sed viverra et facilisis
  20. Neque venenatis condimentum
  21. Id sapien tellus
  22. Adipiscing nunc vehicula nunc
  23. Id arcu purus metus
  24. Aenean eu nunc

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