Illinois web toolkit documentation

Version 2.7.3

Component

Footer

Description

The Illinois Components Footer 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.

What it looks like

Example image (version 2.4, Dec. 8, 2021):

Try it out

(In the examples below, replace bolded elements with your own content.)

<il-footer>
<div slot="contact" class="il-footer-contact uofi_address">
<p><a href="/index.html" id="link-1">Your site title</a></p>
<p>Your building and address</p>
<p>Your phone</p>
<p>Email: <a href="mailto:youremail@illinois.edu">youremail@illinois.edu</a></p>
</div>
<nav slot="links" class="il-footer-links" aria-label="Legal notices">
<ul>
<li><button data-il="cookies"></button></li>
<li><a data-il="privacy"></a></li>
<li><a data-il="copyright"></a></li>
<li><a data-il="accessibility"></a></li>
<li><a href="/login">Login</a></li>
</ul>
</nav>
</il-footer>

Customizations and notes

Structured additions: Social media, University footer links

  • Social media section: The following sites’ URLs will be recognized and automatically replaced with the correct icon when contained in a Social Media div. (See the Syntax guide for more details.)
    • Instagram
    • Facebook
    • Twitter
    • YouTube
  • University standard footer elements: The following tags will automatically populate with the University-wide link for these items.  
    • Cookies management (necessary for GDPR compliance)
    • Privacy statement
    • Copyright statement
    • Accessibility statement

See the Syntax Guide for more details about how to include each of these.

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.

Syntax guide

(In the examples below, replace elements in bold with your own content.)

The default syntax:

<il-footer>
<div slot="contact" class="il-footer-contact uofi_address">
<!-- Contact information goes here -->
</div>
<nav slot="links" class="il-footer-links" aria-label="Legal notices">
<ul>
<li><button data-il="cookies"></button></li>
<li><a data-il="privacy"></a></li>
<li><a data-il="copyright"></a></li>
<li><a data-il="accessibility"></a></li>
</ul>
</nav>
</il-footer>

Where to add elements:

<il-footer>
<div slot="contact" class="il-footer-contact uofi_address">
<!-- Contact information goes here -->
</div>
<div>
<div slot="parent" class="il-footer-parent">
<!-- Other units in this site's line of "parentage" can be listed here -->
</div>
<div class="il-footer-navigation">
<div class="il-footer-navigation-column">
<!-- First column of content -->
</div>
<div class="il-footer-navigation-column">
<!-- Second column of content -->
</div>
<nav slot="links" class="il-footer-links" aria-label="Legal notices">
<ul>
<li><button data-il="cookies"></button></li>
<li><a data-il="privacy"></a></li>
<li><a data-il="copyright"></a></li>
<li><a data-il="accessibility"></a></li>
</ul>
</nav>
</il-footer>

Contact slot

  • Syntax:
<il-footer>
<div slot="contact" class="il-footer-contact uofi_address">
<!-- Contact information goes here -->
</div>
<!-- other footer slots and content here -->
</il-footer>

  • Usage:
    • The contact information must be contained in a container (usually a div) identified with slot="contact".
  • Default value: There is no default value.
  • Required: Yes, you should put your site’s contact information in your footer using this syntax.

Parent slot

  • Syntax:

<il-footer>
<div slot="parent" class="il-footer-parent">
<!-- Other units in this site's line of "parentage" can be listed here -->
</div>
<!-- other footer slots and content here -->
</il-footer>

  • Usage:
    • The unit’s parent organization information must be contained in a container (usually a div) identified with slot="parent".

  • Type: Custom Element
  • Introduced in: v2.3.0; 9/29/2021
  • Deprecated?: No

  • Default value: There is no default value.
  • Required: No, not every website needs social media links.

Links slot

  • Syntax:

<il-footer>
<!-- other footer slots and content here -->
<nav slot="links" class="il-footer-links" aria-label="Legal notices">
<ul>
<li><button data-il="cookies"></button></li>
<li><a data-il="privacy"></a></li>
<li><a data-il="copyright"></a></li>
<li><a data-il="accessibility"></a></li>
</ul>
</nav>
</il-footer>

  • Usage:
    • The unit’s parent organization information must be contained in a nav container  identified with slot="links".

  • Default value: There is no default value. However, we recommend including the GDPR Cookies statement, the Privacy statement, the Copyright statement, and the Accessibility statement as indicated above.
  • Required: Yes, every site should include these statements. If you have additional site-wide links, you can also include them.

About this component

  • Type: Custom Element
  • Introduced in: v2.3.0; 9/29/2021
  • Deprecated?: No

  • Default value: There is no default value.
  • Required: No, not every website needs a parent unit identifier.

Social slot

  • Syntax:

<il-footer>
<div slot="social" class="il-footer-social">
<ul> <li><a href="Your Instagram URL"></a></li> <li><a href="Your Facebook URL"></a></li> <li><a href="Your Twitter URL"></a></li> <li><a href="Your YouTube URL"></a></li> <li><a href="Your LinkedIn URL"></a></li> </ul> </div>
<!-- other footer slots and content here -->
</il-footer>

  • Usage:
    • The unit’s social media information should be contained in a container (usually a div) identified with slot="social".

  • Default value: There is no default value.
  • Required: No, not every website needs social media links.

Links slot

  • Syntax:

<il-footer>
<!-- other footer slots and content here -->
<nav slot="links" class="il-footer-links" aria-label="Legal notices">
<ul>
<li><button data-il="cookies"></button></li>
<li><a data-il="privacy"></a></li>
<li><a data-il="copyright"></a></li>
<li><a data-il="accessibility"></a></li>
</ul>
</nav>
</il-footer>

  • Usage:
    • The unit’s parent organization information must be contained in a nav container  identified with slot="links".

  • Default value: There is no default value. However, we recommend including the GDPR Cookies statement, the Privacy statement, the Copyright statement, and the Accessibility statement as indicated above.
  • Required: Yes, every site should include these statements. If you have additional site-wide links, you can also include them.

About this component

  • Type: Custom Element
  • Introduced in: v2.3.0; 9/29/2021
  • Deprecated?: No