Content Types Gallery

This page uses all of the content types available. It's a bit long of a page, but does a great job showcasing each of the content types. Enjoy!

If you have further questions, feeel free to contact Web Support via phone (573-341-4794), email (websupport@mst.edu), or online ticket at help.mst.edu.

Accordion Boxes

Pretty cool, huh? 

‌Dump pictures, text, links, tables, and documents here! ‌

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor. Nulla aliquet est nec tortor elementum, id vulputate mauris imperdiet. Curabitur sagittis nunc ut nunc condimentum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ultricies arcu sed lacus convallis varius. Donec fringilla et augue at pharetra. Donec nec sollicitudin ante. Morbi imperdiet eleifend commodo. Integer at convallis ex, at facilisis justo.

We are only using two, though.

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor. Nulla aliquet est nec tortor elementum, id vulputate mauris imperdiet. Curabitur sagittis nunc ut nunc condimentum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ultricies arcu sed lacus convallis varius. Donec fringilla et augue at pharetra. Donec nec sollicitudin ante. Morbi imperdiet eleifend commodo. Integer at convallis ex, at facilisis justo.

Body Content

This is a body content! Dump pictures, text, links, tables, and documents here! ‌

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor. Nulla aliquet est nec tortor elementum, id vulputate mauris imperdiet. Curabitur sagittis nunc ut nunc condimentum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ultricies arcu sed lacus convallis varius. Donec fringilla et augue at pharetra. Donec nec sollicitudin ante. Morbi imperdiet eleifend commodo. Integer at convallis ex, at facilisis justo.

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor. Nulla aliquet est nec tortor elementum, id vulputate mauris imperdiet. Curabitur sagittis nunc ut nunc condimentum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ultricies arcu sed lacus convallis varius. Donec fringilla et augue at pharetra. Donec nec sollicitudin ante. Morbi imperdiet eleifend commodo. Integer at convallis ex, at facilisis justo.

Faculty or Staff Bio

Full Name w/ Titles

Position

Department

The Faculty or Staff Bio content type allows authors to create uniform, responsive "About Us" pages for their office or department by filling in a series of blanks. The content type is capable of displaying multiple phone numbers, up to five degrees, a link to the library's SelectedWorks profile, and a drop-down bio for users interested in learning more about the faculty or staff member.

Not all fields in the editing window are required, and optional fields that are omitted do not negatively affect the layout of the bio. For example, if a faculty member has only two degrees to list, the remaining three spaces will be omitted from the bio and will not leave blank vertical space on the page. In the same way, if a staff member does not have bio information, the "View Bio" button will not appear, and content after it will flow with normal spacing where the button would have been.

Required fields are Name of Faculty or Staff MemberPhotoPositionEmail AddressPhone, and Office. All other fields are optional.

If a faculty member has a profile on the library's SelectedWorks system and would like this information in their website bio, navigate to the SelectedWorks page and then copy the URL out of the address bar on your browser. This copied URL should then be placed into the SelectedWorks Link field in the editing window.

The Faculty and Staff Bio content type is a "block" type, therefore it will not wrap around "float" types like Standard Image or Standard Video in the same way that Wrapping Body Content will.

If this content type is placed after a "float" type, it will appear below the float and take the full page width, leaving a blank area next to the float. 

(Marketing)

Specialization:

Specialization1, Specialization2, Specialization3

Research Interests:

ResearchInterest1, ResearchInterest2, ResearchInterest3

Publications:

Resume/CV:

Education:

  • Degree 1, Issuing College or University, Year
  • Degree 2, Issuing College or University, Year

Focus Boxes (3 col and 2 col)

Focus Box #1

Check out this bulleted list!

  • Bulleted lists are fun!
  • Great for quick information
  • Use one of these on your site!

Focus boxes are pretty awesome ways to quickly grap attention and separate information!

Focus Box #2

Focus Box #3

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor.

Image with Description

Joe Miner is the coolest mascot there is!

Aliquam vitae sodales lorem. Praesent lobortis turpis sem, non porttitor augue pulvinar sit amet. Fusce rutrum, nisl a consequat fermentum, diam velit consequat elit, blandit elementum libero mauris at mi. Aenean a tortor a mi tincidunt fringilla eu finibus eros. Nam in lorem sit amet lectus dapibus tempor nec nec ipsum. Integer sodales felis sed fringilla mattis. Suspendisse nulla nisi, scelerisque ac libero eu, fermentum porttitor neque. Vestibulum finibus ex fringilla erat egestas, ut gravida lorem dapibus. Curabitur luctus, magna sit amet rutrum cursus, quam nulla cursus erat, vulputate consequat tortor ex in sem. Donec rutrum nisi nec sagittis vehicula.

Page Heading

This is a Page Heading!

Image Heading

Image Heading

Phrase with Description

Short Phrase Here

Imagine a phrase so short that it will actually fit into the box to the left. Crazy I know. It has to be pretty short, but luckily a short phrase is great for marketing. It grabs your user's attention so that they will be curious after reading it and read the text next to it. Maybe it expands on the phrase? It's your lucky day today. This text does exactly that. (Marketing)

Pull Quotes

"Imagination is more important than knowledge."

- Albert Einstein  

Searchable and Sortable Table

Test Table

Standard Image

This Joe Miner is in black and white!

Standard Slideshow

Include captions for each image.
Add up to 10 pictures.

Standard Video

Link to YouTube or Kaltura videos!

The Standard Video content type gives you the ability to place a YouTube or Kaltura video in a responsive container on any of your pages. Users can play, pause, expand, and otherwise manipulate the video in the same ways they would normally be able to on YouTube or Canvas without leaving your page.

Before using this content type, please ensure that you have permission to use the video you are embedding. Check that it is okay to play the video on a publicly accessible web page. Please remember that any video posted to the web can be downloaded, screencaptured, or ripped with minimal effort by a user with sufficient technical knowledge. The Standard Video content type merely positions a player onto your webpage--all video security must be provided by the video's embeddable player (Kaltura or YouTube).
 

Only videos through one of these services (YouTube or Kaltura) is available for placing on webpages.
  

These things are pretty useful, right?

Tabbed Box

  • Tab #1
  • Tab #2
  • Tab #3
  • Tab #4

Tab #1

The tabbed box content item allows you to create a box similar to a file folder with up to ten tabs. When users click on a tab, they will be shown the information associated with it.

Any content allowed in a normal body content type (such as text, bulleted lists, images, and tables) is allowed in any of the tabs.

In order for the content type to work properly, each tab used must have both a tab name and content to show. Leaving out either of these fields will cause the tabbed box to not build correctly.

The first two tabs are required; however, tabs 3-10 are optional and do not need to be filled in.

Tab #2

To add a tabbed box content item to your page:

  1. Click "Add Content to Current Page" in the top bar of your Direct Edit window and select "Tabbed Box".
  2. You will be presented with an editing window.
  3. Please fill in the "Name" box with a unique name for the content item. This field will not show up anywhere on your finished page.
  4. For each tab you would like to have in your tabbed box, fill in a tab name and then content for that tab. Any content normally allowed in a body content item is allowed inside the tab's content area.
  5. When you are finished, press "Add" or "Update" at the top or bottom of your editing window.

Tab #3

Mauris varius semper risus, sed gravida purus placerat id. Proin venenatis ultrices odio non sodales. Cras facilisis dignissim diam, at convallis justo mattis a. Proin eleifend nisi ante, feugiat cursus dolor pretium vel. In hac habitasse platea dictumst. Phasellus id velit ac orci luctus cursus non vel velit. Donec ac massa pulvinar, tempus erat id, tincidunt nisi. Phasellus at semper ligula, quis interdum arcu. Integer laoreet tortor condimentum mi blandit, a semper odio posuere. Sed lectus mauris, semper et mauris viverra, pulvinar eleifend sem. Suspendisse potenti. Vestibulum eu lectus ac magna tincidunt dapibus. Quisque elementum pretium diam, vitae pellentesque lacus porttitor ut. Praesent volutpat vehicula sem faucibus lobortis. Sed tempor sapien id felis posuere vehicula. Mauris turpis tortor, iaculis in enim id, pretium ultricies elit.

Tab #4

Nunc rutrum, lectus sed suscipit sollicitudin, tortor tortor tincidunt turpis, at gravida nisi orci quis tortor. Suspendisse potenti. Aenean massa velit, eleifend sodales ante in, luctus sollicitudin lectus. Integer eleifend hendrerit elit vitae viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sit amet nunc at dui tincidunt molestie id vitae neque. Vivamus dignissim pharetra vehicula. Duis nec feugiat nunc. Duis pharetra diam dolor. Pellentesque a ullamcorper enim. Nunc et lectus dapibus, vestibulum augue vel, ultrices felis. Maecenas congue elit quis rutrum condimentum. Curabitur ornare dolor nulla, bibendum convallis risus posuere in. Nam vitae velit vel libero iaculis tempor. Aenean in adipiscing neque.

Three-Column Body Content

Title can go here!

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor. Nulla aliquet est nec tortor elementum, id vulputate mauris imperdiet. Curabitur sagittis nunc ut nunc condimentum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ultricies arcu sed lacus convallis varius. Donec fringilla et augue at pharetra. Donec nec sollicitudin ante. Morbi imperdiet eleifend commodo. Integer at convallis ex, at facilisis justo.

Aliquam vitae sodales lorem. Praesent lobortis turpis sem, non porttitor augue pulvinar sit amet. Fusce rutrum, nisl a consequat fermentum, diam velit consequat elit, blandit elementum libero mauris at mi. Aenean a tortor a mi tincidunt fringilla eu finibus eros. Nam in lorem sit amet lectus dapibus tempor nec nec ipsum. Integer sodales felis sed fringilla mattis. Suspendisse nulla nisi, scelerisque ac libero eu, fermentum porttitor neque. Vestibulum finibus ex fringilla erat egestas, ut gravida lorem dapibus. Curabitur luctus, magna sit amet rutrum cursus, quam nulla cursus erat, vulputate consequat tortor ex in sem. Donec rutrum nisi nec sagittis vehicula.

In aliquet lacinia tortor, at tempus ex volutpat in. Nam porta libero ligula, quis accumsan urna aliquet sed. Donec facilisis convallis fermentum. Morbi sed scelerisque lectus. Vivamus non nisi bibendum, luctus dui quis, ultricies dolor. Donec blandit nec magna eu ullamcorper. Nullam rhoncus leo risus, vitae iaculis magna interdum non. Aliquam fermentum posuere lorem facilisis tempor. Nulla aliquet est nec tortor elementum, id vulputate mauris imperdiet. Curabitur sagittis nunc ut nunc condimentum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ultricies arcu sed lacus convallis varius. Donec fringilla et augue at pharetra. Donec nec sollicitudin ante. Morbi imperdiet eleifend commodo. Integer at convallis ex, at facilisis justo.

Two-Column Body Content

Title can go here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris odio, dignissim eu tortor quis, luctus blandit libero. Sed ullamcorper velit et bibendum sollicitudin. Nulla quam ipsum, malesuada dapibus massa vitae, vestibulum malesuada nibh. Phasellus in orci in ligula gravida vulputate ac et erat. Integer porttitor ipsum arcu, nec finibus nisl viverra id. Sed ullamcorper enim et nisl tincidunt feugiat. Vivamus id purus nec orci finibus tincidunt eget quis lectus. Donec pharetra ipsum vel dictum rutrum. Maecenas laoreet, nulla id sodales rutrum, mi est suscipit mauris, ut facilisis lectus libero in nunc. Mauris at nibh cursus, cursus ipsum in, malesuada sapien. Nulla hendrerit condimentum velit, blandit accumsan velit dignissim interdum. Nullam faucibus suscipit massa nec tincidunt. Nam ut congue est, in laoreet justo. Curabitur non eros rhoncus, suscipit tortor nec, pulvinar dui.

Donec ac finibus erat. Aliquam consectetur hendrerit ullamcorper. Cras eget tellus gravida, tempor tortor at, elementum est. Nam eu enim risus. Phasellus placerat mauris in leo hendrerit, eget efficitur ligula euismod. Suspendisse laoreet magna libero, et egestas justo gravida at. Proin felis est, ultrices id ullamcorper sit amet, malesuada nec leo. Donec vitae ullamcorper dolor, ut iaculis est. Suspendisse potenti.

Cras hendrerit nulla eget dolor fringilla, non vestibulum ligula pretium. In ut urna ultricies, malesuada ipsum at, ultrices ex. Donec dapibus diam felis, a elementum dolor semper non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et sagittis tellus. Phasellus a ligula nunc. Phasellus luctus, velit ac varius tempus, magna lectus laoreet dolor, eu molestie nulla urna ac felis. Nam commodo mauris purus, nec scelerisque mi luctus a. Nulla facilisi. Etiam et ex tristique, aliquam libero eu, placerat turpis. Pellentesque vel cursus velit. In a laoreet orci. Ut imperdiet ligula eros, eu maximus ipsum varius in. Aliquam euismod facilisis turpis, accumsan rutrum lacus luctus nec. Praesent finibus sodales ipsum eu hendrerit. Ut aliquet tortor vel felis elementum, et mattis sem finibus.

Cras quis ante quis eros pellentesque fringilla. Suspendisse mollis ligula at dignissim condimentum. Proin sed convallis urna. Duis ornare arcu turpis, eu vestibulum arcu lacinia sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer mollis, leo eu eleifend commodo, enim leo tincidunt lorem, at pellentesque turpis purus at sem.

Wrapping Body Content

Wrapping Body Content
WBC must be used after a "floating" item, like a slideshow, feature image, or video
Wrapping Body Content
Floating items can be identified by your ability to choose their position on the page
wrapping Body Content
Wrapping Body Content will automatically determine the size of its margins and padding
Wrapping Body Content
Wrapping Body Content can be filled with anything allowed in a normal Body Content type

Wrapping Body Content is a more modern replacement for the Body Content content type, and can be used in the same manner and in all of the same circumstances; however, Wrapping Body Content is also able to wrap around floating items (like slideshows, feature images, and videos) to create a newspaper-like effect.

Using Wrapping Body Content is simple. When you click "Add Content to Current Page" in Direct Edit, or "Add Content" through the site structure, just choose "Wrapping Body Content" instead of "Body Content." The input boxes for Wrapping Body Content are identical to the ones you're used to for Body Content, and can be used in the same manner. Feel free to include images, lists, line breaks, paragraphs, indention, etc. as needed on your page.

Achieving the "Wrapping" Effect

To get your Wrapping Body Content to wrap around a "floating item" like a slideshow, feature image, or video, follow these steps:

  1. Place the floating item onto your page
  2. Place the Wrapping Body Content onto your page

So long as the items are placed in this order, the Wrapping Body Content will see the floating item and then wrap neatly around it.

Tips & Tricks

  • If an image will be too large to fit on your page, double-click it and type "fit" in the "class" field, then press update. Wrapping body content will then actively scale the image down to match its proportions.
  • If your page has multiple topics, use a Wrapping Body Content for each of them. The headings on each wrapping body content help search engines and screen readers scan your page, leading to better placement in search results and a more pleasant experience for users with vision impairments.
  • To get a Wrapping Body Content item to wrap around a "floating item" (like a slideshow, feature image, or video), it must be placed immediately after that floating item. This is especially important if you are a Direct Edit user, as Direct Edit does not allow you to quickly reorder items on the page.
  • If you place a floating item after a Wrapping Body Content, the floating item will position itself below the Wrapping Body Content and wait for another Wrapping Body Content to wrap around it.

(Marketing)