Components

Components are the building blocks of your website. From buttons and image cards to accordions and tabs, these reusable design elements help you present content in a clear, consistent and engaging way.

Each component is designed to align with UNC Charlotte’s brand and accessibility standards, giving you flexibility while ensuring a cohesive user experience across our web ecosystem.

Use this guide to explore available components, understand their best uses, and learn how to implement them effectively.

Page Header

A page header displays your page’s title and an optional image. Choose from small (no image), medium or large (with images) headers for your pages.

Testimonial

Let students or alumni do the talking and add some social proof to your page.

Link List

List out lots of helpful links in an easy-to-scan manner.

Block Link Card

An impactful way to include a few links that need a little more punch than a simple button.

Block Link Cloud

An impactful way to include a few links with a simple button.

Statistic Card

Call out important figures with a component that makes big numbers feel special.

Icon Card

Call out some important points, each with their own icon.

Big Image / Video

An immersive way to show off great photography and video while mixing in CTAs.

Image Gallery

Let users explore your content by including a collection of images.

Image Carousel

Call out some important points, each with their own image.

Image Cards

A super versatile component that lets you list content, display images, organize info and more.

Slider

A slider block allows you to display multiple images or content through slides that users can navigate.

Call To Action Simple

Grab users’ attention with a simple title and description to direct them to singular calls to action.

Call To Action Double

The CTA Double-style allows two calls to action in the same component.

Call To Action Image

Display a photo along with a title and description to direct users to a call to action. Great for storytelling!

Call To Action Grid

Includes an optional header and description, this block directs users to multiple calls to action.

People Card

The people card is a customizable block designed to display staff or team member information on your site.

Events / Snippet Embed

Feature and list your events to create excitement and drive engagement.

Info Card

The information card is a versatile content element used to highlight important messages with distinct visual cues.

Post Cards

The post block / snippet embed is a content module designed to showcase your latest updates, announcements or articles in a clean, organized format.

Section

The section component is used to contain other elements/components when necessary. It includes an optional header, description and CTA button, which can be displayed either on the top or the side of the section.