Component style guide
A complete list of components in the CMS is below. Click on a component to learn more about design and usage, including accessibility considerations.
Accordion
Accordions organize and stack a list of nested Accordion Item components, which can be expanded or collapsed to reveal or hide the content.
Banner
Banners offer a visual way to present content with a full-width background image, overlay text and colors, and multiple fields to position information.
Big Numbers
The Big Numbers is a component that shows three statistics and has an animation that increases the number up from zero up until the number value inserted is reached.
Callout
Use this component to draw serious attention to your content. This full-width, tall container will allow text, background image and CTA buttons.
Call-to-Action
This component will allow you to create a simple, full-width call-to-action for your page.
Call-to-Action with Image
This component includes an image as well as a call-to-action and is designed to break up content on a webpage and encourage engagement.
Catalog Link Display
This component generates an automatically updating link to a program page in the University Course Catalog.
Chart
Chart components use a .csv file to generate accessible pie charts, line charts, column charts and bar charts.
Class Listing
Use this component to list classes from an xml data file exported from PeopleSoft.
Content Block
One of the primary components used in the CMS, Content Blocks are flexible components that display text, images and videos on a webpage. Content Blocks can be used to create a variety of layouts.
Data Table
Data Tables present tabular data in an accessible, easy-to-update format that can be searched and sorted.
Embed
The Embed component is used to place Formstack forms and videos from YouTube or Vimeo on a webpage.
Event Feed
Event Feeds bring relevant events from our University events calendar into your website.
Featured Events
The Featured Events component is a visually oriented events listing, with manually placed event images, categories, dates and links.
Form Panel
Form Panels allow you embed a form next to content with an optional image header.
Hero
The Hero component is a large image with optional text overlay that can be added at the top of a page or used as a disruptive visual in the middle or bottom of a page.
Hours
Hours components allow you to post a daily schedule for a page, with automatic changes for holidays or other changes to the regular schedule.
Inline Links
Inline Links show a list of links in an easy-to-read two-column layout. This component should be used to format large amounts of links for display.
Local Alert
Local Alerts run near the top of all pages on your website. They can be used to announce important changes or announcements.
Local QuickLinks
Local QuickLinks are icon-based navigation elements that can highlight important pages on your site or provide a secondary navigation within large sections or long webpages.
News Feed
News Feed components can be used to bring relevant articles from ÁùºÏ±¦µäToday onto your website.
Organization Chart
Organization Charts are used to display the organization structure of a department or unit in an accessible way.
Panels
Panels are container components that can hold content blocks and provide additional styling options.
Photo Gallery
Photo Galleries offer a way to showcase images of buildings, people, events, labs and more.
Profile Listing
Profile Listings are used on directory and contact pages, and allow the option of filtering or searching the profiles that are displayed via the listing.
QuickLook
QuickLooks offer a grid-based view of content categories that can be expanded to reveal additional information. QuickLooks can be searched and filtered.
Quote
Quote components can be used to add a short, stylized testimonial from a student or faculty member.
Search Bar
The Search Bar is an element that allows specific searches from a set of webpages.
Section Control
The Section Control is a functional component that controls navigation, breadcrumbs, local alerts, contact information, section analytics and the text identifier for each web section.
Separator
The Separator is a visual element intended to help break up the information of a page to make it easier for users to digest.
Tiles - Image
Image Tiles place text next to an image in a grid pattern.
Tiles - Overlay
Overlay Tiles are linking elements that place text on top of an image with a colored overlay.
Video Gallery
Video Galleries are designed to display a number of videos grouped together. Video Galleries display video thumbnails in rows of three, and the thumbnails expand in a modal window to play when clicked.
Video Panel
Video Panels allow you to combine a video Embed component with copy placed next to the video. The video Embed component offers additional styling and sizing options for your video.
Have questions? Need website assistance?
Email us at: cms@unr.edu