Material Design Lite - Footers

Advertisements

Previous Page
Next Page  

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.

Sr.No. 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).

Now, let us see a few examples to understand the use of MDL footer classes to style footers.

Mega Footer

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-js-layout − Adds basic MDL behavior to outer div.

  • 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-title − Identifies layout title text.

  • mdl-layout__content − Identifies div as MDL layout content.

  • 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__left-section − Identifies container as a left section.

  • 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__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__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__bottom-section − Identifies container as a footer bottom section.

  • mdl-logo − Identifies a container as a styled section heading.

mdl_megafooter.htm

Live Demo 
<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>

Result

Verify the result.

Mini Footer

The following example will help you understand the use of the mdl-mini-footer class to layout contents in a footer.

The MDL classes given below will be used in this example.

  • mdl-layout − Identifies a div as an MDL component.

  • 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__header-row − Identifies container as MDL header row.

  • mdl-layout-title − Identifies layout title text.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-mini-footer − Identifies container as an MDL mini-footer component.

  • mdl-mini-footer__left-section − Identifies container as a left section.

  • mdl-logo - Identifies a container as a styled section heading.

  • mdl-mini-footer__link-list − Identifies an unordered list as an inline (horizontal) list.

  • mdl-mini-footer__right-section − Identifies container as a right section.

mdl_minifooter.htm

Live Demo 
<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>
      </div>
   </body>
</html>

Result

Verify the result.

Advertisements