Skip to main content

Components

WVU Design System components are a well-documented set of HTML, CSS, and JavaScript assets. Each are based on solutions to common design problems, and come in a variety of options for type pairings, colors, and WVU-branded elements.

Directory

List people and their contact info.

Read More

Masthead

Primary identifier for your site. Let’s the user know at a glance where they are. A masthead is required for all WVU websites.

Read More

Primary Navigation

This is the main navigation on your site. It goes right below the masthead. All WVU websites are required to have a primary navigation consistently placed on every page.

Read More

Blob

Display different types of content (e.g. a calendar feed, news stories, and profiles) in a single section that is easy for the user to scan quickly.

Read More

Action Hero

Use this if you want to call attention to a secondary chunk of content and/or action item(s).

Read More

Profile Hero

Feature a faculty member, student, program, facility, etc. in a visually compelling way.

Read More

Big Search

Let the user search for a major, alumni group, etc. from a curated set of content with defined keywords.

Read More

Contact Info

Make it easy for your users to get in touch with you or someone from your unit.

Read More

Event Agenda

Display a listing of events by day, for example on a conference website.

Read More

Event Listing

List calendar events for your organization.

Read More

Featurettes

Feature a series of content chunks in the same format, for example a thumbnail, header, blurb, and call to action, that users can scan quickly.

Read More

Full Bleed Photo w/Caption

Insert a full bleed photo with a caption. Useful for breaking up text in a long-form essay or blog article.

Read More

Hero

Feature your main content and call to action. This content should reflect your site’s most important user need or goal.

Read More

Landing Page Header

When you want a fancy page with compelling content. Maybe you direct users to this page in a marketing piece and you want to make a strong visual impact to introduce your content.

Read More

Lede Text

Introduce content on a back page or landing page.

Read More

Log In

A shell for your web application log in.

Read More

Majors Listing

List your college or department’s programs.

Read More

Backpage Header

A basic header for a back page (as opposed to a landing page) that serves as a label for the page.

Read More

News Articles

Display a series of news articles.

Read More

Display a photo gallery.

Read More

A trail of links that lets the user know where they are.

Read More

Profile

Feature a faculty member, student, program, facility, etc.

Read More

Display a list of links that are the most useful to your audience.

Read More

Back Page Main

Display general information and allow users to navigate within the section they are viewing.

Read More

Profiles

Feature a series of notable faculty members, students, staff members, or speakers.

Read More

Show Outcomes

Show user what kinds of jobs and salaries they can get with a given major.

Read More

Display ancillary info that is relevant to the main page content e.g. a subnav, promo, profile, contact info, etc.

Read More

Let users know where they are in your site hierarchy, and allow them to jump to sibling and child pages.

Read More

Video Feature

Feature a video and provide a link to more videos.

Read More

Display your address and contact info, site credits, links to useful initiatives, and social media accounts at the bottom of every page.

Read More

Testimonials

Quotes from people that help show how awesome you or your organization are.

Read More

Stat Sheet

Pair tabular data with a hero.

Read More

Social Media

Display a list of social media accounts to follow.

Read More

Twitter Widget

Displays latest tweets. Good for promoting your Twitter account and/or displaying news and events.

Read More