About

Main Subpage Styles and Guidelines (This is also an h2)

This a sample paragraph with a hyperlink. This is bold text. Since this site makes use of custom Web fonts, there are different weights for italicized text and bold italicized. To ensure accuracy in font rendering, consult the HTML of this page to see tag structure.

If you have any questions about this document, please contact Mike D’Agruma.

A horizontal rule is below.


Image Styles and Guidelines (This is also an h3)

Subpage PlaceholderThis is a paragraph with an image aligned to the right. Aligned images should be no wider than 325px. There are a few different classes you can use for images. As an example, this image also has the style-border class.

  • align-left: Floats the image to the left.
  • align-right: Floats the image to the right.
  • align-center: Centers an image.
  • style-border: Adds a 4px white border to the image with a slight drop shadow.
  • style-circle: Rounds the image.
  • mobile-kill: Removes the image at a screen size of 700px.

Note: If a floated image doesn’t have the mobile-kill class, it will take on the align-center properties at 700px.

If uploading images and placing them through WordPress, it’s advised to remove the WordPress default classes and choose the correct one(s) above. You’ll also want to remove the width and height on the image so it doesn’t become warped on devices.

To properly clear a floated image, you can add an empty div after all the floated content with a class of non-cms-clear.

Below is an example of an standard subpage button. All standard buttons need to be wrapped in a div with a class of btn-container. These buttons requires two classes on it: btn and btn-red.

* This is sample disclaimer text. You just need to add the class “disclaimer” to the element you have text in.

List Examples

This is a sample paragraph.

  • This is an unordered list.
  • List items and other elements have been tested for worst-case scenarios.
  • Below is a nested unordered list.
    • Nested ordered list item.

This is a sample paragraph.

  1. This is an ordered list.
  2. List items and other elements have been tested for worst-case scenarios.
  3. Below is a nested ordered list.
    1. Nested ordered list item.

Using Accordion Menus

An accordion menu is below. To create accordions, use the custom admin at the bottom of the page and add a corresponding shortcode to place them wherever you’d like in the content editor.

[accordions]

Embedding Responsive Videos

Videos on the site use Vimeo and YouTube’s “modest branding.” To use responsive videos properly, follow these steps:

  1. The embed link used for a video should be formatted like this: https://www.youtube.com/embed/XQu8TTBmGhA (YouTube) or https://player.vimeo.com/video/87110435 (Vimeo)
  2. The bold portion of the link above is the video’s unique code. This is the only part of the link above you need to replace if adding a new video.
  3. All videos are in an iframe, which need to be placed in a div with the class of video.

A fully-coded example is below. It’s best to simply copy and paste the code and change the bolded section of the link above. You can find the unique code in the URL of the YouTube video’s page.

Back to Top of Page