Skip to main content

Standard Page Snippets

placeholder

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

Callout snippet

Optional credit

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

 

Callout used as a contact block

1845 Fairmount St.
Wichita, KS 67260

email.address@wichita.edu

316-555-5555
Fax: 316-555-5555

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:

  1. Item one
  2. Item two
  3. 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.Optional credit
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.

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

 

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.

Contact us

1845 Fairmount
Wichita, KS 67260

316-978-####

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>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

Source for zebra stripe table, with footer

<table class="table--zebra-stripe">
<tfoot>
<tr>
<th> Table footer </th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</tfoot>
<thead>
<tr>
<th> Table header </th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</tfoot>
<thead>
<tr>
<th> Table header </th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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 (New window: OU Campus support site)

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

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.

Italicized text heading for numbered list

  1. bullet
  2. bullet
  3. 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

  • Linked heading

    Optional tag

    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.

Landing teaser columned

Optional Tag

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

Image example

Landing teaser columned

Optional tag

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.

Image example

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)

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.

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.

 

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)

 

This is the headline (vertical card)

 

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?

 

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