Santa Clara University

Web Publishing @ SCU

Formatting Options for Lists

A few options are available for presenting lists of items in Commonspot, ranging from a basic bulleted (or numbered) list, to "directory" style lists with image icons or thumbnail images for each item.  Here are some examples:

Standard lists:

The standard formatting for unordered (bulleted) and ordered (numbered) lists, which can be added using Commonspot's text editor.

  • Item one
  • Item two
  • Item three
  1. Item one
  2. Item two
  3. Item three

Optionally, you may add the "linklist" style class to the list - the formatting will change to use double right-angle characters before the link item:

To add a list with this style class, you can select the "text-linklist" option from the HTML snippets menu in the Commonspot text editor, or you can switch to the HTML view and maually add "class=linklist" to the opening UL or OL list tag.

Custom Bulleted Lists

The Commonspot "Bulleted List" element (you'll find it in the Hyperlink element gallery category) has various custom rendering options that will allow you to build a list with headings, descriptions, links, nested lists of links, and thumbnail images. The "Directory List" rendering will be applied by default, and you can select the Simple List or Expandable List options by modifying the element's Custom Render Handler property.

FAQ Lists

The Directory and Simple lists can optionally be displayed with a list of item titles that link to the full list title and description below.  This can be useful for handling the display of Frequently Asked Question lists, or other lengthy lists.

To format a list in this way, select the Custom Render Handler option in the Element Properties menu, click "next" and check the FAQ display box.

Some Examples

 

Directory List

The standard rendering for the Bulleted List element.

  • iconOffice of Marketing and Communications

    Santa Clara's Office of Marketing and Communications assists the University's schools, academic departments, and administrative offices with outreach, visual branding, and media placement.

  • iconInformation Services

    Information Services supports teaching, learning, scholarship and University operations by providing access to, facilitating use of, and managing the collection, processing, storage, maintenance, and preservation of information.

  • iconWeb Publishing Support

    Support for campus Web publishers is available from OMC and Information Services.
 
Simple List
A more compact version of the Directory List style.
  • iconOffice of Marketing and Communications
    Santa Clara's Office of Marketing and Communications assists the University's schools, academic departments, and administrative offices with outreach, visual branding, and media placement. Learn More »
  • iconInformation Services
    Information Services supports teaching, learning, scholarship and University operations by providing access to, facilitating use of, and managing the collection, processing, storage, maintenance, and preservation of information. Learn More »
  • iconWeb Publishing Support
    Support for campus Web publishers is available from OMC and Information Services. Learn More »
 
Expandable List

Based on the Portal page navigation, this renders a list with item description text that can be opened and closed.

  • open and close viewOffice of Marketing and Communications
  • open and close viewInformation Services
 

List with custom thumbnail images

You can replace the standard list item icons for Directory or Simple lists with your own images.  Add an image to the description field for the list items, and the Directory and Simple rendering will use it in place of the icon.

  • undefinedStandard sizes for thumbnail images

    This image has the standard dimensions for thumbnails;  100px width by 60px height.

  • thumbnailNon-standard image sizes

    The image added here has dimensions that vary widely from the standard 100x60 dimensions, and is resized to conform to the standard width. As a general rule, you'll get better results with images that are square or horizontal in format.
 
Accordion List

This uses the jQuery UI library to present a list in the 'accordion' style.  Update the page's custom metadata settings to include the jQuery library if using this list rendering style.

Office of Marketing and Communications
Santa Clara's Office of Marketing and Communications assists the University's schools, academic departments, and administrative offices with outreach, visual branding, and media placement. Learn More »
Information Services
Information Services supports teaching, learning, scholarship and University operations by providing access to, facilitating use of, and managing the collection, processing, storage, maintenance, and preservation of information. Learn More »
Web Publishing Support
Support for campus Web publishers is available from OMC and Information Services. Learn More »
Printer-friendly format
Established 1851