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.
Component Categories
The components in the Component Library have been separated into six categories to assist you in finding the components best suited for your site.
The most basic, and most flexible component, is the Text Block component. It supports a variety of options and layouts.
A 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.
Column 2
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.
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
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
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.
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.
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.
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.
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.
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.
in the
Midwest
Ranked in the “Best Regional Universities (Midwest)” according to US News and World’s 2020 report.
Affordable
Education
Your education and your career success are not about debt and finance. Your knowledge is about making a better future. At UNI, we're committed to keeping college affordable while providing practical education.
AACSB
Accredited
Earn your MBA from a university that’s accredited by the Association to Advance Collegiate Schools of Business International.
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. 
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.
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.
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.
Full-Width Link List
Two Column Link List
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.
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.
Announcements
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.
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.
A 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
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.
Pulled Quotes
Pulled quotes have been updated to allow multiple variations. For text only, the look has been updated, and the option to have a color background or white background. The text may also be left aligned or centered. 
In addition to the text option, there is now also an option with a photo. Just like with Two-Column Callouts, the photo may be on the right or left side, and may include a button link or not. 
Site Search Box
The site search is powered by the Drupal Search module, and will search only your site, not the entire UNI site. The Title, Subtitle and Body fields are all optional.
