Standard Page Snippets

H2 Header - Page title, heading

Your page title is the part of this page above the photo that says "Standard Page Snippet." The page title is automatically set to H1. Title and heading can be adjusted in the Parameters portion of the Properties section on a checked-out page.

Paragraph styles are used to break up text so users can scan the page. Use provided paragraph styles instead of bold / italics / HTML and in correct priority order to make sure text is accessible for screen readers. Aim to place a heading every 100-150 words. Priority order - paragraph styles should always run as follows: H1, H2, H3, H4.

Hero photos are optional and can be changed in the Multiedit portion of the Properties section on a checked-out page.

H3 Header - Text styles

Text paragraphs can include all your regular text styles, including strong / bold and emphasis / italics. Keyboard shortcuts work for styling text. Ctrl + B for bold, Ctrl + I for italics. Mac users will substitute the Ctrl key for the command key.

Avoid using these styles to call attention to paragraph text. Use a callout component instead for important messages.

Italic: Denote publication titles, terms in foreign languages, emphasize a portion of a sentence in running text, quotations in running text

Bold: Emphasize a word or two in running text (use sparingly)

Underline: Use when a style guide specifically calls for it (e.g. some citations)

H4 Header - ordered, unordered and nesting lists

Numerical and bulleted lists are also available for styling body text:

Item one
Item two
Item three

Or perhaps you prefer a bulleted list:

Bullet one
- Sub bullet. To adjust, use the increase / decrease indent buttons in the WYSIWYG toolbar.
Bullet two
Bullet three

Image example — Media Caption: Full-width image or video. Option to include a caption/credit. Recommend limiting to 50 words.

H5 Header

Continuing the logical header cascade with an H5 heading here in the body text of the main content area. We will switch over to the additional content area further down the page.

H6 Header

Our last sub head is the H6. Text should always have the logical cascade for paragraph style. Adhere to this order for accessibility purposes. If you want to style text differently, utilize the Styles dropdown in the WYSIWYG toolbar.

Block quote style. For multi-paragraph quoted text. Available in WYSIWYG toolbar and as the Body Block Quote snippet. Use to call attention to quotes and break up running text.

Content Body Pullquote snippet. Recommend limiting to 35 words or fewer for usability (but not imposing limit in the CMS).

Optional Attribution
Optional Second Line Credit

Rich Link List (Optional Title)

Optional formatted paragraph text for introduction to styled link list content. Use this for groups of 3-7 links that are too "big" for inline text links. Can also use to call attention to a list of links acting as on-page navigation, or that are too important for normal paragraph text

Additional content area

The additional content area is useful when you want to take your page full width. Some landing page sections not usable in the Main Content area are usable in the Additional Content area.

To add the additional content area, check out the page and check the Additional Content box in the Page Layout portion of the Properties section. The Page Layout options also allow you to turn off / on navigation and the sidebar section.

H3 Header - Tables

Avoid using just for layout purposes to call attention to content, as tables tend to provide a poor user experience on mobile devices. To emphasize content that's not comparative data, choose one of the Callout or Link Collection snippets instead. Insert a table using the WYSIWYG toolbar. You can add an optional title using the Paragraph dropdown menu in the WYSIWYG toolbar.

	Column One	Column Two	Column Three	Column Four
Row One	Data One	Data One	Data One	Data One
Row Two	Data Two	Data Two	Data Two	Data Two
Row Three	Data Three	Data Three	Data Three	Data Three

H3 Header - Zebra-stripe with table caption, header and footer

This is a table caption for a "table--zebra-stripe" class table with a table head and footer
Table Footer	also uses <th> instead of <td>.	Note that the footer is at the top	of the table in the source.
Table Header	uses <th> instead of <td>.	You have to change the tag	manually in the source.
Row One	same as a normal table with <td>
Row Two	there is no special markup to make this gray
Row Three	or to make this go back to white
Row Four	or gray again
Row Five	or white

H4 Header - Primary Call to Action (CTA) Button Styles

To apply a special button style to a link, right click the linked text, select Insert / Edit Link. The Insert Link dialog box will appear. Use the Class dropdown menu to assign a style and click OK to finish.

Default Button Style: Black to Yellow Button: Yellow to Black Button: White to Black Button: Yellow to White Button: Grey to Light Grey

Large Button: Black to Yellow Large Button: Yellow to Black

H5 Header - Text Link Hover Style

Hover over this inline linked text to see how it appears when hovered over with a mouse.

18pt bold formatted text header - Forms

Learn more about adding form assets to your page.

Form asset example

H6 Header - Accordion

Use only for content that applies to distinct audiences or situations, so users can open the one that's relevant to them. Don't use just to shorten long pages - users have to click open each one: in that case, use subheading styles instead. Use the Paragraph dropdown menu in the WYSIWYG toolbar to add an optional title to your Accordion snippet.

Accordion Panel 1

Accordions are useful for breaking up pieces of information into smaller bits. You can format paragraph text, add inline links and even add a button. Accordions will collapse when you click another panel in the set.

Default Style Button

Accordion Panel 2

Accordions are useful for breaking up pieces of information into smaller bits. Use this space to explain your program's admission or scholarship requirements, or organize information by audience. The possibilities are endless.

Bolded text heading for bulleted list

bullet
bullet
bullet

Inline link

Accordion Panel 3

bullet
bullet
bullet

Inline link

Accordion Panel 4

Accordion panels can contain plain text. No links, lists or additional formatting needed.

Accordion Panel 5

Accordion panels can contain plain text. No links, lists or additional formatting needed.

Teaser Collection 2-up

Could also fit 3-up. Formatted paragraph text is optional. Image is optional. Recommend limiting text to 35 words or fewer (but not imposing in CMS). Inline text link.

Teaser Collection 2-up

Could also fit 3-up. Formatted paragraph text is optional. Image is optional. Recommend limiting text to 35 words or fewer (but not imposing in CMS). Inline text link.

Optional Tag

Landing teaser columned

Formatted paragraph text (up to 55 words) allows for inline links. Image or video can be floated left or right. Use this space to draw attention to a new development in your college / department or to highlight breaking news or a top story.

Optional supporting text

Read more (link icon design is interchangeable; can be button or rich link, up to 2)