Component Library

The Component Library contains all the design elements used to build websites at UNI. These elements can be used and reused as much as needed. It helps editors and developers work in a consistent manner and increases time efficiency. It’s like a puzzle, all the parts are there, and as an editor, all you need to do is add and arrange them in the order you desire.

Each element in the UNI Component Library links to the corresponding instructions in the Drupal Manual for using the component. Access to the Drupal Manual is limited to users with CatID authentication. 

Basic Components

The most basic, and most flexible component, is the Text Block component. It supports a variety of options and layouts.

Spacer adds space between components, in either white (default) or a selection of color backgrounds. There is a Spacer component for demonstration purposes on either side of the Text Block example below. It adds 24 px of space. If more space is desired, additional Spacers may be added.

Text Block

The text block features the standard UNI Drupal text area with multiple columns and other tools available. Multiple background colors are available for the Text Block, including this color, Prexy's Pond, as well as the default white, Dome (light gray), Panther Purple (official UNI purple) and Dark Purple.

Text blocks have the option for columns:

Column 1

This is an example of two columns. Other variations of two and three columns are available such as: Two column 1/3 2/3, Two column 2/3 1/3, Three column, and Three column wide middle.

Each column is 50% of the text area in this two column layout. Images, links, and lists may all be added to columns to create the desired layout.

More information about columns

Column 2

Winter campanile

Cards and Callouts

Two-Column Cards and Two Column Callouts can be used to draw focus on special programs and information. They usually feature photos or images, along with titles and body text, and a link for more information. Tabbed blocks allow a similar display, but utilizing tabs to display similar content in a tabbed format. 

Students on campus
Two-Column Callout Subtitle

Two Column Callout

There are a number of options, both with the image and the other elements, when displaying the Two-Column Callout. 

Image options:

  • May be displayed on the left or the right
  • Full-width of browser or width of main column, as shown

Other optional elements:

  • Subtitles
  • Links
  • Body 

Two Column Cards

Adding Two-Column Cards

Card One Title

The Two Column Cards are similar to the Two Column Callouts, but display their information with text above a smaller image than the Callouts.

Options:

  • Subtitle
  • Link Title (displayed in the green box)
  • Displaying an image
  • Displaying a video
  • No image or video
  • Cards may be linked to another site or page
Subtitle

Card Two Title

The Two Column Cards are similar to the Two Column Callouts, but display their information with text above a smaller image than the Callouts.

Options:

  • Subtitle
  • Link title (displayed in the green box)
  • Displaying an image
  • Displaying a video
  • No image or video
  • Cards may be linked to another site or page

Three Column Billboards

Billboard Title

Billboards can contain any combination of title, body text and links. 

Tabbed Block

Tab
Subtitle

Multiple tabs may be added. The Tab Title is what shows in the tab area, and the Tab Subtitle is displayed just above the body content.  All fields except the link field are required. Links are optional. 

Students walking on campus

Tab
Subtitle

Multiple tabs may be added. The Tab Title is what shows in the tab area, and the Tab Subtitle is displayed just above the body content.  All fields except the link field are required. Links are optional. 

Campanile at night

Tab
Subtitle

Multiple tabs may be added. The Tab Title is what shows in the tab area, and the Tab Subtitle is displayed just above the body content.  All fields except the link field are required. Links are optional. 

Student walking near Maucker Union

Tab
Subtitle

Multiple tabs may be added. The Tab Title is what shows in the tab area, and the Tab Subtitle is displayed just above the body content.  All fields except the link field are required. Links are optional. 

Students walking on campus

Tab
Subtitle

Multiple tabs may be added. The Tab Title is what shows in the tab area, and the Tab Subtitle is displayed just above the body content.  All fields except the link field are required. Links are optional. 

Campanile at night

Tab
Subtitle

Multiple tabs may be added. The Tab Title is what shows in the tab area, and the Tab Subtitle is displayed just above the body content.  All fields except the link field are required. Links are optional. 

Student walking near Maucker Union

Carousels

You can add a regular carousel or slideshow anywhere on your page.

Forms

You can easily add Drupal Webforms and Formassembly (Salesforce) forms to your site, each with its own component.

FormAssembly / Webform Components

Tp add a FormAssembly form to a site, enter the Form ID for your FormAssembly form into the field provided for it in the FormAssembly component. You also have optional title, subtitle and body fields,  as well as other optional settings pertaining to your specific FormAssembly form. FormAssembly For ID example
To add a Drupal Webform, first have the Drupal webform created by the IT-Client Services webteam, then place the Webform component on your page and Select the appropriate form name from the drop-down list under Form. 
Drupal Webform example
As with the FormAssembly form, You also have optional title, subtitle and body fields available, as well as other optional settings pertaining to your Drupal Webform.

Link Components

There are a variety of components to display links to other web pages or sites.

  • The Full-Button Width Callout may be used to highlight a particular call to action, such as Apply for Admission.

  • A Full-Width Link List displays a title and three links below and to the right of the title. 

  • The Two-Column Link List may be used to display similar groups of up to six links, such as a Quick Links section, with a title and a photo that may be displayed on the left or the right. 

  • The Link List may also be used to display similar groups of links, with a title and text section to the left of the links. A subtitle is optional.   

  • The Link List Accordion provides a visible title field with a drop-down accordion list display, an optional body field and a list of up to six links. 

  • The Contact Us/Social Links component is a way to display links to your social media sites. The subtitle, title, body and social Links title are all optional, and may be used in any combination with the social media links. The social media icons are preset, so all you need to do is enter in the link to your social media sites in the appropriate field.   

The Accordion provides a visible title field with a drop-down accordion display an optional Body field and a list of up to eight links. 

News/Events/Announcements

A News or Events section can be added to your site to feature content developed with the News content type or Events content type. 

A photo may be included on either News or Events, but it is recommended you either use photos or you don't for each of those blocks. Having photos on some, but not all News items, for instance, creates  an odd looking display. 

Upcoming Events

Announcements

College of Business Announcements component example

The Announcements content type and component may be used to add brief department announcements on a page. Announcements are added to the site using the Department Announcements content type, then an Announcements component is place on the website page where you want them to appear. The example is the announcements section on the College of Business Student Hub home page. 

Each announcement title is a link to the full text of the announcement. Three announcements appear at a time on the component, when more than three are added, the rest are linked via the pager just below the last announcement. 

Other Components

Additional components are available for adding a Site Search Box, a full width image with caption, a full width image or video, or a pulled quote for emphasis. 

A Pulled Quote has fields for the quote (don't add quotation marks, they're in the theme), with optional fields for author and author label.

Full-Width Image With Caption has fields for an image and an optional caption.

A Full-Width Image or Video has fields for an optional title, link, video link and image. It also has a required button title that displays over the top of the video or image. 

 

Directory

Directory Profiles entry example

A faculty/staff directory is added by using the Directory content type to create a directory page for each member of the department (or other group being represented, such as an advisory committee). A Directory component is then placed on the appropriate page, an optional title and body section may be added, and the people you wish to add are selected for the page by adding their name to the Directory Profiles fields.  Once names are added, they can be arranged in whatever order you prefer, by department hierarchy, alphabetically, etc. 

More than one directory may be added to a page, to display more than of group of department members. An example of that may be found on the College of Business Deans office page as well as on a number of other UNI sites.

Happiness depends more upon the internal frame of a person’s own mind, than on the externals in the world.

George Washington
Pulled Quote
UNI Scene
This is the caption of the full-width image.

Full-Width Image or Video

Commencement Video
UNI Commencement