UW Brand

HTML components

Getting started with the UW UI kit is easy. The only dependency is Backbone.js, which does require Underscore.js and jQuery to be loaded as well. Just add to the header of your document the JavaScript and CSS files listed below. Once loaded, you’ll be able to copy and paste any of the markup snippets listed throughout this page.

Markup and formatting

Just by loading these files you’ll automatically have the following HTML formats:

Header one

 

Header two

 

Header three

 

Header four

 

Header five

 

Header six

Anchors

Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Blockquotes

Single line blockquote:

Lorem ipsum, areit noar.

Multi line blockquote with a cite reference:

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.

Tables

Ornare Etiam  
Auit Manro 1 Vestibulum id ligula porta felis euismod semper.
Purus Ligula 100 Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Etiam Mollis 1,000 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.
Ipsum Parturient 10.01 Sed posuere consectetur est at lobortis.

Definition Lists

Definition List Title
Definition list division.
Vestibulum
Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
#frinoe
Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.
Malesuada Mollis Cras
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

      1. List item one
            1. List item one
                  1. List item one

               

               

         

      2. List item two
      3. List item three
      4. List item four
      5.  

         

 

  • List item two

 

 

  • List item three

 

 

  • List item four

 

 

 

    • List item two

 

 

    • List item three

 

 

    • List item four

 

   

Buttons

After restyling the Bootstrap buttons, we have decided to add a new, branded button: uw-btnwhich will be used for the main call to action buttons on the page. These are simply anchor tags with custom classes on them.

Call to action The size of the button can be changes with the classes btn-sm and btn-lg:

Larger button
Smaller button

Icons

We provide a full icon set that be accessed by adding the icon’s class to any element. Check out the full icon set for further details.

The above HTML would produce the following icons:

Search

 

 

 

Search

 

Globe

 

Tools

 

UW Radio input

Adding a class .radio to any label around an radio input field will generate a branded radio input.

The above HTML would produce the following radio button:

 

UW Select menu

By adding a class .uw-select to any select element, you will get a branded, functional select menu.

The above HTML would produce the following select menu:

Images

Any images wrapped in an anchor tag that links to the full size image will display a centered overlay of the image.

Click the image below to see a demo of the overlay.

Blossoms

Curabitur blandit tempus porttitor.

Slideshows

If you are running WordPress you can download the UW Slideshow WordPress plugin.

For basic HTML, the slideshow is defined by a div with a class name “uw-slideshow”. Each slide must conform to the following HTML. You can put as many slides next to each other as you’d like, the UW javascript file will take care of the rest.

Demo:

Admissions welcome packet

Love how the design is clean and simple, letting the UW brand shine. This is a fun use of the Boundless W as a spot varnish on purple. This is a great use of the angled line -- how it is treated as a fill of UW gold.

Arts & Sciences Brochure

This is a great use of so many brand graphic elements — I see fonts, boundless bar, angles, styled headlines, and a Boundless W. Although the UW gold is not used throughout, this was a great transitional piece from the previous brand palette to the current brand palette.

Facilities award

It is fun to see the brand used in unexpected ways. Here the styled headline is used for an award plaque. It is paired with a department signature logo.

Professional & Continuing Education building sign

This is a great combination of the Boundless W and the departmental signature logo. Plus, it is fun to see the brand being used for environmental graphic applications.

Admissions info sheets

Photography is the perfect way to add vibrancy to your designs. Although the brand color palette is limited to UW colors, there is no limit on ways to use colorful photos to liven up your designs.

Report to Contibutors financials

Even charts and graphs should be designed with the brand graphic elements. This spread shows some tricks to utilizing the UW palette for displaying financial data.

UW Visitor Guide brochure

The brand elements work best when the layouts are simple and clean. Use bold, beautiful or human photography (see Boundless photo guide section) to capture attention. Then emphasize your content with bold headline treatments and that large Boundless W.

Vimeo


Loading a Vimeo player is as simple as putting a div with class uw-vimeo. The only necessary data attribute is the video or playlist ID.

Alert banner

If you’re not using our templates simply put the following div in your HTML. The alert system will take care of the rest and you can style what you want with your custom CSS. You can test the banner using any of the following hashes on your URL: #uwalert-steel, #uwalert-orange and #uwalert-red.

Add the following above the </body> tag:

Learn more