WVU Masthead Combo College
<r:partial name="patterns/wvu-masthead" /> // note this is based on a root font size of 16 pixels. make sure the font-size of your parent element is set to 16px.
WVU Masthead Two-Line Lockup
<r:partial name="patterns/wvu-masthead" />
$wvu-masthead-two-line-lockup: true;
WVU Masthead for Department
<r:partial name="patterns/wvu-masthead--department" />
WVU Masthead Combo Gold
<r:partial name="patterns/wvu-masthead" />
$wvu-masthead-background: 'gold'
WVU Masthead for Sub-brand
<r:partial name="patterns/wvu-masthead" />
$wvu-masthead-background: 'blue'; // This needs to be blue because gold text on a white background (or vice versa) does not meet accessibility guidelines. It needs to be white + gold text on a blue background. $wvu-masthead-is-sub-brand: true; $flying-wv-w-sub-brand: 'insert-your-image-url-here.png'; // Note you will have to adjust the 'background-size' property of your 'wvu-masthead__logo' selector to the proper width of your custom logotype. Do this in your own custom 'wvu-masthead.scss' file.
WVU Masthead Mini
<r:partial name="patterns/wvu-masthead--mini" />
WVU Masthead Mini Gold
<r:partial name="patterns/wvu-masthead--mini" />
WVU Masthead Mini White
<r:partial name="patterns/wvu-masthead--mini" />
WVU Masthead Mini WVU Tech
<r:partial name="patterns/wvu-masthead--mini--wvu-tech" />
WVU Masthead Mini Potomac State
<r:partial name="patterns/wvu-masthead--mini--potomac-state" />
WVU Site Header w/Search
Engineering and Mineral Resources
<r:partial name="patterns/wvu-header" />
@import 'wvu-header';
@import 'wvu-header';
WVU Masthead w/Nav + Search Toggle
<r:partial name="patterns/wvu-masthead-nav-search-toggle" /> <!-- note, if you want to use the navigation shown here separately, for example your site does not requre a seach bar in your masthead, or you wish to use the alternate header shown above, reference "patterns/wvu-nav" -->
@import 'wvu-hide-show-search';
@import 'wvu-nav';
<r:include_javascript name="wvu-masthead-nav-search-toggle" />
<!-- NOTE: This must come after jQuery -->
Hero
It Starts Now.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<r:partial name="patterns/wvu-hero" />
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit with Shout, Photo, Diagonal Line
It Starts Now.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<r:partial name="patterns/wvu-hero" />
$has-diagonal-line: true;
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit with Busy Photo + Vignetting
It Starts Now.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<r:partial name="patterns/wvu-hero" />
$wvu-hero-vignetting-opacity: 90; // Use this when you have a background image that is busy and renders the typography illegible. Use any value that is a multiple of 10.
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit with Medium Shout and Photo
This is where ideas come first.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<r:partial name="patterns/wvu-hero" />
$wvu-shout-length: 'medium'; // use this when you have a longer headline so as to shrink the text size and padding
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit with Long Shout and Photo
The future will be built by those who are willing to get up and go after it.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<r:partial name="patterns/wvu-hero" />
$wvu-shout-length: 'long';
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit Traditional
It Starts Now.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<script async src="https://fast.fonts.net/jsapi/b5bb5fa1-40c1-4690-9464-76ee16d23dbc.js"></script> <!-- Load Iowan Roman & Italic from Fonts.com -->
<r:partial name="patterns/wvu-hero" />
$wvu-hero-title-typeface: 'traditional-audience';
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit for Narrow Audience
It Starts Now.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This<r:partial name="patterns/wvu-hero" />
$wvu-hero-title-typeface: 'narrow-audience';
@import 'wvu-hero';
@import 'wvu-hero';
Hero Unit with Small Photo
It Starts Now.
So let’s go. Release the Mountaineer spirit inside of you. Reach the limits of what you can do and then keep on going.
More About This
<r:partial name="patterns/wvu-hero--small" />
@import 'wvu-hero'; // don’t have a big fancy photo? no problem, use the baby hero
@import 'wvu-hero';
Landing Page Header
Landing Page Header
<r:partial name="patterns/wvu-landing-page-header" />
$has-landing-page-intro-overaly: true; // this enables a transparent background under your intro text in case the background photo renders the text illegible.
@import 'wvu-landing-page-header';
@import 'wvu-landing-page-header';
Features Triptych
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
More About Topic AHeader
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
More About Topic BHeader
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
More About Topic C<r:partial name="patterns/wvu-spotlights-triptych" /> <!-- Use wvu-spotlights-triptych--auto if you want to loop through a set of child pages and pull appropriate elements -->
@import 'wvu-triptych';
@import 'wvu-triptych';
Super Nav
<r:partial name="patterns/wvu-quadtych" />
@import 'wvu-quadtych';
@include pms-429-c-background(); <!-- You might assign this to your own custom wvu-quadtych class-- >
@import 'wvu-quadtych';
Horizontal Widgets
Spotlights
Patterns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Continue to Patterns
Patterns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Continue to Patterns<r:set_var name="wvu-diptych-combo__classes" value="u-pms-432-c background" /> <r:set_var name="wvu-cal-feed"> https://cal.wvu.edu/EventListSyndicator.aspx?type=N&number=5&category=67-0&ihc=y&expire=N&adpid=21&nem=No+events+are+available+that+match+your+request&sortorder=ASC </r:set_var> <r:partial name="patterns/wvu-diptych-combo" /> <!-- To obain your own calendar feed with the format shown above, contact Jay Allen (jay.allen@mail.wvu.edu) -->
@import 'wvu-diptych-combo'; @import 'wvu-calendar';
@import 'wvu-diptych-combo';
<r:content_for name="page_js">
<r:include_javascript name="vendor/calendar-reformat" />
</r:content_for>
Features Diptych
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Read MoreHeader
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Read More<r:partial name="patterns/wvu-spotlights-diptych" />
@import 'wvu-diptych';
@import 'wvu-diptych';
Events
<div class="wvu-events">
<div class="wvu-container">
<h2>Events</h2>
<ul class="wvu-calendar wvu-calendar--flex">
<script language="javascript" src="https://cal.wvu.edu/EventListSyndicator.aspx?type=N&number=5&category=67-0&ihc=y&expire=N&adpid=21&nem=No+events+are+available+that+match+your+request&sortorder=ASC"></script>
<!-- to obain your own calendar feed with the format shown above, contact Jay Allen (jay.allen@mail.wvu.edu) -->
</ul>
<a class="button button--white">All Events</a>
</div>
</div>
@import 'wvu-calendar'; @import 'wvu-calendar--flex';
.wvu-events {
@include pms-432-c-background();
}
<r:include_javascript name="vendor/calendar-reformat" />
Quicklinks
<r:partial name="patterns/wvu-quicklinks" />
@import 'wvu-quicklinks'; @import 'wvu-quicklinks--flex';
@import 'wvu-quicklinks';
Social Media Links
<r:partial name="patterns/wvu-social-media-icons" />
@import 'wvu-social-media-icons';
@import 'wvu-social-media-icons';
Buttons
Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button
Apply Now Request Info Give
<a href="your-link-here" class="button button--wvu-gold">
Breadcrumbs
<r:partial name="patterns/wvu-breadcrumbs" />
@import 'wvu-breadcrumbs';
@import 'wvu-breadcrumbs';
Type Hierarchy
Mountaineers
Go First.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum.
Volum explantent
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
Subheading lorem
Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
Subheading lorem
Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
Subheading lorem
Subheading lorem
Subheading lorem
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
Fieldsets and Form Elements
Tables
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
<r:partial name="patterns/wvu-sub-nav">
@import 'wvu-sub-nav';
