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.

Key github links

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


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.


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.


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.
Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
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
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four


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


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:

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:


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.


Curabitur blandit tempus porttitor.


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.


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.


We highly recommend that videos are uploaded, captioned, and embeded using YouTube. YouTube makes it very easy to embed in your sites. However, if you must use Vimeo, please use the code below. Regardless of which way you host your video, note that you are responsible for the accessibility of your video. For more information on captioning, read this guide by Accessible Technology Services.
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