Footer

Footer with List Elements

Footer with Table Elements

Classes

• lotusFooter - the class assigned to a wrapper div for the component.
• lotusLast - the class that goes on the last table cell in each row (to get rid of the right border).

Basic Implementation

Create an html footer element and assign it the class of lotusFooter

Create the footer links using an unordered list element

Variations

You may code the footer as a table if you prefer vertical columns of links. In this case, your <table>, <th>, and <td> elements will be styled automatically as long as they exist within a lotusFooter container.

You will also need to adjust the width attribute of your .lotusTable th and .lotusFooterHeader classes, depending on how many columns you have.

Accessibility

Add the role="contentinfo" landmark to the lotusFooter div.

Examples

• the footer is on most pages
• the table-based footer is on the Interactive page example

Sample HTML (list layout)

Sample HTML (table layout)

CSS (footer.css)

Theme CSS (footerTheme.css)

This component started off being styled by using lotusFooter as an id. This is obsolete. Assign lotusFooter as a class.

2010: the table version of the footer was modified using styles to show the links inline.

January 2011: the table version of the footer is deprecated and links are created using an unordered list.

February 2011: added the docked footer.

May 2011: removed the docked footer.

May 2011: the table version of the footer was un-deprecated and re-styled to keep its links in vertical columns.

September 2011: role="presentation" was removed from the table in the Footer with Table Elements because we use <th> tags to denote column headers.

July 3, 2012: updated visited link text in gen2 theme to be the same color as the regular links because the lighter gray contrast doesn't work on the gray background.