Center Flex Components

Components are a great way to set up & customize how your content will be delivered on your page.  These components can be placed/moved in any order, by using the 'hamburger' icon to the left of the component:

or by utilizing the 'move item' arrows, located to the top right of the specific component (click the gear icon to reveal these options):

To clear a component element, you may hover over (if not already visible) and click on the Eraser icon, where you will be met with a confirmation box, where you will click Clear (or Cancel if you wish not to proceed with erasing it).

To Remove or Add a component element, you will click on the subtract or add icon accordingly:

There are various options for component usage on your pages.  Here's a run down of what center flex components are available for use on some of your page templates.

Tray: Accordion

The Accordion tray is often used to house large amounts of information without creating an endless scroll on the page.  You can add individual accordions as necessary when using this component.  All accordions begin in the collapsed view when the page is loaded, and the user would click the plus (+) icon to expand the desired accordion to view its contents. 

Tray: Buttons

The buttons tray is often used to link to other areas of the website... generally within your site, but it can be used to link to other areas of the global website, without having to recreate the pages' contents.  Each row can hold up to 3 buttons.

Tray: Facts
This tray can be used to highlight some facts/figures of your unit. This component is set up to show 3 facts at one time, randomly. So if you have more than 3 facts, only 3 will show at a time, but at page refresh another fact will be shown. In order for these to be displayed, Taxonomy tags must be used, so please reach out to us at websupport@morgan.edu for further assistance.

Tray: Photo Rotator

This component can be used to display different photos from your unit/area.  Each photo cares a caption field to describe what the end user is viewing.  This component is also set to auto-rotate.

Tray: Responsive Table

This is a table that responds best to the users' viewing experience.  Utilizing the traditional table within the body copy area can be challenging to use at times, so we've provided an option that will conform to the user's device, whether it be on a desktop or a mobile device.

Potential Desktop View:

Potential Mobile View:

Tray: Section Photo

The component is used for a singular photo.  This component also contains a caption area to provide the end user with a description on what the photo is about.

Tray: Text

This is a traditional component used to place text on your page.  CMS users in our former system would remember this as the "body copy" editor.

Tray: Video Full Width

This component is used to display videos from YouTube, Vimeo, or Panopto.  All that you need to do is select the video source, and provide it's video ID.  This ID is usually a series of alphanumeric characters found after the respective service's sharing link.  Examples of those IDs are highlighted below (in yellow):

• YouTube:  https://youtu.be/cHSw0_I8S3s or https://www.youtube.com/watch?v=cHSw0_I8S3s
• Vimeo: https://vimeo.com/657441818

Tray: Spacer

In some instances, when utilizing multiple components, spacing can be an issue where there is too much space or not enough space between those components.  The Spacer component can be utilized to provide or remove that extra vertical spacing that may be displayed between the components.  Vertical spacing options range from adding 10 to 60 pixels, or subtracting -10 to -60 pixels.  All spacing options are measured in height only.