Component Guide
Select a component below to learn more about the component, see a demo of the component in action, or follow along with step-by-step instructions for usage.
Accordion
A web design element that presents a vertically stacked list of headers, where clicking
on a header reveals or hides the corresponding content underneath it.
Learn More
Audio Callout with Photo and Text
A web design element that showcases a photo, text, and an HTML5 audio player, designed
to highlight people and their work.
Learn More
Callout with Photo and Text
A web design element that displays a box with a user-selected photo and text, designed
to highlight featured content.
Learn More
Call To Action Link
A web design element that adds a stylized button with user-entered text, designed
to highlight a call to action.
Learn More
Clickable Header Card
A web design element that adds a clickable box with a stylized header and body text,
designed to highlight important information on a page.
Learn More
Clickable Photo Card with Header
A web design element that adds a clickable box with a stylized header and photo, designed
to highlight photography.
Learn More
Column Layout
A web design element that lets you add 2, 3, or 4 columns to a page, with columns
stacking vertically left to right on mobile devices.
Learn More
Contact Card
A web design element that features a portrait photo, text with title and contact info,
and an optional bio link button.
Learn More
Content Card
A web design element that adds a box with user-entered text and a link button, designed
for easy text and button placement in various layouts.
Learn More
Content Card Layout
A web design element that creates a grid for Content Card components, aligning call-to-action
buttons, with 2, 3, or 4 column options that stack vertically on mobile devices.
Learn More
Content Card with Photo
A web design element that features a photo and text, designed to highlight content.
Use with Content Card Layout for multiple cards.
Learn More
Events Feed
A web design element that displays a live feed of the college events calendar, designed
for use on a homepage.
Learn More
Facts and Image
A web design element that features a photo on the right and text on the left, designed
to highlight the top three pride points for a department or program.
Learn More
Facts and Text
A web design element that features text, designed to highlight the top three pride
points for a department or program.
Learn More
Figure Component
A web design element that adds a box to the page, with a user-selected photo and caption.
Learn More
Hero Background Video
A web design element that adds a user selected video and tagline to the top of a homepage.
Learn More
Horizontal Tabs
A web design element that displays clickable headers in a horizontal list that reveal
content when clicked.
Learn More
In-Page Search
A web design element that adds a search box, allowing users to search through large
sections of text.
Learn More
In-Page Search and Filter
A web design element that adds a search box and filter, allowing users to search through
and filter large sections of text.
Learn More
MP3 Player
A web design feature that adds an HTML5 audio player with a user selected MP3 file.
Learn More
Multimedia Player
The Multimedia component adds a user entered video or audio clip with an image to
a page.
Learn More
Page Alert
A web design element that adds a box to the page with a user-selected alert status.
Learn More
Photo Stripes
A web design element that adds a box to the page, with 12 user-selected photos that
appear in two animated rows.
Learn More
Pull Quote
A web design element that adds a stylized box to the page with a user entered quote.
Learn More
Tables
A web design element that adds 1 of 3 styled and accessible tables with user entered
content.
Learn More
Vertical Tabs
A web design element that displays clickable headers in a vertical list that reveal
content when clicked.
Learn More
Well
A web design element that adds a stylized box to the page with user entered content.
Learn More