Interior | 16:9 Hero

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

Risus ante vel ipsum adipiscing vehicula proin sapien eget vehicula mi viverra mollis. Mollis vehicula arcu diam adipiscing mattis finibus pellentesque laoreet tellus lacinia. Lorem eget risus lacinia arcu neque odio pretium ligula condimentum pellentesque laoreet consectetur eu. Venenatis vel amet adipiscing odio metus aenean eu arcu adipiscing. Risus mattis dictum enim ligula eget laoreet diam elit 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">

Adobe PDF
Microsoft Word Document
Microsoft Powerpoint Presentation
Microsoft Excel Spreadsheet
Generic compressed archive

Bulleted List:

<ul class="list-unordered">

Neque ultrices sed
Porta vel justo amet
Dui facilisi justo
Arcu mattis odio
- Adipiscing neque blandit tincidunt
- Metus dui arcu amet
Tincidunt consectetur odio

Mixed List:

Venenatis viverra vulputate
Urna dui mauris
- Rhoncus porta pellentesque aenean
- Rhoncus vel viverra ac

Ipsum pretium viverra arcu
Mi eu mi
1. Odio mollis tellus
2. Scelerisque neque tellus vel

Number List:

<ul class="list-ordered">

Laoreet lacinia ipsum
Tellus eu mauris
Tempor blandit sapien ac
Lorem consectetur mattis eget
Viverra curabitur adipiscing
1. Ante consectetur vehicula
2. Blandit et dictum pellentesque
3. Nulla pretium vel
Nibh tincidunt enim mi
Odio etiam aenean
Aenean blandit suscipit
Nullam finibus lorem vulputate
Blandit rhoncus curabitur proin
Purus etiam facilisi
Ultrices mi id
Tempor lacinia facilisi

Check List:

<ul class="list-checks">

Justo mi vehicula pellentesque
Purus ultrices metus
Congue augue facilisi vehicula
Viverra at odio
At facilisi nulla
- Justo arcu ipsum vulputate
- Venenatis vel venenatis fringilla
- Mi tempor sapien metus
Porta ac etiam
Curabitur eget fringilla

Checkbox List:

<ul class="list-checkbox">

Eget sed proin facilisi
Fringilla justo ante curabitur
At proin tincidunt justo
Ante nibh sit
Amet lorem venenatis
- Tempor vehicula finibus
- Porta sed dolor
- Placerat purus porta facilisis
Odio ac justo mollis
Nullam amet ante finibus

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.

Buttons:

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