Material Design Lite - Footers

An MDL footer component comes in two primary forms: mega-footer and mini-footer. ega-footer contains more complex content than mini-footer. A mega-footer can represent multiple sections of content which are separated by horizontal rules, whereas a mini-footer presents a single section of content. Both footer typically contains both informational and clickable content, such as links.

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the mega-footer and mini-footer. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	mdl-mega-footer Identifies container as an MDL mega-footer component. Required for footer element.
2	mdl-mega-footer__top-section Identifies container as a footer top section. Required for top section "outer" div element.
3	mdl-mega-footer__left-section Identifies container as a left section. Required for left section "inner" div element.
4	mdl-mega-footer__social-btn Identifies a decorative square within mega-footer. Required for button element (if used).
5	mdl-mega-footer__right-section Identifies container as a right section. Required for right section "inner" div element.
6	mdl-mega-footer__middle-section Identifies container as a footer middle section. Required for middle section "outer" div element.
7	mdl-mega-footer__drop-down-section Identifies container as a drop-down (vertical) content area. Required for drop-down "inner" div elements.
8	mdl-mega-footer__heading Identifies a heading as a mega-footer heading. Required for h1 element inside drop-down section.
9	mdl-mega-footer__link-list Identifies an unordered list as a drop-down (vertical) list. Required for ul element inside drop-down section.
10	mdl-mega-footer__bottom-section Identifies container as a footer bottom section. Required for bottom section "outer" div element.
11	mdl-logo Identifies a container as a styled section heading. Required for "inner" div element in mega-footer bottom-section or mini-footer left-section.
12	mdl-mini-footer Identifies container as an MDL mini-footer component. Required for footer element.
13	mdl-mini-footer__left-section Identifies container as a left section. Required for left section "inner" div element.
14	mdl-mini-footer__link-list Identifies an unordered list as an inline (horizontal) list. Required for ul element sibling to "mdl-logo" div element.
15	mdl-mini-footer__right-section Identifies container as a right section. Required for right section "inner" div element.
16	mdl-mini-footer__social-btn Identifies a decorative square within mini-footer. Required for button element (if used).

Examples

The following examples showcases the use of MDL footer classes to style footers.

Mega Footer

The following example showcases the use of mdl-mega-footer class to layout contents in a footer.
Here following MDL classes are used.

1. mdl-layout - Identifies a div as an MDL component.
2. mdl-js-layout - Adds basic MDL behavior to outer div.
3. mdl-layout--fixed-header - Makes the header always visible, even in small screens.
4. mdl-layout__header-row - Identifies container as MDL header row.
5. mdl-layout-title - Identifies layout title text.
6. mdl-layout__content - Identifies div as MDL layout content.
7. mdl-mega-footer - Identifies container as an MDL mega-footer component.
8. mdl-mega-footer__top-section - Identifies container as a footer top section.
9. mdl-mega-footer__left-section - Identifies container as a left section.
10. mdl-mega-footer__social-btn - Identifies a decorative square within mini-footer.
11. mdl-mega-footer__right-section - Identifies container as a right section.
12. mdl-mega-footer__middle-section - Identifies container as a footer middle section.
13. mdl-mega-footer__drop-down-section - Identifies container as a drop-down (vertical) content area.
14. mdl-mega-footer__heading - Identifies a heading as a mega-footer heading.
15. mdl-mega-footer__link-list - Identifies an unordered list as an inline (horizontal) list.
16. mdl-mega-footer__bottom-section - Identifies container as a footer bottom section.
17. mdl-logo - Identifies a container as a styled section heading.

mdl_megafooter.htm

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">      
            <span class="mdl-layout-title">Material Design Tabs</span>          
         </div>       
      </header>     
      <main class="mdl-layout__content">    
         <footer class="mdl-mega-footer">
            <div class="mdl-mega-footer__top-section">
               <div class="mdl-mega-footer__left-section">
                  <button class="mdl-mega-footer__social-btn">1</button>
                  <button class="mdl-mega-footer__social-btn">2</button>
                  <button class="mdl-mega-footer__social-btn">3</button>
               </div>
               <div class="mdl-mega-footer__right-section">
                  <a href="">Link 1</a>
                  <a href="">Link 2</a>
                  <a href="">Link 3</a>
               </div>
            </div>
            <div class="mdl-mega-footer__middle-section">
               <div class="mdl-mega-footer__drop-down-section">
                  <h1 class="mdl-mega-footer__heading">Heading </h1>
                  <ul class="mdl-mega-footer__link-list">
                     <li><a href="">Link A</a></li>
                     <li><a href="">Link B</a></li>      
                  </ul>
               </div>  
               <div class="mdl-mega-footer__drop-down-section">
                  <h1 class="mdl-mega-footer__heading">Heading </h1>
                  <ul class="mdl-mega-footer__link-list">
                     <li><a href="">Link C</a></li>
                     <li><a href="">Link D</a></li>      
                  </ul>
               </div>   
            </div>
            <div class="mdl-mega-footer__bottom-section">
               <div class="mdl-logo">
                  Bottom Section
               </div>
               <ul class="mdl-mega-footer__link-list">
                  <li><a href="">Link A</a></li>
                  <li><a href="">Link B</a></li>
               </ul>
            </div>
         </footer>
      </main>
   </body>
</html>

Result

Verify the result.

Mini Footer

The following example showcases the use of mdl-mini-footer class to layout contents in a footer.
Here following MDL classes are used.

1. mdl-layout - Identifies a div as an MDL component.
2. mdl-js-layout - Adds basic MDL behavior to outer div.
3. mdl-layout--fixed-header - Makes the header always visible, even in small screens.
4. mdl-layout__header-row - Identifies container as MDL header row.
5. mdl-layout-title - Identifies layout title text.
6. mdl-layout__content - Identifies div as MDL layout content.
7. mdl-mini-footer - Identifies container as an MDL mini-footer component.
8. mdl-mini-footer__left-section - Identifies container as a left section.
9. mdl-logo - Identifies a container as a styled section heading.
10. mdl-mini-footer__link-list - Identifies an unordered list as an inline (horizontal) list.
11. mdl-mini-footer__right-section - Identifies container as a right section.

mdl_minifooter.htm

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">      
            <span class="mdl-layout-title">Material Design Tabs</span>          
         </div>       
      </header>     
      <main class="mdl-layout__content">    
         <footer class="mdl-mini-footer">
            <div class="mdl-mini-footer__left-section">
               <div class="mdl-logo">
                  Copyright Information
               </div>
               <ul class="mdl-mini-footer__link-list">
                  <li><a href="#">Help</a></li>
                  <li><a href="#">Privacy and Terms</a></li>
                  <li><a href="#">User Agreement</a></li>
               </ul>
            </div>
            <div class="mdl-mini-footer__right-section">
               <button class="mdl-mini-footer__social-btn">1</button>
               <button class="mdl-mini-footer__social-btn">2</button>
               <button class="mdl-mini-footer__social-btn">3</button>
            </div>
         </footer>
      </main>
   </body>
</html>

Result

Verify the result.