Footer

The footer is a custom HTML element that can be added to any webpage.

Requirements

The files for the footer component are hosted on the brand CDN. You do not need to download or host any files of your own to use the footer.

To use the footer on a page, add the following lines to the page's head element.

<link rel="stylesheet" href="https://cdn.brand.illinois.edu/components/il-footer.css">
<script type="module" async src="https://cdn.brand.illinois.edu/components/il-footer.mjs"></script>

Basic usage

The footer should be placed at the end of the document body, after the content of the page, outside of the main landmark. The following is a full example of a footer:

<il-footer>
  <a slot="primary-unit" href="https://stratcom.illinois.edu/">Strategic Communications and Marketing</a>
  <a slot="site-name" href="/index.html">Example Footer</a>
  <nav slot="social" aria-label="Social media">
    <ul>
      <li><a data-service="facebook" href="https://facebook.com/example">Facebook</a></li>
      <li><a data-service="instagram" href="https://instagram.com/example">Instagram</a></li>
      <li><a data-service="linkedin" href="https://linkedin.com/example">LinkedIn</a></li>
    </ul>
  </nav>
  <address slot="address">
    <p>5678 West Example Street<br>
      MC-0000<br>
      Champaign, IL 61820</p>
    <p>Phone: <a href="tel:+12175551234">(217) 555-1234</a></p>
    <p>Email: <a href="mailto:address@example.com">address@example.com</a></p>
  </address>
  <div slot="actions">
    <a href="/give.html">Give</a>
    <a href="/apply.html">Apply</a>
  </div>
</il-footer>

The footer contains 5 named content slots:

• The site-name slot contains the name of the site that is using the footer. This can be a link to the site home page.
• The primary-unit slot contains a link to the unit responsible for the site.
• The address slot contains contact information for the site.
• The social slot contains a list of social networking links.
• The actions slot contain a short list of additional links.

Site name

For sites with multiple pages, the site name should be a link:

<a slot="site-name" href="/index.html">Header demonstration site</a>

For single-page sites, the preferred markup is the div element:

<div slot="site-name">Header demonstration site</div>

Primary unit

For sites that represent campus units (e.g. departments), the primary unit is the governing unit (e.g. college):

<a slot="primary-unit" href="https://example.com/">College of Demonstration</a>
<a slot="site-name" href="/index.html">Department of Examples</a>

If a site does not represent a specific campus unit, the primary unit is the campus unit which manages the site:

<a slot="primary-unit" href="https://example.com/">Department of Examples</a>
<a slot="site-name" href="/index.html">Example Resource Center</a>

Address

The address slot contains contact information for the site, including physical locations, telephone numbers, and email addresses.

<address slot="address">
  <p>5678 West Example Street<br>
    MC-0000<br>
    Champaign, IL 61820</p>
  <p>Phone: <a href="tel:+12175551234">(217) 555-1234</a></p>
  <p>Email: <a href="mailto:address@example.com">address@example.com</a></p>
</address>

Social

The social slot should contain an unordered list of links, wrapped in a nav element:

<nav slot="social" aria-label="Social media">
  <ul>
    <li><a data-service="facebook" href="https://facebook.com/example">Facebook</a></li>
    <li><a data-service="instagram" href="https://instagram.com/example">Instagram</a></li>
    <li><a data-service="linkedin" href="https://linkedin.com/example">LinkedIn</a></li>
  </ul>
</nav>

• The nav element must contain a unique aria-label value, e.g. "Social media"
• Each link must contain a data-service attribute which identifies the social networking service. Acceptable values for this attribute are:
  • facebook
  • flickr
  • google-plus
  • instagram
  • linkedin
  • pinterest
  • reddit
  • snapchat
  • threads
  • tiktok
  • twitter
  • weibo
  • whatsapp
  • x
  • yelp
  • youtube

Actions

The actions slot can contain a small number of links. These are intended to represent common actions that are performed on the site.

<div slot="actions">
  <a href="/give.html">Give</a>
  <a href="/apply.html">Apply</a>
</div>