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.
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 MorePrimary 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 MoreAction Hero
Use this if you want to call attention to a secondary chunk of content and/or action item(s).
Read MoreProfile Hero
Feature a faculty member, student, program, facility, etc. in a visually compelling way.
Read MoreBlob
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 MoreBig Search
Let the user search for a major, alumni group, etc. from a curated set of content with defined keywords.
Read MoreContact Info
Make it easy for your users to get in touch with you or someone from your unit.
Read MoreFeaturettes
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 MoreFull 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 MoreHero
Feature your main content and call to action. This content should reflect your site’s most important user need or goal.
Read MoreLanding 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 MoreBackpage Header
A basic header for a back page (as opposed to a landing page) that serves as a label for the page.
Read MoreBack Page Main
Display general information and allow users to navigate within the section they are viewing.
Read MoreSidebar
Display ancillary info that is relevant to the main page content e.g. a subnav, promo, profile, contact info, etc.
Read MoreProfiles
Feature a series of notable faculty members, students, staff members, or speakers.
Read MoreSub-nav
Let users know where they are in your site hierarchy, and allow them to jump to sibling and child pages.
Read MoreFooter
Display your address and contact info, site credits, links to useful initiatives, and social media accounts at the bottom of every page.
Read MoreTwitter Widget
Displays latest tweets. Good for promoting your Twitter account and/or displaying news and events.
Read More