Standard Page Snippets

Page title, headings (H2 header)

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.

Text styles (H3 header)

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)

Ordered, unordered and nesting lists (H4 header)

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

Optional credit

Callout snippet

Option to link in header, optional image, optional formatted paragraph text with inline links, and optional buttons. Recommend limiting to 25 words or fewer for usability (but not imposing in the CMS).

Optional button Second Button

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.

Generic Section

The generic section snippet exists mainly to create a background and inset for text or other snippets and features. It allows for different background styles, arrows (up or down) and overlaps. We've used a generic section snippet as a background and inset for the text and snippets on the portion of this page with the light gray background. Below this generic section, you'll see the full-width snippets for section column teaser, landing teaser columned (default and slab style), section teaser slab, feature text panel, routing panel, teaser card, quicklink button bar and standalone image.

Rich Link (Icon with Link)

Use to call attention to an important call-to-action link. A selection of icons from the set are shown below for preview purposes. See the snippet for all available options, including social media icons (Facebook, Instagram, Twitter, Snapchat, TikTok, YouTube, etc).

Alt Search Glass Icon Arrow Right Close Cog in a Box

Double Right Arrow Info Large Right Angle Menu

Open Tab Play Video Right Long Arrow Share

Search Glass Triangle Warning Wheat Blog

Columns

Use columns snippet for layout instead of tables.

Adding or removing columns

Right-click within the snippet and hover over Row to add or remove columns. Just make sure the numbers in the left column of the snippet add up to 12.

Using other snippets in columns

You can add callouts, rich links with icons, social and calendar feeds to columns for a side-by-side content display.

Interactive Campus Map

Tables

Do not use tables for layout purposes. Tables provide a poor user experience on mobile devices, and for accessibility reasons tables must be used for tabular data of columns and rows. To emphasize content that's not comparative data, choose the Callout, Link Collection or Columns snippets instead. You can insert a table using the WYSIWYG toolbar. You can add an optional title using the Paragraph dropdown menu in the WYSIWYG toolbar. However, the WYSIWYG does not allow you to easily make headers (which should be used so that tables are accessible) so the prefered method is to use the Table--Zebra-stripe snippet (See below).

	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

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

Source for zebra stripe table, without footer

<table class="table--zebra-stripe">
<thead>
<tr>
<th> Table header </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Source for zebra stripe table, with footer

<table class="table--zebra-stripe">
<tfoot>
<tr>
<th> Table footer </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</tfoot>
<thead>
<tr>
<th> Table header </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Source for zebra stripe table, with footer and caption

<table class="table--zebra-stripe"><caption>Table caption goes here</caption>
<tfoot>
<tr>
<th> Table footer </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</tfoot>
<thead>
<tr>
<th> Table header </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

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 Save to finish.

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

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

Text Link Hover Style

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

Forms

Learn more about adding form assets to your page

Form asset example image

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.

Section Column Teaser

Heading is optional

Optional Button

Optional tag

Linked heading

Could also fit 3-up or 4-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.

Unlinked heading

Could also fit 3-up or 4-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

This is the default style for this snippet. Formatted paragraph text (up to 55 words) allows for inline links. Image 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)

Optional tag

Landing teaser columned

This is the slab style for this snippet. Formatted paragraph text (up to 55 words) allows for inline links. Image can be floated left or right. Background color is customizable, though default/none or light is recommended.

Section Teaser Slab

This is the editorial text. Headline up to 35 characters. Formatted text up to 35 words. Snippet image is a "medium" 4:3 ratio (1400px by 1050px; 3MB limit). In mobile, the image will be almost completely obscured by the screen. Button color can be changed. Yellow-to-White shown. To change, right click (option click), select the "Insert / Edit Link" option and change your color in the Class dropdown.

Optional supporting text (add a shift-return after the text)

Optional link Optional link 2

Feature Text Panel

Larger text, centered, for short messaging copy. Featured text section. Up to 35 words of high-level messaging or very brief introduction / context. Optional buttons. Up to 3. Each button added decreases conversion rate of other buttons. Allows different background styles, arrows and overlaps. Test link inside feature text.

Eum Est Et Error Alias Dignissimos

Landing Page Routing Panel

Headline up to 35 characters. Text. Up to 35 words of high-level messaging or very brief introduction / context. Buttons. Use 2 or fewer calls to action, 5 or fewer for routing links. Each button added decreases conversion rate of other buttons. Allows different background styles, arrows and overlaps. Test link inside feature text.

Tempora Tenetur Quaerat Voluptatem Ullam Corporis Omnis Magnam Ut Ipsa Expedita Corrupti

Teaser Card (Horizontal or Vertical)

Features:

- In page editor, the topmost image in the table is the background image, which will be ghosted behind the photos and content that come after.
- Headline up to 35 characters.
- Main images are "small" 4:3 ratio (800px by 600px; 3MB limit).
  - In mobile, the image will be full screen.
- Linked labels up to 55 characters each.
- To create additional boxes, right click (option click) on the last row and choose "Copy row" from the Row submenu. Then right click again and choose "Paste Row After" from the same submenu. Then change the image and information.

This is the headline (horizontal card)

Arts & Culture

Student Clubs

Greek Life

Student Government & Long Titles

Student Government and Long Titles

This is the headline (vertical card)

Arts & Culture

Student Clubs

Greek Life

Student Government & Long Titles

Student Government and Long Titles

Quicklink Button Bar

- Headline up to 55 characters.
- Buttons. Up to 3. Each button added decreases conversion rate of others.
- Allows different background styles, arrows and overlaps.

Looking for Something?

Directory OneStop Help Center

Snippet: Section Landing Standalone Image

Features:

- Intended to be used as an atmospheric full-width feature photo to break up sections.
  - If a photo credit or caption is required, use "Media with Caption" snippet instead.
- Image is a "medium" 4:3 ratio (1400px by 1050px; 3MB limit).
  - In mobile, the image will scale or crop depending on the screen width of the device.
  - Keep the focal point of the photo in the middle third to preserve meaning.

Page title, headings (H2 header)

Text styles (H3 header)

Ordered, unordered and nesting lists (H4 header)

H5 header

H6 header

Rich Link List (Optional Title)

Additional content area

Generic Section

Rich Link (Icon with Link)

Columns

Contact us

Tables

Zebra-stripe with table caption, header and footer

Primary Call to Action (CTA) Button Styles

Text Link Hover Style

Forms

Accordion

Linked heading

Unlinked heading

Landing teaser columned

Landing teaser columned

Section Teaser Slab

Feature Text Panel

Landing Page Routing Panel

Teaser Card (Horizontal or Vertical)

Quicklink Button Bar

Looking for Something?

Snippet: Section Landing Standalone Image

Features: