Carnegie Mellon University

CMS Demo Site

Resource for v5 Design

Main Content Area

There are three types of main content areas:

You may add multiple main content areas to a page and rearrange them as needed.

More Content Below Horizontal Rule

In a WYSIWYG main content area you may place text, images, media, and more. In addition, a WYSIWYG main content area has the option to include:

  • Sidebars (at right); three types: Link List, Event List, WYSIWYG
  • Expand/Collapse section (below)
Expand/Collapse sections are useful for FAQs or for a lot of content that can be "chunked" into individual topics. You may create a list of headings or questions and when each item is clicked on, additional information is expanded.

Expand/Collapse items are WYSIWYGs, so you can include text, images, media and more.

Please visit the following websites for more examples of Expand/Collapse:

2 Column Card Grid

Grids may be configured with 2-4 columns in different styles.

Card grids are boxes of WYSIWYG content areas used for text, media, images, and more.

There are different types of grids.

  • Photo (with optional text overlay)
  • News (Pick articles or pull in an RSS feed)
  • Card (WYSIWYG)
  • Mixed (Combination of WYSIWYG, Photo, Link List, Event List)
Gates Center

Slideshow, Slide 1

Choose multiple photos (2 minimum) and enter text content into a WYSIWYG for each photo. Recommended image size is 700w; all images should be the same dimensions.

The Clock

Slideshow, Slide 2

Choose multiple photos (2 minimum) and enter text content into a WYSIWYG for each photo. Recommended image size is 700w; all images should be the same dimensions.

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.

Arch

Slideshow, Slide 3

Choose multiple photos (2 minimum) and enter text content into a WYSIWYG for each photo. Recommended image size is 700w; all images should be the same dimensions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more