Material Design Lite - Footers

An MDL footer component comes in two primary forms: mega-footer and mini-footer. mega-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. The footers typically contain both informational and clickable content, such as links.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the mega-footer and mini-footer. The following table lists down the available classes and their effects.
mdl-mega-footer
Identifies container as an MDL mega-footer component. Required for footer element.
mdl-mega-footer__top-section
Identifies container as a footer top section. Required for top section "outer" div element.
mdl-mega-footer__left-section
Identifies container as a left section. Required for left section "inner" div element.
mdl-mega-footer__social-btn
Identifies a decorative square within mega-footer. Required for button element (if used).
mdl-mega-footer__right-section
Identifies container as a right section. Required for right section "inner" div element.
mdl-mega-footer__middle-section
Identifies container as a footer middle section. Required for middle section "outer" div element.
mdl-mega-footer__drop-down-section
Identifies container as a drop-down (vertical) content area. Required for drop-down "inner" div elements.
mdl-mega-footer__heading
Identifies a heading as a mega-footer heading. Required for h1 element inside drop-down section.
mdl-mega-footer__link-list
Identifies an unordered list as a drop-down (vertical) list. Required for ul element inside drop-down section.
mdl-mega-footer__bottom-section
Identifies container as a footer bottom section. Required for bottom section "outer" div element.
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.
mdl-mini-footer
Identifies container as an MDL mini-footer component. Required for footer element.
mdl-mini-footer__left-section
Identifies container as a left section. Required for left section "inner" div element.
mdl-mini-footer__link-list
Identifies an unordered list as an inline (horizontal) list. Required for ul element sibling to "mdl-logo" div element.
mdl-mini-footer__right-section
Identifies container as a right section. Required for right section "inner" div element.
mdl-mini-footer__social-btn
Identifies a decorative square within mini-footer. Required for button element (if used).
Now, let us see a few examples to understand the use of MDL footer classes to style footers.
Let us discuss the use of the mdl-mega-footer class to layout contents in a footer. The following MDL classes will be used in this example.
mdl-layout − Identifies a div as an MDL component.
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout-title − Identifies layout title text.
mdl-layout-title − Identifies layout title text.
mdl-layout__content − Identifies div as MDL layout content.
mdl-layout__content − Identifies div as MDL layout content.
mdl-mega-footer − Identifies container as an MDL mega-footer component.
mdl-mega-footer − Identifies container as an MDL mega-footer component.
mdl-mega-footer__top-section − Identifies container as a footer top section.
mdl-mega-footer__top-section − Identifies container as a footer top section.
mdl-mega-footer__left-section − Identifies container as a left section.
mdl-mega-footer__left-section − Identifies container as a left section.
mdl-mega-footer__social-btn − Identifies a decorative square within mini-footer.
mdl-mega-footer__social-btn − Identifies a decorative square within mini-footer.
mdl-mega-footer__right-section − Identifies container as a right section.
mdl-mega-footer__right-section − Identifies container as a right section.
mdl-mega-footer__middle-section − Identifies container as a footer middle section.
mdl-mega-footer__middle-section − Identifies container as a footer middle section.
mdl-mega-footer__drop-down-section − Identifies container as a drop-down (vertical) content area.
mdl-mega-footer__drop-down-section − Identifies container as a drop-down (vertical) content area.
mdl-mega-footer__heading − Identifies a heading as a mega-footer heading.
mdl-mega-footer__heading − Identifies a heading as a mega-footer heading.
mdl-mega-footer__link-list − Identifies an unordered list as an inline (horizontal) list.
mdl-mega-footer__link-list − Identifies an unordered list as an inline (horizontal) list.
mdl-mega-footer__bottom-section − Identifies container as a footer bottom section.
mdl-mega-footer__bottom-section − Identifies container as a footer bottom section.
mdl-logo − Identifies a container as a styled section heading.
mdl-logo − Identifies a container as a styled section heading.
<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>
      </div>
   </body>
</html>
Verify the result.