Headings

Headings are used to identify pages & sections in your information hierarchy. Each heading should be unique & succinctly describe it's contents or purpose.

Accessible Headings

Headings should always appear in numerical(rank) order. Using headings out of order can be confusing for screen-readers & assistive technologies.
It is ok to skip heading ranks when closing subsections, for instance, an <h2> beginning a new section, can follow an <h4> as it closes the previous section.
<h1> is generally reserved for the page title or the marquee title on a landing or homepage.
To avoid accessibility concerns you can use faux headings where needed.

Read more about accessibility and headings from the Web Accessibility Initiative.

# Basic Headings

By default headings use the font Montserrat and are black in color.

Welcome to Undergraduate Studies

Understanding Your Curriculum

Virtual Campus Tours

Faculty & Staff

Student Groups

Resources

Example Markup


  <h1>Welcome to Undergraduate Studies</h1>
  <h2>Understanding Your Curriculum</h2>
  <h3>Virtual Campus Tours</h3>
  <h4>Faculty & Staff</h4>
  <h5>Student Groups</h5>
  <h6>Resources</h6>

# Heading Colors

In addition to the default black, you can also choose between 3 other alternate colors to fit your UI needs; .primary, .gray and .white.

Welcome to Undergraduate Studies

Understanding Your Curriculum

Example Markup


  <h1 class="primary">Welcome to Undergraduate Studies</h1>
  <h2 class="gray">Understanding Your Curriculum</h2>

# Alternate Headings

The font Vitesse can be used as an alternate by using the .alt class on any heading. Alt Headings can be used in conjunction with color classes.

Welcome to Undergraduate Studies

Understanding Your Curriculum

Virtual Campus Tours

Example Markup


  <h1 class="alt">Welcome to Undergraduate Studies</h1>
  <h2 class="alt primary">Understanding Your Curriculum</h2>
  <h3 class="alt gray">Virtual Campus Tours</h3>

# Faux Headings

As mentioned above, Headings should always appear in numerical(rank) order. Sometimes you may want to use a heading style that is not in the normal rank flow. To avoid accessibility issues we recommend to use fax headings. Faux headings can you use the same modifiers as any other Heading.

Welcome to Undergraduate Studies

Understanding Your Curriculum

Virtual Campus Tours

Example Markup


  <span class="faux-heading h1">Welcome to Undergraduate Studies</span>
  <span class="faux-heading h3 alt red">Understanding Your Curriculum</span>
  <span class="faux-heading h5 gray">Virtual Campus Tours</span>