Modern Campus CMS Training

Components

Components are form-based types of reusable content that allow you to add complex design elements. Once added to a page, you can edit the component without affecting the original component file. 

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


Components Library

Below you will find a list all available components.

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

Suggested keywords: cards, caption, carousel, gallery, slide show, social media, image, header, events, news, footer, contact, programs, search


Bento Cards

 

This component is intended to be used within the Bento Tile Snippet content area. If used by itself, it will simply look like a grid with images and content. 

This is what it looks like outside of the Snippet.

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 >

 

 

Image: The image for the card. The recommended image size is 500 x 400px.

Image Alt Text: The alt text for the image.

Card Title (h4): The title of the card. (optional)

Card Subtitle: The subtitle content for the card. This will display just below the card title. (optional)

Link Text: The text for the link. (optional)

Link: The hyperlink. (optional)

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window. (optional)

By default, there need to be, at minimum, two groups for this component. However, you have the option to add more than one 

Leaving any of the optional fields blank will simply omit those entries from the component.


Bento Cards with Container

 

These Bento Cards can be used outside of the Bento Tile snippet. 

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

 

 

Image: The image for the card. The recommended image size is 500 x 400px.

Image Alt Text: The alt text for the image.

Card Title (h4): The title of the card. (optional)

Card Subtitle: The subtitle content for the card. This will display just below the card title. (optional)

Link Text: The text for the link. (optional)

Link: The hyperlink. (optional)

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window. (optional)

By default, there need to be, at minimum, two groups for this component. However, you have the option to add more than one 

Leaving any of the optional fields blank will simply omit those entries from the component.


Caption

 

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.

 

 

Content: A miniature WYSIWYG editor for you to add content to.


Carousel Cards

 

 

 

Section Title (h2): The heading that will display directly below this component. (optional)

Section Subtitle: The subtitle content that will display below the heading. (optional)

Background Type: The background options for the carousel. You have the option of selecting between a solid color or pattern. (optional)

 

Image: The image for the carousel. Recommended Image Size is 400 x 500px.

Image Alt Text: The alt text for the image

By default, there need to be, at minimum, three groups for this component. However, you have the option to add more, or remove those added options

Leaving any of the optional fields blank will simply omit those entries from the component.


Events Listing

 

Section Title (h2): The title for the Events listing. (optional)

Button Text: The button text. (optional)

Button Link: The link for the button. (optional)

Button Link Target: The target location of the button link. (optional)

Events Listing Type (optional): The type of Events Listing. You have the option of displaying the news listings as "Text Only" or "Text + Image Listing".. (optional)

Featured Events Only? (optional): A filter for the component. If selected, this will only display featured events. (optional)

Event Tag (optional): A filter for the component. Selecting one or more of the tags from this field will display events with the matching tags. (optional)

Event Location (optional): A filter for the component. Typing in the location here will list events at the provided location. (optional)

Calendar Name (optional): A filter for the events listing. Typing in the name of the Calendar (as it appears in the CMS) will list events from the Calendar listed in this field. (optional)

Leaving any of the optional fields blank will simply omit those entries from the component. This calendar will pull a feed from the events data file. 


Footer Contacts

 

This component should only be added to the footer.pcf file.

 

100 Administration Building 678.8888

 

 

Icon: The icon for the footer. You have the option of selecting from an Address or Phone icon.

Text: The text that will display underneath the icon.

Link: The link for the icon

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.


Footer Social Media Box

 

This component should only be used in the footer.pcf file. 

Facebook Instagram LinkedIn YouTube

 

 

Facebook Link: Your Facebook Link. (optional)

Facebook Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window. (optional)

 

Instagram Link: Your Instagram Link. (optional)

Instagram Link Target:The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)

 

LinkedIn Link: Your LinkedIn Link. (optional)

LinkedIn Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)

 

YouTube Link: Your YouTube Link. (optional)

YouTube Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)

Leaving any of the optional fields blank will simply omit those entries from the component.


Four Blocks with Right Image

Heading 2

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.

500+ Projects completed
200% Year on year growth
$50m Funded
10k Downloads
Placeholder

 

 

Section Heading: Heading for the section to the left of the image. (optional)

Section Text Content: Content that will display just below  (optional)

Right Image: Image that will display to the right of the content in this component

Image Alt Text: Alt text for the image

 

Figure: The figure to display

Figure Description: Description for the figure


By default, this component requires at least two groups of figures. Leaving any of the optional fields blank will simply omit those entries from the component.


Header Overlay Image

 

Test Heading

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.

View More

 

 

Section Heading: Heading for the section that will appear on the left side of the component.

Section Text Content: The content for the section that will appear on the right side of the component

Background Image: The background image for the component

 

Button Text: The text that will display in the button

Button Link: The link for the button

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)


Header Overlay Pattern

 

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.

View More

 

 

Section Heading: Heading for the section that will appear on the left side of the component

Section Text Content: The content for the section that will appear on the right side of the component

 

Button Text: The text that will display in the button

Button Link: The link for the button

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)


Header Top Image

Placeholder

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

View More
 

Top Image: The image that will appear on top of the content area

Image Alt Text: The alt text for the image

Section Heading: The heading for the content section of this component

Section Text Content: The content for this component. It will display just below the Section Heading. 

 

Button Text: The text that will display in the button

Button Link: The link for the button

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)

Leaving any of the optional fields blank will simply omit those entries from the component.


Image Gallery with Thumbnails

 

This component is still in development


Image with Caption

Placeholder
Image caption goes here
 

Image: The image for the component.

Image Alt Text: The alt text for the image.

Image Caption: The caption for the image.(optional)

Add Top and Bottom Margins?: This option will add spacing on top & bottom of the component. You have the option of selecting yes or no. 

Leaving any of the optional fields blank will simply omit those entries from the component.


News Contacts

Heading 2
Lorem ipsum dolor sit amet consectetur. Nisl magna eget tempor volutpat. Amet at faucibus neque eu. Arcu aenean tempor iaculis sed consequat egestas fringilla. Orci nibh id duis maecenas mi sed accumsan leo tempus.
 

Section Heading: The heading for this news section.

Content: The content for the component. Adding more content groups will add a new paragraph. 


News Listing

Dr. Nikki Wright and Dr. Matthew Panozzo
College of Education
Spencer Foundation Grant
Read More
students
College of Education
UMID Resource Fair 2025
Read More
books
Studen/ Mentor/ Supervisor of the Month: November 2025
Read More
 

Section Title (h2): The title for this section. (optional)

News Listing Type: The type of news listing for display. You have the option of displaying the news listings as "Text Only" or "Text + Image Listing". (optional)

Featured News Only: A filter for the component. Check this box if you only want to include events that have been labeled as "Featured". (optional)

News Tag: A filter for the component. Select a tag from the list of available tags to only display events that have that tag. (optional)

Year: A filter for the component. Type in a year to filter news listing by the provided year. (optional)

Author Name: A filter for the component. Type in the Author's name to filter news listings by the provided Author's Name. (optional)

News Listing Link: Link to the News Listing page that this feed will pull information from. 

Leaving any of the optional fields blank will simply omit those entries from the component.


News Matrix

Dr. Nikki Wright and Dr. Matthew Panozzo
College of Education

Spencer Foundation Grant

Dr. Nikki Wright, assistant professor of Leadership and Policy Studies, and Dr. Matthew Panozzo,... ...

Read More
students
College of Education
UMID Resource Fair 2025
Read More
books
Studen/ Mentor/ Supervisor of the Month: November 2025
Read More
 

Featured News Only: A filter for the component. Check this box if you only want to include events that have been labeled as "Featured". (optional)

News Tag: A filter for the component. Select a tag from the list of available tags to only display events that have that tag. (optional)

Year: A filter for the component. Type in a year to filter news listing by the provided year. (optional)

Author Name: A filter for the component. Type in the Author's name to filter news listings by the provided Author's Name. (optional)

News Listing Link: Link to the News Listing page that this feed will pull information from. 

Leaving any of the optional fields blank will simply omit those entries from the component.


Program Search

 

Find Your Degree Program

As a Carnegie R1 Institution, we continue to Ascend, and that starts with our people. Our top priority is to produce well-rounded, successful graduates and cutting edge research for the enrichment of our ever-changing society.

 

Section Title (h3): The title for the content section of the component.

Section Description: The content for the component. (optional)

The Section Title and Section Description will both appear above the search bar. 

Background Image (Recommended Image Size: 800 x 800 px): The image for the component. This will appear to the left of the Section title and description. 

Program Finder Link: Link to the Program Listing page that this feed will pull information from. 


Category Text: Category that will display below the program finder. (optional)

Category Link: Link for the Category. (optional)

Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window..(optional)

Leaving any of the optional fields blank will simply omit those entries from the component.


Quote Cards

 

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

 

 

Section Title (h2): The title for this component. It will appear at the top. (optional)

Section Subtitle: The subtitle for this component. It will appear just below the section title. (optional)

 

Image: The image for this component. It will display on the right side of this component. 

Image Alt Text: The alt text for this component. 

Quote Content: The quote that will display below the image

Source: The name of the person who is making the quote. 

 

By default, this component requires 3 groups of quotes. Leaving any of the optional fields blank will simply omit those entries from the component.


Quote Gallery

 

 

 

 

Section Title (h2): The title for this component. It will appear at the top. (optional)

Section Subtitle: The subtitle for this component. It will appear just below the section title. (optional)

 

Image: The image for this component. It will display on the right side of this component. 

Image Alt Text: The alt text for this component. 

Quote Content: The quote that will display below the image

Source: The name of the person who is making the quote. 

 

By default, this component requires 3 groups of quotes. Leaving any of the optional fields blank will simply omit those entries from the component.


Social Feed Slider

 

Image: The image for the component.

Image Alt Text: The alt text for the image.

Social Feed Asset: Asset with Social Media Feed code in it. (optional)


Social Media Box

 

 

 

 

Section Title: The title for this 

Facebook Link: Your Facebook Link. (optional)

Facebook Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window. (optional)

 

Instagram Link: Your Instagram Link. (optional)

Instagram Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window. (optional)

 

LinkedIn Link: Your LinkedIn Link. (optional)

LinkedIn Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)

 

YouTube Link: Your YouTube Link. (optional)

YouTube Link Target: The target location of the link. You have the option of having the link open in the Current Window or a New Window. If the link does not point to a memphis.edu domain, it is recommended that this point to a new window.(optional)

Leaving any of the optional fields blank will simply omit those entries from the component.


Virtual Tour

 

 

 

Image: The image for the component.

Image Alt Text: The alt text for the image.

CTA Text: Call to Action text.

CTA Link: Call to Action Link. 


Legacy Components

 

Listed below are the components that were created to mimic elements that were available in the old design.


Cards (Legacy)

 

Background Image: The background image for the first card

Heading: The heading for the card. This will appear just before your cursor rolls over this card.

Focus Content: The content of the card. This will appear while your cursor is focused on the card. 


Carousel Cards (Legacy)

 

 

Caption Header: The heading for the Carousel Card. This will have a larger font than the rest. (optional)

Caption Description: The description for the Carousel Card. This will appear just below the Caption Header. (optional)

Link URL: The link for the Carousel Card. (optional)

Image: The background image for the carousel card. 

Image Description: The desciption for the background image. This is also known as the image's alt text. 

Leaving any of the optional fields blank will simply omit those entries from the component.


Contact & Socials (Legacy)

 

 

Address: Address. (optional)

Address Link: (optional)

Email: E-mail Address. (optional)

Phone Number: Phone Number. (optional)

Custom Link Text: Custom link text. (optional)

Custom Link: The link to your custom link text. (optional)

Instagram Link: The link to your Instagram page. (optional)

Facebook Link: The link to your Facebook page. (optional)

YouTube Link: The link to your YouTube profile. (optional)

LinkedIn Link: The link to your LinkedIn profile. (optional)

X Link: The link to your X profile (optional)

Leaving any of the optional fields blank will simply omit those entries from the component.


Parallax Callout (Legacy)

 

Parents & Guardians

The college search process can be overwehlming. We put together some resources to help!

Parent Resources  

High School Counselors

It is our goal to help you help your students find their place at the UofM.

HS Counselor Guide  

 

Left Callout Header: The Heading for the callout on the left.

Left Callout Description: The description for the callout on the left. This will appear just below the header.

Left Callout Link Text: The link text for the button that appears below the Callout Header and Description

Left Callout Link: The link for the Left Callout Link.

Right Callout Header: The Heading for the callout on the right.

Right Callout Description: The description for the callout on the right. This will appear just below the header.

Right Callout Link Text: The link text for the button that appears below the Callout Header and Description

Right Callout Link: The link for the Right Callout Link.


Schedule Tour (Legacy)

 

Plan Your Visit

Now that you've seen a sneak peek of what the UofM has to offer, schedule a tour today to see what a day in the life of a Memphis Tiger is all about.

Schedule a Link

 

Background Image: The background image for this component.

Header: The heading for this component.

Message: The message for this component. This will appear just below the Header. (optional)

Button Text: The text for the button.

Button Link: The link for the button.