UW Brand

HTML components

The following HTML components are available through our HTML templates:

Headers

Header one

Header two

Header three

Header four

Header five
Header six
<h1>Header one</h1>
<h2>Header two</h2>
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>
<h6>Header six</h6>

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.

<blockquote>Lorem ipsum, areit noar.</blockquote>

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.

<blockquote>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.</blockquote>

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. 
<table>
    <thead>
        <tr>
            <th scope="col">Ornare</th>
            <th scope="col" class="views">Etiam</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>Auit Manro</td>
            <td>1</td>
            <td>Vestibulum id ligula porta felis euismod semper.</td>
        </tr>
        <tr class="even">
            <td>Purus Ligula</td>
            <td>100</td>
            <td>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</td>
        </tr>
        <tr class="odd">
            <td>Etiam Mollis</td>
            <td>1,000</td>
            <td>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</td>
        </tr>
        <tr class="even">
            <td>Ipsum Parturient</td>
            <td>10.01</td>
            <td>Sed posuere consectetur est at lobortis.</td>
        </tr>
    </tbody>
</table>

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.
<dl>
    <dt>Definition List Title</dt>
    <dd>Definition list division.</dd>
    <dt>Vestibulum</dt>
    <dd>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</dd>
    <dt>#frinoe</dt>
    <dd>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.</dd>
    <dt>Malesuada Mollis Cras</dt>
    <dd>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</dd>
</dl>

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
<ul>
    <li>List item one
        <ul>
            <li>List item one
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                    <li>List item four</li>
                </ul>
            </li>
            <li>List item two</li>
            <li>List item three</li>
            <li>List item four</li>
        </ul>
    </li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
</ul>

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
<ol>
    <li>List item one
        <ol>
            <li>List item one
                <ol>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                    <li>List item four</li>
                </ol>
            </li>
            <li>List item two</li>
            <li>List item three</li>
            <li>List item four</li>
        </ol>
    </li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
</ol>

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

<a class="uw-btn" href="#">Call to action</a>

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

Larger button
Smaller button

<a class="uw-btn btn-lg" href="#">Larger Button</a>
<a class="uw-btn btn-sm" href="#">Smaller Button</a>

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.

<h5><a href=#"><span class="ic-ticket" aria-hidden="true"></span>Search</a></h5>
<a href="#" class="ic-calendar">Calendar</a>
<p class="ic-tools sm">Tools</p>

The above HTML would produce the following icons:

Search
Calendar

Tools

UW Radio input

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

<label class="radio">
    <input type="radio" name="example" value="0" data-toggle="radio" checked tabindex="-1">
    Radio 1
</label>
<label class="radio">
    <input type="radio" name="example" value="1" data-toggle="radio" tabindex="-1">
    Radio 2
</label>

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.

<select name="example" class="uw-select">
    <option value="first">First item</option>
    <option value="second">Second item</option>
    <option value="third">Third item</option>
    <option value="fourth">Fourth item</option>
    <option value="fifth">Fifth item</option>
    <option value="sixth">Sixth item</option>
    <option value="seventh">Seventh item</option>
</select>

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.

<a href="https://www.washington.edu/brand/files/2014/09/blossom.jpg" title="Blossom" >
    <img src="https://www.washington.edu/brand/files/2014/09/blossom-1024x233.jpg" alt="Blossoms" width="1024" height="233" title="Blossoms"/>
</a>

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.

<div class="uw-slideshow">
    <div class="slide">
        <a title="Slide title" href="#">
            <img title="Image title" src="//cdn.washington.edu/slide1.jpg" alt="Image title" />
        </a>
        <div>
            <h3><a title="Slide title" href="#">Slide title</a></h3>
            <p>Lorem ipsum.</p>
       </div>
    </div>
    <div class="slide">
        <a title="Slide title" href="#">
            <img title="Image title" src="//cdn.washington.edu/slide2.jpg" alt="Image title" />
        </a>
        <div>
            <h3><a title="Slide title" href="#">Slide title</a></h3>
            <p>Lorem ipsum.</p>
        </div>
    </div>
</div>

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:

Video

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.

<div class="uw-vimeo" data-video=76979871 data-width=800 data-height=500></div>

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:

<script src="//www.washington.edu/static/alert.js" type="text/javascript"></script>

Learn more about the Alert Banner