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> </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 one
- 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)
- 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 one
- List item two
- List item three
- 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-btn
which 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:
<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:
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.
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>