Optional Styling
Colors
#660000 Main Maroon
#560000 Hover Maroon
#720030
Link Maroon
#333333 Dark Gray
#666666 Middle Gray
#C8C7C1 Light Gray
#FFA800 Yellow
#246181 Blue
#644D2E Gold
(text only)
#DAD6CB Background Tan
#F2F1ED Background Light Tan
2. Fonts
Primary font: "Arial", sans-serif;
Primary font italic: "Arial", sans-serif;
Primary font bold: "Arial", sans-serif;
Secondary font: Roboto Condensed, sans-serif;
Secondary font italic: Roboto Condensed, sans-serif;
Secondary font bold: Roboto Condensed, sans-serif;
<p class="zurich">A sentence with Roboto Condensed.</p>
Serif font: "Times New Roman", Times, serif;
Serif font italic: "Times New Roman", Times, serif;
Serif font bold: "Times New Roman", Times, serif;
<p class="serif">A sentence with a serif font.</p>
Styles
We’ve included a number of styling options for you to add to text on your pages. These can be found under the Styles dropdown box in the WYSIWYG. These styles only work on select text objects. For a full list of the styles, their effects, and the text objects they can be used on, see the table starting on the next page.
Next to the Styles dropdown, there is a dropdown that says Paragraph or Format. This can be used to add headings to your page. For accessibility purposes, heading 1 should never be used on a page, as it is already automatically generated for the main title of the page. There are 5 other heading styles offered, however. A final note on headings: be sure that headings come in sequential order on your page (i.e. heading 2- heading 3- heading 4). Do not skip heading 3 and go straight from 2 to 4, as this breaks the accessibility of the site.
Style Options
|
STYLE |
AVAILABLE TEXT OBJECTS |
DESCRIPTION |
EXAMPLE (if necessary) |
|---|---|---|---|
|
serif |
paragraph |
Changes text to serif font |
Serif text |
|
zurich |
paragraph bullet list |
Changes text to Roboto Condensed font |
Roboto Condensed font |
|
imgfloatright, picfloatright, or floatright |
any |
Floats object right with text wrapping around it |
|
|
imgfloatleft, picfloatleft, or floatleft |
any |
Floats object left with text wrapping around it |
|
|
bigger |
heading 2 paragraph |
Changes font size of heading 2s to 40px and paragraphs to 16px. Used for first heading on each page. |
bigger |
|
smaller |
paragraph |
Changes font size of paragraphs to 12px |
smaller |
|
allcaps |
paragraph span heading 3, 4, 5, or 6 bullet list numbered list |
Changes anything to all uppercase and font size is 140% of original size. Mostly used on paragraph objects. |
all caps |
|
twocol |
paragraph bullet list numbered list |
Separates content into two columns |
|
|
threecol |
paragraph bullet list numbered list |
Separates content into three columns |
|
|
fourcol |
paragraph bullet list numbered list |
Separates content into four columns |
|
|
fivecol |
paragraph bullet list numbered list |
Separates content into five columns |
|
|
navlist |
bullet list |
|
|
|
navlist-more-padding |
bullet list |
Basic list with “›” as bullet with 5px padding on top and bottom of li |
|
|
navlist-gray-dot |
bullet list |
Basic list with large gray dot as bullet |
|
|
navlist-white-dot |
bullet list |
Basic list with large white dot as bullet |
|
|
navlist-no-bullet |
bullet list |
List with no bullet points |
|
|
do-not-resize |
images |
Keeps an image the size specified in Cascade (does not resize for responsive) |
 |
|
in-button |
links buttons |
Maroon button with white text. Must be on button or a link. |
button |
|
button-thin |
links buttons |
Thinner, smaller maroon button with white text. Must be on button or a link. |
button |
|
circle |
images |
Turns an image into a circle (or oval if it’s not square). |
 |
|
center |
paragraph heading 2, 3, 4, 5, or 6 |
Aligns text to center. |
center |
|
blockquote |
paragraph |
Allows a piece of text to be set off from the main text. |
This is an example of a blockquote. |
|
req-button |
links buttons |
Subtle gray border button |
|
|
in-button.darkbg |
links buttons |
Changes the background to transparent on button instead of maroon, with yellow outline. Must be used with “in-button” class. Example: class=”in-button darkbg” |