Component style guide

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.

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. 

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.

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 NevadaToday 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.