Links: ilw-footer in Builder | Illinois Web Theme | Toolkit Development
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.
| Property | Description |
|---|---|
source |
Custom utm tracking code for campus links. Applied to the ilw-footer tag. |
| 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. (Note icon DEPRECATION.) |
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. |
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.
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:address@example.com">address@example.com</a></p>
<p>Phone: <a href="tel:+12175551234">(217) 555-1234</a></p>
</address>
</ilw-footer>The social media slot (social) should be used for social media links. The use of ilw-icon components
is recommended.
DEPRECATED: Automated icon support using the data-service attribute is deprecated.
<ilw-footer>
<p slot="site-name"><a href="/">Sample Footer</a></p>
<nav slot="social" aria-label="Social media">
<ul>
<li><a href="http://example.com/"><ilw-icon alt="Our Bluesky account" icon="bluesky" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our events calendar account" icon="calendar" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Facebook account" icon="facebook" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Flickr account" icon="flickr" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our GitHub account" icon="github" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Instagram account" icon="instagram" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our LinkedIn account" icon="linkedin" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Mastodon account" icon="mastodon" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Pinterest account" icon="pinterest" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Reddit account" icon="reddit" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Snapchat account" icon="snapchat" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Spotify account" icon="spotify" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Threads account" icon="threads" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our TikTok account" icon="tiktok" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Twitter account" icon="twitter" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Weibo account" icon="weibo" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our WhatsApp account" icon="whatsapp" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our X account" icon="x" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our Yelp account" icon="yelp" size="44px"></ilw-icon></a></li>
<li><a href="http://example.com/"><ilw-icon alt="Our YouTube account" icon="youtube" size="44px"></ilw-icon></a></li>
</ul>
</nav>
</ilw-footer>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>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>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>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>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>Cookies button slot: The Illinois cookie button and script are now included by default. During the deprecation period, existing cookie buttons will be honored. Remove references to slot="cookies-button".
Social icon data-service: Automated social media icon selection using the link's data-service attribute is no longer recommended. Existing data-service-enabled links will be honored during the deprecation period. Update links by removing data-service="icon" and replacing link text with the corresponding ilw-icon component.