ilw-footer

Links: ilw-footer in Builder | Illinois Web Theme | Toolkit Development

Overview

The standard campus footer should appear at the bottom of every page of a campus website. The footer is placed in the footer slot of the ilw-page component.

The footer component defines an area at the bottom of the page which should contain (at a minimum) the site’s contact information and University-wide footer links. Additional features like social media icons, extra site navigation, and special highlighted content can be added either in columns or in a two-thirds-wide freeform area.

Properties

| Property | Description | |----------|-----------------------------------------------------------------------------| | source | Custom utm tracking code for campus links. Applied to the ilw-footer tag. |

Slots

| Slot | Description | |-------------------------|------------------------------------------------------------------| | slot="primary-unit" | Assigns unit name to left column. | | slot="site-name" | Assigns site name to left column. | | slot="address" | Assigns address to left column. | | slot="social" | Assigns social media links to left column. | | slot="actions" | Assigns call to action links to right column. | | slot="cookies-button" | DEPRECATED Includes cookie banner and button in lower edge. | | slot="legal-link" | Adds additional links to legal and policy section in lower edge. |

Customizations and Notes

Columns or freeform space

You can choose between a multi-column layout or a freeform space in the right two-thirds of the footer. Any standard HTML is allowed in this space, though it is recommended to focus on information of site-wide importance that doesn’t fit in the header. For sites with multiple sponsorships, this is a common location to collect up the iconography of the various sponsors.

Code Examples

Unit Information

The footer contains slots for site name (site-name), primary unit (primary-unit), and address (address).

<ilw-footer>
    <p slot="primary-unit"><a href="/">Strategic Communications and Marketing</a></p>

    <p slot="site-name"><a href="http://example.com/">Example Site Name</a></p>
    
    <address slot="address">
      <p>5678 West Example Street<br>
        MC-0000<br>
        Champaign, IL 61820</p>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      <p>Phone: <a href="tel:+12175551234">(217) 555-1234</a></p>
    </address>
</ilw-footer>

Social Media

The social media slot (social) should be used for social media links. Icons for supported sites may be added using the data-service attribute.

Social media icons are drawn from the official campus icon set (https://cdn.brand.illinois.edu/icons.html). Icons for unsupported sites may be added by targeting the social slot adding the necessary inline style rules to the unsupported link.

<ilw-footer>
    <p slot="site-name"><a href="/">Sample Footer</a></p>

    <nav slot="social" aria-label="Social media">
      <ul>
        <li><a data-service="bluesky" href="http://example.com/">Bluesky</a></li>
        <li><a data-service="calendar" href="http://example.com/">Calendar</a></li>
        <li><a data-service="facebook" href="http://example.com/">Facebook</a></li>
        <li><a data-service="flickr" href="http://example.com/">flickr</a></li>
        <li><a data-service="github" href="http://example.com/">GitHub</a></li>
        <li><a data-service="instagram" href="http://example.com/">Instagram</a></li>
        <li><a data-service="linkedin" href="http://example.com/">LinkedIn</a></li>
        <li><a data-service="mastodon" href="http://example.com/">Mastodon</a></li>
        <li><a data-service="pinterest" href="http://example.com/">Pinterest</a></li>
        <li><a data-service="reddit" href="http://example.com/">Reddit</a></li>
        <li><a data-service="snapchat" href="http://example.com/">Snapchat</a></li>
        <li><a data-service="spotify" href="http://example.com/">Spotify</a></li>
        <li><a data-service="threads" href="http://example.com/">Threads</a></li>
        <li><a data-service="tiktok" href="http://example.com/">TikTok</a></li>
        <li><a data-service="twitter" href="http://example.com/">Twitter</a></li>
        <li><a data-service="weibo" href="http://example.com/">Weibo</a></li>
        <li><a data-service="whatsapp" href="http://example.com/">WhatsApp</a></li>
        <li><a data-service="x" href="http://example.com/">X</a></li>
        <li><a data-service="yelp" href="http://example.com/">Yelp</a></li>
        <li><a data-service="youtube" href="http://example.com/">YouTube</a></li>
        <li><a href="#" style="--ilw-footer-social-icon: url('blue.svg'); --ilw-footer-social-icon-hover: url('orange.svg');">Custom Site</a></li>  
      </ul>
    </nav>
</ilw-footer>

Action Links

Use the action slot (actions) for call-to-action links.

<ilw-footer>
    <p slot="site-name"><a href="/">Sample Footer</a></p>

    <div slot="actions">
      <a href="/give">Give</a>
      <a href="/apply">Apply</a>
    </div>
</ilw-footer>

Menu Columns

Up to three columns can be defined in the right two-thirds of the footer.

<ilw-footer>
    <nav class="ilw-footer-menu" aria-labelledby="menu-1">
      <h2 id="menu-1">First Menu</h2>
      <ul>
        <li><a href="http://example.com/">Link one</a></li>
        <li><a href="http://example.com/">Link two</a></li>
        <li><a href="http://example.com/">Link three</a></li>
        <li><a href="http://example.com/">Link four</a></li>
      </ul>
    </nav>

    <nav class="ilw-footer-menu" aria-labelledby="menu-2">
      <h2 id="menu-2">Second Menu</h2>
      <ul>
        <li><a href="http://example.com/">Link one</a></li>
        <li><a href="http://example.com/">Link two</a></li>
        <li><a href="http://example.com/">Link three</a></li>
        <li><a href="http://example.com/">Link four</a></li>
      </ul>
    </nav>

    <nav class="ilw-footer-menu" aria-labelledby="menu-3">
      <h2 id="menu-3">Third Menu</h2>
      <ul>
        <li><a href="http://example.com/">Link one</a></li>
        <li><a href="http://example.com/">Link two</a></li>
        <li><a href="http://example.com/">Link three</a></li>
        <li><a href="http://example.com/">Link four</a></li>
      </ul>
    </nav>
</ilw-footer>

Cookie Button

Deprecated: The Illinois cookie button and script are now included by default. During the deprecation period, existing cookie buttons will be honored. The Illinois cookie button will be added only if no content has been added to the cookies-button slot.

To add a cookie button, use the cookies button slot (cookies-button) and include the cookies consent script in the page header.

For consistency and future compatibility, the .ilw-button class should be added to the button or link element.

<head>
    <!-- Illinois Cookies Consent Notice start for illinois.edu -->
    <script src="https://onetrust.techservices.illinois.edu/scripttemplates/otSDKStub.js" id="cookie-js"
    data-domain-script="uiuc"></script>
    <script>
    function OptanonWrapper() { }
    </script>
    <!-- Illinois Cookies Consent Notice end for illinois.edu -->
</head>

<!-- items removed for clarity -->

<ilw-footer>
<p slot="site-name"><a href="/">Site Name</a></p>
<button slot="cookies-button" id="ot-sdk-btn" class="ot-sdk-show-settings ilw-button">About Cookies</button>
</ilw-footer>

Legal Links

The following tags will automatically populate with the University-wide link for these items.

• Privacy statement
• Copyright statement
• Accessibility statement

Additional legal links may be added by targeting the legal-link slot.

<ilw-footer>
  <a href="#" slot="legal-link">Link 1</a>
  <a href="#" slot="legal-link">Link 2</a>
</ilw-footer>

Custom Source Identifier

Links in the campus footer section (those added and maintained as part of the campus brand) contain a UTM code for better analysis of brand implementation. You may set a custom UTM source to distinguish your site's traffic within those reports. If no source is set, the default value (Illinois_App) will be used.

<ilw-footer source="Sample_Site">
  <p slot="site-name">Sample Site</p>
</ilw-footer>

External References

• HTML Anchor element
• Link accessibility
• Using aria-labelledby