Skip to main content

Looking for the old Design System website? View an archive of the Design System Version 2.

Flying WV
West Virginia University Design System 3
Strategic Communications and Marketing
Contribute

Components

The WVU Design System offers a wide variety of components tailored to your content needs.

Call to Action

Article Tease

Feature a single article.

View Article Tease

CTA Banner

A banner with a call to action button.

View CTA Banner

Hero

Full-width banner with heading and CTA.

View Hero

Hero - Split

Split hero with image and CTA.

View Hero - Split

Place

Image with side text.

View Place

Poster

A large image block with bold text overlay and optional CTA.

View Poster

Poster - Split

Two-column layout with text block and image.

View Poster - Split

Profile - Generic

Spotlight with image, name, location, and heading.

View Profile - Generic

Lists

Alternating Grid

Alternating content blocks w/a photo, text call-to-action.

View Alternating Grid

Article Collection

Grid of tagged articles.

View Article Collection

Benefits Checklist

List of product benefits.

View Benefits Checklist

Calendar Events

Display a feed of upcoming events with dates and details.

View Calendar Events

Cards

Grid of cards (photo, headline, CTA).

View Cards

Cards (Vertical)

Cards stacked vertically (w/photos).

View Cards (Vertical)

Cards - Simple

Grid of cards (no photo).

View Cards - Simple

Cards - Simple (Vertical)

Cards stacked vertically (no photos).

View Cards - Simple (Vertical)

Contacts

List of specific contacts with names, roles, and info.

View Contacts

Factoids

A banner with key stats or numeric highlights.

View Factoids

Faculty Members

Profiles of faculty with names, titles, and photos.

View Faculty Members

Featurettes

Flexible layout for text, images, and CTAs in any order.

View Featurettes

Featurettes - 2-Column

Feature items displayed in two columns.

View Featurettes 2-Column

Featurettes - Ordered List

Numbered list of features with headings and short text.

View Featurettes - Ordered List

Featurettes - Vertical

Stacked image-and-text items with optional buttons.

View Featurettes - Vertical

Featurettes w/Icons

Feature items with icons, split in two columns.

View Featurettes w/Icons

Featurettes w/Icons - 2-Column

Feature items with icons, split in two columns.

View Featurettes w/Icons - 2-Column

Featurettes w/Icons - Vertical

Stacked features with icons, titles, and text.

View Featurettes w/Icons - Vertical

Link Lists

Vertical group of categorized links.

View Link Lists

Quicklinks

Compact grid of links for fast navigation.

View Quicklinks

Testimonials

Multi-column quote module with headshots, names, and titles.

View Testimonials

Photos and Video

Video Feature

Embedded video, title, and optional description.

View Video Feature

YouTube Shorts

YouTube Shorts with optional title and subhead.

View YouTube Shorts

YouTube Videos

Small gallery of YouTube videos.

View YouTube Videos

Jump Links

Horizontal links for navigating page sections.

View Jump Links

Search

Search your site’s pages.

View Search

Miscellaneous

Info Card

For including larger bodies of content.

View Info Card

Quote

Large stylized quote block for emphasis.

View Quote

Separator

A dotted horizontal line for visual separation between sections.

View Separator

Social Media Accounts

Linked social media icons for official accounts.

Social Media Accounts

Layout

Columns - 1-1

Two-column layout with equal-width columns.

View Columns - 1-1

Columns - 2-1

Two-column layout with one wide and one narrow column.

View Columns - 2-1

Columns - 2-1-1

Three-column layout with one wide and two narrow sections.

View Columns - 2-1-1