Pattern Library

This is the introduction. We recommend keeping this brief.

This is the page title and intro block. To display content immediately after the introduction, enter it in the "Summary" field of the page title & intro block. You can choose to display the preview image, and you can also choose different background colors for the page title & intro block.

Link Optional

Showcase Blocks

Media Blocks

Listing Section

CMS Form

Maps

Embed Blocks

Rich Text Block Heading

This is the rich text block. Use it to display readable text on the page.

You can customize the background color on rich text blocks. If using a background color, please limit copy in the rich text block to 1-2 paragraphs. For longer blocks of copy, please choose a transparent background.

The split text layout option will allow you to display copy in two columns. If you choose the split layout, please ensure there is enough copy in the rich text block to properly fill out two columns of text. Also please avoid using heading text in split layouts; the responsive nature of the website cannot guarantee the heading will render in a specific column.

Blockquote Subheading

This is a blockquote. Use it to offset snippets of text or direct quotes.

Citation Optional

Accordion: When to Use

Use accordions to display content in containers which can be expanded by the visitors. Accordions are great for FAQ pages or other similar types of content.

How to Build an Accordion

In the accordion block, click "+ Content Section" to create a new accordion section. Enter your desired title and the corresponding copy.

Split Text + Image

This is a Split Text + Image block. Use it to display text and an image side-by-side.

You also have the option of selecting background colors on a rich text block. Please use this sparingly, and for no more than one paragraph of content at a time. The background colors are intended to be used as accents to break up long groups of text. Please avoid using background colors on adjoining blocks on a page.

Split Text + Image

Split Content + Embed Code

This is a Split Content + Embed Code block. Use it to display text and/or image content side by side with embedded code. On large screens, the reverse option will swap the side the embedded code appears on. This block will always appear stacked with the text/image content on top on smaller screens. You also have the option of selecting background colors. Please use this sparingly, and for no more than one paragraph of content at a time. The background colors are intended to be used as accents to break up long groups of text. Please avoid using background colors on adjoining blocks on a page. This block is also compatible with anchor links.

Split Content + Embed Code

Showcase Blocks

Card Layout Heading

Heading

Subheading

This is the summary text.

Link Optional

Heading

Subheading

This is the summary text.

Link Optional

Heading

Subheading

This is the summary text.

Link Optional

Card Slider Layout Heading

Heading

Subheading

This is the summary text.

Details

Heading

Subheading

This is the summary text.

Details

Heading

Subheading

This is the summary text.

Details

Large Cards Layout Heading

Heading

Subheading

This is the summary text.

Link Optional

Heading

Subheading

This is the summary text.

Link Optional

Heading

Subheading

This is the summary text.

Link Optional

Mashup Layout Heading

This is the block summary text, found on the settings tab of the block. Use it to display introductory text in a blue field at the beginning of the mashup.

Heading This is the summary text. Link Optional