Component Table of Contents
This is a list of all the components. Choose a component to see the various options available.
Accordion
Reduce the need for scrolling with collapsible accordions.
Award List
Highlight awards with categories.
Back to Top
Provide a way to scroll back to the top of the page.
Breadcrumbs
Help users navigate the website's hierarchy.
Call To Action
Prompt users to perform highlighted actions.
Card
Organize content using cards, with image and icon support.
Carousel
Highlight multiple pieces of content.
Columns
Lay out content using columns.
Content
Display content with standard styles.
Content - Inset
Display styled content inside other components.
Content - Introduction
Introduce your content with stylized text.
Content - Lede
Style a summary or opening paragraph.
Footer
Create a thematically unified footer navigation for university websites.
Global Button Group Styles
Use standard styling on a button group.
Global Button Styles (anchor)
Turn a link into a button.
Global Button Styles (button)
Use standard styling on a button.
Global Image Cover
Cover an entire element with an image.
Global Screen Reader
Add textual context for assistive technology.
Global Table Styles
Use standard styling on a table.
Global Table Styles (responsive wrapper)
Make a table scroll horizontally on mobile.
Grid
Organize elements in a grid.
Header
provide branding and navigation for UIUC websites
Header Mega Menu
Build a mega menu navigation
Header Menu
Build a navigation menu
Hero
Draw a user's attention, set the page's tone.
Icon
Use the campus icon library.
Icon Panel
Highlight information with an icon and text.
Input
Form elements.
Modal
To provide a modal window to open content on top of a web page.
Org Chart
Build an org chart
Page
Use a standard layout for a page.
Page Title
Add a stylized page title with an image.
Pagination
Provide easy navigation for paged content.
Profile
Person information
Profile Card
Display a member profile with contact info.
Profile List
Build a profile
Quote
Highlight a quote or testimonial.
Section Nav
Add secondary navigation for a set of pages.
Section Nav - Manual
Create a secondary navigation without automatic list elements.
Spacer
Add vertical spacing between components.
Statistic
Create a statistic.
Tabs
Show content in a panel with tab navigation.
Tooltip
Popup that provides info when a user hovers over a button or link
Video
Make a video embed responsive.
Video Short
Make an embedded YouTube short responsive.