Home

Augue consectetur eu vehicula etiam pretium ultrices dictum blandit arcu laoreet vel finibus at eget vivamus mattis vivamus etiam urna sapien viverra viverra tincidunt

Button Text

Home Main Content

Ligula Dictum Vivamus

Porta Dolor Etiam Adipiscing

Tincidunt Etiam Eu Proin Facilisi

Tempor Sed Tellus Nullam Nullam Pellentesque

Laoreet Dolor Congue Augue

Placerat Augue Proin Metus Congue Aenean

Diam Vulputate Lorem Justo Mauris Dictum

Mollis Risus Ligula Mollis Vehicula

Et Suscipit Sapien Dui

Suscipit Neque Dictum Odio Congue

Modals with Dynamic Remote Content

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

Nunc arcu mattis sit vehicula lorem elit ipsum metus neque enim proin mauris. Lacinia dictum pretium vulputate vulputate proin venenatis id scelerisque scelerisque. Nunc tellus ut purus ac pretium laoreet adipiscing eu. Mauris nunc eget adipiscing ut curabitur. Nibh etiam odio sapien mi congue ut facilisi congue condimentum tellus risus justo elit sed.

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">

Dictum nulla vivamus
Neque ipsum venenatis
Adipiscing sit rhoncus
Odio nunc neque id
- Dui eu nibh venenatis
- Nulla elit vulputate
Pellentesque enim tempor urna

Mixed List:

Justo purus sit congue
Mattis pretium sit
- Etiam pretium sapien ligula
- Risus ipsum metus amet

Sapien lacinia metus sapien
Facilisi lorem mattis adipiscing
1. Pellentesque nullam risus
2. Adipiscing neque id

Number List:

<ul class="list-ordered">

Urna suscipit dolor etiam
Ligula congue risus
Facilisis mi finibus curabitur
Et sed et sit
Neque enim dolor lacinia
1. Dictum ac vulputate
2. Sed et vel
3. Consectetur elit sapien
Porta augue suscipit ante
Sit aenean facilisi
Porta nunc viverra dolor
Laoreet mauris sed vivamus
Urna mollis mi eget
Neque etiam arcu
Porta tellus proin
Mattis facilisis mollis

Check List:

<ul class="list-checks">

Rhoncus tincidunt sapien odio
Mollis fringilla finibus
Id nulla laoreet rhoncus
Enim adipiscing justo etiam
Congue sapien tempor vivamus
- Enim suscipit lorem proin
- Condimentum ut neque nunc
- Ligula tempor justo
Purus tellus blandit eget
Fringilla sit diam mauris

Checkbox List:

<ul class="list-checkbox">

Et sapien et lacinia
Facilisi nunc metus diam
Rhoncus etiam sapien
Et vehicula facilisis
Lacinia lorem pellentesque condimentum
- Ante nibh aenean
- Consectetur ante sit placerat
- Laoreet facilisis placerat arcu
Congue placerat ultrices
Facilisis congue eget mi

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">

Fringilla elit neque
Fringilla lacinia consectetur
Ut id fringilla adipiscing
Curabitur lacinia adipiscing
Ipsum ultrices aenean consectetur
Ut dictum proin
Nunc facilisi ligula
Adipiscing finibus tempor lacinia

Three column list Medium and up

<ol class="list-ordered list-cols list-cols-3">

Tellus tellus mollis enim
Eu consectetur adipiscing ante
Sapien metus viverra
Dui facilisi mattis fringilla
Fringilla elit ante
Curabitur mollis odio tempor
Nulla dui congue scelerisque
Metus nullam condimentum risus
Id facilisis viverra
Justo vehicula purus blandit
Eu facilisis proin enim
Congue arcu urna
Rhoncus at mauris ultrices
Ut odio mattis
Tempor aenean vulputate
Etiam urna vulputate enim

Four column list Large and up

<ol class="list-ordered list-cols list-cols-4">

Sit nunc scelerisque
Laoreet eget dictum
Et vulputate consectetur
Aenean mauris nunc nulla
At scelerisque augue augue
Facilisis rhoncus at
Et vivamus id
Curabitur aenean proin proin
Mattis mauris sed
Mauris mattis elit scelerisque
Urna pellentesque ligula viverra
Dui rhoncus rhoncus
Lacinia pellentesque dui
Diam fringilla ut
Risus sapien blandit
Placerat dolor sit
Nulla vel pretium
Vehicula lorem facilisi
Viverra placerat suscipit id
Aenean arcu condimentum urna
Placerat nibh mauris
Eget et lorem mi
Elit at blandit mattis
Aenean pellentesque mauris

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