UW Standard HTML Template

This template includes the standard HTML for the University of Wisconsin–Madison’s brand and visual identity. Its header and footer match the design of UW Theme 2.0, the university’s official WordPress theme.

In addition to the standard header and footer design, the CSS attached to the template defines the style of foundational design elements such as typography, colors and common elements including headings, paragraphs, lists, links, buttons, forms and input fields, and tables. The template serves as a starting point for campus developers who want to adopt the foundations of UW’s digital brand into other platforms and frameworks.

The source code for this template is available to other campus developers. We plan to provide a more robust digital design system in the future.

Base HTML element styles

Headers

This is an h1 header

This is an h2 header

This is an h3 header

This is an h4 header

This is an h5 header

This is an h6 header

Paragraphs

Typically, you would limit your line length using a grid or layout system of some sort.

This paragraph shows strong or bolded, emphasized or italicized and linked text.

Lists

Unordered lists:

Intelligent
Spirited
Engaging
Beautiful

Ordered lists:

Friendly
Midwestern
Comprehensive
Big
Challenging
Progressive

Lists with tight vertical spacing:

Intelligent
Spirited
Engaging
Beautiful

Blockquote

“Whatever may be the limitations which trammel inquiry elsewhere, we believe that the great state University of Wisconsin should ever encourage that continual and fearless sifting and winnowing by which alone the truth can be found.” The Board of Regents, 1894

Blockquote, alternate style

This is a pull quote.

Nick Weaver

Buttons

Tables

Employee	Salary	Notes
Mary Doe	$1	Because that’s all Steve Jobs needed for a salary.
John Doe	$100K	For all the blogging he does.
Jane Bloggs	$100M	Pictures are worth a thousand words, right?
Fred Bloggs	$100B	Everyone wants to be friends with Fred. Another paragraph Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, officia. Adipisci minus, dolore, sunt nemo dolores magnam dolorem placeat animi nostrum repudiandae, officiis a porro non architecto, eius quia iure.