Single-line school logo

Pretium rhoncus id dictum congue neque mi ipsum mi suscipit at vehicula lorem justo dolor lacinia arcu porta suscipit tincidunt elit

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

Blandit lacinia lacinia ultrices purus ante vivamus blandit porta congue nunc congue lacinia id. Venenatis scelerisque etiam viverra laoreet sapien. Amet mi id mauris purus augue metus mi sapien nullam viverra at blandit lacinia ut. Eu blandit curabitur dui nunc aenean augue eget sit mattis placerat. Curabitur neque metus proin vivamus placerat nunc.

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

Vulputate nullam nulla sed
Nullam etiam laoreet dui
Pellentesque ligula pellentesque lorem
Ligula fringilla vel
- Ut enim ut urna
- Lacinia proin dui
Nunc consectetur ligula metus

Mixed List:

Vel eu curabitur suscipit
Ultrices curabitur laoreet
- Consectetur justo nunc
- Sapien facilisis ipsum suscipit

Fringilla adipiscing viverra ut
Amet facilisi proin pretium
1. Vehicula proin condimentum finibus
2. Risus viverra facilisi

Number List:

<ul class="list-ordered">

Congue elit lacinia odio
Ac mi rhoncus
Lorem nibh facilisi nibh
Tellus etiam facilisi
Et vel viverra
1. Amet mattis ante
2. Facilisi diam laoreet
3. Vulputate nulla ligula elit
Neque vel dolor
Metus facilisis venenatis
Blandit ut lacinia nullam
Viverra nulla lacinia
Adipiscing suscipit justo
Dictum eu sapien venenatis
Blandit curabitur et
Porta suscipit fringilla aenean

Check List:

<ul class="list-checks">

Urna rhoncus etiam enim
Placerat proin facilisi
Vulputate ante sed consectetur
Congue risus tincidunt
Dictum blandit mauris
- Ligula tincidunt condimentum
- Sapien mi ultrices risus
- Congue tempor lorem eget
Ultrices viverra nunc
Id laoreet dictum pretium

Checkbox List:

<ul class="list-checkbox">

Fringilla lacinia etiam
Ut facilisi adipiscing condimentum
Odio pretium eget adipiscing
Pretium pellentesque odio
Neque porta vivamus neque
- Nullam neque vel placerat
- Eget ligula at
- Diam mi eget sapien
Consectetur sed consectetur
Dolor amet viverra

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

Justo odio aenean venenatis
Mi vel facilisis
Pellentesque ligula sed vivamus
Augue finibus odio blandit
Eu sapien nullam
Consectetur neque diam
Vel mollis sed
Tellus laoreet nulla lorem

Three column list Medium and up

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

Neque facilisi amet ligula
Fringilla at vulputate
Urna facilisi mattis
Neque lacinia aenean id
Odio ligula nunc
Urna arcu dolor
Nunc sit amet placerat
Suscipit scelerisque sed
Justo facilisis curabitur
Lacinia sit dictum
Vivamus vehicula tellus
Arcu pellentesque nullam at
Consectetur mi mollis tincidunt
Tincidunt sed mollis tempor
Elit sed nullam
Pretium venenatis vel

Four column list Large and up

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

Enim mollis pellentesque
Lacinia fringilla tincidunt sed
Arcu ligula vivamus rhoncus
Venenatis mattis adipiscing ligula
Nulla lorem odio
Urna vulputate mollis
Scelerisque amet mi mattis
Ut suscipit consectetur mauris
Purus consectetur dictum
Dui viverra purus
Urna rhoncus ac
Augue risus proin eget
Scelerisque viverra purus
Mi sapien mollis
Risus etiam id mollis
Urna sit arcu dictum
Congue eget facilisi laoreet
Dolor odio sit nulla
Porta mauris diam
Facilisis congue adipiscing
Ac odio ac curabitur
Nibh at placerat id
Tellus at blandit
Vehicula neque suscipit

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