Components

Components act as a sort of plug-in used in order to allow for the consistent use of commonly requested elements. Components are designed to be easy to deploy and maintain. Contact Web Services if you would like to add a component on your page.

An accordion may be useful on pages where the reader is interested in only some of the information, such as an FAQ page. Accordions burden the reader with the responsibility to choose what they want to read next. They are not a solution for organizing long pages.

This element is an example of an accordion.

Web Services provides support for calendars which can be used to communicate events, deadlines, or other dates of interest. Users can easily maintain their own calendar using a Google Calendar. As the Google Calendar is updated, events are automatically made available for viewing to the public.

Calendars can be built using several options:

  • With or without Search
    • A search field will allow users to filter events based on the text of an event's title, location, and description.
  • Weekly or Count-based results
    • Weekly - Results are displayed on a weekly basis. If there are no events for a given week, nothing is displayed. Users can browse to future or past times to explore events. There is no limit to the number of events that could be displayed at a time.
    • Count - Only a number of specified events will be displayed. This is a good option if a limited height is desired.
  • Full or Compact display
    • Full display - This will include the department's icon graphic, calendar name, and description preview on the event box.
    • Compact display - The icon, calendar name, and description are removed. Best for simple calendars and to avoid redundant information.

View an example calendar.

Carousels rotate through several images and can have captions and act as links to other pages.

  • Carousels are created using the Image Slider component. In the component, you will supply an image, link, and caption. Only the image is required.
  • All images used in a carousel should have the same dimensions.
    • E.g. carousels on a typical page with a side navigation menu should use images that are at least 900px wide. The typical/recommended size is 900px by 400px.
  • Images in sliders should be primarily imagery and not primarily text. Sliders are inefficient at communicating with an audience.
  • The maximum number of slides that may be included in a carousel is 6.
  • Carousels do not currently appear inside of Cascade, however they will appear once the page is published.

A Directory of People can be used to build a contact page, to include a contact person in a page, to build a listing of people on a committee, etc. The contact information for SUU employees is pulled in directly from Banner data and mySUU portal information. 

The following information comes from Banner:

  • name
  • title
  • office
  • phone
  • email address

Changes to this information must be sent to the Human Resources office

The following information comes from mySUU:

  • office hours
  • website
  • biography

Changes to this information must be done by the individual by logging into the mySUU profile.

Headshot comes from a central repository that is on the main SUU web server. These photos are used in the directory search and throughout the SUU website where applicable. Replacement photos can be taken by Photo Services in the Marketing Communications office. If someone already has a professional photo they'd like to use, that can be sent directly to Web Services.

Layout Examples:

An image gallery provides a way for users to preview several small images. The full size image will display on the screen when the user selects the corresponding thumbnail image, dimming the rest of the web page.

View an example of an image gallery.

A modal is a dialog box that displays on top of the current page. It can be used to show further information about a topic without taking up space on the page itself. A modal consists of two parts - the modal, and a link to open the modal.

You can view a modal by visiting the Program Finder and selecting a program link from the main table.

A news feed displays content from SUU News, the T-Bird Nation blog, or both based on a selected tag. Tags typically correspond to departments, colleges, and organizations and can showcase recent related stories. The feed updates as new articles are published. Feeds are limited to a small number of articles, but can link to a page with a full list of related articles.

A schedule may be useful for displaying information for a conference or an activity. A schedule can display information for multiple days, and for multiple events per day. Schedules ask for the following information for each activity:

  • Date
  • Name
  • Location
  • Description
  • Speakers/Credits
  • Image

Sometimes it may be useful for users to be able to sort table by columns, or to filter using a query. SUU uses FooTable to help us add more features to standard HTML tables.

Learn more about FooTable.

To turn a regular table into a sortable table, you will need to add the class .footable to the opening table tag. You can then add optional data attributes to add features.

<table class="table">

Would become:

<table class="table footable" data-filtering="true" data-sorting="true">

This creates a FooTable that has sortable columns and include a search bar to help users filter data.

Unit headings serve as an in-context title for a page. They are set in the directory setup block as shown in the following image:

An example of the heading field in a setup block.

The heading field is required on all setup blocks.

The unit heading can be set to link to a specified page, usually the homepage for the directory. It will be the first content on the page immediately following the branded heading.