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.

CTA Banner

A banner with a call to action button.

Hero

Full-width banner with heading and CTA.

Hero - Split

Split hero with image and CTA.

Place

Image with side text.

Poster

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

Poster - Split

Two-column layout with text block and image.

Profile - Generic

Spotlight with image, name, location, and heading.

Lists

Alternating Grid

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

Article Collection

Grid of tagged articles.

Benefits Checklist

List of product benefits.

Calendar Events

Display a feed of upcoming events with dates and details.

Cards

Grid of cards (photo, headline, CTA).

Cards (Vertical)

Cards stacked vertically (w/photos).

Cards - Simple

Grid of cards (no photo).

Cards - Simple (Vertical)

Cards stacked vertically (no photos).

Contacts

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

Factoids

A banner with key stats or numeric highlights.

Faculty Members

Profiles of faculty with names, titles, and photos.

Featurettes

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

Featurettes - 2-Column

Feature items displayed in two columns.

Featurettes - Ordered List

Numbered list of features with headings and short text.

Featurettes - Vertical

Stacked image-and-text items with optional buttons.

Featurettes w/Icons

Feature items with icons, split in two columns.

Featurettes w/Icons - 2-Column

Feature items with icons, split in two columns.

Featurettes w/Icons - Vertical

Stacked features with icons, titles, and text.

Link Lists

Vertical group of categorized links.

Quicklinks

Compact grid of links for fast navigation.

Testimonials

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

Photos and Video

Video Feature

Embedded video, title, and optional description.

YouTube Shorts

YouTube Shorts with optional title and subhead.

YouTube Videos

Small gallery of YouTube videos.

Jump Links

Horizontal links for navigating page sections.

Search

Search your site’s pages.

Miscellaneous

Info Card

For including larger bodies of content.

Quote

Large stylized quote block for emphasis.

Separator

A dotted horizontal line for visual separation between sections.

Social Media Accounts

Linked social media icons for official accounts.

Layout

Columns - 1-1

Two-column layout with equal-width columns.

Columns - 2-1

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

Columns - 2-1-1

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