Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / components / footer / index.html
blob: 83f76f89c8c81d8c7343ab7e25fb1e899054b753 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1
2
3
4<h2 id="introduction">Introduction</h2>
5<p>The Material Design Lite (MDL) <strong>footer</strong> component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called &quot;footer&quot;, it may be placed at any appropriate location on a device screen, either before or after other content.</p>
6<p>An MDL footer component takes two basic forms: <em>mega-footer</em> and <em>mini-footer</em>. As the names imply, mega-footers contain more (and more complex) content than mini-footers. A mega-footer presents multiple sections of content separated by horizontal rules, while a mini-footer presents a single section of content. Both footer forms have their own internal structures, including required and optional elements, and typically include both informational and clickable content, such as links.</p>
7<p>Footers, as represented by this component, are a fairly new feature in user interfaces, and allow users to view discrete blocks of content in a coherent and consistently organized way. Their design and use is an important factor in the overall user experience.</p>
8<h3 id="to-include-an-mdl-mega-footer-component-">To include an MDL <strong>mega-footer</strong> component:</h3>
9<p>&nbsp;1a. Code a <code>&lt;footer&gt;</code> element. Inside the footer, include one <code>&lt;div&gt;</code> element for each content section, typically three: <em>top</em>, <em>middle</em>, and <em>bottom</em>.</p>
10<pre><code class="lang-html">&lt;footer&gt;
11 &lt;div&gt;
12 ...
13 &lt;/div&gt;
14 &lt;div&gt;
15 ...
16 &lt;/div&gt;
17 &lt;div&gt;
18 ...
19 &lt;/div&gt;
20&lt;/footer&gt;
21</code></pre>
22<p>&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the <code>class</code> attribute.</p>
23<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
24 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
25 ...
26 &lt;/div&gt;
27 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
28 ...
29 &lt;/div&gt;
30 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
31 ...
32 &lt;/div&gt;
33&lt;/footer&gt;
34</code></pre>
35<p>&nbsp;2a. Inside the top section div, code two sibling &quot;inner&quot; divs for the <em>left</em> and <em>right</em> content sections.</p>
36<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
37 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
38 &lt;div&gt;
39 ...
40 &lt;/div&gt;
41 &lt;div&gt;
42 ...
43 &lt;/div&gt;
44 &lt;/div&gt;
45 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
46 ...
47 &lt;/div&gt;
48 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
49 ...
50 &lt;/div&gt;
51&lt;/footer&gt;
52</code></pre>
53<p>&nbsp;2b. Add the appropriate MDL classes to the two &quot;inner&quot; left and right divs using the <code>class</code> attribute.</p>
54<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
55 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
56 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
57 ...
58 &lt;/div&gt;
59 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
60 ...
61 &lt;/div&gt;
62 &lt;/div&gt;
63 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
64 ...
65 &lt;/div&gt;
66 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
67 ...
68 &lt;/div&gt;
69&lt;/footer&gt;
70</code></pre>
71<p>&nbsp;3a. Inside the middle section div, code one or more sibling &quot;inner&quot; divs for the <em>drop-down</em> content sections. That is, for two drop-down sections, you would code two divs.</p>
72<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
73 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
74 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
75 ...
76 &lt;/div&gt;
77 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
78 ...
79 &lt;/div&gt;
80 &lt;/div&gt;
81 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
82 &lt;div&gt;
83 ...
84 &lt;/div&gt;
85 &lt;div&gt;
86 ...
87 &lt;/div&gt;
88 &lt;/div&gt;
89 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
90 ...
91 &lt;/div&gt;
92&lt;/footer&gt;
93</code></pre>
94<p>&nbsp;3b. Add the appropriate MDL classes to the two &quot;inner&quot; drop-down divs using the <code>class</code> attribute.</p>
95<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
96 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
97 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
98 ...
99 &lt;/div&gt;
100 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
101 ...
102 &lt;/div&gt;
103 &lt;/div&gt;
104 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
105 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
106 ...
107 &lt;/div&gt;
108 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
109 ...
110 &lt;/div&gt;
111 &lt;/div&gt;
112 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
113 ...
114 &lt;/div&gt;
115&lt;/footer&gt;
116</code></pre>
117<p>&nbsp;4a. Inside the bottom section div, code an &quot;inner&quot; div for the section heading and a sibling unordered list for the bottom section links.</p>
118<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
119 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
120 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
121 ...
122 &lt;/div&gt;
123 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
124 ...
125 &lt;/div&gt;
126 &lt;/div&gt;
127 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
128 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
129 ...
130 &lt;/div&gt;
131 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
132 ...
133 &lt;/div&gt;
134 &lt;/div&gt;
135 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
136 &lt;div&gt;
137 ...
138 &lt;/div&gt;
139 &lt;ul&gt;
140 ...
141 &lt;/ul&gt;
142 &lt;/div&gt;
143&lt;/footer&gt;
144</code></pre>
145<p>&nbsp;4b. Add the appropriate MDL classes to the &quot;inner&quot; div heading and list using the <code>class</code> attribute.</p>
146<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
147 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
148 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
149 ...
150 &lt;/div&gt;
151 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
152 ...
153 &lt;/div&gt;
154 &lt;/div&gt;
155 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
156 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
157 ...
158 &lt;/div&gt;
159 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
160 ...
161 &lt;/div&gt;
162 &lt;/div&gt;
163 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
164 &lt;div class=&quot;mdl-logo&quot;&gt;
165 &lt;/div&gt;
166 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
167 ...
168 &lt;/ul&gt;
169 &lt;/div&gt;
170&lt;/footer&gt;
171</code></pre>
172<p>&nbsp;5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the <code>class</code> attribute.</p>
173<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
174 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
175 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
176 &lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
177 &lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
178 &lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
179 &lt;/div&gt;
180 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
181 &lt;a href=&quot;&quot;&gt;Link 1&lt;/a&gt;
182 &lt;a href=&quot;&quot;&gt;Link 2&lt;/a&gt;
183 &lt;a href=&quot;&quot;&gt;Link 3&lt;/a&gt;
184 &lt;/div&gt;
185 &lt;/div&gt;
186 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
187 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
188 &lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Drop-down 1 Heading&lt;/h1&gt;
189 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
190 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link A&lt;/a&gt;&lt;/li&gt;
191 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link B&lt;/a&gt;&lt;/li&gt;
192 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link C&lt;/a&gt;&lt;/li&gt;
193 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link D&lt;/a&gt;&lt;/li&gt;
194 &lt;/ul&gt;
195 &lt;/div&gt;
196 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
197 &lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Drop-down 2 Heading&lt;/h1&gt;
198 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
199 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link A&lt;/a&gt;&lt;/li&gt;
200 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link B&lt;/a&gt;&lt;/li&gt;
201 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link C&lt;/a&gt;&lt;/li&gt;
202 &lt;/ul&gt;
203 &lt;/div&gt;
204 &lt;/div&gt;
205 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
206 &lt;div class=&quot;mdl-logo&quot;&gt;
207 Mega-Footer Bottom Section Heading
208 &lt;/div&gt;
209 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
210 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link A&lt;/a&gt;&lt;/li&gt;
211 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link B&lt;/a&gt;&lt;/li&gt;
212 &lt;/ul&gt;
213 &lt;/div&gt;
214&lt;/footer&gt;
215</code></pre>
216<p>The mega-footer component is ready for use.</p>
217<h4 id="examples">Examples</h4>
218<p>A mega-footer component with three sections and two drop-down sections in the middle section.</p>
219<pre><code class="lang-html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
220 &lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
221 &lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
222 &lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
223 &lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
224 &lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
225 &lt;/div&gt;
226 &lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
227 &lt;a href=&quot;#&quot;&gt;Introduction&lt;/a&gt;
228 &lt;a href=&quot;#&quot;&gt;App Status Dashboard&lt;/a&gt;
229 &lt;a href=&quot;#&quot;&gt;Terms of Service&lt;/a&gt;
230 &lt;/div&gt;
231 &lt;/div&gt;
232 &lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
233 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
234 &lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Learning and Support&lt;/h1&gt;
235 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
236 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Resource Center&lt;/a&gt;&lt;/li&gt;
237 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help Center&lt;/a&gt;&lt;/li&gt;
238 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Community&lt;/a&gt;&lt;/li&gt;
239 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Learn with Google&lt;/a&gt;&lt;/li&gt;
240 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Small Business Community&lt;/a&gt;&lt;/li&gt;
241 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Think Insights&lt;/a&gt;&lt;/li&gt;
242 &lt;/ul&gt;
243 &lt;/div&gt;
244 &lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
245 &lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Just for Developers&lt;/h1&gt;
246 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
247 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Google Developers&lt;/a&gt;&lt;/li&gt;
248 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;AdWords API&lt;/a&gt;&lt;/li&gt;
249 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;AdWords Scipts&lt;/a&gt;&lt;/li&gt;
250 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;AdWords Remarketing Tag&lt;/a&gt;&lt;/li&gt;
251 &lt;/ul&gt;
252 &lt;/div&gt;
253 &lt;/div&gt;
254 &lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
255 &lt;div class=&quot;mdl-logo&quot;&gt;
256 More Information
257 &lt;/div&gt;
258 &lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
259 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
260 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy and Terms&lt;/a&gt;&lt;/li&gt;
261 &lt;/ul&gt;
262 &lt;/div&gt;
263&lt;/footer&gt;
264</code></pre>
265<h3 id="to-include-an-mdl-mini-footer-component-">To include an MDL <strong>mini-footer</strong> component:</h3>
266<p>&nbsp;1a. Code a <code>&lt;footer&gt;</code> element. Inside the footer, code two <code>&lt;div&gt;</code> elements, one for the <em>left</em> section and one for the <em>right</em> section.</p>
267<pre><code class="lang-html">&lt;footer&gt;
268 &lt;div&gt;
269 ...
270 &lt;/div&gt;
271 &lt;div&gt;
272 ...
273 &lt;/div&gt;
274&lt;/footer&gt;
275</code></pre>
276<p>&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the <code>class</code> attribute.</p>
277<pre><code class="lang-html">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
278 &lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
279 ...
280 &lt;/div&gt;
281 &lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
282 ...
283 &lt;/div&gt;
284&lt;/footer&gt;
285</code></pre>
286<p>&nbsp;2a. Inside the left section div, code an &quot;inner&quot; div for the section heading and a sibling unordered list for the left section links.</p>
287<pre><code class="lang-html">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
288 &lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
289 &lt;div&gt;
290 ...
291 &lt;/div&gt;
292 &lt;ul&gt;
293 ...
294 &lt;/ul&gt;
295 &lt;/div&gt;
296 &lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
297 ...
298 &lt;/div&gt;
299&lt;/footer&gt;
300</code></pre>
301<p>&nbsp;2b. Add the appropriate MDL classes to the &quot;inner&quot; div and list using the <code>class</code> attribute.</p>
302<pre><code class="lang-html">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
303 &lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
304 &lt;div class=&quot;mdl-logo&quot;&gt;
305 ...
306 &lt;/div&gt;
307 &lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
308 ...
309 &lt;/ul&gt;
310 &lt;/div&gt;
311 &lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
312 ...
313 &lt;/div&gt;
314&lt;/footer&gt;
315</code></pre>
316<p>&nbsp;3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the <code>class</code> attribute.</p>
317<pre><code class="lang-html">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
318 &lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
319 &lt;div class=&quot;mdl-logo&quot;&gt;
320 Mini-footer Heading
321 &lt;/div&gt;
322 &lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
323 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
324 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
325 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
326 &lt;/ul&gt;
327 &lt;/div&gt;
328 &lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
329 &lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
330 &lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
331 &lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
332 &lt;/div&gt;
333&lt;/footer&gt;
334</code></pre>
335<p>The mini-footer component is ready for use.</p>
336<h4 id="examples">Examples</h4>
337<p>A mini-footer with left and right sections.</p>
338<pre><code class="lang-html">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
339 &lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
340 &lt;div class=&quot;mdl-logo&quot;&gt;
341 More Information
342 &lt;/div&gt;
343 &lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
344 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
345 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy and Terms&lt;/a&gt;&lt;/li&gt;
346 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;User Agreement&lt;/a&gt;&lt;/li&gt;
347 &lt;/ul&gt;
348 &lt;/div&gt;
349 &lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
350 &lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
351 &lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
352 &lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
353 &lt;/div&gt;
354&lt;/footer&gt;
355</code></pre>
356<h2 id="configuration-options">Configuration options</h2>
357<p>The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.</p>
358<table>
359<thead>
360<tr>
361<th>MDL class</th>
362<th>Effect</th>
363<th>Remarks</th>
364</tr>
365</thead>
366<tbody>
367<tr>
368<td><code>mdl-mega-footer</code></td>
369<td>Defines container as an MDL mega-footer component</td>
370<td>Required on footer element</td>
371</tr>
372<tr>
373<td><code>mdl-mega-footer__top-section</code></td>
374<td>Defines container as a footer top section</td>
375<td>Required on top section &quot;outer&quot; div element</td>
376</tr>
377<tr>
378<td><code>mdl-mega-footer__left-section</code></td>
379<td>Defines container as a left section</td>
380<td>Required on left section &quot;inner&quot; div element</td>
381</tr>
382<tr>
383<td><code>mdl-mega-footer__social-btn</code></td>
384<td>Defines a decorative square within mega-footer</td>
385<td>Required on button element (if used)</td>
386</tr>
387<tr>
388<td><code>mdl-mega-footer__right-section</code></td>
389<td>Defines container as a right section</td>
390<td>Required on right section &quot;inner&quot; div element</td>
391</tr>
392<tr>
393<td><code>mdl-mega-footer__middle-section</code></td>
394<td>Defines container as a footer middle section</td>
395<td>Required on middle section &quot;outer&quot; div element</td>
396</tr>
397<tr>
398<td><code>mdl-mega-footer__drop-down-section</code></td>
399<td>Defines container as a drop-down (vertical) content area</td>
400<td>Required on drop-down &quot;inner&quot; div elements</td>
401</tr>
402<tr>
403<td><code>mdl-mega-footer__heading</code></td>
404<td>Defines a heading as a mega-footer heading</td>
405<td>Required on h1 element inside drop-down section</td>
406</tr>
407<tr>
408<td><code>mdl-mega-footer__link-list</code></td>
409<td>Defines an unordered list as a drop-down (vertical) list</td>
410<td>Required on ul element inside drop-down section</td>
411</tr>
412<tr>
413<td><code>mdl-mega-footer__bottom-section</code></td>
414<td>Defines container as a footer bottom section</td>
415<td>Required on bottom section &quot;outer&quot; div element</td>
416</tr>
417<tr>
418<td><code>mdl-logo</code></td>
419<td>Defines a container as a styled section heading</td>
420<td>Required on &quot;inner&quot; div element in mega-footer bottom-section or mini-footer left-section</td>
421</tr>
422<tr>
423<td><code>mdl-mini-footer</code></td>
424<td>Defines container as an MDL mini-footer component</td>
425<td>Required on footer element</td>
426</tr>
427<tr>
428<td><code>mdl-mini-footer__left-section</code></td>
429<td>Defines container as a left section</td>
430<td>Required on left section &quot;inner&quot; div element</td>
431</tr>
432<tr>
433<td><code>mdl-mini-footer__link-list</code></td>
434<td>Defines an unordered list as an inline (horizontal) list</td>
435<td>Required on ul element sibling to &quot;mdl-logo&quot; div element</td>
436</tr>
437<tr>
438<td><code>mdl-mini-footer__right-section</code></td>
439<td>Defines container as a right section</td>
440<td>Required on right section &quot;inner&quot; div element</td>
441</tr>
442<tr>
443<td><code>mdl-mini-footer__social-btn</code></td>
444<td>Defines a decorative square within mini-footer</td>
445<td>Required on button element (if used)</td>
446</tr>
447</tbody>
448</table>
449
450