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

• Footer Component Builder: To see how it works with your own content and images
• Dev Codepen for Footer: To experiment with all the code

Basic footer 

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

At a minimum, you should include your site’s title and contact information in your footer. Using the standard Cookies, Privacy, Copyright, and Accessibility links are strongly encouraged. You might also wish to add a Login link in this area if it isn’t in the header. 

<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