Modern Campus CMS Training

Snippets

Snippets are a type of reusable content that insert predefined content into a page. After it has been added, it can then be edited in the WYSIWYG editor without affecting the original snippet file.

In the new editing experience, all snippets will display within the CMS as tables. Once changes have been applied to the editable cells in that table, and the page has been Saved & Published, XSL will transform that Snippet into the desired element.

Here's an example of what the Homepage Banner Image/Video snippet looks like in the CMS: 

Hero Image Form

Once everything has been saved and published, it should look like this on the actual page: 

Hero Image Example

For instructions on how to add or remove Snippets, please refer to the Snippets section of our Helpful Features and Tools page.


Snippets Library

Below, you'll find a list of all available snippets.

Use the following search bar to quickly sort through the list of available Snippets provided below

Suggested keywords: collapsible, call to action, facts, headers, hero, callout, cards, icons, quotes, tabs, accordion, grids, wrapper, table, timeline


Accordion

An element that allows you to organize large amounts of content in a compact manner on the page

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui

Heading 3

You can enter content freely. for an accordion panel.

Even when you skip a row, you want to go off by the number indicated in the heading column when you are setting a specific panel to open on load.
 

Section Intro: The blurb that appears either above or to the side of the accordion. 

Section Intro Placement: This option is multiple choice, you have the option of moving it to the left or to the top of the accordion menus.

Heading: The title of the Accordion tab

Content: The content for the Accordion tab

To add another accordion tab to this snippet, simply add a new row at the bottom of this snippet. Removing a row will remove a tab. 


Bento Tile

 

Nibh commodo ligula commodo nisi metus turpis pharetra a. Eleifend placerat elit non orci ac sit ut. Ac dui fames cras condimentum ultrices. Odio augue amet cursus in quis tincidunt. Elit facilisi phasellus ornare volutpat pretium tempor a cras condimentum.
Nibh commodo ligula commodo nisi metus turpis pharetra a. Eleifend placerat elit non orci ac sit ut. Ac dui fames cras condimentum ultrices. Odio augue amet cursus in quis tincidunt. Elit facilisi phasellus ornare volutpat pretium tempor a cras condimentum.

Tab 2 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.

Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Tab 3 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.

Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Placeholder

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Read More
Placeholder

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Read More
Placeholder

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Read More
Placeholder

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Read More
 

Tab shown on Load: Select the tab you'd like to display on page load

Heading: The heading for the tab in the Bento Tile

Content: The content for the tab in the Bento Tile. Here, you have the option of adding other snippets or components.

To add a new tab, add a new row to the table. To remove a tab, remove a row from the table. 


CTA Banner

HEADING 6 STATEMENT

Call to action heading 3 statement here.

 

Background Color: This field is multiple choice. You have the option of having a banner with a grey background or a white background. 

Background Pattern: The background image pattern.  An image that is either not patterned or solid will not display well due to the text overlay.  

Banner Text: The text for the Call to Action Banner

Banner Buttons: The button(s) for the Call to Action Banner


Fast Facts

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

Button
200 
Courses Offered
20+ 
Cities to Explore
A+ 
Ranked Law School Program
90% 
Faculty with Ph.D
 

Left Column Content: The content that will display on the left side of this component.

Icon: A multiple choice field with a list of pre-selected icons.

Card Title: The title/figure that will display next to the icon.

Description: The description that will display just below the icon and card title. 

To add another icon set, simply add another row to the end of this snippet. To remove an icon set, delete a row from this snippet.


Header - Left or Right Image

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button
placeholder
 

Select Image Position: This field is multiple choice. You have the option of adjusting the image so that it either appears on the left or right of your content.

Image (Recommended Image Size: 800 x 650): The image to be used for the background.  An image that is either not patterned or solid will not display well due to the text overlay.  

Brand-bar Text (Displays only when left image option is selected): The text for the Call to Action Banner

Section Title: The button(s) for the Call to Action Banner

Content: The content for the Snippet


Homepage Banner Image-Video

This snippet is currently restricted to Marketing Web and Web & Mobile Services

THIS ISMEMPHIS

A cut above the rest.

The UofM offers everything found at a traditional university, while remaining pragmatic, flexible and real, with the culture, soul and authenticity that define Memphis at the forefront.

 

MP4 Video: An MP4 video that will display at the top of the page. The design  supports either a video or a static image, but not both. Leave blank if you do not want a video across the top of the page.

Cover Image (Recommended Image Size: 1800 x 850 px): The image that will display at the top of the page. The image must be 1800 x 850 px. The design supports either a static image or video, but not both. Leave blank if you do not want a static image across the top of the page.

First Line Title: The first lines of text that appear across the top of this section. In the default snippet, those are the words "This is", This will only appear in all caps if you type it in all caps.

Second Line Title: The second lines of text that appear across the top of this section. In the defalt snippet, that is the word "MEMPHIS".  This will only appear in all caps if you type it in all caps.

Description: The description that appears underneath the first two lines. 


Large Callout

Together, we make things happen.

Welcome to Memphis!

Like the hardworking, vibrant city we live in, we’re accessible yet diverse — with hands-on opportunities that meet the needs of a wide variety of students.

Explore Memphis
 

Background Image (Recommended Image Size: 1200 x 850 px): The background image for this callout.

Content: The content that will display over the background image. A semi transparent white background appears behind this content. 


Links Bar with Icons

 

Icon: A multiple choice field with a list of pre-selected icons.

Title and Link: The link to be included underneath the icon.  

To add another icon, simply add another row to the end of this snippet. To remove an icon, delete a row from this snippet.


Quote Tabs

 

Tab Shown on Load: Select the tab you'd like to display on page load

Heading: The heading for both the tab and the content section of this component

Content: The content that will appear in the left side of this component.

Image (Recommended Image Size: 400 x 500 px): The image that will display on the right side of this component. 

To add another tab to this snippet, simply add a new row at the bottom of this snippet. Removing a row will remove a tab. 


Quote with Left or Right Image

placeholder
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Jane Doe, Student
 

Image Position: This field is multiple choice. You have the option of placing the image to the left or right of the quote

Image (Recommended Image Size: 1200 x 600 px): The image to be used with the snippet

Quote: The quote that you'd like to include in this snippet

Source: The source of the quote. This will show up underneath the quote.


Responsive Grids

Nibh commodo ligula commodo nisi metus turpis pharetra a. Eleifend placerat elit non orci ac sit ut. Ac dui fames cras condimentum ultrices. Odio augue amet cursus in quis tincidunt. Elit facilisi phasellus ornare volutpat pretium tempor a cras condimentum.
Nibh commodo ligula commodo nisi metus turpis pharetra a. Eleifend placerat elit non orci ac sit ut. Ac dui fames cras condimentum ultrices. Odio augue amet cursus in quis tincidunt. Elit facilisi phasellus ornare volutpat pretium tempor a cras condimentum.
 

Content: The section for the content of your snippet.

To add another column to this grid, add a new column to this table. To remove a column, remove the column


Section Wrapper

 

This snippet is used to provide margins/padding to pages that may lose it when switching between single column and double column layouts. 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

 

Content/Text: The content for the page


Tables

Table Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Name Company Number Team
Full Name Company Name . 14 Team Name
Full Name Company Name 14 Team Name
Full Name Company Name 14 Team Name
Full Name Company Name 14 Team Name
Full Name Company Name 14 Team Name
Full Name Company Name 14 Team Name
Full Name Company Name 14 Team Name
Full Name Company Name 14 Team Name
 

Section Heading: The heading for the table. This will appear at the top of the snippet. 

Section Description: The description for the table. This will appear above the table, but below the Section Heading.

Table: The table for the snippet. By default, it comes with 4 columns and 8 rows, however, you have the option of removing what you don't need. 

This table supports pagination, so after so many rows are added, it will automatically add page number icons at the bottom of the table once the page has been saved and published. 


Tabs

Tab Heading 1

Tab 1 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.

Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Button

Tab 2 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.

Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Tab 3 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.

Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

 

Tab Shown on Load: Select the tab you'd like to display on page load

Background Color: The background color for the Tab snippet. It is multiple choice, so you need to select from the list of options.

Heading: The title of the tab. 

Content: The content for the tab. 

To add a new tab, add a new row to the table. To remove a tab, remove a row from the table


Timeline Box

Timeline Intro Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button
placeholder

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button
timeline placeholder image 2
placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button
 

Section Intro: This is the section that will display at the top of the Timeline.

Image (Recommended Image Size: 800 x 500 px): The image to be included with the timeline entry

Content: The content for the timline entry

To add another timeline entry to this snippet, simply add a new row at the bottom of this snippet. Removing a row will remove a timeline entry. 


Two-Three Column Cards

placeholder

Cras tincidunt lectus ac quam ultrices posuere. Duis pretium commodo risus vel posuere. Sed elit dolor, dapibus vel sapien vel, rutrum malesuada diam...

placeholder

Cras tincidunt lectus ac quam ultrices posuere. Duis pretium commodo risus vel posuere. Sed elit dolor, dapibus vel sapien vel, rutrum malesuada diam...

 

Image (Recommended Image Size: 1200 x 700 px): The image to be used for the cards snippet

Card Heading: The primary heading for the card.  

Card Content: The content for the card.

To add another column to this snippet, simply add a new row at the bottom of this snippet. Removing a row will remove a column.