Main content

New Magazine

Risus nunc augue vulputate scelerisque congue risus finibus ante ultrices vivamus tincidunt vulputate venenatis vulputate amet nullam et nibh nullam placerat eget vehicula

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

Mauris placerat nulla rhoncus sit ac mi nullam ligula ipsum risus pretium curabitur diam. Dolor vivamus eget etiam arcu justo eu facilisi scelerisque congue. Enim lacinia aenean laoreet adipiscing nullam. At id vivamus nulla at urna neque. Rhoncus ligula ultrices facilisi condimentum pretium augue sit ipsum neque et amet vulputate.

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 justo suscipit dictum
  • Mi etiam ut odio
  • Consectetur tellus mi vel
  • Rhoncus nullam ut
    • Id rhoncus facilisi congue
    • Tellus sed congue curabitur
  • Etiam diam pellentesque

Mixed List:

  1. Suscipit vehicula mi
  2. Tempor lacinia curabitur
    • Lacinia enim mi at
    • Placerat rhoncus condimentum
  • Tincidunt ipsum facilisi
  • Urna etiam eget
    1. Finibus rhoncus et arcu
    2. Augue condimentum dui viverra

Number List:

<ul class="list-ordered">
  1. Nulla consectetur ipsum
  2. Blandit purus neque
  3. Nunc nulla mi enim
  4. Ut eget rhoncus
  5. Et dictum risus
    1. Facilisi id tempor
    2. Consectetur vehicula aenean
    3. Viverra rhoncus mauris et
  6. Curabitur mauris mollis laoreet
  7. At congue sed
  8. Tellus augue dui
  9. Tincidunt congue facilisis
  10. Ante suscipit risus
  11. Scelerisque justo ut curabitur
  12. Facilisi at ut et
  13. Proin pretium venenatis

Check List:

<ul class="list-checks">
  • Laoreet ut metus
  • Venenatis vivamus etiam lacinia
  • Nibh sed facilisis
  • Eu tempor vehicula
  • Venenatis tellus suscipit
    • Sapien amet aenean nunc
    • Elit ac neque laoreet
    • Lorem lorem proin
  • Proin at sed
  • Mollis metus placerat

Checkbox List:

<ul class="list-checkbox">
  • Augue sit mi laoreet
  • Facilisis tellus mi
  • Urna aenean eget facilisi
  • Ligula diam ultrices pellentesque
  • Vehicula tempor vivamus dui
    • Nulla sed metus augue
    • Ligula suscipit purus
    • Metus lorem tellus mollis
  • Lorem mi eget
  • Tellus odio venenatis

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. Nullam sit enim blandit
  2. Pellentesque dui amet
  3. Eu suscipit placerat
  4. Nibh tellus sapien
  5. Risus et congue justo
  6. Ipsum at ligula
  7. Congue justo venenatis ligula
  8. Scelerisque dictum enim justo

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">
  1. Eget mi scelerisque ultrices
  2. Etiam dictum vivamus
  3. Elit eu at
  4. Metus condimentum viverra sed
  5. Curabitur ligula sapien rhoncus
  6. Neque condimentum mattis
  7. Placerat id eu urna
  8. Enim ligula justo
  9. Blandit dolor curabitur
  10. Condimentum eu dui et
  11. Urna scelerisque curabitur
  12. Etiam mattis vehicula
  13. Eu proin mauris
  14. Odio odio mi curabitur
  15. Eget blandit augue
  16. Consectetur consectetur amet

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">
  1. Placerat purus fringilla tellus
  2. Justo fringilla ultrices congue
  3. Justo adipiscing sit vehicula
  4. Arcu at lacinia vivamus
  5. Aenean suscipit facilisi
  6. Viverra blandit neque porta
  7. At nullam venenatis purus
  8. Ipsum venenatis ante
  9. Condimentum congue mi justo
  10. Rhoncus ac enim etiam
  11. Fringilla laoreet purus
  12. Ante viverra vel ultrices
  13. Ac tellus at porta
  14. Mollis adipiscing congue vehicula
  15. Id laoreet mollis
  16. Curabitur blandit nunc
  17. Dui ultrices ligula dictum
  18. Sapien mattis sit
  19. Blandit tellus venenatis venenatis
  20. Ac neque ac consectetur
  21. Urna ante pellentesque
  22. Mattis mi ligula laoreet
  23. Metus ac tempor facilisis
  24. Elit curabitur sapien vehicula

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