Material Design Lite Footers - Material Design Lite

What are Material Design Lite Footers?

An MDL footer components are in two types: mega-footer and mini-footer. Mega-footer has more complex content than mini-footer. A mega-footer presents more sections of content which are separated by horizontal rules, whereas a mini-footer presents a single section of content. Both Mega and Mini footers 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. 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

Below mentioned examples discusses about the use of MDL footer classes to style footers.

Mega Footer

Below mentioned example discusses about the use of mdl-mega-footer class to layout contents in a footer.
This is how MDL classes are used.
  • 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

Result

Verify the result.

Mini Footer

Below example explains the use of mdl-mini-footer class to layout contents in footer.
This is how MDL classes are used.
  • 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

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics