Blame - node_modules/material-design-lite/dist/components/index.html - hores-external

blob: 62a4e35e78de7961dee76915127a6e76a39c108e [file] [log] [blame]

Copybara bot	be50d49	2023-11-30 00:16:42 +0100	[diff] [blame^]	1	<!doctype html>
				2	<html lang="en">
				3	<head>
				4	<meta charset="utf-8">
				5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
				6	<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
				7	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
				8	<title>Material Design Lite</title>
				9
				10	<!-- Add to homescreen -->
				11	<link rel="manifest" href="manifest.json">
				12
				13	<!-- Fallback to homescreen for Chrome <39 on Android -->
				14	<meta name="mobile-web-app-capable" content="yes">
				15	<meta name="application-name" content="Material Design Lite">
				16	<link rel="icon" sizes="192x192" href="../assets/android-desktop.png">
				17
				18	<!-- Add to homescreen for Safari on iOS -->
				19	<meta name="apple-mobile-web-app-capable" content="yes">
				20	<meta name="apple-mobile-web-app-status-bar-style" content="black">
				21	<meta name="apple-mobile-web-app-title" content="Material Design Lite">
				22	<link rel="apple-touch-icon" href="../assets/ios-desktop.png">
				23
				24	<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
				25	<!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
				26	<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
				27
				28	<meta name="theme-color" content="#263238">
				29
				30	<link rel="shortcut icon" href="../assets/favicon.png">
				31	<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
				32	<!--
				33	<link rel="canonical" href="http://www.example.com/">
				34	-->
				35
				36	<!-- Page styles -->
				37	<link rel="stylesheet" href="../assets/prism-default.css">
				38	<link rel="stylesheet" href="../material.min.css">
				39	<link rel="stylesheet" href="../assets/main.css">
				40
				41	<!-- Fonts -->
				42	<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
				43	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
				44	</head>
				45	<body class="components">
				46	<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
				47	<script>
				48	// if (document.location.hostname !== 'localhost' &&
				49	// document.location.hostname !== '127.0.0.1' &&
				50	// document.location.hostname.search('.corp.') === -1) {
				51	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
				52	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
				53	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
				54	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
				55	ga('create', 'UA-25993200-9', 'auto');
				56	// If a specific component page is loaded directly we'll attribute the
				57	// page view to the specific component's page
				58	if (window.location.pathname.indexOf('/components/') !== -1 &&
				59	window.location.hash.indexOf('-section') !== -1) {
				60	ga('send', 'pageview', '/components/' +
				61	window.location.hash.split('#')[1].split('/')[0]);
				62	} else {
				63	ga('send', 'pageview');
				64	}
				65	// }
				66
				67	// Setup error tracking before anything else runs.
				68	window.onerror = function(message, file, lineNumber, columnNumber, error) {
				69	try {
				70	if (error !== undefined) {
				71	message = error.stack;
				72	}
				73	ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
				74	} catch (e) {
				75	// no-op
				76	}
				77	};
				78	</script>
				79	<div class="image-preloader"></div>
				80	<div class="docs-layout mdl-layout mdl-js-layout">
				81	<header class="docs-layout-header mdl-layout__header">
				82	<div class="mdl-layout__header-row">
				83	<span class="docs-layout-title mdl-layout-title"><a href="../">Material<br>Design<br>Lite</a></span>
				84	</div>
				85	<div class="docs-navigation__container">
				86	<nav class="docs-navigation mdl-navigation">
				87	<a href="../index.html" class="mdl-navigation__link about">About</a>
				88	<a href="../started/index.html" class="mdl-navigation__link started">Getting Started</a>
				89	<a href="../templates/index.html" class="mdl-navigation__link templates">Templates</a>
				90	<a href="../components/index.html" class="mdl-navigation__link components">Components</a>
				91	<a href="../styles/index.html" class="mdl-navigation__link styles">Styles</a>
				92	<a href="../customize/index.html" class="mdl-navigation__link customize">Customize</a>
				93	<a href="../showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
				94	<a href="../faq/index.html" class="mdl-navigation__link faq">FAQ</a>
				95	<div class="spacer"></div>
				96	<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>
				97	<a href="../started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
				98	<i class="material-icons"></i><span>Download</span>
				99	<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
				100	<i class="material-icons"></i>
				101	</button>
				102	</a>
				103	</nav>
				104	</div>
				105	<i class="material-icons scrollindicator scrollindicator--right"></i>
				106	<i class="material-icons scrollindicator scrollindicator--left"></i>
				107	</header>
				108	<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
				109	<div class="content mdl-grid mdl-grid--no-spacing" id="content">
				110	<div class="subpageheader mdl-cell--12-col">Components</div>
				111
				112	<link href="../assets/components.css" rel="stylesheet">
				113	<script src="../assets/snippets.js"></script>
				114	<script src="../assets/components.js"></script>
				115	<link rel="stylesheet" href="../components/demos.css">
				116
				117	<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
				118	<aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
				119
				120	<a href="#badges-section" class="mdl-components__link mdl-component badges">
				121	<div class="mdl-components__link-image"
				122	style="background-image: url('../assets/comp_badges.png')">
				123	</div>
				124	<span class="mdl-components__link-text">Badges</span>
				125	</a>
				126
				127	<a href="#buttons-section" class="mdl-components__link mdl-component buttons">
				128	<div class="mdl-components__link-image"
				129	style="background-image: url('../assets/comp_buttons.png')">
				130	</div>
				131	<span class="mdl-components__link-text">Buttons</span>
				132	</a>
				133
				134	<a href="#cards-section" class="mdl-components__link mdl-component cards">
				135	<div class="mdl-components__link-image"
				136	style="background-image: url('../assets/comp_cards.png')">
				137	</div>
				138	<span class="mdl-components__link-text">Cards</span>
				139	</a>
				140
				141	<a href="#chips-section" class="mdl-components__link mdl-component chips">
				142	<div class="mdl-components__link-image"
				143	style="background-image: url('../assets/comp_chips.png')">
				144	</div>
				145	<span class="mdl-components__link-text">Chips</span>
				146	</a>
				147
				148	<a href="#dialog-section" class="mdl-components__link mdl-component dialog">
				149	<div class="mdl-components__link-image"
				150	style="background-image: url('../assets/comp_dialog.png')">
				151	</div>
				152	<span class="mdl-components__link-text">Dialogs</span>
				153	</a>
				154
				155	<a href="#layout-section" class="mdl-components__link mdl-component layout">
				156	<div class="mdl-components__link-image"
				157	style="background-image: url('../assets/comp_layout.png')">
				158	</div>
				159	<span class="mdl-components__link-text">Layout</span>
				160	</a>
				161
				162	<a href="#lists-section" class="mdl-components__link mdl-component lists">
				163	<div class="mdl-components__link-image"
				164	style="background-image: url('../assets/comp_lists.png')">
				165	</div>
				166	<span class="mdl-components__link-text">Lists</span>
				167	</a>
				168
				169	<a href="#loading-section" class="mdl-components__link mdl-component loading">
				170	<div class="mdl-components__link-image"
				171	style="background-image: url('../assets/comp_loading.png')">
				172	</div>
				173	<span class="mdl-components__link-text">Loading</span>
				174	</a>
				175
				176	<a href="#menus-section" class="mdl-components__link mdl-component menus">
				177	<div class="mdl-components__link-image"
				178	style="background-image: url('../assets/comp_menus.png')">
				179	</div>
				180	<span class="mdl-components__link-text">Menus</span>
				181	</a>
				182
				183	<a href="#sliders-section" class="mdl-components__link mdl-component sliders">
				184	<div class="mdl-components__link-image"
				185	style="background-image: url('../assets/comp_sliders.png')">
				186	</div>
				187	<span class="mdl-components__link-text">Sliders</span>
				188	</a>
				189
				190	<a href="#snackbar-section" class="mdl-components__link mdl-component snackbar">
				191	<div class="mdl-components__link-image"
				192	style="background-image: url('../assets/comp_snackbar.png')">
				193	</div>
				194	<span class="mdl-components__link-text">Snackbar</span>
				195	</a>
				196
				197	<a href="#toggles-section" class="mdl-components__link mdl-component toggles">
				198	<div class="mdl-components__link-image"
				199	style="background-image: url('../assets/comp_toggles.png')">
				200	</div>
				201	<span class="mdl-components__link-text">Toggles</span>
				202	</a>
				203
				204	<a href="#tables-section" class="mdl-components__link mdl-component tables">
				205	<div class="mdl-components__link-image"
				206	style="background-image: url('../assets/comp_tables.png')">
				207	</div>
				208	<span class="mdl-components__link-text">Tables</span>
				209	</a>
				210
				211	<a href="#textfields-section" class="mdl-components__link mdl-component textfields">
				212	<div class="mdl-components__link-image"
				213	style="background-image: url('../assets/comp_textfields.png')">
				214	</div>
				215	<span class="mdl-components__link-text">Text Fields</span>
				216	</a>
				217
				218	<a href="#tooltips-section" class="mdl-components__link mdl-component tooltips">
				219	<div class="mdl-components__link-image"
				220	style="background-image: url('../assets/comp_tooltips.png')">
				221	</div>
				222	<span class="mdl-components__link-text">Tooltips</span>
				223	</a>
				224
				225	</aside>
				226	<main class="mdl-components__pages">
				227	<section id="index-section" class="mdl-components-index mdl-components__page">
				228	<div class="mdl-components-index-text mdl-grid">
				229	<div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
				230	<dl class="mdl-components-dl">
				231	<dt class="mdl-components-dt">COMPONENTS</dt>
				232	<dd class="mdl_components-dd">
				233	Material Design Lite (MDL) is a library of components for web developers
				234	based on Google's Material Design Philosophy: "A visual language for our
				235	users that synthesizes the classic principles of good design with the
				236	innovation and possibility of technology and science." Understanding the
				237	goals and principles of Material Design is critical to the proper use of
				238	the Material Design Lite components. If you have not yet read the
				239	<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
				240	you should do so before attempting to use the components.
				241	</dd>
				242	</dl>
				243	</div>
				244	</div>
				245	<div class="mdl-components-img"></div>
				246	</section>
				247
				248	<section id="badges-section" class="mdl-components__page mdl-grid">
				249	<div class="mdl-cell mdl-cell--12-col">
				250	<div class="docs-text-styling component-title">
				251	<h3>Badges</h3>
				252	<p>Small status descriptors for UI elements.</p>
				253	</div>
				254
				255
				256
				257
				258
				259
				260	<!-- Add warning, if the component has one -->
				261
				262	<!-- Generating snippets -->
				263
				264
				265
				266	<div class="snippet-group">
				267
				268	<div class="snippet-header">
				269	<div class="snippet-demos">
				270	<div class="snippet-demo-padding"></div>
				271
				272
				273
				274
				275	<div class="snippet-demo">
				276	<div class="snippet-demo-container demo-badge demo-badge__badge-on-icon-text">
				277	<style>
				278	.demo-badge__badge-on-icon-text .mdl-badge {
				279	color: rgba(0, 0, 0, 0.24);
				280	}
				281	.demo-badge__badge-on-icon-text .mdl-badge.material-icons {
				282	font-size: 32px;
				283	}
				284	</style>
				285	<!-- Number badge on icon -->
				286	<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
				287
				288
				289	</div>
				290	</div>
				291
				292
				293
				294	<div class="snippet-demo">
				295	<div class="snippet-demo-container demo-badge demo-badge__badge-on-icon-icon">
				296	<style>
				297	.demo-badge__badge-on-icon-icon .mdl-badge {
				298	color: rgba(0, 0, 0, 0.24);
				299	}
				300	.demo-badge__badge-on-icon-icon .mdl-badge.material-icons {
				301	font-size: 32px;
				302	}
				303	</style>
				304	<!-- Icon badge on icon -->
				305	<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
				306
				307
				308	</div>
				309	</div>
				310	<div class="snippet-demo-padding"></div>
				311	</div>
				312	<div class="snippet-captions">
				313	<div class="snippet-caption-padding"></div>
				314
				315	<div class="snippet-caption">
				316	Number
				317	</div>
				318	<div class="snippet-caption">
				319	Icon
				320	</div>
				321	<div class="snippet-caption-padding"></div>
				322	</div>
				323	</div>
				324	<div class="snippet-code">
				325	<pre class="language-markup codepen-button-enabled"><code id="badge/badge-on-icon-text.html"><!-- Number badge on icon -->
				326	<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
				327	</code><div class="codepen-extra-css"><style></style></div><code id="badge/badge-on-icon-icon.html"><!-- Icon badge on icon -->
				328	<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
				329	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				330	body {
				331	padding: 20px;
				332	background: #fafafa;
				333	position: relative;
				334	}
				335	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				336	</div>
				337	</div>
				338
				339
				340
				341
				342	<div class="snippet-group">
				343
				344	<div class="snippet-header">
				345	<div class="snippet-demos">
				346	<div class="snippet-demo-padding"></div>
				347
				348
				349
				350
				351	<div class="snippet-demo">
				352	<div class="snippet-demo-container demo-badge demo-badge__badge-on-text-text">
				353	<style>
				354	.demo-badge__badge-on-text-text .mdl-badge {
				355	color: rgba(0, 0, 0, 0.24);
				356	}
				357	</style>
				358
				359	<!-- Number badge -->
				360	<span class="mdl-badge" data-badge="4">Inbox</span>
				361
				362
				363	</div>
				364	</div>
				365
				366
				367
				368	<div class="snippet-demo">
				369	<div class="snippet-demo-container demo-badge demo-badge__badge-on-text-icon">
				370	<style>
				371	.demo-badge__badge-on-text-icon .mdl-badge {
				372	color: rgba(0, 0, 0, 0.24);
				373	}
				374	</style>
				375	<!-- Icon badge -->
				376	<span class="mdl-badge" data-badge="♥">Mood</span>
				377
				378
				379	</div>
				380	</div>
				381	<div class="snippet-demo-padding"></div>
				382	</div>
				383	<div class="snippet-captions">
				384	<div class="snippet-caption-padding"></div>
				385
				386	<div class="snippet-caption">
				387	Number
				388	</div>
				389	<div class="snippet-caption">
				390	Icon
				391	</div>
				392	<div class="snippet-caption-padding"></div>
				393	</div>
				394	</div>
				395	<div class="snippet-code">
				396	<pre class="language-markup codepen-button-enabled"><code id="badge/badge-on-text-text.html"><!-- Number badge -->
				397	<span class="mdl-badge" data-badge="4">Inbox</span>
				398	</code><div class="codepen-extra-css"><style></style></div><code id="badge/badge-on-text-icon.html"><!-- Icon badge -->
				399	<span class="mdl-badge" data-badge="♥">Mood</span>
				400	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				401	body {
				402	padding: 20px;
				403	background: #fafafa;
				404	position: relative;
				405	}
				406	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				407	</div>
				408	</div>
				409
				410
				411	<!-- Adding the demo page -->
				412
				413	<style>
				414
				415	</style>
				416
				417	<script>
				418
				419	</script>
				420
				421
				422	<div class="docs-text-styling docs-readme">
				423
				424
				425
				426
				427	<h2 id="introduction">Introduction</h2>
				428	<p>The Material Design Lite (MDL) <strong>badge</strong> component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.</p>
				429	<p>You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:</p>
				430	<ul>
				431	<li>A "New messages" notification might be followed by a badge containing the number of unread messages.</li>
				432	<li>A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.</li>
				433	<li>A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.</li>
				434	</ul>
				435	<p>A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.</p>
				436	<p>Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.</p>
				437	<h3 id="to-include-an-mdl-badge-component-">To include an MDL <strong>badge</strong> component:</h3>
				438	<p> 1. Code an <code><a></code> (anchor/link) or a <code><span></code> element. Include any desired attributes and content.</p>
				439	<pre><code class="language-markup"><a href="#">This link has a badge.</a>
				440	</code></pre>
				441	<p> 2. Add one or more MDL classes, separated by spaces, to the element using the <code>class</code> attribute.</p>
				442	<pre><code class="language-markup"><a href="#" class="mdl-badge">This link has a badge.</a>
				443	</code></pre>
				444	<p> 3. Add a <code>data-badge</code> attribute and quoted string value for the badge.</p>
				445	<pre><code class="language-markup"><a href="#" class="mdl-badge" data-badge="5">This link has a badge.</a>
				446	</code></pre>
				447	<p>The badge component is ready for use.</p>
				448	<blockquote>
				449	<p><strong>Note:</strong> Because of the badge component's small size, the <code>data-badge</code> value should typically contain one to three characters. More than three characters will not cause an error, but some characters may fall outside the badge and thus be difficult or impossible to see. The value of the <code>data-badge</code> attribute is centered in the badge.</p>
				450	</blockquote>
				451	<h4 id="examples">Examples</h4>
				452	<p>A badge inside a link.</p>
				453	<pre><code class="language-markup"><a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
				454	</code></pre>
				455	<p>A badge near, but not included in, a link.</p>
				456	<pre><code class="language-markup"><a href="#">This link is followed by a badge.</a>
				457	<span class="mdl-badge" data-badge="12"></span>
				458	</code></pre>
				459	<p>A badge inside a link with too many characters to fit inside the badge.</p>
				460	<pre><code class="language-markup"><a href="#" class="mdl-badge" data-badge="123456789">
				461	This badge has too many characters.</a>
				462	</code></pre>
				463	<p>A badge inside a link with no badge background color.</p>
				464	<pre><code class="language-markup"><a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
				465	This badge has no background color.</a>
				466	</code></pre>
				467	<h2 id="configuration-options">Configuration options</h2>
				468	<p>The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.</p>
				469	<table>
				470	<thead>
				471	<tr>
				472	<th>MDL class</th>
				473	<th>Effect</th>
				474	<th>Remarks</th>
				475	</tr>
				476	</thead>
				477	<tbody>
				478	<tr>
				479	<td><code>mdl-badge</code></td>
				480	<td>Defines badge as an MDL component</td>
				481	<td>Required on span or link</td>
				482	</tr>
				483	<tr>
				484	<td><code>mdl-badge--no-background</code></td>
				485	<td>Applies open-circle effect to badge</td>
				486	<td>Optional</td>
				487	</tr>
				488	<tr>
				489	<td><code>mdl-badge--overlap</code></td>
				490	<td>Make the badge overlap with its container</td>
				491	<td>Optional</td>
				492	</tr>
				493	<tr>
				494	<td><code>data-badge="value"</code></td>
				495	<td>Assigns string value to badge</td>
				496	<td>Not a class, but a separate attribute; required on span or link</td>
				497	</tr>
				498	</tbody>
				499	</table>
				500
				501
				502
				503	</div>
				504
				505	</div>
				506	</section>
				507	<section id="buttons-section" class="mdl-components__page mdl-grid">
				508	<div class="mdl-cell mdl-cell--12-col">
				509	<div class="docs-text-styling component-title">
				510	<h3>Buttons</h3>
				511	<p>Variations on Material Design buttons.</p>
				512	</div>
				513
				514
				515
				516
				517
				518
				519	<!-- Add warning, if the component has one -->
				520
				521	<!-- Generating snippets -->
				522
				523
				524
				525	<div class="snippet-group">
				526
				527	<div class="snippet-header">
				528	<div class="snippet-demos">
				529	<div class="snippet-demo-padding"></div>
				530
				531
				532
				533
				534	<div class="snippet-demo">
				535	<div class="snippet-demo-container demo-button demo-button__fab-colored">
				536	<!-- Colored FAB button -->
				537	<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
				538	<i class="material-icons">add</i>
				539	</button>
				540
				541	</div>
				542	</div>
				543
				544
				545
				546	<div class="snippet-demo">
				547	<div class="snippet-demo-container demo-button demo-button__fab-colored-ripple">
				548	<!-- Colored FAB button with ripple -->
				549	<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
				550	<i class="material-icons">add</i>
				551	</button>
				552
				553	</div>
				554	</div>
				555	<div class="snippet-demo-padding"></div>
				556	</div>
				557	<div class="snippet-captions">
				558	<div class="snippet-caption-padding"></div>
				559
				560	<div class="snippet-caption">
				561	Colored FAB
				562	</div>
				563	<div class="snippet-caption">
				564	With ripple
				565	</div>
				566	<div class="snippet-caption-padding"></div>
				567	</div>
				568	</div>
				569	<div class="snippet-code">
				570	<pre class="language-markup codepen-button-enabled"><code id="button/fab-colored.html"><!-- Colored FAB button -->
				571	<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
				572	<i class="material-icons">add</i>
				573	</button>
				574	</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-colored-ripple.html"><!-- Colored FAB button with ripple -->
				575	<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
				576	<i class="material-icons">add</i>
				577	</button>
				578	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				579	body {
				580	padding: 20px;
				581	background: #fafafa;
				582	position: relative;
				583	}
				584	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				585	</div>
				586	</div>
				587
				588
				589
				590
				591	<div class="snippet-group">
				592
				593	<div class="snippet-header">
				594	<div class="snippet-demos">
				595	<div class="snippet-demo-padding"></div>
				596
				597
				598
				599
				600	<div class="snippet-demo">
				601	<div class="snippet-demo-container demo-button demo-button__fab">
				602	<!-- FAB button -->
				603	<button class="mdl-button mdl-js-button mdl-button--fab">
				604	<i class="material-icons">add</i>
				605	</button>
				606
				607	</div>
				608	</div>
				609
				610
				611
				612	<div class="snippet-demo">
				613	<div class="snippet-demo-container demo-button demo-button__fab-ripple">
				614	<!-- FAB button with ripple -->
				615	<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
				616	<i class="material-icons">add</i>
				617	</button>
				618
				619	</div>
				620	</div>
				621
				622
				623
				624	<div class="snippet-demo">
				625	<div class="snippet-demo-container demo-button demo-button__fab-disabled">
				626	<!-- Disabled FAB button -->
				627	<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
				628	<i class="material-icons">add</i>
				629	</button>
				630
				631	</div>
				632	</div>
				633	<div class="snippet-demo-padding"></div>
				634	</div>
				635	<div class="snippet-captions">
				636	<div class="snippet-caption-padding"></div>
				637
				638	<div class="snippet-caption">
				639	Plain FAB
				640	</div>
				641	<div class="snippet-caption">
				642	With ripple
				643	</div>
				644	<div class="snippet-caption">
				645	Disabled
				646	</div>
				647	<div class="snippet-caption-padding"></div>
				648	</div>
				649	</div>
				650	<div class="snippet-code">
				651	<pre class="language-markup codepen-button-enabled"><code id="button/fab.html"><!-- FAB button -->
				652	<button class="mdl-button mdl-js-button mdl-button--fab">
				653	<i class="material-icons">add</i>
				654	</button>
				655	</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-ripple.html"><!-- FAB button with ripple -->
				656	<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
				657	<i class="material-icons">add</i>
				658	</button>
				659	</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-disabled.html"><!-- Disabled FAB button -->
				660	<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
				661	<i class="material-icons">add</i>
				662	</button>
				663	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				664	body {
				665	padding: 20px;
				666	background: #fafafa;
				667	position: relative;
				668	}
				669	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				670	</div>
				671	</div>
				672
				673
				674
				675
				676	<div class="snippet-group">
				677
				678	<div class="snippet-header">
				679	<div class="snippet-demos">
				680	<div class="snippet-demo-padding"></div>
				681
				682
				683
				684
				685	<div class="snippet-demo">
				686	<div class="snippet-demo-container demo-button demo-button__raised">
				687	<!-- Raised button -->
				688	<button class="mdl-button mdl-js-button mdl-button--raised">
				689	Button
				690	</button>
				691
				692	</div>
				693	</div>
				694
				695
				696
				697	<div class="snippet-demo">
				698	<div class="snippet-demo-container demo-button demo-button__raised-ripple">
				699	<!-- Raised button with ripple -->
				700	<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
				701	Button
				702	</button>
				703
				704	</div>
				705	</div>
				706
				707
				708
				709	<div class="snippet-demo">
				710	<div class="snippet-demo-container demo-button demo-button__raised-disabled">
				711	<!-- Raised disabled button -->
				712	<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
				713	Button
				714	</button>
				715
				716	</div>
				717	</div>
				718	<div class="snippet-demo-padding"></div>
				719	</div>
				720	<div class="snippet-captions">
				721	<div class="snippet-caption-padding"></div>
				722
				723	<div class="snippet-caption">
				724	Raised Button
				725	</div>
				726	<div class="snippet-caption">
				727	With ripple
				728	</div>
				729	<div class="snippet-caption">
				730	Disabled
				731	</div>
				732	<div class="snippet-caption-padding"></div>
				733	</div>
				734	</div>
				735	<div class="snippet-code">
				736	<pre class="language-markup codepen-button-enabled"><code id="button/raised.html"><!-- Raised button -->
				737	<button class="mdl-button mdl-js-button mdl-button--raised">
				738	Button
				739	</button>
				740	</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-ripple.html"><!-- Raised button with ripple -->
				741	<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
				742	Button
				743	</button>
				744	</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-disabled.html"><!-- Raised disabled button -->
				745	<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
				746	Button
				747	</button>
				748	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				749	body {
				750	padding: 20px;
				751	background: #fafafa;
				752	position: relative;
				753	}
				754	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				755	</div>
				756	</div>
				757
				758
				759
				760
				761	<div class="snippet-group">
				762
				763	<div class="snippet-header">
				764	<div class="snippet-demos">
				765	<div class="snippet-demo-padding"></div>
				766
				767
				768
				769
				770	<div class="snippet-demo">
				771	<div class="snippet-demo-container demo-button demo-button__raised-colored">
				772	<!-- Colored raised button -->
				773	<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
				774	Button
				775	</button>
				776
				777	</div>
				778	</div>
				779
				780
				781
				782	<div class="snippet-demo">
				783	<div class="snippet-demo-container demo-button demo-button__raised-accent">
				784	<!-- Accent-colored raised button -->
				785	<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
				786	Button
				787	</button>
				788
				789	</div>
				790	</div>
				791
				792
				793
				794	<div class="snippet-demo">
				795	<div class="snippet-demo-container demo-button demo-button__raised-ripple-accent">
				796	<!-- Accent-colored raised button with ripple -->
				797	<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
				798	Button
				799	</button>
				800
				801	</div>
				802	</div>
				803	<div class="snippet-demo-padding"></div>
				804	</div>
				805	<div class="snippet-captions">
				806	<div class="snippet-caption-padding"></div>
				807
				808	<div class="snippet-caption">
				809	Colored button
				810	</div>
				811	<div class="snippet-caption">
				812	Accent colored
				813	</div>
				814	<div class="snippet-caption">
				815	With Ripples
				816	</div>
				817	<div class="snippet-caption-padding"></div>
				818	</div>
				819	</div>
				820	<div class="snippet-code">
				821	<pre class="language-markup codepen-button-enabled"><code id="button/raised-colored.html"><!-- Colored raised button -->
				822	<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
				823	Button
				824	</button>
				825	</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-accent.html"><!-- Accent-colored raised button -->
				826	<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
				827	Button
				828	</button>
				829	</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-ripple-accent.html"><!-- Accent-colored raised button with ripple -->
				830	<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
				831	Button
				832	</button>
				833	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				834	body {
				835	padding: 20px;
				836	background: #fafafa;
				837	position: relative;
				838	}
				839	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				840	</div>
				841	</div>
				842
				843
				844
				845
				846	<div class="snippet-group">
				847
				848	<div class="snippet-header">
				849	<div class="snippet-demos">
				850	<div class="snippet-demo-padding"></div>
				851
				852
				853
				854
				855	<div class="snippet-demo">
				856	<div class="snippet-demo-container demo-button demo-button__flat">
				857	<!-- Flat button -->
				858	<button class="mdl-button mdl-js-button">
				859	Button
				860	</button>
				861
				862	</div>
				863	</div>
				864
				865
				866
				867	<div class="snippet-demo">
				868	<div class="snippet-demo-container demo-button demo-button__flat-ripple">
				869	<!-- Flat button with ripple -->
				870	<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
				871	Button
				872	</button>
				873
				874	</div>
				875	</div>
				876
				877
				878
				879	<div class="snippet-demo">
				880	<div class="snippet-demo-container demo-button demo-button__flat-disabled">
				881	<!-- Disabled flat button -->
				882	<button class="mdl-button mdl-js-button" disabled>
				883	Button
				884	</button>
				885
				886	</div>
				887	</div>
				888	<div class="snippet-demo-padding"></div>
				889	</div>
				890	<div class="snippet-captions">
				891	<div class="snippet-caption-padding"></div>
				892
				893	<div class="snippet-caption">
				894	Flat button
				895	</div>
				896	<div class="snippet-caption">
				897	With ripple
				898	</div>
				899	<div class="snippet-caption">
				900	Disabled
				901	</div>
				902	<div class="snippet-caption-padding"></div>
				903	</div>
				904	</div>
				905	<div class="snippet-code">
				906	<pre class="language-markup codepen-button-enabled"><code id="button/flat.html"><!-- Flat button -->
				907	<button class="mdl-button mdl-js-button">
				908	Button
				909	</button>
				910	</code><div class="codepen-extra-css"><style></style></div><code id="button/flat-ripple.html"><!-- Flat button with ripple -->
				911	<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
				912	Button
				913	</button>
				914	</code><div class="codepen-extra-css"><style></style></div><code id="button/flat-disabled.html"><!-- Disabled flat button -->
				915	<button class="mdl-button mdl-js-button" disabled>
				916	Button
				917	</button>
				918	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				919	body {
				920	padding: 20px;
				921	background: #fafafa;
				922	position: relative;
				923	}
				924	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				925	</div>
				926	</div>
				927
				928
				929
				930
				931	<div class="snippet-group">
				932
				933	<div class="snippet-header">
				934	<div class="snippet-demos">
				935	<div class="snippet-demo-padding"></div>
				936
				937
				938
				939
				940	<div class="snippet-demo">
				941	<div class="snippet-demo-container demo-button demo-button__flat-primary">
				942	<!-- Primary-colored flat button -->
				943	<button class="mdl-button mdl-js-button mdl-button--primary">
				944	Button
				945	</button>
				946
				947	</div>
				948	</div>
				949
				950
				951
				952	<div class="snippet-demo">
				953	<div class="snippet-demo-container demo-button demo-button__flat-accent">
				954	<!-- Accent-colored flat button -->
				955	<button class="mdl-button mdl-js-button mdl-button--accent">
				956	Button
				957	</button>
				958
				959	</div>
				960	</div>
				961	<div class="snippet-demo-padding"></div>
				962	</div>
				963	<div class="snippet-captions">
				964	<div class="snippet-caption-padding"></div>
				965
				966	<div class="snippet-caption">
				967	Primary colored flat
				968	</div>
				969	<div class="snippet-caption">
				970	Accent colored flat
				971	</div>
				972	<div class="snippet-caption-padding"></div>
				973	</div>
				974	</div>
				975	<div class="snippet-code">
				976	<pre class="language-markup codepen-button-enabled"><code id="button/flat-primary.html"><!-- Primary-colored flat button -->
				977	<button class="mdl-button mdl-js-button mdl-button--primary">
				978	Button
				979	</button>
				980	</code><div class="codepen-extra-css"><style></style></div><code id="button/flat-accent.html"><!-- Accent-colored flat button -->
				981	<button class="mdl-button mdl-js-button mdl-button--accent">
				982	Button
				983	</button>
				984	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				985	body {
				986	padding: 20px;
				987	background: #fafafa;
				988	position: relative;
				989	}
				990	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				991	</div>
				992	</div>
				993
				994
				995
				996
				997	<div class="snippet-group">
				998
				999	<div class="snippet-header">
				1000	<div class="snippet-demos">
				1001	<div class="snippet-demo-padding"></div>
				1002
				1003
				1004
				1005
				1006	<div class="snippet-demo">
				1007	<div class="snippet-demo-container demo-button demo-button__icon">
				1008	<!-- Icon button -->
				1009	<button class="mdl-button mdl-js-button mdl-button--icon">
				1010	<i class="material-icons">mood</i>
				1011	</button>
				1012
				1013	</div>
				1014	</div>
				1015
				1016
				1017
				1018	<div class="snippet-demo">
				1019	<div class="snippet-demo-container demo-button demo-button__icon-colored">
				1020	<!-- Colored icon button -->
				1021	<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
				1022	<i class="material-icons">mood</i>
				1023	</button>
				1024
				1025	</div>
				1026	</div>
				1027	<div class="snippet-demo-padding"></div>
				1028	</div>
				1029	<div class="snippet-captions">
				1030	<div class="snippet-caption-padding"></div>
				1031
				1032	<div class="snippet-caption">
				1033	Icon button
				1034	</div>
				1035	<div class="snippet-caption">
				1036	Colored
				1037	</div>
				1038	<div class="snippet-caption-padding"></div>
				1039	</div>
				1040	</div>
				1041	<div class="snippet-code">
				1042	<pre class="language-markup codepen-button-enabled"><code id="button/icon.html"><!-- Icon button -->
				1043	<button class="mdl-button mdl-js-button mdl-button--icon">
				1044	<i class="material-icons">mood</i>
				1045	</button>
				1046	</code><div class="codepen-extra-css"><style></style></div><code id="button/icon-colored.html"><!-- Colored icon button -->
				1047	<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
				1048	<i class="material-icons">mood</i>
				1049	</button>
				1050	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1051	body {
				1052	padding: 20px;
				1053	background: #fafafa;
				1054	position: relative;
				1055	}
				1056	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1057	</div>
				1058	</div>
				1059
				1060
				1061
				1062
				1063	<div class="snippet-group">
				1064
				1065	<div class="snippet-header">
				1066	<div class="snippet-demos">
				1067	<div class="snippet-demo-padding"></div>
				1068
				1069
				1070
				1071
				1072	<div class="snippet-demo">
				1073	<div class="snippet-demo-container demo-button demo-button__fab-mini">
				1074	<!-- Mini FAB button -->
				1075	<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
				1076	<i class="material-icons">add</i>
				1077	</button>
				1078
				1079	</div>
				1080	</div>
				1081
				1082
				1083
				1084	<div class="snippet-demo">
				1085	<div class="snippet-demo-container demo-button demo-button__fab-mini-colored">
				1086	<!-- Colored mini FAB button -->
				1087	<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
				1088	<i class="material-icons">add</i>
				1089	</button>
				1090
				1091	</div>
				1092	</div>
				1093	<div class="snippet-demo-padding"></div>
				1094	</div>
				1095	<div class="snippet-captions">
				1096	<div class="snippet-caption-padding"></div>
				1097
				1098	<div class="snippet-caption">
				1099	Mini FAB
				1100	</div>
				1101	<div class="snippet-caption">
				1102	Colored
				1103	</div>
				1104	<div class="snippet-caption-padding"></div>
				1105	</div>
				1106	</div>
				1107	<div class="snippet-code">
				1108	<pre class="language-markup codepen-button-enabled"><code id="button/fab-mini.html"><!-- Mini FAB button -->
				1109	<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
				1110	<i class="material-icons">add</i>
				1111	</button>
				1112	</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-mini-colored.html"><!-- Colored mini FAB button -->
				1113	<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
				1114	<i class="material-icons">add</i>
				1115	</button>
				1116	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1117	body {
				1118	padding: 20px;
				1119	background: #fafafa;
				1120	position: relative;
				1121	}
				1122	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1123	</div>
				1124	</div>
				1125
				1126
				1127	<!-- Adding the demo page -->
				1128
				1129	<style>
				1130
				1131	</style>
				1132
				1133	<script>
				1134
				1135	</script>
				1136
				1137
				1138	<div class="docs-text-styling docs-readme">
				1139
				1140
				1141
				1142
				1143	<h2 id="introduction">Introduction</h2>
				1144	<p>The Material Design Lite (MDL) <strong>button</strong> component is an enhanced version of the standard HTML <code><button></code> element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.</p>
				1145	<p>Buttons are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the button component's <a href="http://www.google.com/design/spec/components/buttons.html">Material Design specifications page</a> for details.</p>
				1146	<p>The available button display types are <em>flat</em> (default), <em>raised</em>, <em>fab</em>, <em>mini-fab</em>, and <em>icon</em>; any of these types may be plain (light gray) or <em>colored</em>, and may be initially or programmatically <em>disabled</em>. The <em>fab</em>, <em>mini-fab</em>, and <em>icon</em> button types typically use a small image as their caption rather than text.</p>
				1147	<h3 id="to-include-an-mdl-button-component-">To include an MDL <strong>button</strong> component:</h3>
				1148	<p> 1. Code a <code><button></code> element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate.</p>
				1149	<pre><code class="language-markup"><button>Save</button>
				1150	</code></pre>
				1151	<p> 2. Add one or more MDL classes, separated by spaces, to the button using the <code>class</code> attribute.</p>
				1152	<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
				1153	</code></pre>
				1154	<p>The button component is ready for use.</p>
				1155	<h4 id="examples">Examples</h4>
				1156	<p>A button with the "raised" effect.</p>
				1157	<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
				1158	</code></pre>
				1159	<p>A button with the "fab" effect.</p>
				1160	<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--fab">OK</button>
				1161	</code></pre>
				1162	<p>A button with the "icon" and "colored" effects.</p>
				1163	<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>
				1164	</code></pre>
				1165	<h2 id="configuration-options">Configuration options</h2>
				1166	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects.</p>
				1167	<table>
				1168	<thead>
				1169	<tr>
				1170	<th>MDL class</th>
				1171	<th>Effect</th>
				1172	<th>Remarks</th>
				1173	</tr>
				1174	</thead>
				1175	<tbody>
				1176	<tr>
				1177	<td><code>mdl-button</code></td>
				1178	<td>Defines button as an MDL component</td>
				1179	<td>Required</td>
				1180	</tr>
				1181	<tr>
				1182	<td><code>mdl-js-button</code></td>
				1183	<td>Assigns basic MDL behavior to button</td>
				1184	<td>Required</td>
				1185	</tr>
				1186	<tr>
				1187	<td>(none)</td>
				1188	<td>Applies <em>flat</em> display effect to button (default)</td>
				1189	<td></td>
				1190	</tr>
				1191	<tr>
				1192	<td><code>mdl-button--raised</code></td>
				1193	<td>Applies <em>raised</em> display effect</td>
				1194	<td>Mutually exclusive with <em>fab</em>, <em>mini-fab</em>, and <em>icon</em></td>
				1195	</tr>
				1196	<tr>
				1197	<td><code>mdl-button--fab</code></td>
				1198	<td>Applies <em>fab</em> (circular) display effect</td>
				1199	<td>Mutually exclusive with <em>raised</em>, <em>mini-fab</em>, and <em>icon</em></td>
				1200	</tr>
				1201	<tr>
				1202	<td><code>mdl-button--mini-fab</code></td>
				1203	<td>Applies <em>mini-fab</em> (small fab circular) display effect</td>
				1204	<td>Mutually exclusive with <em>raised</em>, <em>fab</em>, and <em>icon</em></td>
				1205	</tr>
				1206	<tr>
				1207	<td><code>mdl-button--icon</code></td>
				1208	<td>Applies <em>icon</em> (small plain circular) display effect</td>
				1209	<td>Mutually exclusive with <em>raised</em>, <em>fab</em>, and <em>mini-fab</em></td>
				1210	</tr>
				1211	<tr>
				1212	<td><code>mdl-button--colored</code></td>
				1213	<td>Applies <em>colored</em> display effect (primary or accent color, depending on the type of button)</td>
				1214	<td>Colors are defined in <code>material.min.css</code></td>
				1215	</tr>
				1216	<tr>
				1217	<td><code>mdl-button--primary</code></td>
				1218	<td>Applies <em>primary</em> color display effect</td>
				1219	<td>Colors are defined in <code>material.min.css</code></td>
				1220	</tr>
				1221	<tr>
				1222	<td><code>mdl-button--accent</code></td>
				1223	<td>Applies <em>accent</em> color display effect</td>
				1224	<td>Colors are defined in <code>material.min.css</code></td>
				1225	</tr>
				1226	<tr>
				1227	<td><code>mdl-js-ripple-effect</code></td>
				1228	<td>Applies <em>ripple</em> click effect</td>
				1229	<td>May be used in combination with any other classes</td>
				1230	</tr>
				1231	</tbody>
				1232	</table>
				1233	<blockquote>
				1234	<p><strong>Note:</strong> Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button></code>. Alternatively, the <code>mdl-button--disabled</code> class can be used to achieve the same style but it does not disable the functionality of the element.
				1235	This attribute may be added or removed programmatically via scripting.</p>
				1236	</blockquote>
				1237
				1238
				1239
				1240	</div>
				1241
				1242	</div>
				1243	</section>
				1244	<section id="cards-section" class="mdl-components__page mdl-grid">
				1245	<div class="mdl-cell mdl-cell--12-col">
				1246	<div class="docs-text-styling component-title">
				1247	<h3>Cards</h3>
				1248	<p>Self-contained pieces of paper with data.</p>
				1249	</div>
				1250
				1251
				1252
				1253
				1254
				1255
				1256	<!-- Add warning, if the component has one -->
				1257
				1258	<!-- Generating snippets -->
				1259
				1260
				1261
				1262	<div class="snippet-group">
				1263
				1264	<div class="snippet-header">
				1265	<div class="snippet-demos">
				1266	<div class="snippet-demo-padding"></div>
				1267
				1268
				1269
				1270
				1271	<div class="snippet-demo">
				1272	<div class="snippet-demo-container demo-card demo-card__wide">
				1273	<!-- Wide card with share menu button -->
				1274	<style>
				1275	.demo-card-wide.mdl-card {
				1276	width: 512px;
				1277	}
				1278	.demo-card-wide > .mdl-card__title {
				1279	color: #fff;
				1280	height: 176px;
				1281	background: url('../assets/demos/welcome_card.jpg') center / cover;
				1282	}
				1283	.demo-card-wide > .mdl-card__menu {
				1284	color: #fff;
				1285	}
				1286	</style>
				1287
				1288	<div class="demo-card-wide mdl-card mdl-shadow--2dp">
				1289	<div class="mdl-card__title">
				1290	<h2 class="mdl-card__title-text">Welcome</h2>
				1291	</div>
				1292	<div class="mdl-card__supporting-text">
				1293	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				1294	Mauris sagittis pellentesque lacus eleifend lacinia...
				1295	</div>
				1296	<div class="mdl-card__actions mdl-card--border">
				1297	<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
				1298	Get Started
				1299	</a>
				1300	</div>
				1301	<div class="mdl-card__menu">
				1302	<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
				1303	<i class="material-icons">share</i>
				1304	</button>
				1305	</div>
				1306	</div>
				1307
				1308	</div>
				1309	</div>
				1310	<div class="snippet-demo-padding"></div>
				1311	</div>
				1312	<div class="snippet-captions">
				1313	<div class="snippet-caption-padding"></div>
				1314
				1315	<div class="snippet-caption">
				1316	Wide
				1317	</div>
				1318	<div class="snippet-caption-padding"></div>
				1319	</div>
				1320	</div>
				1321	<div class="snippet-code">
				1322	<pre class="language-markup codepen-button-enabled"><code id="card/wide.html"><!-- Wide card with share menu button -->
				1323	<style>
				1324	.demo-card-wide.mdl-card {
				1325	width: 512px;
				1326	}
				1327	.demo-card-wide > .mdl-card__title {
				1328	color: #fff;
				1329	height: 176px;
				1330	background: url('../assets/demos/welcome_card.jpg') center / cover;
				1331	}
				1332	.demo-card-wide > .mdl-card__menu {
				1333	color: #fff;
				1334	}
				1335	</style>
				1336
				1337	<div class="demo-card-wide mdl-card mdl-shadow--2dp">
				1338	<div class="mdl-card__title">
				1339	<h2 class="mdl-card__title-text">Welcome</h2>
				1340	</div>
				1341	<div class="mdl-card__supporting-text">
				1342	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				1343	Mauris sagittis pellentesque lacus eleifend lacinia...
				1344	</div>
				1345	<div class="mdl-card__actions mdl-card--border">
				1346	<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
				1347	Get Started
				1348	</a>
				1349	</div>
				1350	<div class="mdl-card__menu">
				1351	<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
				1352	<i class="material-icons">share</i>
				1353	</button>
				1354	</div>
				1355	</div>
				1356	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1357	body {
				1358	padding: 20px;
				1359	background: #fafafa;
				1360	position: relative;
				1361	}
				1362	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1363	</div>
				1364	</div>
				1365
				1366
				1367
				1368
				1369	<div class="snippet-group">
				1370
				1371	<div class="snippet-header">
				1372	<div class="snippet-demos">
				1373	<div class="snippet-demo-padding"></div>
				1374
				1375
				1376
				1377
				1378	<div class="snippet-demo">
				1379	<div class="snippet-demo-container demo-card demo-card__square">
				1380	<!-- Square card -->
				1381	<style>
				1382	.demo-card-square.mdl-card {
				1383	width: 320px;
				1384	height: 320px;
				1385	}
				1386	.demo-card-square > .mdl-card__title {
				1387	color: #fff;
				1388	background:
				1389	url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
				1390	}
				1391	</style>
				1392
				1393	<div class="demo-card-square mdl-card mdl-shadow--2dp">
				1394	<div class="mdl-card__title mdl-card--expand">
				1395	<h2 class="mdl-card__title-text">Update</h2>
				1396	</div>
				1397	<div class="mdl-card__supporting-text">
				1398	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				1399	Aenan convallis.
				1400	</div>
				1401	<div class="mdl-card__actions mdl-card--border">
				1402	<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
				1403	View Updates
				1404	</a>
				1405	</div>
				1406	</div>
				1407
				1408	</div>
				1409	</div>
				1410	<div class="snippet-demo-padding"></div>
				1411	</div>
				1412	<div class="snippet-captions">
				1413	<div class="snippet-caption-padding"></div>
				1414
				1415	<div class="snippet-caption">
				1416	Square
				1417	</div>
				1418	<div class="snippet-caption-padding"></div>
				1419	</div>
				1420	</div>
				1421	<div class="snippet-code">
				1422	<pre class="language-markup codepen-button-enabled"><code id="card/square.html"><!-- Square card -->
				1423	<style>
				1424	.demo-card-square.mdl-card {
				1425	width: 320px;
				1426	height: 320px;
				1427	}
				1428	.demo-card-square > .mdl-card__title {
				1429	color: #fff;
				1430	background:
				1431	url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
				1432	}
				1433	</style>
				1434
				1435	<div class="demo-card-square mdl-card mdl-shadow--2dp">
				1436	<div class="mdl-card__title mdl-card--expand">
				1437	<h2 class="mdl-card__title-text">Update</h2>
				1438	</div>
				1439	<div class="mdl-card__supporting-text">
				1440	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				1441	Aenan convallis.
				1442	</div>
				1443	<div class="mdl-card__actions mdl-card--border">
				1444	<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
				1445	View Updates
				1446	</a>
				1447	</div>
				1448	</div>
				1449	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1450	body {
				1451	padding: 20px;
				1452	background: #fafafa;
				1453	position: relative;
				1454	}
				1455	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1456	</div>
				1457	</div>
				1458
				1459
				1460
				1461
				1462	<div class="snippet-group">
				1463
				1464	<div class="snippet-header">
				1465	<div class="snippet-demos">
				1466	<div class="snippet-demo-padding"></div>
				1467
				1468
				1469
				1470
				1471	<div class="snippet-demo">
				1472	<div class="snippet-demo-container demo-card demo-card__image">
				1473	<!-- Image card -->
				1474	<style>
				1475	.demo-card-image.mdl-card {
				1476	width: 256px;
				1477	height: 256px;
				1478	background: url('../assets/demos/image_card.jpg') center / cover;
				1479	}
				1480	.demo-card-image > .mdl-card__actions {
				1481	height: 52px;
				1482	padding: 16px;
				1483	background: rgba(0, 0, 0, 0.2);
				1484	}
				1485	.demo-card-image__filename {
				1486	color: #fff;
				1487	font-size: 14px;
				1488	font-weight: 500;
				1489	}
				1490	</style>
				1491
				1492	<div class="demo-card-image mdl-card mdl-shadow--2dp">
				1493	<div class="mdl-card__title mdl-card--expand"></div>
				1494	<div class="mdl-card__actions">
				1495	<span class="demo-card-image__filename">Image.jpg</span>
				1496	</div>
				1497	</div>
				1498
				1499	</div>
				1500	</div>
				1501
				1502
				1503
				1504	<div class="snippet-demo">
				1505	<div class="snippet-demo-container demo-card demo-card__event">
				1506	<!-- Event card -->
				1507	<style>
				1508	.demo-card-event.mdl-card {
				1509	width: 256px;
				1510	height: 256px;
				1511	background: #3E4EB8;
				1512	}
				1513	.demo-card-event > .mdl-card__actions {
				1514	border-color: rgba(255, 255, 255, 0.2);
				1515	}
				1516	.demo-card-event > .mdl-card__title {
				1517	align-items: flex-start;
				1518	}
				1519	.demo-card-event > .mdl-card__title > h4 {
				1520	margin-top: 0;
				1521	}
				1522	.demo-card-event > .mdl-card__actions {
				1523	display: flex;
				1524	box-sizing:border-box;
				1525	align-items: center;
				1526	}
				1527	.demo-card-event > .mdl-card__actions > .material-icons {
				1528	padding-right: 10px;
				1529	}
				1530	.demo-card-event > .mdl-card__title,
				1531	.demo-card-event > .mdl-card__actions,
				1532	.demo-card-event > .mdl-card__actions > .mdl-button {
				1533	color: #fff;
				1534	}
				1535	</style>
				1536
				1537	<div class="demo-card-event mdl-card mdl-shadow--2dp">
				1538	<div class="mdl-card__title mdl-card--expand">
				1539	<h4>
				1540	Featured event:<br>
				1541	May 24, 2016<br>
				1542	7-11pm
				1543	</h4>
				1544	</div>
				1545	<div class="mdl-card__actions mdl-card--border">
				1546	<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
				1547	Add to Calendar
				1548	</a>
				1549	<div class="mdl-layout-spacer"></div>
				1550	<i class="material-icons">event</i>
				1551	</div>
				1552	</div>
				1553
				1554	</div>
				1555	</div>
				1556	<div class="snippet-demo-padding"></div>
				1557	</div>
				1558	<div class="snippet-captions">
				1559	<div class="snippet-caption-padding"></div>
				1560
				1561	<div class="snippet-caption">
				1562	Image
				1563	</div>
				1564	<div class="snippet-caption">
				1565	Event
				1566	</div>
				1567	<div class="snippet-caption-padding"></div>
				1568	</div>
				1569	</div>
				1570	<div class="snippet-code">
				1571	<pre class="language-markup codepen-button-enabled"><code id="card/image.html"><!-- Image card -->
				1572	<style>
				1573	.demo-card-image.mdl-card {
				1574	width: 256px;
				1575	height: 256px;
				1576	background: url('../assets/demos/image_card.jpg') center / cover;
				1577	}
				1578	.demo-card-image > .mdl-card__actions {
				1579	height: 52px;
				1580	padding: 16px;
				1581	background: rgba(0, 0, 0, 0.2);
				1582	}
				1583	.demo-card-image__filename {
				1584	color: #fff;
				1585	font-size: 14px;
				1586	font-weight: 500;
				1587	}
				1588	</style>
				1589
				1590	<div class="demo-card-image mdl-card mdl-shadow--2dp">
				1591	<div class="mdl-card__title mdl-card--expand"></div>
				1592	<div class="mdl-card__actions">
				1593	<span class="demo-card-image__filename">Image.jpg</span>
				1594	</div>
				1595	</div>
				1596	</code><div class="codepen-extra-css"><style></style></div><code id="card/event.html"><!-- Event card -->
				1597	<style>
				1598	.demo-card-event.mdl-card {
				1599	width: 256px;
				1600	height: 256px;
				1601	background: #3E4EB8;
				1602	}
				1603	.demo-card-event > .mdl-card__actions {
				1604	border-color: rgba(255, 255, 255, 0.2);
				1605	}
				1606	.demo-card-event > .mdl-card__title {
				1607	align-items: flex-start;
				1608	}
				1609	.demo-card-event > .mdl-card__title > h4 {
				1610	margin-top: 0;
				1611	}
				1612	.demo-card-event > .mdl-card__actions {
				1613	display: flex;
				1614	box-sizing:border-box;
				1615	align-items: center;
				1616	}
				1617	.demo-card-event > .mdl-card__actions > .material-icons {
				1618	padding-right: 10px;
				1619	}
				1620	.demo-card-event > .mdl-card__title,
				1621	.demo-card-event > .mdl-card__actions,
				1622	.demo-card-event > .mdl-card__actions > .mdl-button {
				1623	color: #fff;
				1624	}
				1625	</style>
				1626
				1627	<div class="demo-card-event mdl-card mdl-shadow--2dp">
				1628	<div class="mdl-card__title mdl-card--expand">
				1629	<h4>
				1630	Featured event:<br>
				1631	May 24, 2016<br>
				1632	7-11pm
				1633	</h4>
				1634	</div>
				1635	<div class="mdl-card__actions mdl-card--border">
				1636	<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
				1637	Add to Calendar
				1638	</a>
				1639	<div class="mdl-layout-spacer"></div>
				1640	<i class="material-icons">event</i>
				1641	</div>
				1642	</div>
				1643	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1644	body {
				1645	padding: 20px;
				1646	background: #fafafa;
				1647	position: relative;
				1648	}
				1649	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1650	</div>
				1651	</div>
				1652
				1653
				1654	<!-- Adding the demo page -->
				1655
				1656	<style>
				1657
				1658	</style>
				1659
				1660	<script>
				1661
				1662	</script>
				1663
				1664
				1665	<div class="docs-text-styling docs-readme">
				1666
				1667
				1668
				1669
				1670	<h2 id="introduction">Introduction</h2>
				1671	<p>The Material Design Lite (MDL) <strong>card</strong> component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject.</p>
				1672	<p>Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.</p>
				1673	<p>Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's <a href="http://www.google.com/design/spec/components/cards.html">Material Design specifications page</a> for details.</p>
				1674	<h3 id="to-include-an-mdl-card-component-">To include an MDL <strong>card</strong> component:</h3>
				1675	<p> 1. Code a <code><div></code> element; this is the "outer" container, intended to hold all of the card's content.</p>
				1676	<pre><code class="language-markup"><div>
				1677	</div>
				1678	</code></pre>
				1679	<p> 2. Inside the div, code one or more "inner" divs, one for each desired content block. A card containing a title, an image, some text, and an action bar would contain four "inner" divs, all siblings.</p>
				1680	<pre><code class="language-markup"><div>
				1681	<div>
				1682	...
				1683	</div>
				1684	<div>
				1685	...
				1686	</div>
				1687	<div>
				1688	...
				1689	</div>
				1690	<div>
				1691	...
				1692	</div>
				1693	</div>
				1694	</code></pre>
				1695	<p> 3. Add one or more MDL classes, separated by spaces, to the "outer" div and the "inner" divs (depending on their intended use) using the <code>class</code> attribute.</p>
				1696	<pre><code class="language-markup"><div class="mdl-card">
				1697	<div class="mdl-card__title">
				1698	...
				1699	</div>
				1700	<div class="mdl-card__media">
				1701	...
				1702	</div>
				1703	<div class="mdl-card__supporting-text">
				1704	...
				1705	</div>
				1706	<div class="mdl-card__actions">
				1707	...
				1708	</div>
				1709	</div>
				1710	</code></pre>
				1711	<p> 4. Add content to each "inner" div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.</p>
				1712	<pre><code class="language-markup"><div class="mdl-card">
				1713	<div class="mdl-card__title">
				1714	<h2 class="mdl-card__title-text">title Text Goes Here</h2>
				1715	</div>
				1716	<div class="mdl-card__media">
				1717	<img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
				1718	</div>
				1719	<div class="mdl-card__supporting-text">
				1720	This text might describe the photo and provide further information, such as where and
				1721	when it was taken.
				1722	</div>
				1723	<div class="mdl-card__actions">
				1724	<a href="(URL or function)">Related Action</a>
				1725	</div>
				1726	</div>
				1727	</code></pre>
				1728	<p>The card component is ready for use.</p>
				1729	<h4 id="examples">Examples</h4>
				1730	<p>A card (no shadow) with a title, image, text, and action.</p>
				1731	<pre><code class="language-markup"><div class="mdl-card">
				1732	<div class="mdl-card__title">
				1733	<h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
				1734	</div>
				1735	<div class="mdl-card__media">
				1736	<img src="skytower.jpg" width="173" height="157" border="0" alt=""
				1737	style="padding:10px;">
				1738	</div>
				1739	<div class="mdl-card__supporting-text">
				1740	The Sky Tower is an observation and telecommunications tower located in Auckland,
				1741	New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
				1742	in the Southern Hemisphere.
				1743	</div>
				1744	<div class="mdl-card__actions">
				1745	<a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
				1746	</div>
				1747	</div>
				1748	</code></pre>
				1749	<p>Card (level-3 shadow) with an image, caption, and text:</p>
				1750	<pre><code class="language-markup"><div class="mdl-card mdl-shadow--4dp">
				1751	<div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0"
				1752	alt="" style="padding:10px;">
				1753	</div>
				1754	<div class="mdl-card__supporting-text">
				1755	Auckland Sky Tower, taken March 24th, 2014
				1756	</div>
				1757	<div class="mdl-card__supporting-text">
				1758	The Sky Tower is an observation and telecommunications tower located in Auckland,
				1759	New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
				1760	in the Southern Hemisphere.
				1761	</div>
				1762	</div>
				1763	</code></pre>
				1764	<h2 id="configuration-options">Configuration options</h2>
				1765	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the card. The table below lists the available classes and their effects.</p>
				1766	<table>
				1767	<thead>
				1768	<tr>
				1769	<th>MDL class</th>
				1770	<th>Effect</th>
				1771	<th>Remarks</th>
				1772	</tr>
				1773	</thead>
				1774	<tbody>
				1775	<tr>
				1776	<td><code>mdl-card</code></td>
				1777	<td>Defines div element as an MDL card container</td>
				1778	<td>Required on "outer" div</td>
				1779	</tr>
				1780	<tr>
				1781	<td><code>mdl-card--border</code></td>
				1782	<td>Adds a border to the card section that it's applied to</td>
				1783	<td>Used on the "inner" divs</td>
				1784	</tr>
				1785	<tr>
				1786	<td><code>mdl-shadow--2dp through mdl-shadow--16dp</code></td>
				1787	<td>Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card</td>
				1788	<td>Optional, goes on "outer" div; if omitted, no shadow is present</td>
				1789	</tr>
				1790	<tr>
				1791	<td><code>mdl-card__title</code></td>
				1792	<td>Defines div as a card title container</td>
				1793	<td>Required on "inner" title div</td>
				1794	</tr>
				1795	<tr>
				1796	<td><code>mdl-card__title-text</code></td>
				1797	<td>Assigns appropriate text characteristics to card title</td>
				1798	<td>Required on head tag (H1 - H6) inside title div</td>
				1799	</tr>
				1800	<tr>
				1801	<td><code>mdl-card__subtitle-text</code></td>
				1802	<td>Assigns text characteristics to a card subtitle</td>
				1803	<td>Optional. Should be a child of the title element.</td>
				1804	</tr>
				1805	<tr>
				1806	<td><code>mdl-card__media</code></td>
				1807	<td>Defines div as a card media container</td>
				1808	<td>Required on "inner" media div</td>
				1809	</tr>
				1810	<tr>
				1811	<td><code>mdl-card__supporting-text</code></td>
				1812	<td>Defines div as a card body text container and assigns appropriate text characteristics to body text</td>
				1813	<td>Required on "inner" body text div; text goes directly inside the div with no intervening containers</td>
				1814	</tr>
				1815	<tr>
				1816	<td><code>mdl-card__actions</code></td>
				1817	<td>Defines div as a card actions container and assigns appropriate text characteristics to actions text</td>
				1818	<td>Required on "inner" actions div; content goes directly inside the div with no intervening containers</td>
				1819	</tr>
				1820	<tr>
				1821	<td><code>mdl-card__menu</code></td>
				1822	<td>Defines element as top right menu button</td>
				1823	<td>Optional. Should be a child of the <code>mdl-card</code> element.</td>
				1824	</tr>
				1825	</tbody>
				1826	</table>
				1827
				1828
				1829
				1830	</div>
				1831
				1832	</div>
				1833	</section>
				1834	<section id="chips-section" class="mdl-components__page mdl-grid">
				1835	<div class="mdl-cell mdl-cell--12-col">
				1836	<div class="docs-text-styling component-title">
				1837	<h3>Chips</h3>
				1838	<p>Represents complex entities in small blocks.</p>
				1839	</div>
				1840
				1841
				1842
				1843
				1844
				1845
				1846	<!-- Add warning, if the component has one -->
				1847
				1848	<!-- Generating snippets -->
				1849
				1850
				1851
				1852	<div class="snippet-group">
				1853
				1854	<div class="snippet-header">
				1855	<div class="snippet-demos">
				1856	<div class="snippet-demo-padding"></div>
				1857
				1858
				1859
				1860
				1861	<div class="snippet-demo">
				1862	<div class="snippet-demo-container demo-chip demo-chip__basic">
				1863	<!-- Basic Chip -->
				1864	<span class="mdl-chip">
				1865	<span class="mdl-chip__text">Basic Chip</span>
				1866	</span>
				1867	</div>
				1868	</div>
				1869
				1870
				1871
				1872	<div class="snippet-demo">
				1873	<div class="snippet-demo-container demo-chip demo-chip__deletable">
				1874	<!-- Deletable Chip -->
				1875	<span class="mdl-chip mdl-chip--deletable">
				1876	<span class="mdl-chip__text">Deletable Chip</span>
				1877	<button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
				1878	</span>
				1879	</div>
				1880	</div>
				1881
				1882
				1883
				1884	<div class="snippet-demo">
				1885	<div class="snippet-demo-container demo-chip demo-chip__button">
				1886	<!-- Button Chip -->
				1887	<button type="button" class="mdl-chip">
				1888	<span class="mdl-chip__text">Button Chip</span>
				1889	</button>
				1890	</div>
				1891	</div>
				1892	<div class="snippet-demo-padding"></div>
				1893	</div>
				1894	<div class="snippet-captions">
				1895	<div class="snippet-caption-padding"></div>
				1896
				1897	<div class="snippet-caption">
				1898	Basic Chip
				1899	</div>
				1900	<div class="snippet-caption">
				1901	Deletable Chip
				1902	</div>
				1903	<div class="snippet-caption">
				1904	Button Chip
				1905	</div>
				1906	<div class="snippet-caption-padding"></div>
				1907	</div>
				1908	</div>
				1909	<div class="snippet-code">
				1910	<pre class="language-markup codepen-button-enabled"><code id="chip/basic.html"><!-- Basic Chip -->
				1911	<span class="mdl-chip">
				1912	<span class="mdl-chip__text">Basic Chip</span>
				1913	</span></code><div class="codepen-extra-css"><style></style></div><code id="chip/deletable.html"><!-- Deletable Chip -->
				1914	<span class="mdl-chip mdl-chip--deletable">
				1915	<span class="mdl-chip__text">Deletable Chip</span>
				1916	<button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
				1917	</span></code><div class="codepen-extra-css"><style></style></div><code id="chip/button.html"><!-- Button Chip -->
				1918	<button type="button" class="mdl-chip">
				1919	<span class="mdl-chip__text">Button Chip</span>
				1920	</button></code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1921	body {
				1922	padding: 20px;
				1923	background: #fafafa;
				1924	position: relative;
				1925	}
				1926	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1927	</div>
				1928	</div>
				1929
				1930
				1931
				1932
				1933	<div class="snippet-group">
				1934
				1935	<div class="snippet-header">
				1936	<div class="snippet-demos">
				1937	<div class="snippet-demo-padding"></div>
				1938
				1939
				1940
				1941
				1942	<div class="snippet-demo">
				1943	<div class="snippet-demo-container demo-chip demo-chip__contact">
				1944	<!-- Contact Chip -->
				1945	<span class="mdl-chip mdl-chip--contact">
				1946	<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
				1947	<span class="mdl-chip__text">Contact Chip</span>
				1948	</span>
				1949
				1950	</div>
				1951	</div>
				1952
				1953
				1954
				1955	<div class="snippet-demo">
				1956	<div class="snippet-demo-container demo-chip demo-chip__deletable-contact">
				1957	<!-- Deletable Contact Chip -->
				1958	<span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
				1959	<img class="mdl-chip__contact" src="/templates/dashboard/images/user.jpg"></img>
				1960	<span class="mdl-chip__text">Deletable Contact Chip</span>
				1961	<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
				1962	</span>
				1963	</div>
				1964	</div>
				1965	<div class="snippet-demo-padding"></div>
				1966	</div>
				1967	<div class="snippet-captions">
				1968	<div class="snippet-caption-padding"></div>
				1969
				1970	<div class="snippet-caption">
				1971	Contact Chip
				1972	</div>
				1973	<div class="snippet-caption">
				1974	Deletable Contact Chip
				1975	</div>
				1976	<div class="snippet-caption-padding"></div>
				1977	</div>
				1978	</div>
				1979	<div class="snippet-code">
				1980	<pre class="language-markup codepen-button-enabled"><code id="chip/contact.html"><!-- Contact Chip -->
				1981	<span class="mdl-chip mdl-chip--contact">
				1982	<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
				1983	<span class="mdl-chip__text">Contact Chip</span>
				1984	</span>
				1985	</code><div class="codepen-extra-css"><style></style></div><code id="chip/deletable-contact.html"><!-- Deletable Contact Chip -->
				1986	<span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
				1987	<img class="mdl-chip__contact" src="/templates/dashboard/images/user.jpg"></img>
				1988	<span class="mdl-chip__text">Deletable Contact Chip</span>
				1989	<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
				1990	</span></code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				1991	body {
				1992	padding: 20px;
				1993	background: #fafafa;
				1994	position: relative;
				1995	}
				1996	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				1997	</div>
				1998	</div>
				1999
				2000
				2001	<!-- Adding the demo page -->
				2002
				2003	<style>
				2004
				2005	</style>
				2006
				2007	<script>
				2008
				2009	</script>
				2010
				2011
				2012	<div class="docs-text-styling docs-readme">
				2013
				2014
				2015
				2016
				2017	<h2 id="introduction">Introduction</h2>
				2018	<p>The Material Design Lite (MDL) <strong>chip</strong> component is a small, interactive element.
				2019	Chips are commonly used for contacts, text, rules, icons, and photos.</p>
				2020	<h2 id="to-include-an-mdl-chip-component-">TO INCLUDE AN MDL CHIP COMPONENT:</h2>
				2021	<p> 1. Create a container element for the chip; typically <code><span></code> and <code><div></code> are used, but any container element should work equally well. If you need interactivity, use a <code><button></code>, or add the <code>tabindex</code> attribute to your container.</p>
				2022	<pre><code class="language-markup"><span>
				2023	</span>
				2024	</code></pre>
				2025	<p> 2. Add in the text wrapper and the MDL classes.</p>
				2026	<pre><code class="language-markup"><span class="mdl-chip">
				2027	<span class="mdl-chip__text">Chip Text</span>
				2028	</span>
				2029	</code></pre>
				2030	<p> 3. For deletable chips, add in the delete icon. This can be an <code><a></code>, <code><button></code> or non-interactive tags like <code><span></code>.</p>
				2031	<pre><code class="language-markup"><span class="mdl-chip">
				2032	<span class="mdl-chip__text">Chip Text</span>
				2033	<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
				2034	</span>
				2035	</code></pre>
				2036	<p> 4. Contact chips need to have the <code>mdl-chip--contact</code> class added to the container, along with another container for the contact icon. The icon container for photos is typically an <code><img></code> tag, but other types of content can be used with a little extra supporting css.</p>
				2037	<pre><code class="language-markup"><span class="mdl-chip">
				2038	<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
				2039	<span class="mdl-chip__text">Chip Text</span>
				2040	<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
				2041	</span>
				2042	</code></pre>
				2043	<h2 id="examples">Examples</h2>
				2044	<p>A button based contact chip whose contact image is a <code><span></code> with a <code>background-image</code>.</p>
				2045	<pre><code class="language-markup"><style>
				2046	.demo-chip .mdl-chip__contact {
				2047	background-image: url("./path/to/image");
				2048	background-size: cover;
				2049	}
				2050	</style>
				2051
				2052	<button class="mdl-chip demo-chip">
				2053	<span class="mdl-chip__contact">&nbsp;</span>
				2054	<span class="mdl-chip__text">Chip Text</span>
				2055	<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
				2056	</button>
				2057	</code></pre>
				2058	<h2 id="css-classes">CSS Classes</h2>
				2059	<table>
				2060	<thead>
				2061	<tr>
				2062	<th>MDL Class</th>
				2063	<th>Effect</th>
				2064	<th>Remarks</th>
				2065	</tr>
				2066	</thead>
				2067	<tbody>
				2068	<tr>
				2069	<td><code>mdl-chip</code></td>
				2070	<td>Defines element as an MDL chip container</td>
				2071	<td>Required on "outer" container</td>
				2072	</tr>
				2073	<tr>
				2074	<td><code>mdl-chip--contact</code></td>
				2075	<td>Defines an MDL chip as a contact style chip</td>
				2076	<td>Optional, goes on "outer" container</td>
				2077	</tr>
				2078	<tr>
				2079	<td><code>mdl-chip__text</code></td>
				2080	<td>Defines element as the chip's text</td>
				2081	<td>Required on "inner" text container</td>
				2082	</tr>
				2083	<tr>
				2084	<td><code>mdl-chip__action</code></td>
				2085	<td>Defines element as the chip's action</td>
				2086	<td>Required on "inner" action container, if present</td>
				2087	</tr>
				2088	<tr>
				2089	<td><code>mdl-chip__contact</code></td>
				2090	<td>Defines element as the chip's contact container</td>
				2091	<td>Required on "inner" contact container, if the <code>mdl-chip--contact</code> class is present on "outer" container</td>
				2092	</tr>
				2093	</tbody>
				2094	</table>
				2095
				2096
				2097
				2098	</div>
				2099
				2100	</div>
				2101	</section>
				2102	<section id="dialog-section" class="mdl-components__page mdl-grid">
				2103	<div class="mdl-cell mdl-cell--12-col">
				2104	<div class="docs-text-styling component-title">
				2105	<h3>Dialogs</h3>
				2106	<p>Modal windows for dedicated user input.</p>
				2107	</div>
				2108
				2109
				2110
				2111
				2112
				2113
				2114	<!-- Add warning, if the component has one -->
				2115
				2116	<div class="mdl-components__warning"><b>Note: </b>Dialogs use the HTML <dialog> element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own. There is no polyfill included with MDL.</div>
				2117
				2118	<!-- Generating snippets -->
				2119
				2120	<!-- Adding the demo page -->
				2121
				2122	<style>
				2123
				2124	</style>
				2125
				2126	<script>
				2127
				2128	</script>
				2129
				2130
				2131	<div class="docs-text-styling docs-readme">
				2132
				2133
				2134
				2135
				2136	<h2 id="introduction">Introduction</h2>
				2137	<p>The Material Design Lite (MDL) <strong>dialog</strong> component allows for verification of
				2138	user actions, simple data input, and alerts to provide extra information to users.</p>
				2139	<h2 id="basic-usage">Basic Usage</h2>
				2140	<p>To use the dialog component, you must be using a browser that supports the <a href="http://www.w3.org/TR/2013/CR-html5-20130806/interactive-elements.html#the-dialog-element">dialog element</a>.
				2141	Only Chrome and Opera have native support at the time of writing.
				2142	For other browsers you will need to include the <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog polyfill</a> or create your own.</p>
				2143	<p>Once you have dialog support create a dialog element.
				2144	The element when using the polyfill <strong>must</strong> be a child of the <code>body</code> element.
				2145	Within that container, add a content element with the class <code>mdl-dialog__content</code>.
				2146	Add you content, then create an action container with the class <code>mdl-dialog__actions</code>.
				2147	Finally for the markup, add your buttons within this container for triggering dialog functions.</p>
				2148	<p>Keep in mind, the order is automatically reversed for actions.
				2149	Material Design requires that the primary (confirmation) action be displayed last.
				2150	So, the first action you create will appear last on the action bar.
				2151	This allows for more natural coding and tab ordering while following the specification.</p>
				2152	<p>Remember to add the event handlers for your action items.
				2153	After your dialog markup is created, add the event listeners to the page to trigger the dialog to show.</p>
				2154	<p>For example:</p>
				2155	<pre><code class="language-javascript"> var button = document.querySelector('button');
				2156	var dialog = document.querySelector('dialog');
				2157	button.addEventListener('click', function() {
				2158	dialog.showModal();
				2159	/* Or dialog.show(); to show the dialog without a backdrop. */
				2160	});
				2161	</code></pre>
				2162	<h2 id="examples">Examples</h2>
				2163	<h3 id="simple-dialog">Simple Dialog</h3>
				2164	<p>See this example live in <a href="http://codepen.io/Garbee/full/EPoaMj/">codepen</a>.</p>
				2165	<pre><code class="language-markup"><body>
				2166	<button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
				2167	<dialog class="mdl-dialog">
				2168	<h4 class="mdl-dialog__title">Allow data collection?</h4>
				2169	<div class="mdl-dialog__content">
				2170	<p>
				2171	Allowing us to collect data will let us get you the information you want faster.
				2172	</p>
				2173	</div>
				2174	<div class="mdl-dialog__actions">
				2175	<button type="button" class="mdl-button">Agree</button>
				2176	<button type="button" class="mdl-button close">Disagree</button>
				2177	</div>
				2178	</dialog>
				2179	<script>
				2180	var dialog = document.querySelector('dialog');
				2181	var showDialogButton = document.querySelector('#show-dialog');
				2182	if (! dialog.showModal) {
				2183	dialogPolyfill.registerDialog(dialog);
				2184	}
				2185	showDialogButton.addEventListener('click', function() {
				2186	dialog.showModal();
				2187	});
				2188	dialog.querySelector('.close').addEventListener('click', function() {
				2189	dialog.close();
				2190	});
				2191	</script>
				2192	</body>
				2193	</code></pre>
				2194	<h3 id="dialog-with-full-width-actions">Dialog with full width actions</h3>
				2195	<p>See this example live in <a href="http://codepen.io/Garbee/full/JGMowG/">codepen</a>.</p>
				2196	<pre><code class="language-markup"><body>
				2197	<button type="button" class="mdl-button show-modal">Show Modal</button>
				2198	<dialog class="mdl-dialog">
				2199	<div class="mdl-dialog__content">
				2200	<p>
				2201	Allow this site to collect usage data to improve your experience?
				2202	</p>
				2203	</div>
				2204	<div class="mdl-dialog__actions mdl-dialog__actions--full-width">
				2205	<button type="button" class="mdl-button">Agree</button>
				2206	<button type="button" class="mdl-button close">Disagree</button>
				2207	</div>
				2208	</dialog>
				2209	<script>
				2210	var dialog = document.querySelector('dialog');
				2211	var showModalButton = document.querySelector('.show-modal');
				2212	if (! dialog.showModal) {
				2213	dialogPolyfill.registerDialog(dialog);
				2214	}
				2215	showModalButton.addEventListener('click', function() {
				2216	dialog.showModal();
				2217	});
				2218	dialog.querySelector('.close').addEventListener('click', function() {
				2219	dialog.close();
				2220	});
				2221	</script>
				2222	</body>
				2223	</code></pre>
				2224	<h2 id="css-classes">CSS Classes</h2>
				2225	<h3 id="blocks">Blocks</h3>
				2226	<table>
				2227	<thead>
				2228	<tr>
				2229	<th>MDL Class</th>
				2230	<th>Effect</th>
				2231	<th>Remarks</th>
				2232	</tr>
				2233	</thead>
				2234	<tbody>
				2235	<tr>
				2236	<td><code>mdl-dialog</code></td>
				2237	<td>Defines the container of the dialog component.</td>
				2238	<td>Required on dialog container.</td>
				2239	</tr>
				2240	</tbody>
				2241	</table>
				2242	<h3 id="elements">Elements</h3>
				2243	<table>
				2244	<thead>
				2245	<tr>
				2246	<th>MDL Class</th>
				2247	<th>Effect</th>
				2248	<th>Remarks</th>
				2249	</tr>
				2250	</thead>
				2251	<tbody>
				2252	<tr>
				2253	<td><code>mdl-dialog__title</code></td>
				2254	<td>Defines the title container in the dialog.</td>
				2255	<td>Optional on title container.</td>
				2256	</tr>
				2257	<tr>
				2258	<td><code>mdl-dialog__content</code></td>
				2259	<td>Defines the content container of the dialog.</td>
				2260	<td>Required on content container.</td>
				2261	</tr>
				2262	<tr>
				2263	<td><code>mdl-dialog__actions</code></td>
				2264	<td>Defines the actions container in the dialog.</td>
				2265	<td>Required on action container.</td>
				2266	</tr>
				2267	</tbody>
				2268	</table>
				2269	<h3 id="modifiers">Modifiers</h3>
				2270	<table>
				2271	<thead>
				2272	<tr>
				2273	<th>MDL Class</th>
				2274	<th>Effect</th>
				2275	<th>Remarks</th>
				2276	</tr>
				2277	</thead>
				2278	<tbody>
				2279	<tr>
				2280	<td><code>mdl-dialog__actions--full-width</code></td>
				2281	<td>Modifies the actions to each take the full width of the container. This makes each take their own line.</td>
				2282	<td>Optional on action container.</td>
				2283	</tr>
				2284	</tbody>
				2285	</table>
				2286
				2287
				2288
				2289	</div>
				2290
				2291	</div>
				2292	</section>
				2293	<section id="layout-section" class="mdl-components__page mdl-grid">
				2294	<div class="mdl-cell mdl-cell--12-col">
				2295	<div class="docs-text-styling component-title">
				2296	<h3>Layout</h3>
				2297	<p>Building blocks for constructing a page layout.</p>
				2298	</div>
				2299
				2300
				2301	<section class="docs-toc docs-text-styling">
				2302	<nav class="section-content">
				2303	<ul>
				2304
				2305	<li><a href="#layout-section/layout">Navigation layouts</a></li>
				2306
				2307	<li><a href="#layout-section/grid">Grid</a></li>
				2308
				2309	<li><a href="#layout-section/tabs">Tabs</a></li>
				2310
				2311	<li><a href="#layout-section/footer">Footer</a></li>
				2312
				2313	</ul>
				2314	</nav>
				2315	</section>
				2316
				2317
				2318
				2319
				2320
				2321	<span class="docs-text-styling">
				2322	<h1 class="mdl-components__classname" id="layout-section/layout">Navigation layouts</h1>
				2323	</span>
				2324
				2325	<!-- Add warning, if the component has one -->
				2326
				2327	<!-- Generating snippets -->
				2328
				2329
				2330
				2331	<div class="snippet-group is-full-width">
				2332
				2333	<div class="snippet-header">
				2334	<div class="snippet-demos">
				2335	<div class="snippet-demo-padding"></div>
				2336
				2337
				2338
				2339
				2340	<div class="snippet-demo">
				2341	<div class="snippet-demo-container demo-layout demo-layout__transparent">
				2342	<style>
				2343	.demo-layout.demo-layout__transparent {
				2344	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				2345	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				2346	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				2347	width: 100%;
				2348	position: relative;
				2349	height: 300px;
				2350	}
				2351	</style>
				2352
				2353	<!-- Uses a transparent header that draws on top of the layout's background -->
				2354	<style>
				2355	.demo-layout-transparent {
				2356	background: url('../assets/demos/transparent.jpg') center / cover;
				2357	}
				2358	.demo-layout-transparent .mdl-layout__header,
				2359	.demo-layout-transparent .mdl-layout__drawer-button {
				2360	/* This background is dark, so we set text to white. Use 87% black instead if
				2361	your background is light. */
				2362	color: white;
				2363	}
				2364	</style>
				2365
				2366	<div class="demo-layout-transparent mdl-layout mdl-js-layout">
				2367	<header class="mdl-layout__header mdl-layout__header--transparent">
				2368	<div class="mdl-layout__header-row">
				2369	<!-- Title -->
				2370	<span class="mdl-layout-title">Title</span>
				2371	<!-- Add spacer, to align navigation to the right -->
				2372	<div class="mdl-layout-spacer"></div>
				2373	<!-- Navigation -->
				2374	<nav class="mdl-navigation">
				2375	<a class="mdl-navigation__link" href="">Link</a>
				2376	<a class="mdl-navigation__link" href="">Link</a>
				2377	<a class="mdl-navigation__link" href="">Link</a>
				2378	<a class="mdl-navigation__link" href="">Link</a>
				2379	</nav>
				2380	</div>
				2381	</header>
				2382	<div class="mdl-layout__drawer">
				2383	<span class="mdl-layout-title">Title</span>
				2384	<nav class="mdl-navigation">
				2385	<a class="mdl-navigation__link" href="">Link</a>
				2386	<a class="mdl-navigation__link" href="">Link</a>
				2387	<a class="mdl-navigation__link" href="">Link</a>
				2388	<a class="mdl-navigation__link" href="">Link</a>
				2389	</nav>
				2390	</div>
				2391	<main class="mdl-layout__content">
				2392	</main>
				2393	</div>
				2394
				2395
				2396	</div>
				2397	</div>
				2398	<div class="snippet-demo-padding"></div>
				2399	</div>
				2400	<div class="snippet-captions">
				2401	<div class="snippet-caption-padding"></div>
				2402
				2403	<div class="snippet-caption">
				2404	Transparent header
				2405	</div>
				2406	<div class="snippet-caption-padding"></div>
				2407	</div>
				2408	</div>
				2409	<div class="snippet-code">
				2410	<pre class="language-markup codepen-button-enabled"><code id="layout/transparent.html"><!-- Uses a transparent header that draws on top of the layout's background -->
				2411	<style>
				2412	.demo-layout-transparent {
				2413	background: url('../assets/demos/transparent.jpg') center / cover;
				2414	}
				2415	.demo-layout-transparent .mdl-layout__header,
				2416	.demo-layout-transparent .mdl-layout__drawer-button {
				2417	/* This background is dark, so we set text to white. Use 87% black instead if
				2418	your background is light. */
				2419	color: white;
				2420	}
				2421	</style>
				2422
				2423	<div class="demo-layout-transparent mdl-layout mdl-js-layout">
				2424	<header class="mdl-layout__header mdl-layout__header--transparent">
				2425	<div class="mdl-layout__header-row">
				2426	<!-- Title -->
				2427	<span class="mdl-layout-title">Title</span>
				2428	<!-- Add spacer, to align navigation to the right -->
				2429	<div class="mdl-layout-spacer"></div>
				2430	<!-- Navigation -->
				2431	<nav class="mdl-navigation">
				2432	<a class="mdl-navigation__link" href="">Link</a>
				2433	<a class="mdl-navigation__link" href="">Link</a>
				2434	<a class="mdl-navigation__link" href="">Link</a>
				2435	<a class="mdl-navigation__link" href="">Link</a>
				2436	</nav>
				2437	</div>
				2438	</header>
				2439	<div class="mdl-layout__drawer">
				2440	<span class="mdl-layout-title">Title</span>
				2441	<nav class="mdl-navigation">
				2442	<a class="mdl-navigation__link" href="">Link</a>
				2443	<a class="mdl-navigation__link" href="">Link</a>
				2444	<a class="mdl-navigation__link" href="">Link</a>
				2445	<a class="mdl-navigation__link" href="">Link</a>
				2446	</nav>
				2447	</div>
				2448	<main class="mdl-layout__content">
				2449	</main>
				2450	</div>
				2451	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				2452	</div>
				2453	</div>
				2454
				2455
				2456
				2457
				2458	<div class="snippet-group is-full-width">
				2459
				2460	<div class="snippet-header">
				2461	<div class="snippet-demos">
				2462	<div class="snippet-demo-padding"></div>
				2463
				2464
				2465
				2466
				2467	<div class="snippet-demo">
				2468	<div class="snippet-demo-container demo-layout demo-layout__fixed-drawer">
				2469	<style>
				2470	.demo-layout.demo-layout__fixed-drawer {
				2471	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				2472	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				2473	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				2474	width: 100%;
				2475	position: relative;
				2476	height: 300px;
				2477	}
				2478	.demo-layout.demo-layout__fixed-drawer .mdl-layout__content {
				2479	background: white;
				2480	}
				2481	</style>
				2482
				2483	<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
				2484	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
				2485	<div class="mdl-layout__drawer">
				2486	<span class="mdl-layout-title">Title</span>
				2487	<nav class="mdl-navigation">
				2488	<a class="mdl-navigation__link" href="">Link</a>
				2489	<a class="mdl-navigation__link" href="">Link</a>
				2490	<a class="mdl-navigation__link" href="">Link</a>
				2491	<a class="mdl-navigation__link" href="">Link</a>
				2492	</nav>
				2493	</div>
				2494	<main class="mdl-layout__content">
				2495	<div class="page-content"><!-- Your content goes here --></div>
				2496	</main>
				2497	</div>
				2498
				2499
				2500	</div>
				2501	</div>
				2502	<div class="snippet-demo-padding"></div>
				2503	</div>
				2504	<div class="snippet-captions">
				2505	<div class="snippet-caption-padding"></div>
				2506
				2507	<div class="snippet-caption">
				2508	Fixed drawer, no header
				2509	</div>
				2510	<div class="snippet-caption-padding"></div>
				2511	</div>
				2512	</div>
				2513	<div class="snippet-code">
				2514	<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-drawer.html"><!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
				2515	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
				2516	<div class="mdl-layout__drawer">
				2517	<span class="mdl-layout-title">Title</span>
				2518	<nav class="mdl-navigation">
				2519	<a class="mdl-navigation__link" href="">Link</a>
				2520	<a class="mdl-navigation__link" href="">Link</a>
				2521	<a class="mdl-navigation__link" href="">Link</a>
				2522	<a class="mdl-navigation__link" href="">Link</a>
				2523	</nav>
				2524	</div>
				2525	<main class="mdl-layout__content">
				2526	<div class="page-content"><!-- Your content goes here --></div>
				2527	</main>
				2528	</div>
				2529	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				2530	</div>
				2531	</div>
				2532
				2533
				2534
				2535
				2536	<div class="snippet-group is-full-width">
				2537
				2538	<div class="snippet-header">
				2539	<div class="snippet-demos">
				2540	<div class="snippet-demo-padding"></div>
				2541
				2542
				2543
				2544
				2545	<div class="snippet-demo">
				2546	<div class="snippet-demo-container demo-layout demo-layout__fixed-header">
				2547	<style>
				2548	.demo-layout.demo-layout__fixed-header {
				2549	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				2550	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				2551	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				2552	width: 100%;
				2553	position: relative;
				2554	height: 300px;
				2555	}
				2556	.demo-layout.demo-layout__fixed-header .mdl-layout__content {
				2557	background: white;
				2558	}
				2559	</style>
				2560
				2561	<!-- Always shows a header, even in smaller screens. -->
				2562	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
				2563	<header class="mdl-layout__header">
				2564	<div class="mdl-layout__header-row">
				2565	<!-- Title -->
				2566	<span class="mdl-layout-title">Title</span>
				2567	<!-- Add spacer, to align navigation to the right -->
				2568	<div class="mdl-layout-spacer"></div>
				2569	<!-- Navigation. We hide it in small screens. -->
				2570	<nav class="mdl-navigation mdl-layout--large-screen-only">
				2571	<a class="mdl-navigation__link" href="">Link</a>
				2572	<a class="mdl-navigation__link" href="">Link</a>
				2573	<a class="mdl-navigation__link" href="">Link</a>
				2574	<a class="mdl-navigation__link" href="">Link</a>
				2575	</nav>
				2576	</div>
				2577	</header>
				2578	<div class="mdl-layout__drawer">
				2579	<span class="mdl-layout-title">Title</span>
				2580	<nav class="mdl-navigation">
				2581	<a class="mdl-navigation__link" href="">Link</a>
				2582	<a class="mdl-navigation__link" href="">Link</a>
				2583	<a class="mdl-navigation__link" href="">Link</a>
				2584	<a class="mdl-navigation__link" href="">Link</a>
				2585	</nav>
				2586	</div>
				2587	<main class="mdl-layout__content">
				2588	<div class="page-content"><!-- Your content goes here --></div>
				2589	</main>
				2590	</div>
				2591
				2592
				2593	</div>
				2594	</div>
				2595	<div class="snippet-demo-padding"></div>
				2596	</div>
				2597	<div class="snippet-captions">
				2598	<div class="snippet-caption-padding"></div>
				2599
				2600	<div class="snippet-caption">
				2601	Fixed header
				2602	</div>
				2603	<div class="snippet-caption-padding"></div>
				2604	</div>
				2605	</div>
				2606	<div class="snippet-code">
				2607	<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-header.html"><!-- Always shows a header, even in smaller screens. -->
				2608	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
				2609	<header class="mdl-layout__header">
				2610	<div class="mdl-layout__header-row">
				2611	<!-- Title -->
				2612	<span class="mdl-layout-title">Title</span>
				2613	<!-- Add spacer, to align navigation to the right -->
				2614	<div class="mdl-layout-spacer"></div>
				2615	<!-- Navigation. We hide it in small screens. -->
				2616	<nav class="mdl-navigation mdl-layout--large-screen-only">
				2617	<a class="mdl-navigation__link" href="">Link</a>
				2618	<a class="mdl-navigation__link" href="">Link</a>
				2619	<a class="mdl-navigation__link" href="">Link</a>
				2620	<a class="mdl-navigation__link" href="">Link</a>
				2621	</nav>
				2622	</div>
				2623	</header>
				2624	<div class="mdl-layout__drawer">
				2625	<span class="mdl-layout-title">Title</span>
				2626	<nav class="mdl-navigation">
				2627	<a class="mdl-navigation__link" href="">Link</a>
				2628	<a class="mdl-navigation__link" href="">Link</a>
				2629	<a class="mdl-navigation__link" href="">Link</a>
				2630	<a class="mdl-navigation__link" href="">Link</a>
				2631	</nav>
				2632	</div>
				2633	<main class="mdl-layout__content">
				2634	<div class="page-content"><!-- Your content goes here --></div>
				2635	</main>
				2636	</div>
				2637	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				2638	</div>
				2639	</div>
				2640
				2641
				2642
				2643
				2644	<div class="snippet-group is-full-width">
				2645
				2646	<div class="snippet-header">
				2647	<div class="snippet-demos">
				2648	<div class="snippet-demo-padding"></div>
				2649
				2650
				2651
				2652
				2653	<div class="snippet-demo">
				2654	<div class="snippet-demo-container demo-layout demo-layout__fixed-header-drawer">
				2655	<style>
				2656	.demo-layout.demo-layout__fixed-header-drawer {
				2657	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				2658	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				2659	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				2660	width: 100%;
				2661	position: relative;
				2662	height: 300px;
				2663	}
				2664	.demo-layout.demo-layout__fixed-header-drawer.mdl-layout__content {
				2665	background: white;
				2666	}
				2667	</style>
				2668
				2669	<!-- The drawer is always open in large screens. The header is always shown,
				2670	even in small screens. -->
				2671	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
				2672	mdl-layout--fixed-header">
				2673	<header class="mdl-layout__header">
				2674	<div class="mdl-layout__header-row">
				2675	<div class="mdl-layout-spacer"></div>
				2676	<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
				2677	mdl-textfield--floating-label mdl-textfield--align-right">
				2678	<label class="mdl-button mdl-js-button mdl-button--icon"
				2679	for="fixed-header-drawer-exp">
				2680	<i class="material-icons">search</i>
				2681	</label>
				2682	<div class="mdl-textfield__expandable-holder">
				2683	<input class="mdl-textfield__input" type="text" name="sample"
				2684	id="fixed-header-drawer-exp">
				2685	</div>
				2686	</div>
				2687	</div>
				2688	</header>
				2689	<div class="mdl-layout__drawer">
				2690	<span class="mdl-layout-title">Title</span>
				2691	<nav class="mdl-navigation">
				2692	<a class="mdl-navigation__link" href="">Link</a>
				2693	<a class="mdl-navigation__link" href="">Link</a>
				2694	<a class="mdl-navigation__link" href="">Link</a>
				2695	<a class="mdl-navigation__link" href="">Link</a>
				2696	</nav>
				2697	</div>
				2698	<main class="mdl-layout__content">
				2699	<div class="page-content"><!-- Your content goes here --></div>
				2700	</main>
				2701	</div>
				2702
				2703
				2704	</div>
				2705	</div>
				2706	<div class="snippet-demo-padding"></div>
				2707	</div>
				2708	<div class="snippet-captions">
				2709	<div class="snippet-caption-padding"></div>
				2710
				2711	<div class="snippet-caption">
				2712	Fixed header and drawer
				2713	</div>
				2714	<div class="snippet-caption-padding"></div>
				2715	</div>
				2716	</div>
				2717	<div class="snippet-code">
				2718	<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-header-drawer.html"><!-- The drawer is always open in large screens. The header is always shown,
				2719	even in small screens. -->
				2720	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
				2721	mdl-layout--fixed-header">
				2722	<header class="mdl-layout__header">
				2723	<div class="mdl-layout__header-row">
				2724	<div class="mdl-layout-spacer"></div>
				2725	<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
				2726	mdl-textfield--floating-label mdl-textfield--align-right">
				2727	<label class="mdl-button mdl-js-button mdl-button--icon"
				2728	for="fixed-header-drawer-exp">
				2729	<i class="material-icons">search</i>
				2730	</label>
				2731	<div class="mdl-textfield__expandable-holder">
				2732	<input class="mdl-textfield__input" type="text" name="sample"
				2733	id="fixed-header-drawer-exp">
				2734	</div>
				2735	</div>
				2736	</div>
				2737	</header>
				2738	<div class="mdl-layout__drawer">
				2739	<span class="mdl-layout-title">Title</span>
				2740	<nav class="mdl-navigation">
				2741	<a class="mdl-navigation__link" href="">Link</a>
				2742	<a class="mdl-navigation__link" href="">Link</a>
				2743	<a class="mdl-navigation__link" href="">Link</a>
				2744	<a class="mdl-navigation__link" href="">Link</a>
				2745	</nav>
				2746	</div>
				2747	<main class="mdl-layout__content">
				2748	<div class="page-content"><!-- Your content goes here --></div>
				2749	</main>
				2750	</div>
				2751	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				2752	</div>
				2753	</div>
				2754
				2755
				2756
				2757
				2758	<div class="snippet-group is-full-width">
				2759
				2760	<div class="snippet-header">
				2761	<div class="snippet-demos">
				2762	<div class="snippet-demo-padding"></div>
				2763
				2764
				2765
				2766
				2767	<div class="snippet-demo">
				2768	<div class="snippet-demo-container demo-layout demo-layout__scrolling-header">
				2769	<style>
				2770	.demo-layout.demo-layout__scrolling-header {
				2771	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				2772	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				2773	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				2774	width: 100%;
				2775	position: relative;
				2776	height: 300px;
				2777	}
				2778	.demo-layout.demo-layout__scrolling-header .page-content {
				2779	height: 600px;
				2780	background: white;
				2781	}
				2782	</style>
				2783
				2784	<!-- Uses a header that scrolls with the text, rather than staying
				2785	locked at the top -->
				2786	<div class="mdl-layout mdl-js-layout">
				2787	<header class="mdl-layout__header mdl-layout__header--scroll">
				2788	<div class="mdl-layout__header-row">
				2789	<!-- Title -->
				2790	<span class="mdl-layout-title">Title</span>
				2791	<!-- Add spacer, to align navigation to the right -->
				2792	<div class="mdl-layout-spacer"></div>
				2793	<!-- Navigation -->
				2794	<nav class="mdl-navigation">
				2795	<a class="mdl-navigation__link" href="">Link</a>
				2796	<a class="mdl-navigation__link" href="">Link</a>
				2797	<a class="mdl-navigation__link" href="">Link</a>
				2798	<a class="mdl-navigation__link" href="">Link</a>
				2799	</nav>
				2800	</div>
				2801	</header>
				2802	<div class="mdl-layout__drawer">
				2803	<span class="mdl-layout-title">Title</span>
				2804	<nav class="mdl-navigation">
				2805	<a class="mdl-navigation__link" href="">Link</a>
				2806	<a class="mdl-navigation__link" href="">Link</a>
				2807	<a class="mdl-navigation__link" href="">Link</a>
				2808	<a class="mdl-navigation__link" href="">Link</a>
				2809	</nav>
				2810	</div>
				2811	<main class="mdl-layout__content">
				2812	<div class="page-content"><!-- Your content goes here --></div>
				2813	</main>
				2814	</div>
				2815
				2816
				2817	</div>
				2818	</div>
				2819	<div class="snippet-demo-padding"></div>
				2820	</div>
				2821	<div class="snippet-captions">
				2822	<div class="snippet-caption-padding"></div>
				2823
				2824	<div class="snippet-caption">
				2825	Scrolling header
				2826	</div>
				2827	<div class="snippet-caption-padding"></div>
				2828	</div>
				2829	</div>
				2830	<div class="snippet-code">
				2831	<pre class="language-markup codepen-button-enabled"><code id="layout/scrolling-header.html"><!-- Uses a header that scrolls with the text, rather than staying
				2832	locked at the top -->
				2833	<div class="mdl-layout mdl-js-layout">
				2834	<header class="mdl-layout__header mdl-layout__header--scroll">
				2835	<div class="mdl-layout__header-row">
				2836	<!-- Title -->
				2837	<span class="mdl-layout-title">Title</span>
				2838	<!-- Add spacer, to align navigation to the right -->
				2839	<div class="mdl-layout-spacer"></div>
				2840	<!-- Navigation -->
				2841	<nav class="mdl-navigation">
				2842	<a class="mdl-navigation__link" href="">Link</a>
				2843	<a class="mdl-navigation__link" href="">Link</a>
				2844	<a class="mdl-navigation__link" href="">Link</a>
				2845	<a class="mdl-navigation__link" href="">Link</a>
				2846	</nav>
				2847	</div>
				2848	</header>
				2849	<div class="mdl-layout__drawer">
				2850	<span class="mdl-layout-title">Title</span>
				2851	<nav class="mdl-navigation">
				2852	<a class="mdl-navigation__link" href="">Link</a>
				2853	<a class="mdl-navigation__link" href="">Link</a>
				2854	<a class="mdl-navigation__link" href="">Link</a>
				2855	<a class="mdl-navigation__link" href="">Link</a>
				2856	</nav>
				2857	</div>
				2858	<main class="mdl-layout__content">
				2859	<div class="page-content"><!-- Your content goes here --></div>
				2860	</main>
				2861	</div>
				2862	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				2863	</div>
				2864	</div>
				2865
				2866
				2867
				2868
				2869	<div class="snippet-group is-full-width">
				2870
				2871	<div class="snippet-header">
				2872	<div class="snippet-demos">
				2873	<div class="snippet-demo-padding"></div>
				2874
				2875
				2876
				2877
				2878	<div class="snippet-demo">
				2879	<div class="snippet-demo-container demo-layout demo-layout__waterfall-header">
				2880	<style>
				2881	.demo-layout.demo-layout__waterfall-header {
				2882	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				2883	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				2884	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				2885	width: 100%;
				2886	position: relative;
				2887	height: 300px;
				2888	}
				2889	.demo-layout.demo-layout__waterfall-header .page-content {
				2890	height: 600px;
				2891	background: white;
				2892	}
				2893	</style>
				2894
				2895	<!-- Uses a header that contracts as the page scrolls down. -->
				2896	<style>
				2897	.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
				2898	padding-right: 0;
				2899	}
				2900	</style>
				2901
				2902	<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
				2903	<header class="mdl-layout__header mdl-layout__header--waterfall">
				2904	<!-- Top row, always visible -->
				2905	<div class="mdl-layout__header-row">
				2906	<!-- Title -->
				2907	<span class="mdl-layout-title">Title</span>
				2908	<div class="mdl-layout-spacer"></div>
				2909	<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
				2910	mdl-textfield--floating-label mdl-textfield--align-right">
				2911	<label class="mdl-button mdl-js-button mdl-button--icon"
				2912	for="waterfall-exp">
				2913	<i class="material-icons">search</i>
				2914	</label>
				2915	<div class="mdl-textfield__expandable-holder">
				2916	<input class="mdl-textfield__input" type="text" name="sample"
				2917	id="waterfall-exp">
				2918	</div>
				2919	</div>
				2920	</div>
				2921	<!-- Bottom row, not visible on scroll -->
				2922	<div class="mdl-layout__header-row">
				2923	<div class="mdl-layout-spacer"></div>
				2924	<!-- Navigation -->
				2925	<nav class="mdl-navigation">
				2926	<a class="mdl-navigation__link" href="">Link</a>
				2927	<a class="mdl-navigation__link" href="">Link</a>
				2928	<a class="mdl-navigation__link" href="">Link</a>
				2929	<a class="mdl-navigation__link" href="">Link</a>
				2930	</nav>
				2931	</div>
				2932	</header>
				2933	<div class="mdl-layout__drawer">
				2934	<span class="mdl-layout-title">Title</span>
				2935	<nav class="mdl-navigation">
				2936	<a class="mdl-navigation__link" href="">Link</a>
				2937	<a class="mdl-navigation__link" href="">Link</a>
				2938	<a class="mdl-navigation__link" href="">Link</a>
				2939	<a class="mdl-navigation__link" href="">Link</a>
				2940	</nav>
				2941	</div>
				2942	<main class="mdl-layout__content">
				2943	<div class="page-content"><!-- Your content goes here --></div>
				2944	</main>
				2945	</div>
				2946
				2947
				2948	</div>
				2949	</div>
				2950	<div class="snippet-demo-padding"></div>
				2951	</div>
				2952	<div class="snippet-captions">
				2953	<div class="snippet-caption-padding"></div>
				2954
				2955	<div class="snippet-caption">
				2956	Waterfall header
				2957	</div>
				2958	<div class="snippet-caption-padding"></div>
				2959	</div>
				2960	</div>
				2961	<div class="snippet-code">
				2962	<pre class="language-markup codepen-button-enabled"><code id="layout/waterfall-header.html"><!-- Uses a header that contracts as the page scrolls down. -->
				2963	<style>
				2964	.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
				2965	padding-right: 0;
				2966	}
				2967	</style>
				2968
				2969	<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
				2970	<header class="mdl-layout__header mdl-layout__header--waterfall">
				2971	<!-- Top row, always visible -->
				2972	<div class="mdl-layout__header-row">
				2973	<!-- Title -->
				2974	<span class="mdl-layout-title">Title</span>
				2975	<div class="mdl-layout-spacer"></div>
				2976	<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
				2977	mdl-textfield--floating-label mdl-textfield--align-right">
				2978	<label class="mdl-button mdl-js-button mdl-button--icon"
				2979	for="waterfall-exp">
				2980	<i class="material-icons">search</i>
				2981	</label>
				2982	<div class="mdl-textfield__expandable-holder">
				2983	<input class="mdl-textfield__input" type="text" name="sample"
				2984	id="waterfall-exp">
				2985	</div>
				2986	</div>
				2987	</div>
				2988	<!-- Bottom row, not visible on scroll -->
				2989	<div class="mdl-layout__header-row">
				2990	<div class="mdl-layout-spacer"></div>
				2991	<!-- Navigation -->
				2992	<nav class="mdl-navigation">
				2993	<a class="mdl-navigation__link" href="">Link</a>
				2994	<a class="mdl-navigation__link" href="">Link</a>
				2995	<a class="mdl-navigation__link" href="">Link</a>
				2996	<a class="mdl-navigation__link" href="">Link</a>
				2997	</nav>
				2998	</div>
				2999	</header>
				3000	<div class="mdl-layout__drawer">
				3001	<span class="mdl-layout-title">Title</span>
				3002	<nav class="mdl-navigation">
				3003	<a class="mdl-navigation__link" href="">Link</a>
				3004	<a class="mdl-navigation__link" href="">Link</a>
				3005	<a class="mdl-navigation__link" href="">Link</a>
				3006	<a class="mdl-navigation__link" href="">Link</a>
				3007	</nav>
				3008	</div>
				3009	<main class="mdl-layout__content">
				3010	<div class="page-content"><!-- Your content goes here --></div>
				3011	</main>
				3012	</div>
				3013	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				3014	</div>
				3015	</div>
				3016
				3017
				3018
				3019
				3020	<div class="snippet-group is-full-width">
				3021
				3022	<div class="snippet-header">
				3023	<div class="snippet-demos">
				3024	<div class="snippet-demo-padding"></div>
				3025
				3026
				3027
				3028
				3029	<div class="snippet-demo">
				3030	<div class="snippet-demo-container demo-layout demo-layout__scrollable-tabs">
				3031	<style>
				3032	.demo-layout.demo-layout__scrollable-tabs {
				3033	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				3034	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				3035	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				3036	width: 100%;
				3037	position: relative;
				3038	height: 300px;
				3039	}
				3040	.demo-layout.demo-layout__scrollable-tabs .mdl-layout__content {
				3041	background: white;
				3042	}
				3043	</style>
				3044
				3045	<!-- Simple header with scrollable tabs. -->
				3046	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
				3047	<header class="mdl-layout__header">
				3048	<div class="mdl-layout__header-row">
				3049	<!-- Title -->
				3050	<span class="mdl-layout-title">Title</span>
				3051	</div>
				3052	<!-- Tabs -->
				3053	<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
				3054	<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
				3055	<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
				3056	<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
				3057	<a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
				3058	<a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
				3059	<a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
				3060	</div>
				3061	</header>
				3062	<div class="mdl-layout__drawer">
				3063	<span class="mdl-layout-title">Title</span>
				3064	</div>
				3065	<main class="mdl-layout__content">
				3066	<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
				3067	<div class="page-content"><!-- Your content goes here --></div>
				3068	</section>
				3069	<section class="mdl-layout__tab-panel" id="scroll-tab-2">
				3070	<div class="page-content"><!-- Your content goes here --></div>
				3071	</section>
				3072	<section class="mdl-layout__tab-panel" id="scroll-tab-3">
				3073	<div class="page-content"><!-- Your content goes here --></div>
				3074	</section>
				3075	<section class="mdl-layout__tab-panel" id="scroll-tab-4">
				3076	<div class="page-content"><!-- Your content goes here --></div>
				3077	</section>
				3078	<section class="mdl-layout__tab-panel" id="scroll-tab-5">
				3079	<div class="page-content"><!-- Your content goes here --></div>
				3080	</section>
				3081	<section class="mdl-layout__tab-panel" id="scroll-tab-6">
				3082	<div class="page-content"><!-- Your content goes here --></div>
				3083	</section>
				3084	</main>
				3085	</div>
				3086
				3087
				3088	</div>
				3089	</div>
				3090	<div class="snippet-demo-padding"></div>
				3091	</div>
				3092	<div class="snippet-captions">
				3093	<div class="snippet-caption-padding"></div>
				3094
				3095	<div class="snippet-caption">
				3096	Scrollable tabs
				3097	</div>
				3098	<div class="snippet-caption-padding"></div>
				3099	</div>
				3100	</div>
				3101	<div class="snippet-code">
				3102	<pre class="language-markup codepen-button-enabled"><code id="layout/scrollable-tabs.html"><!-- Simple header with scrollable tabs. -->
				3103	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
				3104	<header class="mdl-layout__header">
				3105	<div class="mdl-layout__header-row">
				3106	<!-- Title -->
				3107	<span class="mdl-layout-title">Title</span>
				3108	</div>
				3109	<!-- Tabs -->
				3110	<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
				3111	<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
				3112	<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
				3113	<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
				3114	<a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
				3115	<a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
				3116	<a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
				3117	</div>
				3118	</header>
				3119	<div class="mdl-layout__drawer">
				3120	<span class="mdl-layout-title">Title</span>
				3121	</div>
				3122	<main class="mdl-layout__content">
				3123	<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
				3124	<div class="page-content"><!-- Your content goes here --></div>
				3125	</section>
				3126	<section class="mdl-layout__tab-panel" id="scroll-tab-2">
				3127	<div class="page-content"><!-- Your content goes here --></div>
				3128	</section>
				3129	<section class="mdl-layout__tab-panel" id="scroll-tab-3">
				3130	<div class="page-content"><!-- Your content goes here --></div>
				3131	</section>
				3132	<section class="mdl-layout__tab-panel" id="scroll-tab-4">
				3133	<div class="page-content"><!-- Your content goes here --></div>
				3134	</section>
				3135	<section class="mdl-layout__tab-panel" id="scroll-tab-5">
				3136	<div class="page-content"><!-- Your content goes here --></div>
				3137	</section>
				3138	<section class="mdl-layout__tab-panel" id="scroll-tab-6">
				3139	<div class="page-content"><!-- Your content goes here --></div>
				3140	</section>
				3141	</main>
				3142	</div>
				3143	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				3144	</div>
				3145	</div>
				3146
				3147
				3148
				3149
				3150	<div class="snippet-group is-full-width">
				3151
				3152	<div class="snippet-header">
				3153	<div class="snippet-demos">
				3154	<div class="snippet-demo-padding"></div>
				3155
				3156
				3157
				3158
				3159	<div class="snippet-demo">
				3160	<div class="snippet-demo-container demo-layout demo-layout__fixed-tabs">
				3161	<style>
				3162	.demo-layout.demo-layout__fixed-tabs {
				3163	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
				3164	0 3px 1px -2px rgba(0, 0, 0, 0.2),
				3165	0 1px 5px 0 rgba(0, 0, 0, 0.12);
				3166	width: 100%;
				3167	position: relative;
				3168	height: 300px;
				3169	}
				3170	.demo-layout.demo-layout__fixed-tabs .mdl-layout__content {
				3171	background: white;
				3172	}
				3173	</style>
				3174
				3175	<!-- Simple header with fixed tabs. -->
				3176	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
				3177	mdl-layout--fixed-tabs">
				3178	<header class="mdl-layout__header">
				3179	<div class="mdl-layout__header-row">
				3180	<!-- Title -->
				3181	<span class="mdl-layout-title">Title</span>
				3182	</div>
				3183	<!-- Tabs -->
				3184	<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
				3185	<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
				3186	<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
				3187	<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
				3188	</div>
				3189	</header>
				3190	<div class="mdl-layout__drawer">
				3191	<span class="mdl-layout-title">Title</span>
				3192	</div>
				3193	<main class="mdl-layout__content">
				3194	<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
				3195	<div class="page-content"><!-- Your content goes here --></div>
				3196	</section>
				3197	<section class="mdl-layout__tab-panel" id="fixed-tab-2">
				3198	<div class="page-content"><!-- Your content goes here --></div>
				3199	</section>
				3200	<section class="mdl-layout__tab-panel" id="fixed-tab-3">
				3201	<div class="page-content"><!-- Your content goes here --></div>
				3202	</section>
				3203	</main>
				3204	</div>
				3205
				3206
				3207	</div>
				3208	</div>
				3209	<div class="snippet-demo-padding"></div>
				3210	</div>
				3211	<div class="snippet-captions">
				3212	<div class="snippet-caption-padding"></div>
				3213
				3214	<div class="snippet-caption">
				3215	Fixed tabs
				3216	</div>
				3217	<div class="snippet-caption-padding"></div>
				3218	</div>
				3219	</div>
				3220	<div class="snippet-code">
				3221	<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-tabs.html"><!-- Simple header with fixed tabs. -->
				3222	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
				3223	mdl-layout--fixed-tabs">
				3224	<header class="mdl-layout__header">
				3225	<div class="mdl-layout__header-row">
				3226	<!-- Title -->
				3227	<span class="mdl-layout-title">Title</span>
				3228	</div>
				3229	<!-- Tabs -->
				3230	<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
				3231	<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
				3232	<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
				3233	<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
				3234	</div>
				3235	</header>
				3236	<div class="mdl-layout__drawer">
				3237	<span class="mdl-layout-title">Title</span>
				3238	</div>
				3239	<main class="mdl-layout__content">
				3240	<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
				3241	<div class="page-content"><!-- Your content goes here --></div>
				3242	</section>
				3243	<section class="mdl-layout__tab-panel" id="fixed-tab-2">
				3244	<div class="page-content"><!-- Your content goes here --></div>
				3245	</section>
				3246	<section class="mdl-layout__tab-panel" id="fixed-tab-3">
				3247	<div class="page-content"><!-- Your content goes here --></div>
				3248	</section>
				3249	</main>
				3250	</div>
				3251	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				3252	</div>
				3253	</div>
				3254
				3255
				3256	<!-- Adding the demo page -->
				3257
				3258	<style>
				3259
				3260	</style>
				3261
				3262	<script>
				3263
				3264	</script>
				3265
				3266
				3267	<div class="docs-text-styling docs-readme">
				3268
				3269
				3270
				3271
				3272	<h2 id="introduction">Introduction</h2>
				3273	<p>The Material Design Lite (MDL) <strong>layout</strong> component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices.</p>
				3274	<p>Appropriate and accessible layout is a critical feature of all user interfaces, regardless of a site's content or function. Page design and presentation is therefore an important factor in the overall user experience. See the layout component's <a href="http://www.google.com/design/spec/layout/principles.html">Material Design specifications page</a> for details.</p>
				3275	<p>Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognizable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes. MDL layout is extremely powerful and dynamic, allowing for great consistency in outward appearance and behavior while maintaining development flexibility and ease of use.</p>
				3276	<h3 id="to-include-a-basic-mdl-layout-component-">To include a basic MDL <strong>layout</strong> component:</h3>
				3277	<p> 1. Code a <code><div></code> element. This is the "outer" div that holds the entire layout.</p>
				3278	<pre><code class="language-markup"><div>
				3279	</div>
				3280	</code></pre>
				3281	<blockquote>
				3282	<p><strong>Note:</strong> The layout cannot be applied directly on the <code><body></code> element. Always create a nested <code><div></code> element.</p>
				3283	</blockquote>
				3284	<p> 2. Add MDL classes as indicated, separated by spaces, to the div using the <code>class</code> attribute.</p>
				3285	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3286	</div>
				3287	</code></pre>
				3288	<p> 3. Inside the div, code a <code><header></code> element. This holds the header row with navigation links that is displayed on large screens, and the menu icon that opens the navigation drawer for smaller screens. Add the MDL class to the header using the <code>class</code> attribute.</p>
				3289	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3290	<header class="mdl-layout__header">
				3291	</header>
				3292	</div>
				3293	</code></pre>
				3294	<p> 4. Inside the header, add a <code><div></code> to produce the menu icon, and include the MDL class as indicated. The div has no content of its own.</p>
				3295	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3296	<header class="mdl-layout__header">
				3297	<div class="mdl-layout-icon"></div>
				3298	</header>
				3299	</div>
				3300	</code></pre>
				3301	<p> 5. Still inside the header, add another <code><div></code> to hold the header row's content, and include the MDL class as indicated.</p>
				3302	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3303	<header class="mdl-layout__header">
				3304	<div class="mdl-layout-icon"></div>
				3305	<div class="mdl-layout__header-row">
				3306	</div>
				3307	</header>
				3308	</div>
				3309	</code></pre>
				3310	<p> 6. Inside the header row div, add a span containing the layout title, and include the MDL class as indicated.</p>
				3311	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3312	<header class="mdl-layout__header">
				3313	<div class="mdl-layout-icon"></div>
				3314	<div class="mdl-layout__header-row">
				3315	<span class="mdl-layout__title">Simple Layout</span>
				3316	</div>
				3317	</header>
				3318	</div>
				3319	</code></pre>
				3320	<p> 7. Following the span, add a <code><div></code> to align the header's navigation links to the right, and include the MDL class as indicated.</p>
				3321	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3322	<header class="mdl-layout__header">
				3323	<div class="mdl-layout-icon"></div>
				3324	<div class="mdl-layout__header-row">
				3325	<span class="mdl-layout__title">Simple Layout</span>
				3326	<div class="mdl-layout-spacer"></div>
				3327	</div>
				3328	</header>
				3329	</div>
				3330	</code></pre>
				3331	<p> 8. Following the spacer div, add a <code><nav></code> element to contain the header's navigation links, and include the MDL class as indicated. Inside the nav, add one anchor <code><a></code> element for each header link, and include the MDL class as indicated. This completes the layout's header.</p>
				3332	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3333	<header class="mdl-layout__header">
				3334	<div class="mdl-layout-icon"></div>
				3335	<div class="mdl-layout__header-row">
				3336	<span class="mdl-layout__title">Simple Layout</span>
				3337	<div class="mdl-layout-spacer"></div>
				3338	<nav class="mdl-navigation">
				3339	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3340	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3341	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3342	</nav>
				3343	</div>
				3344	</header>
				3345	</div>
				3346	</code></pre>
				3347	<p> 9. Following the header, add a <code><div></code> element to hold the slide-out drawer's content, and add the MDL class as indicated. The drawer appears automatically on smaller screens, and may be opened with the menu icon on any screen size.</p>
				3348	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3349	<header class="mdl-layout__header">
				3350	<div class="mdl-layout-icon"></div>
				3351	<div class="mdl-layout__header-row">
				3352	<span class="mdl-layout__title">Simple Layout</span>
				3353	<div class="mdl-layout-spacer"></div>
				3354	<nav class="mdl-navigation">
				3355	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3356	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3357	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3358	</nav>
				3359	</div>
				3360	</header>
				3361	<div class="mdl-layout__drawer">
				3362	</div>
				3363	</div>
				3364	</code></pre>
				3365	<p> 10. Inside the drawer div, add a span containing the layout title (this should match the title in step 5), and include the MDL class as indicated.</p>
				3366	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3367	<header class="mdl-layout__header">
				3368	<div class="mdl-layout-icon"></div>
				3369	<div class="mdl-layout__header-row">
				3370	<span class="mdl-layout__title">Simple Layout</span>
				3371	<div class="mdl-layout-spacer"></div>
				3372	<nav class="mdl-navigation">
				3373	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3374	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3375	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3376	</nav>
				3377	</div>
				3378	</header>
				3379	<div class="mdl-layout__drawer">
				3380	<span class="mdl-layout__title">Simple Layout</span>
				3381	</div>
				3382	</div>
				3383	</code></pre>
				3384	<p> 11. Following the span, add a <code><nav></code> element to contain the drawer's navigation links, and one anchor <code><a></code> element for each drawer link (these should match the links in step 7), and include the MDL classes as indicated. This completes the layout's drawer.</p>
				3385	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3386	<header class="mdl-layout__header">
				3387	<div class="mdl-layout-icon"></div>
				3388	<div class="mdl-layout__header-row">
				3389	<span class="mdl-layout__title">Simple Layout</span>
				3390	<div class="mdl-layout-spacer"></div>
				3391	<nav class="mdl-navigation">
				3392	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3393	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3394	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3395	</nav>
				3396	</div>
				3397	</header>
				3398	<div class="mdl-layout__drawer">
				3399	<span class="mdl-layout__title">Simple Layout</span>
				3400	<nav class="mdl-navigation">
				3401	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3402	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3403	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3404	</nav>
				3405	</div>
				3406	</div>
				3407	</code></pre>
				3408	<p> 12. Finally, following the drawer div, add a <code><main></code> element to hold the layout's primary content, and include the MDL class as indicated. Inside that element, add your desired content.</p>
				3409	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3410	<header class="mdl-layout__header">
				3411	<div class="mdl-layout-icon"></div>
				3412	<div class="mdl-layout__header-row">
				3413	<span class="mdl-layout__title">Simple Layout</span>
				3414	<div class="mdl-layout-spacer"></div>
				3415	<nav class="mdl-navigation">
				3416	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3417	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3418	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3419	</nav>
				3420	</div>
				3421	</header>
				3422	<div class="mdl-layout__drawer">
				3423	<span class="mdl-layout__title">Simple Layout</span>
				3424	<nav class="mdl-navigation">
				3425	<a class="mdl-navigation__link" href="#">Nav link 1</a>
				3426	<a class="mdl-navigation__link" href="#">Nav link 2</a>
				3427	<a class="mdl-navigation__link" href="#">Nav link 3</a>
				3428	</nav>
				3429	</div>
				3430	<main class="mdl-layout__content">
				3431	<p>Content</p>
				3432	<p>Goes</p>
				3433	<p>Here</p>
				3434	</main>
				3435	</div>
				3436	</code></pre>
				3437	<p>The layout component is ready for use.</p>
				3438	<h4 id="examples">Examples</h4>
				3439	<p>A layout with a fixed header for larger screens and a collapsible drawer for smaller screens.</p>
				3440	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3441	<header class="mdl-layout__header">
				3442	<div class="mdl-layout-icon"></div>
				3443	<div class="mdl-layout__header-row">
				3444	<span class="mdl-layout__title">Material Design Lite</span>
				3445	<div class="mdl-layout-spacer"></div>
				3446	<nav class="mdl-navigation">
				3447	<a class="mdl-navigation__link" href="#">Hello</a>
				3448	<a class="mdl-navigation__link" href="#">World.</a>
				3449	<a class="mdl-navigation__link" href="#">How</a>
				3450	<a class="mdl-navigation__link" href="#">Are</a>
				3451	<a class="mdl-navigation__link" href="#">You?</a>
				3452	</nav>
				3453	</div>
				3454	</header>
				3455	<div class="mdl-layout__drawer">
				3456	<span class="mdl-layout__title">Material Design Lite</span>
				3457	<nav class="mdl-navigation">
				3458	<a class="mdl-navigation__link" href="#">Hello</a>
				3459	<a class="mdl-navigation__link" href="#">World.</a>
				3460	<a class="mdl-navigation__link" href="#">How</a>
				3461	<a class="mdl-navigation__link" href="#">Are</a>
				3462	<a class="mdl-navigation__link" href="#">You?</a>
				3463	</nav>
				3464	</div>
				3465	<main class="mdl-layout__content">
				3466	<div>Content</div>
				3467	</main>
				3468	</div>
				3469	</code></pre>
				3470	<p>The same layout with a non-fixed header that scrolls with the content.</p>
				3471	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout">
				3472	<header class="mdl-layout__header mdl-layout__header--scroll">
				3473	<img class="mdl-layout-icon"></img>
				3474	<div class="mdl-layout__header-row">
				3475	<span class="mdl-layout__title">Material Design Lite</span>
				3476	<div class="mdl-layout-spacer"></div>
				3477	<nav class="mdl-navigation">
				3478	<a class="mdl-navigation__link" href="#">Hello</a>
				3479	<a class="mdl-navigation__link" href="#">World.</a>
				3480	<a class="mdl-navigation__link" href="#">How</a>
				3481	<a class="mdl-navigation__link" href="#">Are</a>
				3482	<a class="mdl-navigation__link" href="#">You?</a>
				3483	</nav>
				3484	</div>
				3485	</header>
				3486	<div class="mdl-layout__drawer">
				3487	<span class="mdl-layout__title">Material Design Lite</span>
				3488	<nav class="mdl-navigation">
				3489	<a class="mdl-navigation__link" href="#">Hello</a>
				3490	<a class="mdl-navigation__link" href="#">World.</a>
				3491	<a class="mdl-navigation__link" href="#">How</a>
				3492	<a class="mdl-navigation__link" href="#">Are</a>
				3493	<a class="mdl-navigation__link" href="#">You?</a>
				3494	</nav>
				3495	</div>
				3496	<main class="mdl-layout__content">
				3497	<div>Content</div>
				3498	</main>
				3499	</div>
				3500	</code></pre>
				3501	<p>A layout with a fixed drawer that serves as sidebar navigation on larger screens. The drawer collapses and the menu icon is displayed on smaller screens.</p>
				3502	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
				3503	<header class="mdl-layout__header">
				3504	<div class="mdl-layout__header-row">
				3505	<span class="mdl-layout__title">Fixed drawer layout demo</span>
				3506	</div>
				3507	</header>
				3508	<div class="mdl-layout__drawer">
				3509	<span class="mdl-layout__title">Material Design Lite</span>
				3510	<nav class="mdl-navigation">
				3511	<a class="mdl-navigation__link" href="#">Hello</a>
				3512	<a class="mdl-navigation__link" href="#">World.</a>
				3513	<a class="mdl-navigation__link" href="#">How</a>
				3514	<a class="mdl-navigation__link" href="#">Are</a>
				3515	<a class="mdl-navigation__link" href="#">You?</a>
				3516	</nav>
				3517	</div>
				3518	<main class="mdl-layout__content">
				3519	<div>Content</div>
				3520	</main>
				3521	</div>
				3522	</code></pre>
				3523	<p>A layout with a fixed drawer but no header.</p>
				3524	<pre><code class="language-markup"><div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
				3525	<div class="mdl-layout__drawer">
				3526	<span class="mdl-layout__title">Material Design Lite</span>
				3527	<nav class="mdl-navigation">
				3528	<a class="mdl-navigation__link" href="#">Hello</a>
				3529	<a class="mdl-navigation__link" href="#">World.</a>
				3530	<a class="mdl-navigation__link" href="#">How</a>
				3531	<a class="mdl-navigation__link" href="#">Are</a>
				3532	<a class="mdl-navigation__link" href="#">You?</a>
				3533	</nav>
				3534	</div>
				3535	<main class="mdl-layout__content">
				3536	<div>Content</div>
				3537	</main>
				3538	</div>
				3539	</code></pre>
				3540	<h2 id="configuration-options">Configuration options</h2>
				3541	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the layout. The table below lists the available classes and their effects.</p>
				3542	<table>
				3543	<thead>
				3544	<tr>
				3545	<th>MDL class</th>
				3546	<th>Effect</th>
				3547	<th>Remarks</th>
				3548	</tr>
				3549	</thead>
				3550	<tbody>
				3551	<tr>
				3552	<td><code>mdl-layout</code></td>
				3553	<td>Defines container as an MDL component</td>
				3554	<td>Required on outer div element</td>
				3555	</tr>
				3556	<tr>
				3557	<td><code>mdl-js-layout</code></td>
				3558	<td>Assigns basic MDL behavior to layout</td>
				3559	<td>Required on outer div element</td>
				3560	</tr>
				3561	<tr>
				3562	<td><code>mdl-layout__header</code></td>
				3563	<td>Defines container as an MDL component</td>
				3564	<td>Required on header element</td>
				3565	</tr>
				3566	<tr>
				3567	<td><code>mdl-layout-icon</code></td>
				3568	<td>Used for adding an application icon. Gets concealed by menu icon if both are visible.</td>
				3569	<td>Goes on optional icon element</td>
				3570	</tr>
				3571	<tr>
				3572	<td><code>mdl-layout__header-row</code></td>
				3573	<td>Defines container as MDL header row</td>
				3574	<td>Required on header content div</td>
				3575	</tr>
				3576	<tr>
				3577	<td><code>mdl-layout__title</code></td>
				3578	<td>Defines layout title text</td>
				3579	<td>Required on layout title span</td>
				3580	</tr>
				3581	<tr>
				3582	<td><code>mdl-layout-spacer</code></td>
				3583	<td>Used to align elements inside a header or drawer, by growing to fill remaining space. Commonly used for aligning elements to the right.</td>
				3584	<td>Goes on optional div following layout title</td>
				3585	</tr>
				3586	<tr>
				3587	<td><code>mdl-navigation</code></td>
				3588	<td>Defines container as MDL navigation group</td>
				3589	<td>Required on nav element</td>
				3590	</tr>
				3591	<tr>
				3592	<td><code>mdl-navigation__link</code></td>
				3593	<td>Defines anchor as MDL navigation link</td>
				3594	<td>Required on header and/or drawer anchor elements</td>
				3595	</tr>
				3596	<tr>
				3597	<td><code>mdl-layout__drawer</code></td>
				3598	<td>Defines container as MDL layout drawer</td>
				3599	<td>Required on drawer div element</td>
				3600	</tr>
				3601	<tr>
				3602	<td><code>mdl-layout__content</code></td>
				3603	<td>Defines container as MDL layout content</td>
				3604	<td>Required on main element</td>
				3605	</tr>
				3606	<tr>
				3607	<td><code>mdl-layout__header--scroll</code></td>
				3608	<td>Makes the header scroll with the content</td>
				3609	<td>Optional; goes on header element</td>
				3610	</tr>
				3611	<tr>
				3612	<td><code>mdl-layout--fixed-drawer</code></td>
				3613	<td>Makes the drawer always visible and open in larger screens</td>
				3614	<td>Optional; goes on outer div element (not drawer div element)</td>
				3615	</tr>
				3616	<tr>
				3617	<td><code>mdl-layout--fixed-header</code></td>
				3618	<td>Makes the header always visible, even in small screens</td>
				3619	<td>Optional; goes on outer div element</td>
				3620	</tr>
				3621	<tr>
				3622	<td><code>mdl-layout--no-drawer-button</code></td>
				3623	<td>Does not display a drawer button</td>
				3624	<td>Optional; goes on <code>mdl-layout</code> element</td>
				3625	</tr>
				3626	<tr>
				3627	<td><code>mdl-layout--no-desktop-drawer-button</code></td>
				3628	<td>Does not display a drawer button in desktop mode</td>
				3629	<td>Optional; goes on <code>mdl-layout</code> element</td>
				3630	</tr>
				3631	<tr>
				3632	<td><code>mdl-layout--large-screen-only</code></td>
				3633	<td>Hides an element on smaller screens</td>
				3634	<td>Optional; goes on any descendant of <code>mdl-layout</code></td>
				3635	</tr>
				3636	<tr>
				3637	<td><code>mdl-layout--small-screen-only</code></td>
				3638	<td>Hides an element on larger screens</td>
				3639	<td>Optional; goes on any descendant of <code>mdl-layout</code></td>
				3640	</tr>
				3641	<tr>
				3642	<td><code>mdl-layout__header--waterfall</code></td>
				3643	<td>Allows a "waterfall" effect with multiple header lines</td>
				3644	<td>Optional; goes on header element</td>
				3645	</tr>
				3646	<tr>
				3647	<td><code>mdl-layout__header--waterfall-hide-top</code></td>
				3648	<td>Hides the top rather than the bottom rows on a waterfall header</td>
				3649	<td>Optional; goes on header element. Requires <code>mdl-layout__header--waterfall</code></td>
				3650	</tr>
				3651	<tr>
				3652	<td><code>mdl-layout__header--transparent</code></td>
				3653	<td>Makes header transparent (draws on top of layout background)</td>
				3654	<td>Optional; goes on header element</td>
				3655	</tr>
				3656	<tr>
				3657	<td><code>mdl-layout__header--seamed</code></td>
				3658	<td>Uses a header without a shadow</td>
				3659	<td>Optional; goes on header element</td>
				3660	</tr>
				3661	<tr>
				3662	<td><code>mdl-layout__tab-bar</code></td>
				3663	<td>Defines container as an MDL tab bar</td>
				3664	<td>Required on div element inside header (tabbed layout)</td>
				3665	</tr>
				3666	<tr>
				3667	<td><code>mdl-layout__tab</code></td>
				3668	<td>Defines anchor as MDL tab link</td>
				3669	<td>Required on tab bar anchor elements</td>
				3670	</tr>
				3671	<tr>
				3672	<td><code>is-active</code></td>
				3673	<td>Defines tab as default active tab</td>
				3674	<td>Optional; goes on tab bar anchor element and associated tab section element</td>
				3675	</tr>
				3676	<tr>
				3677	<td><code>mdl-layout__tab-panel</code></td>
				3678	<td>Defines container as tab content panel</td>
				3679	<td>Required on tab section elements</td>
				3680	</tr>
				3681	<tr>
				3682	<td><code>mdl-layout__tab-manual-switch</code></td>
				3683	<td>Disables tab switching when clicking on tab separators. Useful for disabling default behavior and setting up your own event listeners.</td>
				3684	<td>Optional; goes on tab bar element</td>
				3685	</tr>
				3686	<tr>
				3687	<td><code>mdl-layout--fixed-tabs</code></td>
				3688	<td>Uses fixed tabs instead of the default scrollable tabs</td>
				3689	<td>Optional; goes on outer div element (not div inside header)</td>
				3690	</tr>
				3691	</tbody>
				3692	</table>
				3693
				3694
				3695
				3696	</div>
				3697
				3698
				3699
				3700	<span class="docs-text-styling">
				3701	<h1 class="mdl-components__classname" id="layout-section/grid">Grid</h1>
				3702	</span>
				3703
				3704	<!-- Add warning, if the component has one -->
				3705
				3706	<!-- Generating snippets -->
				3707
				3708
				3709
				3710	<div class="snippet-group is-full-width">
				3711
				3712	<div class="snippet-header">
				3713	<div class="snippet-demos">
				3714	<div class="snippet-demo-padding"></div>
				3715
				3716
				3717
				3718
				3719	<div class="snippet-demo">
				3720	<div class="snippet-demo-container demo-grid demo-grid__grid">
				3721	<style>
				3722	.demo-grid .mdl-cell {
				3723	box-sizing: border-box;
				3724	background-color: #BDBDBD;
				3725	height: 200px;
				3726	padding-left: 8px;
				3727	padding-top: 4px;
				3728	color: white;
				3729	}
				3730	.demo-grid .mdl-grid:first-of-type .mdl-cell {
				3731	height: 50px;
				3732	}
				3733	</style>
				3734
				3735	<div class="mdl-grid">
				3736	<div class="mdl-cell mdl-cell--1-col">1</div>
				3737	<div class="mdl-cell mdl-cell--1-col">1</div>
				3738	<div class="mdl-cell mdl-cell--1-col">1</div>
				3739	<div class="mdl-cell mdl-cell--1-col">1</div>
				3740	<div class="mdl-cell mdl-cell--1-col">1</div>
				3741	<div class="mdl-cell mdl-cell--1-col">1</div>
				3742	<div class="mdl-cell mdl-cell--1-col">1</div>
				3743	<div class="mdl-cell mdl-cell--1-col">1</div>
				3744	<div class="mdl-cell mdl-cell--1-col">1</div>
				3745	<div class="mdl-cell mdl-cell--1-col">1</div>
				3746	<div class="mdl-cell mdl-cell--1-col">1</div>
				3747	<div class="mdl-cell mdl-cell--1-col">1</div>
				3748	</div>
				3749	<div class="mdl-grid">
				3750	<div class="mdl-cell mdl-cell--4-col">4</div>
				3751	<div class="mdl-cell mdl-cell--4-col">4</div>
				3752	<div class="mdl-cell mdl-cell--4-col">4</div>
				3753	</div>
				3754	<div class="mdl-grid">
				3755	<div class="mdl-cell mdl-cell--6-col">6</div>
				3756	<div class="mdl-cell mdl-cell--4-col">4</div>
				3757	<div class="mdl-cell mdl-cell--2-col">2</div>
				3758	</div>
				3759	<div class="mdl-grid">
				3760	<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
				3761	<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
				3762	<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
				3763	</div>
				3764
				3765
				3766	</div>
				3767	</div>
				3768	<div class="snippet-demo-padding"></div>
				3769	</div>
				3770	<div class="snippet-captions">
				3771	<div class="snippet-caption-padding"></div>
				3772
				3773	<div class="snippet-caption">
				3774	Responsive grid
				3775	</div>
				3776	<div class="snippet-caption-padding"></div>
				3777	</div>
				3778	</div>
				3779	<div class="snippet-code">
				3780	<pre class="language-markup codepen-button-enabled"><code id="grid/grid.html"><div class="mdl-grid">
				3781	<div class="mdl-cell mdl-cell--1-col">1</div>
				3782	<div class="mdl-cell mdl-cell--1-col">1</div>
				3783	<div class="mdl-cell mdl-cell--1-col">1</div>
				3784	<div class="mdl-cell mdl-cell--1-col">1</div>
				3785	<div class="mdl-cell mdl-cell--1-col">1</div>
				3786	<div class="mdl-cell mdl-cell--1-col">1</div>
				3787	<div class="mdl-cell mdl-cell--1-col">1</div>
				3788	<div class="mdl-cell mdl-cell--1-col">1</div>
				3789	<div class="mdl-cell mdl-cell--1-col">1</div>
				3790	<div class="mdl-cell mdl-cell--1-col">1</div>
				3791	<div class="mdl-cell mdl-cell--1-col">1</div>
				3792	<div class="mdl-cell mdl-cell--1-col">1</div>
				3793	</div>
				3794	<div class="mdl-grid">
				3795	<div class="mdl-cell mdl-cell--4-col">4</div>
				3796	<div class="mdl-cell mdl-cell--4-col">4</div>
				3797	<div class="mdl-cell mdl-cell--4-col">4</div>
				3798	</div>
				3799	<div class="mdl-grid">
				3800	<div class="mdl-cell mdl-cell--6-col">6</div>
				3801	<div class="mdl-cell mdl-cell--4-col">4</div>
				3802	<div class="mdl-cell mdl-cell--2-col">2</div>
				3803	</div>
				3804	<div class="mdl-grid">
				3805	<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
				3806	<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
				3807	<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
				3808	</div>
				3809	</code><div class="codepen-extra-css"><style>.mdl-cell {
				3810	box-sizing: border-box;
				3811	background-color: #BDBDBD;
				3812	height: 200px;
				3813	padding-left: 8px;
				3814	padding-top: 4px;
				3815	color: white;
				3816	}
				3817	.mdl-grid:first-of-type .mdl-cell {
				3818	height: 50px;
				3819	}
				3820	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				3821	</div>
				3822	</div>
				3823
				3824
				3825	<!-- Adding the demo page -->
				3826
				3827	<style>
				3828
				3829	</style>
				3830
				3831	<script>
				3832
				3833	</script>
				3834
				3835
				3836	<div class="docs-text-styling docs-readme">
				3837
				3838
				3839
				3840
				3841	<h2 id="introduction">Introduction</h2>
				3842	<p>The Material Design Lite (MDL) <strong>grid</strong> component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.</p>
				3843	<p>The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters. Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:</p>
				3844	<ul>
				3845	<li>If a cell doesn't fit in the row in one of the screen sizes, it flows into the following line.</li>
				3846	<li>If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.</li>
				3847	</ul>
				3848	<p>You can set a maximum grid width, after which the grid stays centered with padding on either side, by setting its <code>max-width</code> CSS property.</p>
				3849	<p>Grids are a fairly new and non-standardized feature in most user interfaces, and provide users with a way to view content in an organized manner that might otherwise be difficult to understand or retain. Their design and use is an important factor in the overall user experience.</p>
				3850	<h3 id="to-include-an-mdl-grid-component-">To include an MDL <strong>grid</strong> component:</h3>
				3851	<p> 1. Code a <code><div></code> element; this is the "outer" container, intended to hold all of the grid's cells. Style the div as desired (colors, font size, etc.).</p>
				3852	<pre><code class="language-markup"><div>
				3853	</div>
				3854	</code></pre>
				3855	<p> 2. Add the <code>mdl-grid</code> MDL class to the div using the <code>class</code> attribute.</p>
				3856	<pre><code><div class="mdl-grid">
				3857	</div>
				3858	</code></pre><p> 3. For each cell, code one "inner" div, including the text to be displayed.</p>
				3859	<pre><code class="language-markup"><div class="mdl-grid">
				3860	<div>Content</div>
				3861	<div>goes</div>
				3862	<div>here</div>
				3863	</div>
				3864	</code></pre>
				3865	<p> 4. Add the <code>mdl-cell</code> class and an <code>mdl-cell--COLUMN-col</code> class, where COLUMN specifies the column size for the cell, to the "inner" divs using the <code>class</code> attribute.</p>
				3866	<pre><code class="language-markup"><div class="mdl-grid">
				3867	<div class="mdl-cell mdl-cell--4-col">Content</div>
				3868	<div class="mdl-cell mdl-cell--4-col">goes</div>
				3869	<div class="mdl-cell mdl-cell--4-col">here</div>
				3870	</div>
				3871	</code></pre>
				3872	<p> 5. Optionally add an <code>mdl-cell--COLUMN-col-DEVICE</code> class, where COLUMN specifies the column size for the cell on a specific device, and DEVICE specifies the device type.</p>
				3873	<pre><code class="language-markup"><div class="mdl-grid">
				3874	<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">Content</div>
				3875	<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">goes</div>
				3876	<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">here</div>
				3877	</div>
				3878	</code></pre>
				3879	<p>The grid component is ready for use.</p>
				3880	<h4 id="examples">Examples</h4>
				3881	<p>A grid with five cells of column size 1.</p>
				3882	<pre><code class="language-markup"><div class="mdl-grid">
				3883	<div class="mdl-cell mdl-cell--1-col">CS 1</div>
				3884	<div class="mdl-cell mdl-cell--1-col">CS 1</div>
				3885	<div class="mdl-cell mdl-cell--1-col">CS 1</div>
				3886	<div class="mdl-cell mdl-cell--1-col">CS 1</div>
				3887	<div class="mdl-cell mdl-cell--1-col">CS 1</div>
				3888	</div>
				3889	</code></pre>
				3890	<p>A grid with three cells, one of column size 6, one of column size 4, and one of column size 2.</p>
				3891	<pre><code class="language-markup"><div class="mdl-grid">
				3892	<div class="mdl-cell mdl-cell--6-col">CS 6</div>
				3893	<div class="mdl-cell mdl-cell--4-col">CS 4</div>
				3894	<div class="mdl-cell mdl-cell--2-col">CS 2</div>
				3895	</div>
				3896	</code></pre>
				3897	<p>A grid with three cells of column size 6 that will display as column size 8 on a tablet device.</p>
				3898	<pre><code class="language-markup"><div class="mdl-grid">
				3899	<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
				3900	<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
				3901	<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
				3902	</div>
				3903	</code></pre>
				3904	<p>A grid with four cells of column size 2 that will display as column size 4 on a phone device.</p>
				3905	<pre><code class="language-markup"><div class="mdl-grid">
				3906	<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
				3907	<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
				3908	<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
				3909	<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
				3910	</div>
				3911	</code></pre>
				3912	<h2 id="configuration-options">Configuration options</h2>
				3913	<p>The MDL CSS classes apply various predefined visual enhancements and behavioral effects to the grid. The table below lists the available classes and their effects.</p>
				3914	<table>
				3915	<thead>
				3916	<tr>
				3917	<th>MDL class</th>
				3918	<th>Effect</th>
				3919	<th>Remarks</th>
				3920	</tr>
				3921	</thead>
				3922	<tbody>
				3923	<tr>
				3924	<td><code>mdl-grid</code></td>
				3925	<td>Defines a container as an MDL grid component</td>
				3926	<td>Required on "outer" div element</td>
				3927	</tr>
				3928	<tr>
				3929	<td><code>mdl-cell</code></td>
				3930	<td>Defines a container as an MDL cell</td>
				3931	<td>Required on "inner" div elements</td>
				3932	</tr>
				3933	<tr>
				3934	<td><code>mdl-grid--no-spacing</code></td>
				3935	<td>Modifies the grid cells to have no margin between them.</td>
				3936	<td>Optional on grid container.</td>
				3937	</tr>
				3938	<tr>
				3939	<td><code>mdl-cell--N-col</code></td>
				3940	<td>Sets the column size for the cell to N</td>
				3941	<td>N is 1-12 inclusive, defaults to 4; optional on "inner" div elements</td>
				3942	</tr>
				3943	<tr>
				3944	<td><code>mdl-cell--N-col-desktop</code></td>
				3945	<td>Sets the column size for the cell to N in desktop mode only</td>
				3946	<td>N is 1-12 inclusive; optional on "inner" div elements</td>
				3947	</tr>
				3948	<tr>
				3949	<td><code>mdl-cell--N-col-tablet</code></td>
				3950	<td>Sets the column size for the cell to N in tablet mode only</td>
				3951	<td>N is 1-8 inclusive; optional on "inner" div elements</td>
				3952	</tr>
				3953	<tr>
				3954	<td><code>mdl-cell--N-col-phone</code></td>
				3955	<td>Sets the column size for the cell to N in phone mode only</td>
				3956	<td>N is 1-4 inclusive; optional on "inner" div elements</td>
				3957	</tr>
				3958	<tr>
				3959	<td><code>mdl-cell--N-offset</code></td>
				3960	<td>Adds N columns of whitespace before the cell</td>
				3961	<td>N is 1-11 inclusive; optional on "inner" div elements</td>
				3962	</tr>
				3963	<tr>
				3964	<td><code>mdl-cell--N-offset-desktop</code></td>
				3965	<td>Adds N columns of whitespace before the cell in desktop mode</td>
				3966	<td>N is 1-11 inclusive; optional on "inner" div elements</td>
				3967	</tr>
				3968	<tr>
				3969	<td><code>mdl-cell--N-offset-tablet</code></td>
				3970	<td>Adds N columns of whitespace before the cell in tablet mode</td>
				3971	<td>N is 1-7 inclusive; optional on "inner" div elements</td>
				3972	</tr>
				3973	<tr>
				3974	<td><code>mdl-cell--N-offset-phone</code></td>
				3975	<td>Adds N columns of whitespace before the cell in phone mode</td>
				3976	<td>N is 1-3 inclusive; optional on "inner" div elements</td>
				3977	</tr>
				3978	<tr>
				3979	<td><code>mdl-cell--order-N</code></td>
				3980	<td>Reorders cell to position N</td>
				3981	<td>N is 1-12 inclusive; optional on "inner" div elements</td>
				3982	</tr>
				3983	<tr>
				3984	<td><code>mdl-cell--order-N-desktop</code></td>
				3985	<td>Reorders cell to position N when in desktop mode</td>
				3986	<td>N is 1-12 inclusive; optional on "inner" div elements</td>
				3987	</tr>
				3988	<tr>
				3989	<td><code>mdl-cell--order-N-tablet</code></td>
				3990	<td>Reorders cell to position N when in tablet mode</td>
				3991	<td>N is 1-12 inclusive; optional on "inner" div elements</td>
				3992	</tr>
				3993	<tr>
				3994	<td><code>mdl-cell--order-N-phone</code></td>
				3995	<td>Reorders cell to position N when in phone mode</td>
				3996	<td>N is 1-12 inclusive; optional on "inner" div elements</td>
				3997	</tr>
				3998	<tr>
				3999	<td><code>mdl-cell--hide-desktop</code></td>
				4000	<td>Hides the cell when in desktop mode</td>
				4001	<td>Optional on "inner" div elements</td>
				4002	</tr>
				4003	<tr>
				4004	<td><code>mdl-cell--hide-tablet</code></td>
				4005	<td>Hides the cell when in tablet mode</td>
				4006	<td>Optional on "inner" div elements</td>
				4007	</tr>
				4008	<tr>
				4009	<td><code>mdl-cell--hide-phone</code></td>
				4010	<td>Hides the cell when in phone mode</td>
				4011	<td>Optional on "inner" div elements</td>
				4012	</tr>
				4013	<tr>
				4014	<td><code>mdl-cell--stretch</code></td>
				4015	<td>Stretches the cell vertically to fill the parent</td>
				4016	<td>Default; optional on "inner" div elements</td>
				4017	</tr>
				4018	<tr>
				4019	<td><code>mdl-cell--top</code></td>
				4020	<td>Aligns the cell to the top of the parent</td>
				4021	<td>Optional on "inner" div elements</td>
				4022	</tr>
				4023	<tr>
				4024	<td><code>mdl-cell--middle</code></td>
				4025	<td>Aligns the cell to the middle of the parent</td>
				4026	<td>Optional on "inner" div elements</td>
				4027	</tr>
				4028	<tr>
				4029	<td><code>mdl-cell--bottom</code></td>
				4030	<td>Aligns the cell to the bottom of the parent</td>
				4031	<td>Optional on "inner" div elements</td>
				4032	</tr>
				4033	</tbody>
				4034	</table>
				4035
				4036
				4037
				4038	</div>
				4039
				4040
				4041
				4042	<span class="docs-text-styling">
				4043	<h1 class="mdl-components__classname" id="layout-section/tabs">Tabs</h1>
				4044	</span>
				4045
				4046	<!-- Add warning, if the component has one -->
				4047
				4048	<!-- Generating snippets -->
				4049
				4050
				4051
				4052	<div class="snippet-group">
				4053
				4054	<div class="snippet-header">
				4055	<div class="snippet-demos">
				4056	<div class="snippet-demo-padding"></div>
				4057
				4058
				4059
				4060
				4061	<div class="snippet-demo">
				4062	<div class="snippet-demo-container demo-tabs demo-tabs__tabs">
				4063	<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
				4064	<div class="mdl-tabs__tab-bar">
				4065	<a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
				4066	<a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
				4067	<a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
				4068	</div>
				4069
				4070	<div class="mdl-tabs__panel is-active" id="starks-panel">
				4071	<ul>
				4072	<li>Eddard</li>
				4073	<li>Catelyn</li>
				4074	<li>Robb</li>
				4075	<li>Sansa</li>
				4076	<li>Brandon</li>
				4077	<li>Arya</li>
				4078	<li>Rickon</li>
				4079	</ul>
				4080	</div>
				4081	<div class="mdl-tabs__panel" id="lannisters-panel">
				4082	<ul>
				4083	<li>Tywin</li>
				4084	<li>Cersei</li>
				4085	<li>Jamie</li>
				4086	<li>Tyrion</li>
				4087	</ul>
				4088	</div>
				4089	<div class="mdl-tabs__panel" id="targaryens-panel">
				4090	<ul>
				4091	<li>Viserys</li>
				4092	<li>Daenerys</li>
				4093	</ul>
				4094	</div>
				4095	</div>
				4096
				4097	</div>
				4098	</div>
				4099	<div class="snippet-demo-padding"></div>
				4100	</div>
				4101	<div class="snippet-captions">
				4102	<div class="snippet-caption-padding"></div>
				4103
				4104	<div class="snippet-caption">
				4105	Content tabs
				4106	</div>
				4107	<div class="snippet-caption-padding"></div>
				4108	</div>
				4109	</div>
				4110	<div class="snippet-code">
				4111	<pre class="language-markup codepen-button-enabled"><code id="tabs/tabs.html"><div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
				4112	<div class="mdl-tabs__tab-bar">
				4113	<a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
				4114	<a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
				4115	<a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
				4116	</div>
				4117
				4118	<div class="mdl-tabs__panel is-active" id="starks-panel">
				4119	<ul>
				4120	<li>Eddard</li>
				4121	<li>Catelyn</li>
				4122	<li>Robb</li>
				4123	<li>Sansa</li>
				4124	<li>Brandon</li>
				4125	<li>Arya</li>
				4126	<li>Rickon</li>
				4127	</ul>
				4128	</div>
				4129	<div class="mdl-tabs__panel" id="lannisters-panel">
				4130	<ul>
				4131	<li>Tywin</li>
				4132	<li>Cersei</li>
				4133	<li>Jamie</li>
				4134	<li>Tyrion</li>
				4135	</ul>
				4136	</div>
				4137	<div class="mdl-tabs__panel" id="targaryens-panel">
				4138	<ul>
				4139	<li>Viserys</li>
				4140	<li>Daenerys</li>
				4141	</ul>
				4142	</div>
				4143	</div>
				4144	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				4145	body {
				4146	padding: 20px;
				4147	background: #fafafa;
				4148	position: relative;
				4149	}
				4150	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				4151	</div>
				4152	</div>
				4153
				4154
				4155	<!-- Adding the demo page -->
				4156
				4157	<style>
				4158
				4159	</style>
				4160
				4161	<script>
				4162
				4163	</script>
				4164
				4165
				4166	<div class="docs-text-styling docs-readme">
				4167
				4168
				4169
				4170
				4171	<h2 id="introduction">Introduction</h2>
				4172	<p>The Material Design Lite (MDL) <strong>tab</strong> component is a user interface element that allows different content blocks to share the same screen space in a mutually exclusive manner. Tabs are always presented in sets of two or more, and they make it easy to explore and switch among different views or functional aspects of an app, or to browse categorized data sets individually. Tabs serve as "headings" for their respective content; the <em>active</em> tab — the one whose content is currently displayed — is always visually distinguished from the others so the user knows which heading the current content belongs to.</p>
				4173	<p>Tabs are an established but non-standardized feature in user interfaces, and allow users to view different, but often related, blocks of content (often called <em>panels</em>). Tabs save screen real estate and provide intuitive and logical access to data while reducing navigation and associated user confusion. Their design and use is an important factor in the overall user experience. See the tab component's <a href="http://www.google.com/design/spec/components/tabs.html">Material Design specifications page</a> for details.</p>
				4174	<h3 id="to-include-a-set-of-mdl-tab-components-">To include a set of MDL <strong>tab</strong> components:</h3>
				4175	<p> 1. Code a <code><div></code> element; this is the "outer" div, intended to contain all of the tabs and their content.</p>
				4176	<pre><code class="language-markup"><div>
				4177	</div>
				4178	</code></pre>
				4179	<p> 2. Inside the "outer" div, code one "inner" div for the tabs themselves, and one for each tab's content, all siblings. That is, for three content tabs, you would code four "inner" divs.</p>
				4180	<pre><code class="language-markup"><div>
				4181	<div>
				4182	...
				4183	</div>
				4184	<div>
				4185	...
				4186	</div>
				4187	<div>
				4188	...
				4189	</div>
				4190	<div>
				4191	...
				4192	</div>
				4193	</div>
				4194	</code></pre>
				4195	<p> 3. Inside the first "inner" div (the tabs), code one anchor <code><a></code> (link) tag for each tab. Include <code>href</code> attributes with values to match the tabs' <code>id</code> attribute values, and some brief link text. On the remaining "inner" divs (the content), code <code>id</code> attributes whose values match the links' <code>href</code>s.</p>
				4196	<pre><code class="language-markup"><div>
				4197	<div>
				4198	<a href="#tab1">Tab One</a>
				4199	<a href="#tab2">Tab Two</a>
				4200	<a href="#tab3">Tab Three</a>
				4201	</div>
				4202	<div id="tab1">
				4203	...
				4204	</div>
				4205	<div id="tab2">
				4206	...
				4207	</div>
				4208	<div id="tab3">
				4209	...
				4210	</div>
				4211	</div>
				4212	</code></pre>
				4213	<p> 4. Inside the remaining "inner" divs, code the content you intend to display in each panel; use standard HTML tags to structure the content as desired.</p>
				4214	<pre><code class="language-markup"><div>
				4215	<div>
				4216	<a href="#tab1">Tab One</a>
				4217	<a href="#tab2">Tab Two</a>
				4218	<a href="#tab3">Tab Three</a>
				4219	</div>
				4220	<div id="tab1">
				4221	<p>First tab's content.</p>
				4222	</div>
				4223	<div id="tab2">
				4224	<p>Second tab's content.</p>
				4225	</div>
				4226	<div id="tab3">
				4227	<p>Third tab's content.</p>
				4228	</div>
				4229	</div>
				4230	</code></pre>
				4231	<p> 5. Add one or more MDL classes, separated by spaces, to the "outer" and "inner" divs using the <code>class</code> attribute; be sure to include the <code>is-active</code> class on the tab you want to be displayed by default.</p>
				4232	<pre><code class="language-markup"><div class="mdl-tabs mdl-js-tabs">
				4233	<div class="mdl-tabs__tab-bar">
				4234	<a href="#tab1" class="mdl-tabs__tab">Tab One</a>
				4235	<a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
				4236	<a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
				4237	</div>
				4238	<div class="mdl-tabs__panel is-active" id="tab1">
				4239	<p>First tab's content.</p>
				4240	</div>
				4241	<div class="mdl-tabs__panel" id="tab2">
				4242	<p>Second tab's content.</p>
				4243	</div>
				4244	<div class="mdl-tabs__panel" id="tab3">
				4245	<p>Third tab's content.</p>
				4246	</div>
				4247	</div>
				4248	</code></pre>
				4249	<p>The tab components are ready for use.</p>
				4250	<h4 id="example">Example</h4>
				4251	<p>Three tabs, with ripple effect on tab links.</p>
				4252	<pre><code class="language-markup"><div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
				4253	<div class="mdl-tabs__tab-bar">
				4254	<a href="#about-panel" class="mdl-tabs__tab is-active">About the Beatles</a>
				4255	<a href="#members-panel" class="mdl-tabs__tab">Members</a>
				4256	<a href="#albums-panel" class="mdl-tabs__tab">Discography</a>
				4257	</div>
				4258	<div class="mdl-tabs__panel is-active" id="about-panel">
				4259	<p><b>The Beatles</b> were a four-piece musical group from Liverpool, England.
				4260	Formed in 1960, their career spanned just over a decade, yet they are widely
				4261	regarded as the most influential band in history.</p>
				4262	<p>Their songs are among the best-loved music of all time. It is said that every
				4263	minute of every day, a radio station somewhere is playing a Beatles song.</p>
				4264	</div>
				4265	<div class="mdl-tabs__panel" id="members-panel">
				4266	<p>The Beatles' members were:</p>
				4267	<ul>
				4268	<li>John Lennon (1940-1980)</li>
				4269	<li>Paul McCartney (1942-)</li>
				4270	<li>George Harrison (1943-2001)</li>
				4271	<li>Ringo Starr (1940-)</li>
				4272	</ul>
				4273	</div>
				4274	<div class="mdl-tabs__panel" id="albums-panel">
				4275	<p>The Beatles' original UK LPs, in order of release:</p>
				4276	<ol>
				4277	<li>Please Please Me (1963)</li>
				4278	<li>With the Beatles (1963)</li>
				4279	<li>A Hard Day's Night (1964)</li>
				4280	<li>Beatles for Sale (1964)</li>
				4281	<li>Help! (1965)</li>
				4282	<li>Rubber Soul (1965)</li>
				4283	<li>Revolver (1966)</li>
				4284	<li>Sgt. Pepper's Lonely Hearts Club Band (1967)</li>
				4285	<li>The Beatles ("The White Album", 1968)</li>
				4286	<li>Yellow Submarine (1969)</li>
				4287	<li>Abbey Road (1969)</li>
				4288	<li>Let It Be (1970)</li>
				4289	</ol>
				4290	</div>
				4291	</div>
				4292	</code></pre>
				4293	<h2 id="configuration-options">Configuration options</h2>
				4294	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the tabs. The table below lists the available classes and their effects.</p>
				4295	<table>
				4296	<thead>
				4297	<tr>
				4298	<th>MDL class</th>
				4299	<th>Effect</th>
				4300	<th>Remarks</th>
				4301	</tr>
				4302	</thead>
				4303	<tbody>
				4304	<tr>
				4305	<td><code>mdl-tabs</code></td>
				4306	<td>Defines a tabs container as an MDL component</td>
				4307	<td>Required on "outer" div element</td>
				4308	</tr>
				4309	<tr>
				4310	<td><code>mdl-js-tabs</code></td>
				4311	<td>Assigns basic MDL behavior to tabs container</td>
				4312	<td>Required on "outer" div element</td>
				4313	</tr>
				4314	<tr>
				4315	<td><code>mdl-js-ripple-effect</code></td>
				4316	<td>Applies <em>ripple</em> click effect to tab links</td>
				4317	<td>Optional; goes on "outer" div element</td>
				4318	</tr>
				4319	<tr>
				4320	<td><code>mdl-tabs__tab-bar</code></td>
				4321	<td>Defines a container as an MDL tabs link bar</td>
				4322	<td>Required on first "inner" div element</td>
				4323	</tr>
				4324	<tr>
				4325	<td><code>mdl-tabs__tab</code></td>
				4326	<td>Defines an anchor (link) as an MDL tab activator</td>
				4327	<td>Required on all links in first "inner" div element</td>
				4328	</tr>
				4329	<tr>
				4330	<td><code>is-active</code></td>
				4331	<td>Defines a tab as the default display tab</td>
				4332	<td>Required on one (and only one) of the "inner" div (tab) elements</td>
				4333	</tr>
				4334	<tr>
				4335	<td><code>mdl-tabs__panel</code></td>
				4336	<td>Defines a container as tab content</td>
				4337	<td>Required on each of the "inner" div (tab) elements</td>
				4338	</tr>
				4339	</tbody>
				4340	</table>
				4341
				4342
				4343
				4344	</div>
				4345
				4346
				4347
				4348	<span class="docs-text-styling">
				4349	<h1 class="mdl-components__classname" id="layout-section/footer">Footer</h1>
				4350	</span>
				4351
				4352	<!-- Add warning, if the component has one -->
				4353
				4354	<!-- Generating snippets -->
				4355
				4356
				4357
				4358	<div class="snippet-group is-full-width">
				4359
				4360	<div class="snippet-header">
				4361	<div class="snippet-demos">
				4362	<div class="snippet-demo-padding"></div>
				4363
				4364
				4365
				4366
				4367	<div class="snippet-demo">
				4368	<div class="snippet-demo-container demo-footer demo-footer__mega-footer">
				4369	<footer class="mdl-mega-footer">
				4370	<div class="mdl-mega-footer__middle-section">
				4371
				4372	<div class="mdl-mega-footer__drop-down-section">
				4373	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4374	<h1 class="mdl-mega-footer__heading">Features</h1>
				4375	<ul class="mdl-mega-footer__link-list">
				4376	<li><a href="#">About</a></li>
				4377	<li><a href="#">Terms</a></li>
				4378	<li><a href="#">Partners</a></li>
				4379	<li><a href="#">Updates</a></li>
				4380	</ul>
				4381	</div>
				4382
				4383	<div class="mdl-mega-footer__drop-down-section">
				4384	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4385	<h1 class="mdl-mega-footer__heading">Details</h1>
				4386	<ul class="mdl-mega-footer__link-list">
				4387	<li><a href="#">Specs</a></li>
				4388	<li><a href="#">Tools</a></li>
				4389	<li><a href="#">Resources</a></li>
				4390	</ul>
				4391	</div>
				4392
				4393	<div class="mdl-mega-footer__drop-down-section">
				4394	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4395	<h1 class="mdl-mega-footer__heading">Technology</h1>
				4396	<ul class="mdl-mega-footer__link-list">
				4397	<li><a href="#">How it works</a></li>
				4398	<li><a href="#">Patterns</a></li>
				4399	<li><a href="#">Usage</a></li>
				4400	<li><a href="#">Products</a></li>
				4401	<li><a href="#">Contracts</a></li>
				4402	</ul>
				4403	</div>
				4404
				4405	<div class="mdl-mega-footer__drop-down-section">
				4406	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4407	<h1 class="mdl-mega-footer__heading">FAQ</h1>
				4408	<ul class="mdl-mega-footer__link-list">
				4409	<li><a href="#">Questions</a></li>
				4410	<li><a href="#">Answers</a></li>
				4411	<li><a href="#">Contact us</a></li>
				4412	</ul>
				4413	</div>
				4414
				4415	</div>
				4416
				4417	<div class="mdl-mega-footer__bottom-section">
				4418	<div class="mdl-logo">Title</div>
				4419	<ul class="mdl-mega-footer__link-list">
				4420	<li><a href="#">Help</a></li>
				4421	<li><a href="#">Privacy & Terms</a></li>
				4422	</ul>
				4423	</div>
				4424
				4425	</footer>
				4426
				4427	</div>
				4428	</div>
				4429	<div class="snippet-demo-padding"></div>
				4430	</div>
				4431	<div class="snippet-captions">
				4432	<div class="snippet-caption-padding"></div>
				4433
				4434	<div class="snippet-caption">
				4435	Mega footer
				4436	</div>
				4437	<div class="snippet-caption-padding"></div>
				4438	</div>
				4439	</div>
				4440	<div class="snippet-code">
				4441	<pre class="language-markup codepen-button-enabled"><code id="footer/mega-footer.html"><footer class="mdl-mega-footer">
				4442	<div class="mdl-mega-footer__middle-section">
				4443
				4444	<div class="mdl-mega-footer__drop-down-section">
				4445	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4446	<h1 class="mdl-mega-footer__heading">Features</h1>
				4447	<ul class="mdl-mega-footer__link-list">
				4448	<li><a href="#">About</a></li>
				4449	<li><a href="#">Terms</a></li>
				4450	<li><a href="#">Partners</a></li>
				4451	<li><a href="#">Updates</a></li>
				4452	</ul>
				4453	</div>
				4454
				4455	<div class="mdl-mega-footer__drop-down-section">
				4456	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4457	<h1 class="mdl-mega-footer__heading">Details</h1>
				4458	<ul class="mdl-mega-footer__link-list">
				4459	<li><a href="#">Specs</a></li>
				4460	<li><a href="#">Tools</a></li>
				4461	<li><a href="#">Resources</a></li>
				4462	</ul>
				4463	</div>
				4464
				4465	<div class="mdl-mega-footer__drop-down-section">
				4466	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4467	<h1 class="mdl-mega-footer__heading">Technology</h1>
				4468	<ul class="mdl-mega-footer__link-list">
				4469	<li><a href="#">How it works</a></li>
				4470	<li><a href="#">Patterns</a></li>
				4471	<li><a href="#">Usage</a></li>
				4472	<li><a href="#">Products</a></li>
				4473	<li><a href="#">Contracts</a></li>
				4474	</ul>
				4475	</div>
				4476
				4477	<div class="mdl-mega-footer__drop-down-section">
				4478	<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
				4479	<h1 class="mdl-mega-footer__heading">FAQ</h1>
				4480	<ul class="mdl-mega-footer__link-list">
				4481	<li><a href="#">Questions</a></li>
				4482	<li><a href="#">Answers</a></li>
				4483	<li><a href="#">Contact us</a></li>
				4484	</ul>
				4485	</div>
				4486
				4487	</div>
				4488
				4489	<div class="mdl-mega-footer__bottom-section">
				4490	<div class="mdl-logo">Title</div>
				4491	<ul class="mdl-mega-footer__link-list">
				4492	<li><a href="#">Help</a></li>
				4493	<li><a href="#">Privacy & Terms</a></li>
				4494	</ul>
				4495	</div>
				4496
				4497	</footer>
				4498	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				4499	</div>
				4500	</div>
				4501
				4502
				4503
				4504
				4505	<div class="snippet-group is-full-width">
				4506
				4507	<div class="snippet-header">
				4508	<div class="snippet-demos">
				4509	<div class="snippet-demo-padding"></div>
				4510
				4511
				4512
				4513
				4514	<div class="snippet-demo">
				4515	<div class="snippet-demo-container demo-footer demo-footer__mini-footer">
				4516	<footer class="mdl-mini-footer">
				4517	<div class="mdl-mini-footer__left-section">
				4518	<div class="mdl-logo">Title</div>
				4519	<ul class="mdl-mini-footer__link-list">
				4520	<li><a href="#">Help</a></li>
				4521	<li><a href="#">Privacy & Terms</a></li>
				4522	</ul>
				4523	</div>
				4524	</footer>
				4525
				4526	</div>
				4527	</div>
				4528	<div class="snippet-demo-padding"></div>
				4529	</div>
				4530	<div class="snippet-captions">
				4531	<div class="snippet-caption-padding"></div>
				4532
				4533	<div class="snippet-caption">
				4534	Mini footer
				4535	</div>
				4536	<div class="snippet-caption-padding"></div>
				4537	</div>
				4538	</div>
				4539	<div class="snippet-code">
				4540	<pre class="language-markup codepen-button-enabled"><code id="footer/mini-footer.html"><footer class="mdl-mini-footer">
				4541	<div class="mdl-mini-footer__left-section">
				4542	<div class="mdl-logo">Title</div>
				4543	<ul class="mdl-mini-footer__link-list">
				4544	<li><a href="#">Help</a></li>
				4545	<li><a href="#">Privacy & Terms</a></li>
				4546	</ul>
				4547	</div>
				4548	</footer>
				4549	</code><div class="codepen-extra-css"><style></style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				4550	</div>
				4551	</div>
				4552
				4553
				4554	<!-- Adding the demo page -->
				4555
				4556	<style>
				4557
				4558	</style>
				4559
				4560	<script>
				4561
				4562	</script>
				4563
				4564
				4565	<div class="docs-text-styling docs-readme">
				4566
				4567
				4568
				4569
				4570	<h2 id="introduction">Introduction</h2>
				4571	<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 "footer", it may be placed at any appropriate location on a device screen, either before or after other content.</p>
				4572	<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>
				4573	<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>
				4574	<h3 id="to-include-an-mdl-mega-footer-component-">To include an MDL <strong>mega-footer</strong> component:</h3>
				4575	<p> 1a. Code a <code><footer></code> element. Inside the footer, include one <code><div></code> element for each content section, typically three: <em>top</em>, <em>middle</em>, and <em>bottom</em>.</p>
				4576	<pre><code class="language-markup"><footer>
				4577	<div>
				4578	...
				4579	</div>
				4580	<div>
				4581	...
				4582	</div>
				4583	<div>
				4584	...
				4585	</div>
				4586	</footer>
				4587	</code></pre>
				4588	<p> 1b. Add the appropriate MDL classes to the footer and divs using the <code>class</code> attribute.</p>
				4589	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4590	<div class="mdl-mega-footer__top-section">
				4591	...
				4592	</div>
				4593	<div class="mdl-mega-footer__middle-section">
				4594	...
				4595	</div>
				4596	<div class="mdl-mega-footer__bottom-section">
				4597	...
				4598	</div>
				4599	</footer>
				4600	</code></pre>
				4601	<p> 2a. Inside the top section div, code two sibling "inner" divs for the <em>left</em> and <em>right</em> content sections.</p>
				4602	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4603	<div class="mdl-mega-footer__top-section">
				4604	<div>
				4605	...
				4606	</div>
				4607	<div>
				4608	...
				4609	</div>
				4610	</div>
				4611	<div class="mdl-mega-footer__middle-section">
				4612	...
				4613	</div>
				4614	<div class="mdl-mega-footer__bottom-section">
				4615	...
				4616	</div>
				4617	</footer>
				4618	</code></pre>
				4619	<p> 2b. Add the appropriate MDL classes to the two "inner" left and right divs using the <code>class</code> attribute.</p>
				4620	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4621	<div class="mdl-mega-footer__top-section">
				4622	<div class="mdl-mega-footer__left-section">
				4623	...
				4624	</div>
				4625	<div class="mdl-mega-footer__right-section">
				4626	...
				4627	</div>
				4628	</div>
				4629	<div class="mdl-mega-footer__middle-section">
				4630	...
				4631	</div>
				4632	<div class="mdl-mega-footer__bottom-section">
				4633	...
				4634	</div>
				4635	</footer>
				4636	</code></pre>
				4637	<p> 3a. Inside the middle section div, code one or more sibling "inner" divs for the <em>drop-down</em> content sections. That is, for two drop-down sections, you would code two divs.</p>
				4638	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4639	<div class="mdl-mega-footer__top-section">
				4640	<div class="mdl-mega-footer__left-section">
				4641	...
				4642	</div>
				4643	<div class="mdl-mega-footer__right-section">
				4644	...
				4645	</div>
				4646	</div>
				4647	<div class="mdl-mega-footer__middle-section">
				4648	<div>
				4649	...
				4650	</div>
				4651	<div>
				4652	...
				4653	</div>
				4654	</div>
				4655	<div class="mdl-mega-footer__bottom-section">
				4656	...
				4657	</div>
				4658	</footer>
				4659	</code></pre>
				4660	<p> 3b. Add the appropriate MDL classes to the two "inner" drop-down divs using the <code>class</code> attribute.</p>
				4661	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4662	<div class="mdl-mega-footer__top-section">
				4663	<div class="mdl-mega-footer__left-section">
				4664	...
				4665	</div>
				4666	<div class="mdl-mega-footer__right-section">
				4667	...
				4668	</div>
				4669	</div>
				4670	<div class="mdl-mega-footer__middle-section">
				4671	<div class="mdl-mega-footer__drop-down-section">
				4672	...
				4673	</div>
				4674	<div class="mdl-mega-footer__drop-down-section">
				4675	...
				4676	</div>
				4677	</div>
				4678	<div class="mdl-mega-footer__bottom-section">
				4679	...
				4680	</div>
				4681	</footer>
				4682	</code></pre>
				4683	<p> 4a. Inside the bottom section div, code an "inner" div for the section heading and a sibling unordered list for the bottom section links.</p>
				4684	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4685	<div class="mdl-mega-footer__top-section">
				4686	<div class="mdl-mega-footer__left-section">
				4687	...
				4688	</div>
				4689	<div class="mdl-mega-footer__right-section">
				4690	...
				4691	</div>
				4692	</div>
				4693	<div class="mdl-mega-footer__middle-section">
				4694	<div class="mdl-mega-footer__drop-down-section">
				4695	...
				4696	</div>
				4697	<div class="mdl-mega-footer__drop-down-section">
				4698	...
				4699	</div>
				4700	</div>
				4701	<div class="mdl-mega-footer__bottom-section">
				4702	<div>
				4703	...
				4704	</div>
				4705	<ul>
				4706	...
				4707	</ul>
				4708	</div>
				4709	</footer>
				4710	</code></pre>
				4711	<p> 4b. Add the appropriate MDL classes to the "inner" div heading and list using the <code>class</code> attribute.</p>
				4712	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4713	<div class="mdl-mega-footer__top-section">
				4714	<div class="mdl-mega-footer__left-section">
				4715	...
				4716	</div>
				4717	<div class="mdl-mega-footer__right-section">
				4718	...
				4719	</div>
				4720	</div>
				4721	<div class="mdl-mega-footer__middle-section">
				4722	<div class="mdl-mega-footer__drop-down-section">
				4723	...
				4724	</div>
				4725	<div class="mdl-mega-footer__drop-down-section">
				4726	...
				4727	</div>
				4728	</div>
				4729	<div class="mdl-mega-footer__bottom-section">
				4730	<div class="mdl-logo">
				4731	</div>
				4732	<ul class="mdl-mega-footer__link-list">
				4733	...
				4734	</ul>
				4735	</div>
				4736	</footer>
				4737	</code></pre>
				4738	<p> 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>
				4739	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4740	<div class="mdl-mega-footer__top-section">
				4741	<div class="mdl-mega-footer__left-section">
				4742	<button class="mdl-mega-footer__social-btn"></button>
				4743	<button class="mdl-mega-footer__social-btn"></button>
				4744	<button class="mdl-mega-footer__social-btn"></button>
				4745	</div>
				4746	<div class="mdl-mega-footer__right-section">
				4747	<a href="">Link 1</a>
				4748	<a href="">Link 2</a>
				4749	<a href="">Link 3</a>
				4750	</div>
				4751	</div>
				4752	<div class="mdl-mega-footer__middle-section">
				4753	<div class="mdl-mega-footer__drop-down-section">
				4754	<h1 class="mdl-mega-footer__heading">Drop-down 1 Heading</h1>
				4755	<ul class="mdl-mega-footer__link-list">
				4756	<li><a href="">Link A</a></li>
				4757	<li><a href="">Link B</a></li>
				4758	<li><a href="">Link C</a></li>
				4759	<li><a href="">Link D</a></li>
				4760	</ul>
				4761	</div>
				4762	<div class="mdl-mega-footer__drop-down-section">
				4763	<h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
				4764	<ul class="mdl-mega-footer__link-list">
				4765	<li><a href="">Link A</a></li>
				4766	<li><a href="">Link B</a></li>
				4767	<li><a href="">Link C</a></li>
				4768	</ul>
				4769	</div>
				4770	</div>
				4771	<div class="mdl-mega-footer__bottom-section">
				4772	<div class="mdl-logo">
				4773	Mega-Footer Bottom Section Heading
				4774	</div>
				4775	<ul class="mdl-mega-footer__link-list">
				4776	<li><a href="">Link A</a></li>
				4777	<li><a href="">Link B</a></li>
				4778	</ul>
				4779	</div>
				4780	</footer>
				4781	</code></pre>
				4782	<p>The mega-footer component is ready for use.</p>
				4783	<h4 id="examples">Examples</h4>
				4784	<p>A mega-footer component with three sections and two drop-down sections in the middle section.</p>
				4785	<pre><code class="language-markup"><footer class="mdl-mega-footer">
				4786	<div class="mdl-mega-footer__top-section">
				4787	<div class="mdl-mega-footer__left-section">
				4788	<button class="mdl-mega-footer__social-btn"></button>
				4789	<button class="mdl-mega-footer__social-btn"></button>
				4790	<button class="mdl-mega-footer__social-btn"></button>
				4791	</div>
				4792	<div class="mdl-mega-footer__right-section">
				4793	<a href="#">Introduction</a>
				4794	<a href="#">App Status Dashboard</a>
				4795	<a href="#">Terms of Service</a>
				4796	</div>
				4797	</div>
				4798	<div class="mdl-mega-footer__middle-section">
				4799	<div class="mdl-mega-footer__drop-down-section">
				4800	<h1 class="mdl-mega-footer__heading">Learning and Support</h1>
				4801	<ul class="mdl-mega-footer__link-list">
				4802	<li><a href="#">Resource Center</a></li>
				4803	<li><a href="#">Help Center</a></li>
				4804	<li><a href="#">Community</a></li>
				4805	<li><a href="#">Learn with Google</a></li>
				4806	<li><a href="#">Small Business Community</a></li>
				4807	<li><a href="#">Think Insights</a></li>
				4808	</ul>
				4809	</div>
				4810	<div class="mdl-mega-footer__drop-down-section">
				4811	<h1 class="mdl-mega-footer__heading">Just for Developers</h1>
				4812	<ul class="mdl-mega-footer__link-list">
				4813	<li><a href="#">Google Developers</a></li>
				4814	<li><a href="#">AdWords API</a></li>
				4815	<li><a href="#">AdWords Scipts</a></li>
				4816	<li><a href="#">AdWords Remarketing Tag</a></li>
				4817	</ul>
				4818	</div>
				4819	</div>
				4820	<div class="mdl-mega-footer__bottom-section">
				4821	<div class="mdl-logo">
				4822	More Information
				4823	</div>
				4824	<ul class="mdl-mega-footer__link-list">
				4825	<li><a href="#">Help</a></li>
				4826	<li><a href="#">Privacy and Terms</a></li>
				4827	</ul>
				4828	</div>
				4829	</footer>
				4830	</code></pre>
				4831	<h3 id="to-include-an-mdl-mini-footer-component-">To include an MDL <strong>mini-footer</strong> component:</h3>
				4832	<p> 1a. Code a <code><footer></code> element. Inside the footer, code two <code><div></code> elements, one for the <em>left</em> section and one for the <em>right</em> section.</p>
				4833	<pre><code class="language-markup"><footer>
				4834	<div>
				4835	...
				4836	</div>
				4837	<div>
				4838	...
				4839	</div>
				4840	</footer>
				4841	</code></pre>
				4842	<p> 1b. Add the appropriate MDL classes to the footer and divs using the <code>class</code> attribute.</p>
				4843	<pre><code class="language-markup"><footer class="mdl-mini-footer">
				4844	<div class="mdl-mini-footer__left-section">
				4845	...
				4846	</div>
				4847	<div class="mdl-mini-footer__right-section">
				4848	...
				4849	</div>
				4850	</footer>
				4851	</code></pre>
				4852	<p> 2a. Inside the left section div, code an "inner" div for the section heading and a sibling unordered list for the left section links.</p>
				4853	<pre><code class="language-markup"><footer class="mdl-mini-footer">
				4854	<div class="mdl-mini-footer__left-section">
				4855	<div>
				4856	...
				4857	</div>
				4858	<ul>
				4859	...
				4860	</ul>
				4861	</div>
				4862	<div class="mdl-mini-footer__right-section">
				4863	...
				4864	</div>
				4865	</footer>
				4866	</code></pre>
				4867	<p> 2b. Add the appropriate MDL classes to the "inner" div and list using the <code>class</code> attribute.</p>
				4868	<pre><code class="language-markup"><footer class="mdl-mini-footer">
				4869	<div class="mdl-mini-footer__left-section">
				4870	<div class="mdl-logo">
				4871	...
				4872	</div>
				4873	<ul class="mdl-mini-footer__link-list">
				4874	...
				4875	</ul>
				4876	</div>
				4877	<div class="mdl-mini-footer__right-section">
				4878	...
				4879	</div>
				4880	</footer>
				4881	</code></pre>
				4882	<p> 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>
				4883	<pre><code class="language-markup"><footer class="mdl-mini-footer">
				4884	<div class="mdl-mini-footer__left-section">
				4885	<div class="mdl-logo">
				4886	Mini-footer Heading
				4887	</div>
				4888	<ul class="mdl-mini-footer__link-list">
				4889	<li><a href="">Link 1</a></li>
				4890	<li><a href="">Link 2</a></li>
				4891	<li><a href="">Link 3</a></li>
				4892	</ul>
				4893	</div>
				4894	<div class="mdl-mini-footer__right-section">
				4895	<button class="mdl-mini-footer__social-btn"></button>
				4896	<button class="mdl-mini-footer__social-btn"></button>
				4897	<button class="mdl-mini-footer__social-btn"></button>
				4898	</div>
				4899	</footer>
				4900	</code></pre>
				4901	<p>The mini-footer component is ready for use.</p>
				4902	<h4 id="examples">Examples</h4>
				4903	<p>A mini-footer with left and right sections.</p>
				4904	<pre><code class="language-markup"><footer class="mdl-mini-footer">
				4905	<div class="mdl-mini-footer__left-section">
				4906	<div class="mdl-logo">
				4907	More Information
				4908	</div>
				4909	<ul class="mdl-mini-footer__link-list">
				4910	<li><a href="#">Help</a></li>
				4911	<li><a href="#">Privacy and Terms</a></li>
				4912	<li><a href="#">User Agreement</a></li>
				4913	</ul>
				4914	</div>
				4915	<div class="mdl-mini-footer__right-section">
				4916	<button class="mdl-mini-footer__social-btn"></button>
				4917	<button class="mdl-mini-footer__social-btn"></button>
				4918	<button class="mdl-mini-footer__social-btn"></button>
				4919	</div>
				4920	</footer>
				4921	</code></pre>
				4922	<h2 id="configuration-options">Configuration options</h2>
				4923	<p>The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.</p>
				4924	<table>
				4925	<thead>
				4926	<tr>
				4927	<th>MDL class</th>
				4928	<th>Effect</th>
				4929	<th>Remarks</th>
				4930	</tr>
				4931	</thead>
				4932	<tbody>
				4933	<tr>
				4934	<td><code>mdl-mega-footer</code></td>
				4935	<td>Defines container as an MDL mega-footer component</td>
				4936	<td>Required on footer element</td>
				4937	</tr>
				4938	<tr>
				4939	<td><code>mdl-mega-footer__top-section</code></td>
				4940	<td>Defines container as a footer top section</td>
				4941	<td>Required on top section "outer" div element</td>
				4942	</tr>
				4943	<tr>
				4944	<td><code>mdl-mega-footer__left-section</code></td>
				4945	<td>Defines container as a left section</td>
				4946	<td>Required on left section "inner" div element</td>
				4947	</tr>
				4948	<tr>
				4949	<td><code>mdl-mega-footer__social-btn</code></td>
				4950	<td>Defines a decorative square within mega-footer</td>
				4951	<td>Required on button element (if used)</td>
				4952	</tr>
				4953	<tr>
				4954	<td><code>mdl-mega-footer__right-section</code></td>
				4955	<td>Defines container as a right section</td>
				4956	<td>Required on right section "inner" div element</td>
				4957	</tr>
				4958	<tr>
				4959	<td><code>mdl-mega-footer__middle-section</code></td>
				4960	<td>Defines container as a footer middle section</td>
				4961	<td>Required on middle section "outer" div element</td>
				4962	</tr>
				4963	<tr>
				4964	<td><code>mdl-mega-footer__drop-down-section</code></td>
				4965	<td>Defines container as a drop-down (vertical) content area</td>
				4966	<td>Required on drop-down "inner" div elements</td>
				4967	</tr>
				4968	<tr>
				4969	<td><code>mdl-mega-footer__heading</code></td>
				4970	<td>Defines a heading as a mega-footer heading</td>
				4971	<td>Required on h1 element inside drop-down section</td>
				4972	</tr>
				4973	<tr>
				4974	<td><code>mdl-mega-footer__link-list</code></td>
				4975	<td>Defines an unordered list as a drop-down (vertical) list</td>
				4976	<td>Required on ul element inside drop-down section</td>
				4977	</tr>
				4978	<tr>
				4979	<td><code>mdl-mega-footer__bottom-section</code></td>
				4980	<td>Defines container as a footer bottom section</td>
				4981	<td>Required on bottom section "outer" div element</td>
				4982	</tr>
				4983	<tr>
				4984	<td><code>mdl-logo</code></td>
				4985	<td>Defines a container as a styled section heading</td>
				4986	<td>Required on "inner" div element in mega-footer bottom-section or mini-footer left-section</td>
				4987	</tr>
				4988	<tr>
				4989	<td><code>mdl-mini-footer</code></td>
				4990	<td>Defines container as an MDL mini-footer component</td>
				4991	<td>Required on footer element</td>
				4992	</tr>
				4993	<tr>
				4994	<td><code>mdl-mini-footer__left-section</code></td>
				4995	<td>Defines container as a left section</td>
				4996	<td>Required on left section "inner" div element</td>
				4997	</tr>
				4998	<tr>
				4999	<td><code>mdl-mini-footer__link-list</code></td>
				5000	<td>Defines an unordered list as an inline (horizontal) list</td>
				5001	<td>Required on ul element sibling to "mdl-logo" div element</td>
				5002	</tr>
				5003	<tr>
				5004	<td><code>mdl-mini-footer__right-section</code></td>
				5005	<td>Defines container as a right section</td>
				5006	<td>Required on right section "inner" div element</td>
				5007	</tr>
				5008	<tr>
				5009	<td><code>mdl-mini-footer__social-btn</code></td>
				5010	<td>Defines a decorative square within mini-footer</td>
				5011	<td>Required on button element (if used)</td>
				5012	</tr>
				5013	</tbody>
				5014	</table>
				5015
				5016
				5017
				5018	</div>
				5019
				5020	</div>
				5021	</section>
				5022	<section id="lists-section" class="mdl-components__page mdl-grid">
				5023	<div class="mdl-cell mdl-cell--12-col">
				5024	<div class="docs-text-styling component-title">
				5025	<h3>Lists</h3>
				5026	<p>Customizable scrollable lists.</p>
				5027	</div>
				5028
				5029
				5030
				5031
				5032
				5033
				5034	<!-- Add warning, if the component has one -->
				5035
				5036	<!-- Generating snippets -->
				5037
				5038
				5039
				5040	<div class="snippet-group">
				5041
				5042	<div class="snippet-header">
				5043	<div class="snippet-demos">
				5044	<div class="snippet-demo-padding"></div>
				5045
				5046
				5047
				5048
				5049	<div class="snippet-demo">
				5050	<div class="snippet-demo-container demo-list demo-list__list-item">
				5051	<!-- Simple list -->
				5052	<style>
				5053	.demo-list-item {
				5054	width: 300px;
				5055	}
				5056	</style>
				5057
				5058	<ul class="demo-list-item mdl-list">
				5059	<li class="mdl-list__item">
				5060	<span class="mdl-list__item-primary-content">
				5061	Bryan Cranston
				5062	</span>
				5063	</li>
				5064	<li class="mdl-list__item">
				5065	<span class="mdl-list__item-primary-content">
				5066	Aaron Paul
				5067	</span>
				5068	</li>
				5069	<li class="mdl-list__item">
				5070	<span class="mdl-list__item-primary-content">
				5071	Bob Odenkirk
				5072	</span>
				5073	</li>
				5074	</ul>
				5075
				5076	</div>
				5077	</div>
				5078	<div class="snippet-demo-padding"></div>
				5079	</div>
				5080	<div class="snippet-captions">
				5081	<div class="snippet-caption-padding"></div>
				5082
				5083	<div class="snippet-caption">
				5084	Simple list
				5085	</div>
				5086	<div class="snippet-caption-padding"></div>
				5087	</div>
				5088	</div>
				5089	<div class="snippet-code">
				5090	<pre class="language-markup codepen-button-enabled"><code id="list/list-item.html"><!-- Simple list -->
				5091	<style>
				5092	.demo-list-item {
				5093	width: 300px;
				5094	}
				5095	</style>
				5096
				5097	<ul class="demo-list-item mdl-list">
				5098	<li class="mdl-list__item">
				5099	<span class="mdl-list__item-primary-content">
				5100	Bryan Cranston
				5101	</span>
				5102	</li>
				5103	<li class="mdl-list__item">
				5104	<span class="mdl-list__item-primary-content">
				5105	Aaron Paul
				5106	</span>
				5107	</li>
				5108	<li class="mdl-list__item">
				5109	<span class="mdl-list__item-primary-content">
				5110	Bob Odenkirk
				5111	</span>
				5112	</li>
				5113	</ul>
				5114	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5115	body {
				5116	padding: 20px;
				5117	background: #fafafa;
				5118	position: relative;
				5119	}
				5120	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5121	</div>
				5122	</div>
				5123
				5124
				5125
				5126
				5127	<div class="snippet-group">
				5128
				5129	<div class="snippet-header">
				5130	<div class="snippet-demos">
				5131	<div class="snippet-demo-padding"></div>
				5132
				5133
				5134
				5135
				5136	<div class="snippet-demo">
				5137	<div class="snippet-demo-container demo-list demo-list__icon">
				5138	<!-- Icon List -->
				5139	<style>
				5140	.demo-list-icon {
				5141	width: 300px;
				5142	}
				5143	</style>
				5144
				5145	<ul class="demo-list-icon mdl-list">
				5146	<li class="mdl-list__item">
				5147	<span class="mdl-list__item-primary-content">
				5148	<i class="material-icons mdl-list__item-icon">person</i>
				5149	Bryan Cranston
				5150	</span>
				5151	</li>
				5152	<li class="mdl-list__item">
				5153	<span class="mdl-list__item-primary-content">
				5154	<i class="material-icons mdl-list__item-icon">person</i>
				5155	Aaron Paul
				5156	</span>
				5157	</li>
				5158	<li class="mdl-list__item">
				5159	<span class="mdl-list__item-primary-content">
				5160	<i class="material-icons mdl-list__item-icon">person</i>
				5161	Bob Odenkirk
				5162	</span>
				5163	</li>
				5164	</ul>
				5165
				5166	</div>
				5167	</div>
				5168	<div class="snippet-demo-padding"></div>
				5169	</div>
				5170	<div class="snippet-captions">
				5171	<div class="snippet-caption-padding"></div>
				5172
				5173	<div class="snippet-caption">
				5174	Icons
				5175	</div>
				5176	<div class="snippet-caption-padding"></div>
				5177	</div>
				5178	</div>
				5179	<div class="snippet-code">
				5180	<pre class="language-markup codepen-button-enabled"><code id="list/icon.html"><!-- Icon List -->
				5181	<style>
				5182	.demo-list-icon {
				5183	width: 300px;
				5184	}
				5185	</style>
				5186
				5187	<ul class="demo-list-icon mdl-list">
				5188	<li class="mdl-list__item">
				5189	<span class="mdl-list__item-primary-content">
				5190	<i class="material-icons mdl-list__item-icon">person</i>
				5191	Bryan Cranston
				5192	</span>
				5193	</li>
				5194	<li class="mdl-list__item">
				5195	<span class="mdl-list__item-primary-content">
				5196	<i class="material-icons mdl-list__item-icon">person</i>
				5197	Aaron Paul
				5198	</span>
				5199	</li>
				5200	<li class="mdl-list__item">
				5201	<span class="mdl-list__item-primary-content">
				5202	<i class="material-icons mdl-list__item-icon">person</i>
				5203	Bob Odenkirk
				5204	</span>
				5205	</li>
				5206	</ul>
				5207	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5208	body {
				5209	padding: 20px;
				5210	background: #fafafa;
				5211	position: relative;
				5212	}
				5213	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5214	</div>
				5215	</div>
				5216
				5217
				5218
				5219
				5220	<div class="snippet-group">
				5221
				5222	<div class="snippet-header">
				5223	<div class="snippet-demos">
				5224	<div class="snippet-demo-padding"></div>
				5225
				5226
				5227
				5228
				5229	<div class="snippet-demo">
				5230	<div class="snippet-demo-container demo-list demo-list__action">
				5231	<!-- List items with avatar and action -->
				5232	<style>
				5233	.demo-list-action {
				5234	width: 300px;
				5235	}
				5236	</style>
				5237
				5238	<div class="demo-list-action mdl-list">
				5239	<div class="mdl-list__item">
				5240	<span class="mdl-list__item-primary-content">
				5241	<i class="material-icons mdl-list__item-avatar">person</i>
				5242	<span>Bryan Cranston</span>
				5243	</span>
				5244	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5245	</div>
				5246	<div class="mdl-list__item">
				5247	<span class="mdl-list__item-primary-content">
				5248	<i class="material-icons mdl-list__item-avatar">person</i>
				5249	<span>Aaron Paul</span>
				5250	</span>
				5251	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5252	</div>
				5253	<div class="mdl-list__item">
				5254	<span class="mdl-list__item-primary-content">
				5255	<i class="material-icons mdl-list__item-avatar">person</i>
				5256	<span>Bob Odenkirk</span>
				5257	</span>
				5258	<span class="mdl-list__item-secondary-content">
				5259	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5260	</span>
				5261	</div>
				5262	</div>
				5263
				5264	</div>
				5265	</div>
				5266	<div class="snippet-demo-padding"></div>
				5267	</div>
				5268	<div class="snippet-captions">
				5269	<div class="snippet-caption-padding"></div>
				5270
				5271	<div class="snippet-caption">
				5272	Avatars and actions
				5273	</div>
				5274	<div class="snippet-caption-padding"></div>
				5275	</div>
				5276	</div>
				5277	<div class="snippet-code">
				5278	<pre class="language-markup codepen-button-enabled"><code id="list/action.html"><!-- List items with avatar and action -->
				5279	<style>
				5280	.demo-list-action {
				5281	width: 300px;
				5282	}
				5283	</style>
				5284
				5285	<div class="demo-list-action mdl-list">
				5286	<div class="mdl-list__item">
				5287	<span class="mdl-list__item-primary-content">
				5288	<i class="material-icons mdl-list__item-avatar">person</i>
				5289	<span>Bryan Cranston</span>
				5290	</span>
				5291	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5292	</div>
				5293	<div class="mdl-list__item">
				5294	<span class="mdl-list__item-primary-content">
				5295	<i class="material-icons mdl-list__item-avatar">person</i>
				5296	<span>Aaron Paul</span>
				5297	</span>
				5298	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5299	</div>
				5300	<div class="mdl-list__item">
				5301	<span class="mdl-list__item-primary-content">
				5302	<i class="material-icons mdl-list__item-avatar">person</i>
				5303	<span>Bob Odenkirk</span>
				5304	</span>
				5305	<span class="mdl-list__item-secondary-content">
				5306	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5307	</span>
				5308	</div>
				5309	</div>
				5310	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5311	body {
				5312	padding: 20px;
				5313	background: #fafafa;
				5314	position: relative;
				5315	}
				5316	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5317	</div>
				5318	</div>
				5319
				5320
				5321
				5322
				5323	<div class="snippet-group">
				5324
				5325	<div class="snippet-header">
				5326	<div class="snippet-demos">
				5327	<div class="snippet-demo-padding"></div>
				5328
				5329
				5330
				5331
				5332	<div class="snippet-demo">
				5333	<div class="snippet-demo-container demo-list demo-list__list-control">
				5334	<!-- List with avatar and controls -->
				5335	<style>
				5336	.demo-list-control {
				5337	width: 300px;
				5338	}
				5339
				5340	.demo-list-radio {
				5341	display: inline;
				5342	}
				5343	</style>
				5344
				5345	<ul class="demo-list-control mdl-list">
				5346	<li class="mdl-list__item">
				5347	<span class="mdl-list__item-primary-content">
				5348	<i class="material-icons mdl-list__item-avatar">person</i>
				5349	Bryan Cranston
				5350	</span>
				5351	<span class="mdl-list__item-secondary-action">
				5352	<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
				5353	<input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
				5354	</label>
				5355	</span>
				5356	</li>
				5357	<li class="mdl-list__item">
				5358	<span class="mdl-list__item-primary-content">
				5359	<i class="material-icons mdl-list__item-avatar">person</i>
				5360	Aaron Paul
				5361	</span>
				5362	<span class="mdl-list__item-secondary-action">
				5363	<label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
				5364	<input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
				5365	</label>
				5366	</span>
				5367	</li>
				5368	<li class="mdl-list__item">
				5369	<span class="mdl-list__item-primary-content">
				5370	<i class="material-icons mdl-list__item-avatar">person</i>
				5371	Bob Odenkirk
				5372	</span>
				5373	<span class="mdl-list__item-secondary-action">
				5374	<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
				5375	<input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
				5376	</label>
				5377	</span>
				5378	</li>
				5379	</ul>
				5380
				5381	</div>
				5382	</div>
				5383	<div class="snippet-demo-padding"></div>
				5384	</div>
				5385	<div class="snippet-captions">
				5386	<div class="snippet-caption-padding"></div>
				5387
				5388	<div class="snippet-caption">
				5389	Avatars and controls
				5390	</div>
				5391	<div class="snippet-caption-padding"></div>
				5392	</div>
				5393	</div>
				5394	<div class="snippet-code">
				5395	<pre class="language-markup codepen-button-enabled"><code id="list/list-control.html"><!-- List with avatar and controls -->
				5396	<style>
				5397	.demo-list-control {
				5398	width: 300px;
				5399	}
				5400
				5401	.demo-list-radio {
				5402	display: inline;
				5403	}
				5404	</style>
				5405
				5406	<ul class="demo-list-control mdl-list">
				5407	<li class="mdl-list__item">
				5408	<span class="mdl-list__item-primary-content">
				5409	<i class="material-icons mdl-list__item-avatar">person</i>
				5410	Bryan Cranston
				5411	</span>
				5412	<span class="mdl-list__item-secondary-action">
				5413	<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
				5414	<input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
				5415	</label>
				5416	</span>
				5417	</li>
				5418	<li class="mdl-list__item">
				5419	<span class="mdl-list__item-primary-content">
				5420	<i class="material-icons mdl-list__item-avatar">person</i>
				5421	Aaron Paul
				5422	</span>
				5423	<span class="mdl-list__item-secondary-action">
				5424	<label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
				5425	<input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
				5426	</label>
				5427	</span>
				5428	</li>
				5429	<li class="mdl-list__item">
				5430	<span class="mdl-list__item-primary-content">
				5431	<i class="material-icons mdl-list__item-avatar">person</i>
				5432	Bob Odenkirk
				5433	</span>
				5434	<span class="mdl-list__item-secondary-action">
				5435	<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
				5436	<input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
				5437	</label>
				5438	</span>
				5439	</li>
				5440	</ul>
				5441	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5442	body {
				5443	padding: 20px;
				5444	background: #fafafa;
				5445	position: relative;
				5446	}
				5447	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5448	</div>
				5449	</div>
				5450
				5451
				5452
				5453
				5454	<div class="snippet-group">
				5455
				5456	<div class="snippet-header">
				5457	<div class="snippet-demos">
				5458	<div class="snippet-demo-padding"></div>
				5459
				5460
				5461
				5462
				5463	<div class="snippet-demo">
				5464	<div class="snippet-demo-container demo-list demo-list__two-line">
				5465	<!-- Two Line List with secondary info and action -->
				5466	<style>
				5467	.demo-list-two {
				5468	width: 300px;
				5469	}
				5470	</style>
				5471
				5472	<ul class="demo-list-two mdl-list">
				5473	<li class="mdl-list__item mdl-list__item--two-line">
				5474	<span class="mdl-list__item-primary-content">
				5475	<i class="material-icons mdl-list__item-avatar">person</i>
				5476	<span>Bryan Cranston</span>
				5477	<span class="mdl-list__item-sub-title">62 Episodes</span>
				5478	</span>
				5479	<span class="mdl-list__item-secondary-content">
				5480	<span class="mdl-list__item-secondary-info">Actor</span>
				5481	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5482	</span>
				5483	</li>
				5484	<li class="mdl-list__item mdl-list__item--two-line">
				5485	<span class="mdl-list__item-primary-content">
				5486	<i class="material-icons mdl-list__item-avatar">person</i>
				5487	<span>Aaron Paul</span>
				5488	<span class="mdl-list__item-sub-title">62 Episodes</span>
				5489	</span>
				5490	<span class="mdl-list__item-secondary-content">
				5491	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5492	</span>
				5493	</li>
				5494	<li class="mdl-list__item mdl-list__item--two-line">
				5495	<span class="mdl-list__item-primary-content">
				5496	<i class="material-icons mdl-list__item-avatar">person</i>
				5497	<span>Bob Odenkirk</span>
				5498	<span class="mdl-list__item-sub-title">62 Episodes</span>
				5499	</span>
				5500	<span class="mdl-list__item-secondary-content">
				5501	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5502	</span>
				5503	</li>
				5504	</ul>
				5505
				5506	</div>
				5507	</div>
				5508	<div class="snippet-demo-padding"></div>
				5509	</div>
				5510	<div class="snippet-captions">
				5511	<div class="snippet-caption-padding"></div>
				5512
				5513	<div class="snippet-caption">
				5514	Two line
				5515	</div>
				5516	<div class="snippet-caption-padding"></div>
				5517	</div>
				5518	</div>
				5519	<div class="snippet-code">
				5520	<pre class="language-markup codepen-button-enabled"><code id="list/two-line.html"><!-- Two Line List with secondary info and action -->
				5521	<style>
				5522	.demo-list-two {
				5523	width: 300px;
				5524	}
				5525	</style>
				5526
				5527	<ul class="demo-list-two mdl-list">
				5528	<li class="mdl-list__item mdl-list__item--two-line">
				5529	<span class="mdl-list__item-primary-content">
				5530	<i class="material-icons mdl-list__item-avatar">person</i>
				5531	<span>Bryan Cranston</span>
				5532	<span class="mdl-list__item-sub-title">62 Episodes</span>
				5533	</span>
				5534	<span class="mdl-list__item-secondary-content">
				5535	<span class="mdl-list__item-secondary-info">Actor</span>
				5536	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5537	</span>
				5538	</li>
				5539	<li class="mdl-list__item mdl-list__item--two-line">
				5540	<span class="mdl-list__item-primary-content">
				5541	<i class="material-icons mdl-list__item-avatar">person</i>
				5542	<span>Aaron Paul</span>
				5543	<span class="mdl-list__item-sub-title">62 Episodes</span>
				5544	</span>
				5545	<span class="mdl-list__item-secondary-content">
				5546	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5547	</span>
				5548	</li>
				5549	<li class="mdl-list__item mdl-list__item--two-line">
				5550	<span class="mdl-list__item-primary-content">
				5551	<i class="material-icons mdl-list__item-avatar">person</i>
				5552	<span>Bob Odenkirk</span>
				5553	<span class="mdl-list__item-sub-title">62 Episodes</span>
				5554	</span>
				5555	<span class="mdl-list__item-secondary-content">
				5556	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5557	</span>
				5558	</li>
				5559	</ul>
				5560	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5561	body {
				5562	padding: 20px;
				5563	background: #fafafa;
				5564	position: relative;
				5565	}
				5566	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5567	</div>
				5568	</div>
				5569
				5570
				5571
				5572
				5573	<div class="snippet-group">
				5574
				5575	<div class="snippet-header">
				5576	<div class="snippet-demos">
				5577	<div class="snippet-demo-padding"></div>
				5578
				5579
				5580
				5581
				5582	<div class="snippet-demo">
				5583	<div class="snippet-demo-container demo-list demo-list__three-line">
				5584	<!-- Three Line List with secondary info and action -->
				5585	<style>
				5586	.demo-list-three {
				5587	width: 650px;
				5588	}
				5589	</style>
				5590
				5591	<ul class="demo-list-three mdl-list">
				5592	<li class="mdl-list__item mdl-list__item--three-line">
				5593	<span class="mdl-list__item-primary-content">
				5594	<i class="material-icons mdl-list__item-avatar">person</i>
				5595	<span>Bryan Cranston</span>
				5596	<span class="mdl-list__item-text-body">
				5597	Bryan Cranston played the role of Walter in Breaking Bad. He is also known
				5598	for playing Hal in Malcom in the Middle.
				5599	</span>
				5600	</span>
				5601	<span class="mdl-list__item-secondary-content">
				5602	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5603	</span>
				5604	</li>
				5605	<li class="mdl-list__item mdl-list__item--three-line">
				5606	<span class="mdl-list__item-primary-content">
				5607	<i class="material-icons mdl-list__item-avatar">person</i>
				5608	<span>Aaron Paul</span>
				5609	<span class="mdl-list__item-text-body">
				5610	Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
				5611	the "Need For Speed" Movie.
				5612	</span>
				5613	</span>
				5614	<span class="mdl-list__item-secondary-content">
				5615	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5616	</span>
				5617	</li>
				5618	<li class="mdl-list__item mdl-list__item--three-line">
				5619	<span class="mdl-list__item-primary-content">
				5620	<i class="material-icons mdl-list__item-avatar">person</i>
				5621	<span>Bob Odenkirk</span>
				5622	<span class="mdl-list__item-text-body">
				5623	Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
				5624	character, Bob stars in his own show now, called "Better Call Saul".
				5625	</span>
				5626	</span>
				5627	<span class="mdl-list__item-secondary-content">
				5628	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5629	</span>
				5630	</li>
				5631	</ul>
				5632
				5633	</div>
				5634	</div>
				5635	<div class="snippet-demo-padding"></div>
				5636	</div>
				5637	<div class="snippet-captions">
				5638	<div class="snippet-caption-padding"></div>
				5639
				5640	<div class="snippet-caption">
				5641	Three line
				5642	</div>
				5643	<div class="snippet-caption-padding"></div>
				5644	</div>
				5645	</div>
				5646	<div class="snippet-code">
				5647	<pre class="language-markup codepen-button-enabled"><code id="list/three-line.html"><!-- Three Line List with secondary info and action -->
				5648	<style>
				5649	.demo-list-three {
				5650	width: 650px;
				5651	}
				5652	</style>
				5653
				5654	<ul class="demo-list-three mdl-list">
				5655	<li class="mdl-list__item mdl-list__item--three-line">
				5656	<span class="mdl-list__item-primary-content">
				5657	<i class="material-icons mdl-list__item-avatar">person</i>
				5658	<span>Bryan Cranston</span>
				5659	<span class="mdl-list__item-text-body">
				5660	Bryan Cranston played the role of Walter in Breaking Bad. He is also known
				5661	for playing Hal in Malcom in the Middle.
				5662	</span>
				5663	</span>
				5664	<span class="mdl-list__item-secondary-content">
				5665	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5666	</span>
				5667	</li>
				5668	<li class="mdl-list__item mdl-list__item--three-line">
				5669	<span class="mdl-list__item-primary-content">
				5670	<i class="material-icons mdl-list__item-avatar">person</i>
				5671	<span>Aaron Paul</span>
				5672	<span class="mdl-list__item-text-body">
				5673	Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
				5674	the "Need For Speed" Movie.
				5675	</span>
				5676	</span>
				5677	<span class="mdl-list__item-secondary-content">
				5678	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5679	</span>
				5680	</li>
				5681	<li class="mdl-list__item mdl-list__item--three-line">
				5682	<span class="mdl-list__item-primary-content">
				5683	<i class="material-icons mdl-list__item-avatar">person</i>
				5684	<span>Bob Odenkirk</span>
				5685	<span class="mdl-list__item-text-body">
				5686	Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
				5687	character, Bob stars in his own show now, called "Better Call Saul".
				5688	</span>
				5689	</span>
				5690	<span class="mdl-list__item-secondary-content">
				5691	<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
				5692	</span>
				5693	</li>
				5694	</ul>
				5695	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5696	body {
				5697	padding: 20px;
				5698	background: #fafafa;
				5699	position: relative;
				5700	}
				5701	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5702	</div>
				5703	</div>
				5704
				5705
				5706	<!-- Adding the demo page -->
				5707
				5708	<style>
				5709
				5710	</style>
				5711
				5712	<script>
				5713
				5714	</script>
				5715
				5716
				5717	<div class="docs-text-styling docs-readme">
				5718
				5719
				5720
				5721
				5722	<h2 id="introduction">Introduction</h2>
				5723	<p>Lists present multiple line items vertically as a single continuous element. Refer the <a href="https://www.google.com/design/spec/components/lists.html">Material Design
				5724	Spec</a> to know more about the content options.</p>
				5725	<h3 id="to-include-the-mdl-list-component-">To include the MDL <strong>list</strong> component:</h3>
				5726	<h2 id="create-a-list-with-basic-items-">Create a List with basic items.</h2>
				5727	<p> 1. Code a <code><ul></code> element with the class <code>mdl-list</code>; this is the "outer" container, intended to hold all of the list's content.</p>
				5728	<pre><code class="language-markup"><ul class='mdl-list'>
				5729	</ul>
				5730	</code></pre>
				5731	<p> 2. Code as many <code><li></code> elements as required with the class <code>mdl-list__item</code>; this is intended to hold all of the <strong>item's</strong> content.</p>
				5732	<pre><code class="language-markup"><ul class='mdl-list'>
				5733	<li class="mdl-list__item"></li>
				5734	<li class="mdl-list__item"></li>
				5735	<li class="mdl-list__item"></li>
				5736	</ul>
				5737	</code></pre>
				5738	<p> 3. Add your content as the children of the <code><li></code>, with the appropriate content type modification class for example .</p>
				5739	<pre><code class="language-markup"><ul class='mdl-list'>
				5740	<li class="mdl-list__item">
				5741	<span class="mdl-list__item-primary-content"></span>
				5742	</li>
				5743	<li class="mdl-list__item">
				5744	<span class="mdl-list__item-primary-content"></span>
				5745	</li>
				5746	<li class="mdl-list__item">
				5747	<span class="mdl-list__item-primary-content"></span>
				5748	</li>
				5749	</ul>
				5750	</code></pre>
				5751	<h2 id="configuration-options">Configuration options</h2>
				5752	<p>The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.</p>
				5753	<table>
				5754	<thead>
				5755	<tr>
				5756	<th>MDL Class</th>
				5757	<th style="text-align:center">Effect</th>
				5758	<th style="text-align:right">Remark</th>
				5759	</tr>
				5760	</thead>
				5761	<tbody>
				5762	<tr>
				5763	<td>.mdl-list</td>
				5764	<td style="text-align:center">Defines list as an MDL component</td>
				5765	<td style="text-align:right">-</td>
				5766	</tr>
				5767	<tr>
				5768	<td>.mdl-list__item</td>
				5769	<td style="text-align:center">Defines the List's Items</td>
				5770	<td style="text-align:right">required</td>
				5771	</tr>
				5772	<tr>
				5773	<td>.mdl-list__item--two-line</td>
				5774	<td style="text-align:center">Defines the List's Items as Two Line</td>
				5775	<td style="text-align:right">Optional Two Line List Variant</td>
				5776	</tr>
				5777	<tr>
				5778	<td>.mdl-list__item--three-line</td>
				5779	<td style="text-align:center">Defines the List's Items as a Three Line</td>
				5780	<td style="text-align:right">Optional Three Line List Variant</td>
				5781	</tr>
				5782	<tr>
				5783	<td>.mdl-list__item-primary-content</td>
				5784	<td style="text-align:center">Defines the primary content sub-division</td>
				5785	<td style="text-align:right">-</td>
				5786	</tr>
				5787	<tr>
				5788	<td>.mdl-list__item-avatar</td>
				5789	<td style="text-align:center">Defines the avatar sub-division</td>
				5790	<td style="text-align:right">-</td>
				5791	</tr>
				5792	<tr>
				5793	<td>.mdl-list__item-icon</td>
				5794	<td style="text-align:center">Defines the icon sub-division</td>
				5795	<td style="text-align:right">-</td>
				5796	</tr>
				5797	<tr>
				5798	<td>.mdl-list__item-secondary-content</td>
				5799	<td style="text-align:center">Defines the secondary content sub-division</td>
				5800	<td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td>
				5801	</tr>
				5802	<tr>
				5803	<td>.mdl-list__item-secondary-info</td>
				5804	<td style="text-align:center">Defines the information sub-division</td>
				5805	<td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td>
				5806	</tr>
				5807	<tr>
				5808	<td>.mdl-list__item-secondary-action</td>
				5809	<td style="text-align:center">Defines the Action sub-division</td>
				5810	<td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td>
				5811	</tr>
				5812	<tr>
				5813	<td>.mdl-list__item-text-body</td>
				5814	<td style="text-align:center">Defines the Text Body sub-division</td>
				5815	<td style="text-align:right">requires <code>.mdl-list__item--three-line</code></td>
				5816	</tr>
				5817	</tbody>
				5818	</table>
				5819
				5820
				5821
				5822	</div>
				5823
				5824	</div>
				5825	</section>
				5826	<section id="loading-section" class="mdl-components__page mdl-grid">
				5827	<div class="mdl-cell mdl-cell--12-col">
				5828	<div class="docs-text-styling component-title">
				5829	<h3>Loading</h3>
				5830	<p>Indicate loading and progress states.</p>
				5831	</div>
				5832
				5833
				5834	<section class="docs-toc docs-text-styling">
				5835	<nav class="section-content">
				5836	<ul>
				5837
				5838	<li><a href="#loading-section/progress">Progress bar</a></li>
				5839
				5840	<li><a href="#loading-section/spinner">Spinner</a></li>
				5841
				5842	</ul>
				5843	</nav>
				5844	</section>
				5845
				5846
				5847
				5848
				5849
				5850	<span class="docs-text-styling">
				5851	<h1 class="mdl-components__classname" id="loading-section/progress">Progress bar</h1>
				5852	</span>
				5853
				5854	<!-- Add warning, if the component has one -->
				5855
				5856	<!-- Generating snippets -->
				5857
				5858
				5859
				5860	<div class="snippet-group">
				5861
				5862	<div class="snippet-header">
				5863	<div class="snippet-demos">
				5864	<div class="snippet-demo-padding"></div>
				5865
				5866
				5867
				5868
				5869	<div class="snippet-demo">
				5870	<div class="snippet-demo-container demo-progress demo-progress__progress-default">
				5871	<style>
				5872	.demo-progress__progress-default .mdl-progress {
				5873	width: 50vw;
				5874	max-width: 260px;
				5875	}
				5876	</style>
				5877	<!-- Simple MDL Progress Bar -->
				5878	<div id="p1" class="mdl-progress mdl-js-progress"></div>
				5879	<script>
				5880	document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
				5881	this.MaterialProgress.setProgress(44);
				5882	});
				5883	</script>
				5884
				5885
				5886	</div>
				5887	</div>
				5888	<div class="snippet-demo-padding"></div>
				5889	</div>
				5890	<div class="snippet-captions">
				5891	<div class="snippet-caption-padding"></div>
				5892
				5893	<div class="snippet-caption">
				5894	Default
				5895	</div>
				5896	<div class="snippet-caption-padding"></div>
				5897	</div>
				5898	</div>
				5899	<div class="snippet-code">
				5900	<pre class="language-markup codepen-button-enabled"><code id="progress/progress-default.html"><!-- Simple MDL Progress Bar -->
				5901	<div id="p1" class="mdl-progress mdl-js-progress"></div>
				5902	<script>
				5903	document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
				5904	this.MaterialProgress.setProgress(44);
				5905	});
				5906	</script>
				5907	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5908	body {
				5909	padding: 20px;
				5910	background: #fafafa;
				5911	position: relative;
				5912	}
				5913	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5914	</div>
				5915	</div>
				5916
				5917
				5918
				5919
				5920	<div class="snippet-group">
				5921
				5922	<div class="snippet-header">
				5923	<div class="snippet-demos">
				5924	<div class="snippet-demo-padding"></div>
				5925
				5926
				5927
				5928
				5929	<div class="snippet-demo">
				5930	<div class="snippet-demo-container demo-progress demo-progress__progress-indeterminate">
				5931	<style>
				5932	.demo-progress__progress-indeterminate .mdl-progress {
				5933	width: 50vw;
				5934	max-width: 260px;
				5935	}
				5936	</style>
				5937	<!-- MDL Progress Bar with Indeterminate Progress -->
				5938	<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
				5939
				5940
				5941	</div>
				5942	</div>
				5943	<div class="snippet-demo-padding"></div>
				5944	</div>
				5945	<div class="snippet-captions">
				5946	<div class="snippet-caption-padding"></div>
				5947
				5948	<div class="snippet-caption">
				5949	Indeterminate
				5950	</div>
				5951	<div class="snippet-caption-padding"></div>
				5952	</div>
				5953	</div>
				5954	<div class="snippet-code">
				5955	<pre class="language-markup codepen-button-enabled"><code id="progress/progress-indeterminate.html"><!-- MDL Progress Bar with Indeterminate Progress -->
				5956	<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
				5957	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				5958	body {
				5959	padding: 20px;
				5960	background: #fafafa;
				5961	position: relative;
				5962	}
				5963	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				5964	</div>
				5965	</div>
				5966
				5967
				5968
				5969
				5970	<div class="snippet-group">
				5971
				5972	<div class="snippet-header">
				5973	<div class="snippet-demos">
				5974	<div class="snippet-demo-padding"></div>
				5975
				5976
				5977
				5978
				5979	<div class="snippet-demo">
				5980	<div class="snippet-demo-container demo-progress demo-progress__progress-buffering">
				5981	<style>
				5982	.demo-progress__progress-buffering .mdl-progress {
				5983	width: 50vw;
				5984	max-width: 260px;
				5985	}
				5986	</style>
				5987
				5988	<!-- MDL Progress Bar with Buffering -->
				5989	<div id="p3" class="mdl-progress mdl-js-progress"></div>
				5990	<script>
				5991	document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
				5992	this.MaterialProgress.setProgress(33);
				5993	this.MaterialProgress.setBuffer(87);
				5994	});
				5995	</script>
				5996
				5997
				5998	</div>
				5999	</div>
				6000	<div class="snippet-demo-padding"></div>
				6001	</div>
				6002	<div class="snippet-captions">
				6003	<div class="snippet-caption-padding"></div>
				6004
				6005	<div class="snippet-caption">
				6006	Buffering
				6007	</div>
				6008	<div class="snippet-caption-padding"></div>
				6009	</div>
				6010	</div>
				6011	<div class="snippet-code">
				6012	<pre class="language-markup codepen-button-enabled"><code id="progress/progress-buffering.html"><!-- MDL Progress Bar with Buffering -->
				6013	<div id="p3" class="mdl-progress mdl-js-progress"></div>
				6014	<script>
				6015	document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
				6016	this.MaterialProgress.setProgress(33);
				6017	this.MaterialProgress.setBuffer(87);
				6018	});
				6019	</script>
				6020	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				6021	body {
				6022	padding: 20px;
				6023	background: #fafafa;
				6024	position: relative;
				6025	}
				6026	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				6027	</div>
				6028	</div>
				6029
				6030
				6031	<!-- Adding the demo page -->
				6032
				6033	<style>
				6034
				6035	</style>
				6036
				6037	<script>
				6038
				6039	</script>
				6040
				6041
				6042	<div class="docs-text-styling docs-readme">
				6043
				6044
				6045
				6046
				6047	<h2 id="introduction">Introduction</h2>
				6048	<p>The Material Design Lite (MDL) <strong>progress</strong> component is a visual indicator of background activity in a web page or application. A progress indicator consists of a (typically) horizontal bar containing some animation that conveys a sense of motion. While some progress devices indicate an approximate or specific percentage of completion, the MDL progress component simply communicates the fact that an activity is ongoing and is not yet complete.</p>
				6049	<p>Progress indicators are an established but non-standardized feature in user interfaces, and provide users with a visual clue to an application's status. Their design and use is therefore an important factor in the overall user experience. See the progress component's <a href="http://www.google.com/design/spec/components/progress-activity.html">Material Design specifications page</a> for details.</p>
				6050	<h3 id="to-include-an-mdl-progress-component-">To include an MDL <strong>progress</strong> component:</h3>
				6051	<p> 1. Code a <code><div></code> element. Include any desired attributes and values, such as an id or width — typically done using external CSS rather than the inline <code>style</code> attribute as shown here.</p>
				6052	<pre><code class="language-markup"><div id="prog1" style="width:250px"></div>
				6053	</code></pre>
				6054	<p> 2. Add one or more MDL classes, separated by spaces, to the div using the <code>class</code> attribute.</p>
				6055	<pre><code class="language-markup"><div id="prog1" style="width:250px" class="mdl-js-progress"></div>
				6056	</code></pre>
				6057	<p>The progress component is ready for use.</p>
				6058	<h4 id="examples">Examples</h4>
				6059	<p>A static (non-animated) progress indicator.</p>
				6060	<pre><code class="language-markup"><div id="progstatic" style="width:250px" class="mdl-js-progress"></div>
				6061	</code></pre>
				6062	<p>An active (animated) progress indicator.</p>
				6063	<pre><code class="language-markup"><div id="progactive" style="width:200px" class="mdl-js-progress
				6064	mdl-progress--indeterminate"></div>
				6065	</code></pre>
				6066	<h2 id="configuration-options">Configuration options</h2>
				6067	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the progress indicator. The table below lists the available classes and their effects.</p>
				6068	<table>
				6069	<thead>
				6070	<tr>
				6071	<th>MDL class</th>
				6072	<th>Effect</th>
				6073	<th>Remarks</th>
				6074	</tr>
				6075	</thead>
				6076	<tbody>
				6077	<tr>
				6078	<td><code>mdl-js-progress</code></td>
				6079	<td>Assigns basic MDL behavior to progress indicator</td>
				6080	<td>Required</td>
				6081	</tr>
				6082	<tr>
				6083	<td><code>mdl-progress--indeterminate</code></td>
				6084	<td>Applies animation effect</td>
				6085	<td>Optional</td>
				6086	</tr>
				6087	</tbody>
				6088	</table>
				6089	<blockquote>
				6090	<p>Note: <code>mdl-progress__intermediate</code> does exist within the codebase. It is deprecated since the name is not in BEM alignment. It will be removed in 2.0.</p>
				6091	</blockquote>
				6092
				6093
				6094
				6095	</div>
				6096
				6097
				6098
				6099	<span class="docs-text-styling">
				6100	<h1 class="mdl-components__classname" id="loading-section/spinner">Spinner</h1>
				6101	</span>
				6102
				6103	<!-- Add warning, if the component has one -->
				6104
				6105	<!-- Generating snippets -->
				6106
				6107
				6108
				6109	<div class="snippet-group">
				6110
				6111	<div class="snippet-header">
				6112	<div class="snippet-demos">
				6113	<div class="snippet-demo-padding"></div>
				6114
				6115
				6116
				6117
				6118	<div class="snippet-demo">
				6119	<div class="snippet-demo-container demo-spinner demo-spinner__spinner-default">
				6120	<!-- MDL Spinner Component -->
				6121	<div class="mdl-spinner mdl-js-spinner is-active"></div>
				6122
				6123	</div>
				6124	</div>
				6125
				6126
				6127
				6128	<div class="snippet-demo">
				6129	<div class="snippet-demo-container demo-spinner demo-spinner__spinner-single-color">
				6130	<!-- MDL Spinner Component with Single Color -->
				6131	<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
				6132
				6133	</div>
				6134	</div>
				6135	<div class="snippet-demo-padding"></div>
				6136	</div>
				6137	<div class="snippet-captions">
				6138	<div class="snippet-caption-padding"></div>
				6139
				6140	<div class="snippet-caption">
				6141	Default
				6142	</div>
				6143	<div class="snippet-caption">
				6144	Single color
				6145	</div>
				6146	<div class="snippet-caption-padding"></div>
				6147	</div>
				6148	</div>
				6149	<div class="snippet-code">
				6150	<pre class="language-markup codepen-button-enabled"><code id="spinner/spinner-default.html"><!-- MDL Spinner Component -->
				6151	<div class="mdl-spinner mdl-js-spinner is-active"></div>
				6152	</code><div class="codepen-extra-css"><style></style></div><code id="spinner/spinner-single-color.html"><!-- MDL Spinner Component with Single Color -->
				6153	<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
				6154	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				6155	body {
				6156	padding: 20px;
				6157	background: #fafafa;
				6158	position: relative;
				6159	}
				6160	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				6161	</div>
				6162	</div>
				6163
				6164
				6165	<!-- Adding the demo page -->
				6166
				6167	<style>
				6168
				6169	</style>
				6170
				6171	<script>
				6172
				6173	</script>
				6174
				6175
				6176	<div class="docs-text-styling docs-readme">
				6177
				6178
				6179
				6180
				6181	<h2 id="introduction">Introduction</h2>
				6182	<p>The Material Design Lite (MDL) <strong>spinner</strong> component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed.</p>
				6183	<p>A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.</p>
				6184	<p>Spinners are a fairly new feature of most user interfaces, and provide users with a consistent visual cue about ongoing activity, regardless of hardware device, operating system, or browser environment. Their design and use is an important factor in the overall user experience.</p>
				6185	<h3 id="to-include-an-mdl-spinner-component-">To include an MDL <strong>spinner</strong> component:</h3>
				6186	<p> 1. Code an element, such as a <code><div></code>, <code><p></code>, or <code><span></code>, to contain the spinner; the element should have no content of its own.</p>
				6187	<pre><code class="language-markup"><div></div>
				6188	</code></pre>
				6189	<p> 2. Add one or more MDL classes, separated by spaces, to the container using the <code>class</code> attribute.</p>
				6190	<pre><code class="language-markup"><div class="mdl-spinner mdl-js-spinner is-active"></div>
				6191	</code></pre>
				6192	<p>The spinner component is ready for use.</p>
				6193	<h4 id="examples">Examples</h4>
				6194	<p>A default spinner in a div.</p>
				6195	<pre><code class="language-markup"><div class="mdl-spinner mdl-js-spinner is-active"></div>
				6196	</code></pre>
				6197	<p>A single-color spinner in a paragraph.</p>
				6198	<pre><code class="language-markup"><p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>
				6199	</code></pre>
				6200	<h2 id="configuration-options">Configuration options</h2>
				6201	<p>The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.</p>
				6202	<table>
				6203	<thead>
				6204	<tr>
				6205	<th>MDL class</th>
				6206	<th>Effect</th>
				6207	<th>Remarks</th>
				6208	</tr>
				6209	</thead>
				6210	<tbody>
				6211	<tr>
				6212	<td><code>mdl-spinner</code></td>
				6213	<td>Defines the container as an MDL spinner component</td>
				6214	<td>Required</td>
				6215	</tr>
				6216	<tr>
				6217	<td><code>mdl-js-spinner</code></td>
				6218	<td>Assigns basic MDL behavior to spinner</td>
				6219	<td>Required</td>
				6220	</tr>
				6221	<tr>
				6222	<td><code>is-active</code></td>
				6223	<td>Makes the spinner visible and animated</td>
				6224	<td>Optional</td>
				6225	</tr>
				6226	<tr>
				6227	<td><code>mdl-spinner--single-color</code></td>
				6228	<td>Uses a single (primary palette) color instead of changing colors</td>
				6229	<td>Optional</td>
				6230	</tr>
				6231	</tbody>
				6232	</table>
				6233	<blockquote>
				6234	<p><strong>Note:</strong> There is no specific <em>disabled</em> version of a spinner; the presence or absence of the <code>is-active</code> class determines whether the spinner is visible. For example, this spinner is inactive and invisible: <code><div class="mdl-spinner mdl-js-spinner"></div></code>
				6235	This attribute may be added or removed programmatically via scripting.</p>
				6236	</blockquote>
				6237
				6238
				6239
				6240	</div>
				6241
				6242	</div>
				6243	</section>
				6244	<section id="menus-section" class="mdl-components__page mdl-grid">
				6245	<div class="mdl-cell mdl-cell--12-col">
				6246	<div class="docs-text-styling component-title">
				6247	<h3>Menus</h3>
				6248	<p>Lists of clickable actions.</p>
				6249	</div>
				6250
				6251
				6252
				6253
				6254
				6255
				6256	<!-- Add warning, if the component has one -->
				6257
				6258	<!-- Generating snippets -->
				6259
				6260
				6261
				6262	<div class="snippet-group">
				6263
				6264	<div class="snippet-header">
				6265	<div class="snippet-demos">
				6266	<div class="snippet-demo-padding"></div>
				6267
				6268
				6269
				6270
				6271	<div class="snippet-demo">
				6272	<div class="snippet-demo-container demo-menu demo-menu__lower-left">
				6273	<style>
				6274	.demo-menu.demo-menu__lower-left .container {
				6275	position: relative;
				6276	width: 200px;
				6277	}
				6278	.demo-menu.demo-menu__lower-left .background {
				6279	background: white;
				6280	height: 148px;
				6281	width: 100%;
				6282	}
				6283	.demo-menu.demo-menu__lower-left .bar {
				6284	box-sizing: border-box;
				6285	background: #3F51B5;
				6286	color: white;
				6287	width: 100%;
				6288	padding: 16px;
				6289	}
				6290	</style>
				6291
				6292	<div class="container mdl-shadow--2dp">
				6293	<div class="bar">
				6294	<!-- Left aligned menu below button -->
				6295	<button id="demo-menu-lower-left"
				6296	class="mdl-button mdl-js-button mdl-button--icon">
				6297	<i class="material-icons">more_vert</i>
				6298	</button>
				6299
				6300	<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
				6301	for="demo-menu-lower-left">
				6302	<li class="mdl-menu__item">Some Action</li>
				6303	<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
				6304	<li disabled class="mdl-menu__item">Disabled Action</li>
				6305	<li class="mdl-menu__item">Yet Another Action</li>
				6306	</ul>
				6307
				6308	</div>
				6309	<div class="background"></div>
				6310	</div>
				6311
				6312	</div>
				6313	</div>
				6314
				6315
				6316
				6317	<div class="snippet-demo">
				6318	<div class="snippet-demo-container demo-menu demo-menu__lower-right">
				6319	<style>
				6320	.demo-menu.demo-menu__lower-right .container {
				6321	position: relative;
				6322	width: 200px;
				6323	}
				6324	.demo-menu.demo-menu__lower-right .background {
				6325	background: white;
				6326	height: 148px;
				6327	width: 100%;
				6328	}
				6329	.demo-menu.demo-menu__lower-right .bar {
				6330	box-sizing: border-box;
				6331	position: relative;
				6332	background: #3F51B5;
				6333	color: white;
				6334	height: 64px;
				6335	width: 100%;
				6336	padding: 16px;
				6337	}
				6338	.demo-menu.demo-menu__lower-right .wrapper {
				6339	box-sizing: border-box;
				6340	position: absolute;
				6341	right: 16px;
				6342	}
				6343	</style>
				6344
				6345	<div class="container mdl-shadow--2dp">
				6346	<div class="bar">
				6347	<div class="wrapper">
				6348	<!-- Right aligned menu below button -->
				6349	<button id="demo-menu-lower-right"
				6350	class="mdl-button mdl-js-button mdl-button--icon">
				6351	<i class="material-icons">more_vert</i>
				6352	</button>
				6353
				6354	<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
				6355	for="demo-menu-lower-right">
				6356	<li class="mdl-menu__item">Some Action</li>
				6357	<li class="mdl-menu__item">Another Action</li>
				6358	<li disabled class="mdl-menu__item">Disabled Action</li>
				6359	<li class="mdl-menu__item">Yet Another Action</li>
				6360	</ul>
				6361
				6362	</div>
				6363	</div>
				6364	<div class="background"></div>
				6365	</div>
				6366
				6367	</div>
				6368	</div>
				6369	<div class="snippet-demo-padding"></div>
				6370	</div>
				6371	<div class="snippet-captions">
				6372	<div class="snippet-caption-padding"></div>
				6373
				6374	<div class="snippet-caption">
				6375	Lower left
				6376	</div>
				6377	<div class="snippet-caption">
				6378	Lower right
				6379	</div>
				6380	<div class="snippet-caption-padding"></div>
				6381	</div>
				6382	</div>
				6383	<div class="snippet-code">
				6384	<pre class="language-markup codepen-button-enabled"><code id="menu/lower-left.html"><!-- Left aligned menu below button -->
				6385	<button id="demo-menu-lower-left"
				6386	class="mdl-button mdl-js-button mdl-button--icon">
				6387	<i class="material-icons">more_vert</i>
				6388	</button>
				6389
				6390	<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
				6391	for="demo-menu-lower-left">
				6392	<li class="mdl-menu__item">Some Action</li>
				6393	<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
				6394	<li disabled class="mdl-menu__item">Disabled Action</li>
				6395	<li class="mdl-menu__item">Yet Another Action</li>
				6396	</ul>
				6397	</code><div class="codepen-extra-css"><style>#demo-menu-lower-left {
				6398	margin-left: 40%;
				6399	}
				6400	</style></div><code id="menu/lower-right.html"><!-- Right aligned menu below button -->
				6401	<button id="demo-menu-lower-right"
				6402	class="mdl-button mdl-js-button mdl-button--icon">
				6403	<i class="material-icons">more_vert</i>
				6404	</button>
				6405
				6406	<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
				6407	for="demo-menu-lower-right">
				6408	<li class="mdl-menu__item">Some Action</li>
				6409	<li class="mdl-menu__item">Another Action</li>
				6410	<li disabled class="mdl-menu__item">Disabled Action</li>
				6411	<li class="mdl-menu__item">Yet Another Action</li>
				6412	</ul>
				6413	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				6414	body {
				6415	padding: 20px;
				6416	background: #fafafa;
				6417	position: relative;
				6418	}
				6419	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				6420	</div>
				6421	</div>
				6422
				6423
				6424
				6425
				6426	<div class="snippet-group">
				6427
				6428	<div class="snippet-header">
				6429	<div class="snippet-demos">
				6430	<div class="snippet-demo-padding"></div>
				6431
				6432
				6433
				6434
				6435	<div class="snippet-demo">
				6436	<div class="snippet-demo-container demo-menu demo-menu__top-left">
				6437	<style>
				6438	.demo-menu.demo-menu__top-left .container {
				6439	position: relative;
				6440	width: 200px;
				6441	}
				6442	.demo-menu.demo-menu__top-left .background {
				6443	background: white;
				6444	height: 148px;
				6445	width: 100%;
				6446	}
				6447	.demo-menu.demo-menu__top-left .bar {
				6448	box-sizing: border-box;
				6449	background: #3F51B5;
				6450	color: white;
				6451	width: 100%;
				6452	padding: 16px;
				6453	}
				6454	</style>
				6455
				6456	<div class="container mdl-shadow--2dp">
				6457	<div class="background"></div>
				6458	<div class="bar">
				6459	<!-- Left aligned menu on top of button -->
				6460	<button id="demo-menu-top-left"
				6461	class="mdl-button mdl-js-button mdl-button--icon">
				6462	<i class="material-icons">more_vert</i>
				6463	</button>
				6464
				6465	<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
				6466	data-mdl-for="demo-menu-top-left">
				6467	<li class="mdl-menu__item">Some Action</li>
				6468	<li class="mdl-menu__item">Another Action</li>
				6469	<li disabled class="mdl-menu__item">Disabled Action</li>
				6470	<li class="mdl-menu__item">Yet Another Action</li>
				6471	</ul>
				6472
				6473	</div>
				6474	</div>
				6475
				6476	</div>
				6477	</div>
				6478
				6479
				6480
				6481	<div class="snippet-demo">
				6482	<div class="snippet-demo-container demo-menu demo-menu__top-right">
				6483	<style>
				6484	.demo-menu.demo-menu__top-right .container {
				6485	position: relative;
				6486	width: 200px;
				6487	}
				6488	.demo-menu.demo-menu__top-right .background {
				6489	background: white;
				6490	height: 148px;
				6491	width: 100%;
				6492	}
				6493	.demo-menu.demo-menu__top-right .bar {
				6494	box-sizing: border-box;
				6495	position: relative;
				6496	background: #3F51B5;
				6497	color: white;
				6498	height: 64px;
				6499	width: 100%;
				6500	padding: 16px;
				6501	}
				6502	.demo-menu.demo-menu__top-right .wrapper {
				6503	box-sizing: border-box;
				6504	position: absolute;
				6505	right: 16px;
				6506	}
				6507	</style>
				6508
				6509	<div class="container mdl-shadow--2dp">
				6510	<div class="background"></div>
				6511	<div class="bar">
				6512	<div class="wrapper">
				6513	<!-- Right aligned menu on top of button -->
				6514	<button id="demo-menu-top-right"
				6515	class="mdl-button mdl-js-button mdl-button--icon">
				6516	<i class="material-icons">more_vert</i>
				6517	</button>
				6518
				6519	<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
				6520	data-mdl-for="demo-menu-top-right">
				6521	<li class="mdl-menu__item">Some Action</li>
				6522	<li class="mdl-menu__item">Another Action</li>
				6523	<li disabled class="mdl-menu__item">Disabled Action</li>
				6524	<li class="mdl-menu__item">Yet Another Action</li>
				6525	</ul>
				6526
				6527	</div>
				6528	</div>
				6529	</div>
				6530
				6531	</div>
				6532	</div>
				6533	<div class="snippet-demo-padding"></div>
				6534	</div>
				6535	<div class="snippet-captions">
				6536	<div class="snippet-caption-padding"></div>
				6537
				6538	<div class="snippet-caption">
				6539	Top left
				6540	</div>
				6541	<div class="snippet-caption">
				6542	Top right
				6543	</div>
				6544	<div class="snippet-caption-padding"></div>
				6545	</div>
				6546	</div>
				6547	<div class="snippet-code">
				6548	<pre class="language-markup codepen-button-enabled"><code id="menu/top-left.html"><!-- Left aligned menu on top of button -->
				6549	<button id="demo-menu-top-left"
				6550	class="mdl-button mdl-js-button mdl-button--icon">
				6551	<i class="material-icons">more_vert</i>
				6552	</button>
				6553
				6554	<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
				6555	data-mdl-for="demo-menu-top-left">
				6556	<li class="mdl-menu__item">Some Action</li>
				6557	<li class="mdl-menu__item">Another Action</li>
				6558	<li disabled class="mdl-menu__item">Disabled Action</li>
				6559	<li class="mdl-menu__item">Yet Another Action</li>
				6560	</ul>
				6561	</code><div class="codepen-extra-css"><style>#demo-menu-top-left {
				6562	margin-left: 40%;
				6563	}
				6564
				6565	#demo-menu-top-left,
				6566	#demo-menu-top-right {
				6567	margin-top: 250px;
				6568	}
				6569	</style></div><code id="menu/top-right.html"><!-- Right aligned menu on top of button -->
				6570	<button id="demo-menu-top-right"
				6571	class="mdl-button mdl-js-button mdl-button--icon">
				6572	<i class="material-icons">more_vert</i>
				6573	</button>
				6574
				6575	<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
				6576	data-mdl-for="demo-menu-top-right">
				6577	<li class="mdl-menu__item">Some Action</li>
				6578	<li class="mdl-menu__item">Another Action</li>
				6579	<li disabled class="mdl-menu__item">Disabled Action</li>
				6580	<li class="mdl-menu__item">Yet Another Action</li>
				6581	</ul>
				6582	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				6583	body {
				6584	padding: 20px;
				6585	background: #fafafa;
				6586	position: relative;
				6587	}
				6588	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				6589	</div>
				6590	</div>
				6591
				6592
				6593	<!-- Adding the demo page -->
				6594
				6595	<style>
				6596
				6597	</style>
				6598
				6599	<script>
				6600
				6601	</script>
				6602
				6603
				6604	<div class="docs-text-styling docs-readme">
				6605
				6606
				6607
				6608
				6609	<h2 id="introduction">Introduction</h2>
				6610	<p>The Material Design Lite (MDL) <strong>menu</strong> component is a user interface element that allows users to select one of a number of options. The selection typically results in an action initiation, a setting change, or other observable effect. Menu options are always presented in sets of two or more, and options may be programmatically enabled or disabled as required. The menu appears when the user is asked to choose among a series of options, and is usually dismissed after the choice is made.</p>
				6611	<p>Menus are an established but non-standardized feature in user interfaces, and allow users to make choices that direct the activity, progress, or characteristics of software. Their design and use is an important factor in the overall user experience. See the menu component's <a href="http://www.google.com/design/spec/components/menus.html">Material Design specifications page</a> for details.</p>
				6612	<h3 id="to-include-an-mdl-menu-component-">To include an MDL <strong>menu</strong> component:</h3>
				6613	<blockquote>
				6614	<p><strong>Note:</strong> The menu requires a non-static positioned parent element. Positioning options may not work properly if the menu is inside of a statically positioned node.</p>
				6615	</blockquote>
				6616	<p> 1. Code a <code><button></code> element; this is the clickable toggle that will show and hide the menu options. Include an <code>id</code> attribute whose value will match the <code>for</code> (or <code>data-mdl-for</code>) attribute of the unordered list coded in the next step. Inside the button, code a <code><i></code> or <code><span></code> element to contain an icon of your choice.</p>
				6617	<pre><code class="language-markup"><button id="menu1">
				6618	<i></i>
				6619	</button>
				6620	</code></pre>
				6621	<p> 2. Code a <code><ul></code> unordered list element; this is the container that holds the options. Include a <code>for</code> attribute whose value matches the <code>id</code> attribute of the button element.</p>
				6622	<pre><code class="language-markup"><ul for="menu1">
				6623	</ul>
				6624	</code></pre>
				6625	<p> 3. Inside the unordered list, code one <code><li></code> element for each option. Include any desired attributes and values, such as an id or event handler, and add a text caption as appropriate.</p>
				6626	<pre><code class="language-markup"><ul for="menu1">
				6627	<li>Continue</li>
				6628	<li>Stop</li>
				6629	<li>Pause</li>
				6630	</ul>
				6631	</code></pre>
				6632	<p> 4. Add one or more MDL classes, separated by spaces, to the button and span elements using the <code>class</code> attribute.</p>
				6633	<pre><code class="language-markup"><button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
				6634	<i class="material-icons">more_vert</i>
				6635	</button>
				6636	</code></pre>
				6637	<p> 5. Add one or more MDL classes, separated by spaces, to the unordered list and the list items using the <code>class</code> attribute.</p>
				6638	<pre><code class="language-markup"><ul class="mdl-menu mdl-js-menu" for="menu1">
				6639	<li class="mdl-menu__item">Continue</li>
				6640	<li class="mdl-menu__item">Stop</li>
				6641	<li class="mdl-menu__item">Pause</li>
				6642	</ul>
				6643	</code></pre>
				6644	<p>The menu component is ready for use.</p>
				6645	<h4 id="examples">Examples</h4>
				6646	<p>A menu with three options.</p>
				6647	<pre><code class="language-markup"><button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
				6648	<i class="material-icons">more_vert</i>
				6649	</button>
				6650	<ul class="mdl-menu mdl-js-menu" for="menu-speed">
				6651	<li class="mdl-menu__item">Fast</li>
				6652	<li class="mdl-menu__item">Medium</li>
				6653	<li class="mdl-menu__item">Slow</li>
				6654	</ul>
				6655	</code></pre>
				6656	<p>A menu with three options, with ripple effect on button and option links.</p>
				6657	<pre><code class="language-markup"><button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
				6658	<i class="material-icons">more_vert</i>
				6659	</button>
				6660	<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
				6661	<li class="mdl-menu__item">Fast</li>
				6662	<li class="mdl-menu__item">Medium</li>
				6663	<li class="mdl-menu__item">Slow</li>
				6664	</ul>
				6665	</code></pre>
				6666	<p>A menu with three options, the second of which is disabled by default.</p>
				6667	<pre><code class="language-markup"><button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
				6668	<i class="material-icons">more_vert</i>
				6669	</button>
				6670	<ul class="mdl-menu mdl-js-menu" for="menu-speed">
				6671	<li class="mdl-menu__item">Fast</li>
				6672	<li class="mdl-menu__item" disabled>Medium</li>
				6673	<li class="mdl-menu__item">Slow</li>
				6674	</ul>
				6675	</code></pre>
				6676	<h2 id="configuration-options">Configuration options</h2>
				6677	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the menu. The table below lists the available classes and their effects.</p>
				6678	<table>
				6679	<thead>
				6680	<tr>
				6681	<th>MDL class</th>
				6682	<th>Effect</th>
				6683	<th>Remarks</th>
				6684	</tr>
				6685	</thead>
				6686	<tbody>
				6687	<tr>
				6688	<td><code>mdl-button</code></td>
				6689	<td>Defines button as an MDL component</td>
				6690	<td>Required on button element</td>
				6691	</tr>
				6692	<tr>
				6693	<td><code>mdl-js-button</code></td>
				6694	<td>Assigns basic MDL behavior to button</td>
				6695	<td>Required on button element</td>
				6696	</tr>
				6697	<tr>
				6698	<td><code>mdl-button--icon</code></td>
				6699	<td>Applies <em>icon</em> (small plain circular) display effect to button</td>
				6700	<td>Required on button element</td>
				6701	</tr>
				6702	<tr>
				6703	<td><code>material-icons</code></td>
				6704	<td>Defines span as a material icon</td>
				6705	<td>Required on an inline element</td>
				6706	</tr>
				6707	<tr>
				6708	<td><code>mdl-menu</code></td>
				6709	<td>Defines an unordered list container as an MDL component</td>
				6710	<td>Required on ul element</td>
				6711	</tr>
				6712	<tr>
				6713	<td><code>mdl-js-menu</code></td>
				6714	<td>Assigns basic MDL behavior to menu</td>
				6715	<td>Required on ul element</td>
				6716	</tr>
				6717	<tr>
				6718	<td><code>mdl-menu__item</code></td>
				6719	<td>Defines buttons as MDL menu options and assigns basic MDL behavior</td>
				6720	<td>Required on list item elements</td>
				6721	</tr>
				6722	<tr>
				6723	<td><code>mdl-menu__item--full-bleed-divider</code></td>
				6724	<td>Modifies an item to have a full bleed divider between it and the next list item.</td>
				6725	<td>Optional on list item elements</td>
				6726	</tr>
				6727	<tr>
				6728	<td><code>mdl-js-ripple-effect</code></td>
				6729	<td>Applies <em>ripple</em> click effect to option links</td>
				6730	<td>Optional; goes on unordered list element</td>
				6731	</tr>
				6732	<tr>
				6733	<td><code>mdl-menu--top-left</code></td>
				6734	<td>Positions menu above button, aligns left edge of menu with button</td>
				6735	<td>Optional; goes on unordered list element</td>
				6736	</tr>
				6737	<tr>
				6738	<td>(none)</td>
				6739	<td>Positions menu below button, aligns left edge of menu with button</td>
				6740	<td>Default</td>
				6741	</tr>
				6742	<tr>
				6743	<td><code>mdl-menu--top-right</code></td>
				6744	<td>Positions menu above button, aligns right edge of menu with button</td>
				6745	<td>Optional; goes on unordered list element</td>
				6746	</tr>
				6747	<tr>
				6748	<td><code>mdl-menu--bottom-right</code></td>
				6749	<td>Positions menu below button, aligns right edge of menu with button</td>
				6750	<td>Optional; goes on unordered list element</td>
				6751	</tr>
				6752	</tbody>
				6753	</table>
				6754	<p>(1) The "more-vert" icon class is used here as an example. Other icons can be used by modifying the class name. For a list of available icons, see <a href="http://google.github.io/web-starter-kit/latest/styleguide/icons/demo.html">this page</a>; hover over an icon to see its class name.</p>
				6755	<p>(2) The <code>i</code> or <code>span</code> element in "button"" element can be used interchangeably.</p>
				6756	<blockquote>
				6757	<p><strong>Note:</strong> Disabled versions of the menu options are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code> or <code>data-mdl-disabled</code>. <code><li class="mdl-menu__item" disabled>Medium</li></code>
				6758	This attribute may be added or removed programmatically via scripting.</p>
				6759	</blockquote>
				6760
				6761
				6762
				6763	</div>
				6764
				6765	</div>
				6766	</section>
				6767	<section id="sliders-section" class="mdl-components__page mdl-grid">
				6768	<div class="mdl-cell mdl-cell--12-col">
				6769	<div class="docs-text-styling component-title">
				6770	<h3>Sliders</h3>
				6771	<p>Selecting a value out of a range.</p>
				6772	</div>
				6773
				6774
				6775
				6776
				6777
				6778
				6779	<!-- Add warning, if the component has one -->
				6780
				6781	<!-- Generating snippets -->
				6782
				6783
				6784
				6785	<div class="snippet-group">
				6786
				6787	<div class="snippet-header">
				6788	<div class="snippet-demos">
				6789	<div class="snippet-demo-padding"></div>
				6790
				6791
				6792
				6793
				6794	<div class="snippet-demo">
				6795	<div class="snippet-demo-container demo-slider demo-slider__slider-default">
				6796	<style>
				6797	.demo-slider__slider-default .mdl-slider {
				6798	width: 30vw;
				6799	max-width: 260px;
				6800	}
				6801	</style>
				6802	<!-- Default Slider -->
				6803	<input class="mdl-slider mdl-js-slider" type="range"
				6804	min="0" max="100" value="0" tabindex="0">
				6805
				6806
				6807	</div>
				6808	</div>
				6809
				6810
				6811
				6812	<div class="snippet-demo">
				6813	<div class="snippet-demo-container demo-slider demo-slider__slider-starting-value">
				6814	<style>
				6815	.demo-slider__slider-starting-value .mdl-slider {
				6816	width: 30vw;
				6817	max-width: 260px;
				6818	}
				6819	</style>
				6820
				6821	<!-- Slider with Starting Value -->
				6822	<input class="mdl-slider mdl-js-slider" type="range"
				6823	min="0" max="100" value="25" tabindex="0">
				6824
				6825
				6826	</div>
				6827	</div>
				6828	<div class="snippet-demo-padding"></div>
				6829	</div>
				6830	<div class="snippet-captions">
				6831	<div class="snippet-caption-padding"></div>
				6832
				6833	<div class="snippet-caption">
				6834	Default slider
				6835	</div>
				6836	<div class="snippet-caption">
				6837	Starting value
				6838	</div>
				6839	<div class="snippet-caption-padding"></div>
				6840	</div>
				6841	</div>
				6842	<div class="snippet-code">
				6843	<pre class="language-markup codepen-button-enabled"><code id="slider/slider-default.html"><!-- Default Slider -->
				6844	<input class="mdl-slider mdl-js-slider" type="range"
				6845	min="0" max="100" value="0" tabindex="0">
				6846	</code><div class="codepen-extra-css"><style></style></div><code id="slider/slider-starting-value.html"><!-- Slider with Starting Value -->
				6847	<input class="mdl-slider mdl-js-slider" type="range"
				6848	min="0" max="100" value="25" tabindex="0">
				6849	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				6850	body {
				6851	padding: 20px;
				6852	background: #fafafa;
				6853	position: relative;
				6854	}
				6855	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				6856	</div>
				6857	</div>
				6858
				6859
				6860	<!-- Adding the demo page -->
				6861
				6862	<style>
				6863
				6864	</style>
				6865
				6866	<script>
				6867
				6868	</script>
				6869
				6870
				6871	<div class="docs-text-styling docs-readme">
				6872
				6873
				6874
				6875
				6876	<h2 id="introduction">Introduction</h2>
				6877	<p>The Material Design Lite (MDL) <strong>slider</strong> component is an enhanced version of the new HTML5 <code><input type="range"></code> element. A slider consists of a horizontal line upon which sits a small, movable disc (the <em>thumb</em>) and, typically, text that clearly communicates a value that will be set when the user moves it.</p>
				6878	<p>Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience. See the slider component's <a href="http://www.google.com/design/spec/components/sliders.html">Material Design specifications page</a> for details.</p>
				6879	<p>The enhanced slider component may be initially or programmatically <em>disabled</em>.</p>
				6880	<h3 id="to-include-an-mdl-slider-component-">To include an MDL <strong>slider</strong> component:</h3>
				6881	<p> 1. Code a <code><p></code> paragraph element and style it as desired. Include a CSS <code>width</code> property (directly or via a CSS class), which determines the slider's size.</p>
				6882	<pre><code class="language-markup"><p style="width:300px">
				6883	...
				6884	</p>
				6885	</code></pre>
				6886	<p> 2. Inside the paragraph container, code an <code><input></code> element and give it a <code>type</code> attribute whose value is <code>"range"</code>. Also give it an <code>id</code> attribute to make it available for scripting, and <code>min</code> and <code>max</code> attributes whose values specify the slider's range. Give it a <code>value</code> attribute whose value sets the initial thumb position (optional; if omitted, defaults to 50% of the maximum), and a <code>step</code> attribute whose value specifies the increment by which the thumb moves (also optional; if omitted, defaults to 1). Finally, give it an event handler to be executed when the user changes the slider's value.</p>
				6887	<pre><code class="language-markup"><p style="width:300px">
				6888	<input type="range" id="s1" min="0" max="10" value="4" step="2">
				6889	</p>
				6890	</code></pre>
				6891	<p> 3. Add one or more MDL classes, separated by spaces, to the slider using the <code>class</code> attribute.</p>
				6892	<pre><code class="language-markup"><p style="width:300px">
				6893	<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
				6894	</p>
				6895	</code></pre>
				6896	<p>The slider component is ready for use.</p>
				6897	<h4 id="example">Example</h4>
				6898	<p>A slider that controls volume.</p>
				6899	<pre><code class="language-markup"><p style="width:300px">
				6900	<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
				6901	</p>
				6902	</code></pre>
				6903	<h2 id="configuration-options">Configuration options</h2>
				6904	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the slider. The table below lists the available classes and their effects.</p>
				6905	<table>
				6906	<thead>
				6907	<tr>
				6908	<th>MDL class</th>
				6909	<th>Effect</th>
				6910	<th>Remarks</th>
				6911	</tr>
				6912	</thead>
				6913	<tbody>
				6914	<tr>
				6915	<td><code>mdl-slider</code></td>
				6916	<td>Defines input element as an MDL component</td>
				6917	<td>Required</td>
				6918	</tr>
				6919	<tr>
				6920	<td><code>mdl-js-slider</code></td>
				6921	<td>Assigns basic MDL behavior to input element</td>
				6922	<td>Required</td>
				6923	</tr>
				6924	</tbody>
				6925	</table>
				6926	<blockquote>
				6927	<p><strong>Note:</strong> A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled></code>
				6928	This attribute may be added or removed programmatically via scripting.</p>
				6929	<p><strong>Note:</strong> Although the <em>value</em> attribute is used to set a slider's initial value, it should not be used
				6930	to modify the value programmatically; instead, use the MDL <code>change()</code> method. For example, assuming
				6931	that <em>slider1</em> is a slider object and <em>newvalue</em> is a variable containing the desired value, do not
				6932	use <code>slider1.value = newvalue</code>; instead, use <code>slider1.MaterialSlider.change(newvalue)</code>.</p>
				6933	</blockquote>
				6934	<h2 id="license">License</h2>
				6935	<p>Copyright Google, 2015. Licensed under an Apache-2 license.</p>
				6936
				6937
				6938
				6939	</div>
				6940
				6941	</div>
				6942	</section>
				6943	<section id="snackbar-section" class="mdl-components__page mdl-grid">
				6944	<div class="mdl-cell mdl-cell--12-col">
				6945	<div class="docs-text-styling component-title">
				6946	<h3>Snackbar</h3>
				6947	<p>Transient popup notifications.</p>
				6948	</div>
				6949
				6950
				6951
				6952
				6953
				6954
				6955	<!-- Add warning, if the component has one -->
				6956
				6957	<!-- Generating snippets -->
				6958
				6959
				6960
				6961	<div class="snippet-group">
				6962
				6963	<div class="snippet-header">
				6964	<div class="snippet-demos">
				6965	<div class="snippet-demo-padding"></div>
				6966
				6967
				6968
				6969
				6970	<div class="snippet-demo">
				6971	<div class="snippet-demo-container demo-snackbar demo-snackbar__snackbar">
				6972	<button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
				6973	<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
				6974	<div class="mdl-snackbar__text"></div>
				6975	<button class="mdl-snackbar__action" type="button"></button>
				6976	</div>
				6977	<script>
				6978	(function() {
				6979	'use strict';
				6980	var snackbarContainer = document.querySelector('#demo-snackbar-example');
				6981	var showSnackbarButton = document.querySelector('#demo-show-snackbar');
				6982	var handler = function(event) {
				6983	showSnackbarButton.style.backgroundColor = '';
				6984	};
				6985	showSnackbarButton.addEventListener('click', function() {
				6986	'use strict';
				6987	showSnackbarButton.style.backgroundColor = '#' +
				6988	Math.floor(Math.random() * 0xFFFFFF).toString(16);
				6989	var data = {
				6990	message: 'Button color changed.',
				6991	timeout: 2000,
				6992	actionHandler: handler,
				6993	actionText: 'Undo'
				6994	};
				6995	snackbarContainer.MaterialSnackbar.showSnackbar(data);
				6996	});
				6997	}());
				6998	</script>
				6999
				7000	</div>
				7001	</div>
				7002	<div class="snippet-demo-padding"></div>
				7003	</div>
				7004	<div class="snippet-captions">
				7005	<div class="snippet-caption-padding"></div>
				7006
				7007	<div class="snippet-caption">
				7008	Snackbar
				7009	</div>
				7010	<div class="snippet-caption-padding"></div>
				7011	</div>
				7012	</div>
				7013	<div class="snippet-code">
				7014	<pre class="language-markup codepen-button-enabled"><code id="snackbar/snackbar.html"><button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
				7015	<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
				7016	<div class="mdl-snackbar__text"></div>
				7017	<button class="mdl-snackbar__action" type="button"></button>
				7018	</div>
				7019	<script>
				7020	(function() {
				7021	'use strict';
				7022	var snackbarContainer = document.querySelector('#demo-snackbar-example');
				7023	var showSnackbarButton = document.querySelector('#demo-show-snackbar');
				7024	var handler = function(event) {
				7025	showSnackbarButton.style.backgroundColor = '';
				7026	};
				7027	showSnackbarButton.addEventListener('click', function() {
				7028	'use strict';
				7029	showSnackbarButton.style.backgroundColor = '#' +
				7030	Math.floor(Math.random() * 0xFFFFFF).toString(16);
				7031	var data = {
				7032	message: 'Button color changed.',
				7033	timeout: 2000,
				7034	actionHandler: handler,
				7035	actionText: 'Undo'
				7036	};
				7037	snackbarContainer.MaterialSnackbar.showSnackbar(data);
				7038	});
				7039	}());
				7040	</script>
				7041	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				7042	body {
				7043	padding: 20px;
				7044	background: #fafafa;
				7045	position: relative;
				7046	}
				7047	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				7048	</div>
				7049	</div>
				7050
				7051
				7052
				7053
				7054	<div class="snippet-group">
				7055
				7056	<div class="snippet-header">
				7057	<div class="snippet-demos">
				7058	<div class="snippet-demo-padding"></div>
				7059
				7060
				7061
				7062
				7063	<div class="snippet-demo">
				7064	<div class="snippet-demo-container demo-snackbar demo-snackbar__toast">
				7065	<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
				7066	<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
				7067	<div class="mdl-snackbar__text"></div>
				7068	<button class="mdl-snackbar__action" type="button"></button>
				7069	</div>
				7070	<script>
				7071	(function() {
				7072	'use strict';
				7073	window['counter'] = 0;
				7074	var snackbarContainer = document.querySelector('#demo-toast-example');
				7075	var showToastButton = document.querySelector('#demo-show-toast');
				7076	showToastButton.addEventListener('click', function() {
				7077	'use strict';
				7078	var data = {message: 'Example Message # ' + ++counter};
				7079	snackbarContainer.MaterialSnackbar.showSnackbar(data);
				7080	});
				7081	}());
				7082	</script>
				7083
				7084	</div>
				7085	</div>
				7086	<div class="snippet-demo-padding"></div>
				7087	</div>
				7088	<div class="snippet-captions">
				7089	<div class="snippet-caption-padding"></div>
				7090
				7091	<div class="snippet-caption">
				7092	Toast
				7093	</div>
				7094	<div class="snippet-caption-padding"></div>
				7095	</div>
				7096	</div>
				7097	<div class="snippet-code">
				7098	<pre class="language-markup codepen-button-enabled"><code id="snackbar/toast.html"><button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
				7099	<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
				7100	<div class="mdl-snackbar__text"></div>
				7101	<button class="mdl-snackbar__action" type="button"></button>
				7102	</div>
				7103	<script>
				7104	(function() {
				7105	'use strict';
				7106	window['counter'] = 0;
				7107	var snackbarContainer = document.querySelector('#demo-toast-example');
				7108	var showToastButton = document.querySelector('#demo-show-toast');
				7109	showToastButton.addEventListener('click', function() {
				7110	'use strict';
				7111	var data = {message: 'Example Message # ' + ++counter};
				7112	snackbarContainer.MaterialSnackbar.showSnackbar(data);
				7113	});
				7114	}());
				7115	</script>
				7116	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				7117	body {
				7118	padding: 20px;
				7119	background: #fafafa;
				7120	position: relative;
				7121	}
				7122	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				7123	</div>
				7124	</div>
				7125
				7126
				7127	<!-- Adding the demo page -->
				7128
				7129	<style>
				7130
				7131	</style>
				7132
				7133	<script>
				7134
				7135	</script>
				7136
				7137
				7138	<div class="docs-text-styling docs-readme">
				7139
				7140
				7141
				7142
				7143	<h2 id="introduction">Introduction</h2>
				7144	<p>The Material Design Lite (MDL) <strong>snackbar</strong> component is a container used to notify a user of an operation's status.
				7145	It displays at the bottom of the screen.
				7146	A snackbar may contain an action button to execute a command for the user.
				7147	Actions should undo the committed action or retry it if it failed for example.
				7148	Actions should not be to close the snackbar.
				7149	By not providing an action, the snackbar becomes a <strong>toast</strong> component.</p>
				7150	<h2 id="basic-usage-">Basic Usage:</h2>
				7151	<p>Start a snackbar with a container div element.
				7152	On that container define the <code>mdl-js-snackbar</code> and <code>mdl-snackbar</code> classes.
				7153	It is also beneficial to add the aria live and atomic values to this container.</p>
				7154	<p>Within the container create a container element for the message.
				7155	This element should have the class <code>mdl-snackbar__text</code>.
				7156	Leave this element empty!
				7157	Text is added when the snackbar is called to be shown.</p>
				7158	<p>Second in the container, add a button element.
				7159	This element should have the class <code>mdl-snackbar__action</code>.
				7160	It is recommended to set the type to button to make sure no forms get submitted by accident.
				7161	Leave the text content empty here as well!
				7162	Do not directly apply any event handlers.</p>
				7163	<p>You now have complete markup for the snackbar to function.
				7164	All that is left is within your JavaScript to call the <code>showSnackbar</code> method on the snackbar container.
				7165	This takes a <a href="#data-object">plain object</a> to configure the snackbar content appropriately.
				7166	You may call it multiple consecutive times and messages will stack.</p>
				7167	<h2 id="examples">Examples</h2>
				7168	<p>All snackbars should be shown through the same element.</p>
				7169	<h4 id="markup-">Markup:</h4>
				7170	<pre><code class="language-markup"><div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
				7171	<div class="mdl-snackbar__text"></div>
				7172	<button type="button" class="mdl-snackbar__action"></button>
				7173	</div>
				7174	</code></pre>
				7175	<blockquote>
				7176	<p>Note: In this example there are a few aria attributes for accessibility. Please modify these as-needed for your site.</p>
				7177	</blockquote>
				7178	<h3 id="snackbar">Snackbar</h3>
				7179	<pre><code class="language-javascript">var notification = document.querySelector('.mdl-js-snackbar');
				7180	var data = {
				7181	message: 'Message Sent',
				7182	actionHandler: function(event) {},
				7183	actionText: 'Undo',
				7184	timeout: 10000
				7185	};
				7186	notification.MaterialSnackbar.showSnackbar(data);
				7187	</code></pre>
				7188	<h3 id="toast">Toast</h3>
				7189	<pre><code class="language-javascript">var notification = document.querySelector('.mdl-js-snackbar');
				7190	notification.MaterialSnackbar.showSnackbar(
				7191	{
				7192	message: 'Image Uploaded'
				7193	}
				7194	);
				7195	</code></pre>
				7196	<h2 id="css-classes">CSS Classes</h2>
				7197	<h3 id="blocks">Blocks</h3>
				7198	<table>
				7199	<thead>
				7200	<tr>
				7201	<th>MDL Class</th>
				7202	<th>Effect</th>
				7203	<th>Remarks</th>
				7204	</tr>
				7205	</thead>
				7206	<tbody>
				7207	<tr>
				7208	<td><code>mdl-snackbar</code></td>
				7209	<td>Defines the container of the snackbar component.</td>
				7210	<td>Required on snackbar container</td>
				7211	</tr>
				7212	</tbody>
				7213	</table>
				7214	<h3 id="elements">Elements</h3>
				7215	<table>
				7216	<thead>
				7217	<tr>
				7218	<th>MDL Class</th>
				7219	<th>Effect</th>
				7220	<th>Remarks</th>
				7221	</tr>
				7222	</thead>
				7223	<tbody>
				7224	<tr>
				7225	<td><code>mdl-snackbar__text</code></td>
				7226	<td>Defines the element containing the text of the snackbar.</td>
				7227	<td>Required</td>
				7228	</tr>
				7229	<tr>
				7230	<td><code>mdl-snackbar__action</code></td>
				7231	<td>Defines the element that triggers the action of a snackbar.</td>
				7232	<td>Required</td>
				7233	</tr>
				7234	</tbody>
				7235	</table>
				7236	<h3 id="modifiers">Modifiers</h3>
				7237	<table>
				7238	<thead>
				7239	<tr>
				7240	<th>MDL Class</th>
				7241	<th>Effect</th>
				7242	<th>Remarks</th>
				7243	</tr>
				7244	</thead>
				7245	<tbody>
				7246	<tr>
				7247	<td><code>mdl-snackbar--active</code></td>
				7248	<td>Marks the snackbar as active which causes it to display.</td>
				7249	<td>Required when active. Controlled in JavaScript</td>
				7250	</tr>
				7251	</tbody>
				7252	</table>
				7253	<h2 id="data-object">Data Object</h2>
				7254	<p>The Snackbar components <code>showSnackbar</code> method takes an object for snackbar data.
				7255	The table below shows the properties and their usage.</p>
				7256	<table>
				7257	<thead>
				7258	<tr>
				7259	<th>Property</th>
				7260	<th>Effect</th>
				7261	<th>Remarks</th>
				7262	<th>Type</th>
				7263	</tr>
				7264	</thead>
				7265	<tbody>
				7266	<tr>
				7267	<td>message</td>
				7268	<td>The text message to display.</td>
				7269	<td>Required</td>
				7270	<td>String</td>
				7271	</tr>
				7272	<tr>
				7273	<td>timeout</td>
				7274	<td>The amount of time in milliseconds to show the snackbar.</td>
				7275	<td>Optional (default 2750)</td>
				7276	<td>Integer</td>
				7277	</tr>
				7278	<tr>
				7279	<td>actionHandler</td>
				7280	<td>The function to execute when the action is clicked.</td>
				7281	<td>Optional</td>
				7282	<td>Function</td>
				7283	</tr>
				7284	<tr>
				7285	<td>actionText</td>
				7286	<td>The text to display for the action button.</td>
				7287	<td>Required if actionHandler is set</td>
				7288	<td>String.</td>
				7289	</tr>
				7290	</tbody>
				7291	</table>
				7292
				7293
				7294
				7295	</div>
				7296
				7297	</div>
				7298	</section>
				7299	<section id="toggles-section" class="mdl-components__page mdl-grid">
				7300	<div class="mdl-cell mdl-cell--12-col">
				7301	<div class="docs-text-styling component-title">
				7302	<h3>Toggles</h3>
				7303	<p>Choose between states.</p>
				7304	</div>
				7305
				7306
				7307	<section class="docs-toc docs-text-styling">
				7308	<nav class="section-content">
				7309	<ul>
				7310
				7311	<li><a href="#toggles-section/checkbox">Checkbox</a></li>
				7312
				7313	<li><a href="#toggles-section/radio">Radio button</a></li>
				7314
				7315	<li><a href="#toggles-section/icon-toggle">Icon toggle</a></li>
				7316
				7317	<li><a href="#toggles-section/switch">Switch</a></li>
				7318
				7319	</ul>
				7320	</nav>
				7321	</section>
				7322
				7323
				7324
				7325
				7326
				7327	<span class="docs-text-styling">
				7328	<h1 class="mdl-components__classname" id="toggles-section/checkbox">Checkbox</h1>
				7329	</span>
				7330
				7331	<!-- Add warning, if the component has one -->
				7332
				7333	<!-- Generating snippets -->
				7334
				7335
				7336
				7337	<div class="snippet-group">
				7338
				7339	<div class="snippet-header">
				7340	<div class="snippet-demos">
				7341	<div class="snippet-demo-padding"></div>
				7342
				7343
				7344
				7345
				7346	<div class="snippet-demo">
				7347	<div class="snippet-demo-container demo-checkbox demo-checkbox__check-on">
				7348	<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
				7349	<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
				7350	<span class="mdl-checkbox__label">Checkbox</span>
				7351	</label>
				7352
				7353	</div>
				7354	</div>
				7355
				7356
				7357
				7358	<div class="snippet-demo">
				7359	<div class="snippet-demo-container demo-checkbox demo-checkbox__check-off">
				7360	<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
				7361	<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
				7362	<span class="mdl-checkbox__label">Checkbox</span>
				7363	</label>
				7364
				7365	</div>
				7366	</div>
				7367	<div class="snippet-demo-padding"></div>
				7368	</div>
				7369	<div class="snippet-captions">
				7370	<div class="snippet-caption-padding"></div>
				7371
				7372	<div class="snippet-caption">
				7373	Check on
				7374	</div>
				7375	<div class="snippet-caption">
				7376	Check off
				7377	</div>
				7378	<div class="snippet-caption-padding"></div>
				7379	</div>
				7380	</div>
				7381	<div class="snippet-code">
				7382	<pre class="language-markup codepen-button-enabled"><code id="checkbox/check-on.html"><label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
				7383	<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
				7384	<span class="mdl-checkbox__label">Checkbox</span>
				7385	</label>
				7386	</code><div class="codepen-extra-css"><style></style></div><code id="checkbox/check-off.html"><label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
				7387	<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
				7388	<span class="mdl-checkbox__label">Checkbox</span>
				7389	</label>
				7390	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				7391	body {
				7392	padding: 20px;
				7393	background: #fafafa;
				7394	position: relative;
				7395	}
				7396	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				7397	</div>
				7398	</div>
				7399
				7400
				7401	<!-- Adding the demo page -->
				7402
				7403	<style>
				7404
				7405	</style>
				7406
				7407	<script>
				7408
				7409	</script>
				7410
				7411
				7412	<div class="docs-text-styling docs-readme">
				7413
				7414
				7415
				7416
				7417	<h2 id="introduction">Introduction</h2>
				7418	<p>The Material Design Lite (MDL) <strong>checkbox</strong> component is an enhanced version of the standard HTML <code><input type="checkbox"></code> element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.</p>
				7419	<p>Checkboxes are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the checkbox component's <a href="https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox">Material Design specifications page</a> for details.</p>
				7420	<p>The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically <em>disabled</em>.</p>
				7421	<h3 id="to-include-an-mdl-checkbox-component-">To include an MDL <strong>checkbox</strong> component:</h3>
				7422	<p> 1. Code a <code><label></code> element and give it a <code>for</code> attribute whose value is the unique id of the checkbox it will contain. The <code>for</code> attribute is optional when the <code><input></code> element is contained inside the <code><label></code> element, but is recommended for clarity.</p>
				7423	<pre><code class="language-markup"><label for="chkbox1">
				7424	...
				7425	</label>
				7426	</code></pre>
				7427	<p> 2. Inside the label, code an <code><input></code> element and give it a <code>type</code> attribute whose value is <code>"checkbox"</code>. Also give it an <code>id</code> attribute whose value matches the label's <code>for</code> attribute value.</p>
				7428	<pre><code class="language-markup"><label for="chkbox1">
				7429	<input type="checkbox" id="chkbox1">
				7430	</label>
				7431	</code></pre>
				7432	<p> 3. Also inside the label, after the checkbox, code a <code><span></code> element containing the checkbox's text caption.</p>
				7433	<pre><code class="language-markup"><label for="chkbox1">
				7434	<input type="checkbox" id="chkbox1">
				7435	<span>Enable AutoSave</span>
				7436	</label>
				7437	</code></pre>
				7438	<p> 4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the <code>class</code> attribute.</p>
				7439	<pre><code class="language-markup"><label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
				7440	<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
				7441	<span class="mdl-checkbox__label">Enable AutoSave</span>
				7442	</label>
				7443	</code></pre>
				7444	<p>The checkbox component is ready for use.</p>
				7445	<h4 id="example">Example</h4>
				7446	<p>A checkbox with a ripple click effect.</p>
				7447	<pre><code class="language-markup"><label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
				7448	<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
				7449	<span class="mdl-checkbox__label">Enable AutoSave</span>
				7450	</label>
				7451	</code></pre>
				7452	<h2 id="configuration-options">Configuration options</h2>
				7453	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects.</p>
				7454	<table>
				7455	<thead>
				7456	<tr>
				7457	<th>MDL class</th>
				7458	<th>Effect</th>
				7459	<th>Remarks</th>
				7460	</tr>
				7461	</thead>
				7462	<tbody>
				7463	<tr>
				7464	<td><code>mdl-checkbox</code></td>
				7465	<td>Defines label as an MDL component</td>
				7466	<td>Required on label element</td>
				7467	</tr>
				7468	<tr>
				7469	<td><code>mdl-js-checkbox</code></td>
				7470	<td>Assigns basic MDL behavior to label</td>
				7471	<td>Required on label element</td>
				7472	</tr>
				7473	<tr>
				7474	<td><code>mdl-checkbox__input</code></td>
				7475	<td>Applies basic MDL behavior to checkbox</td>
				7476	<td>Required on input element (checkbox)</td>
				7477	</tr>
				7478	<tr>
				7479	<td><code>mdl-checkbox__label</code></td>
				7480	<td>Applies basic MDL behavior to caption</td>
				7481	<td>Required on span element (caption)</td>
				7482	</tr>
				7483	<tr>
				7484	<td><code>mdl-js-ripple-effect</code></td>
				7485	<td>Applies <em>ripple</em> click effect</td>
				7486	<td>Optional; goes on label element, not input element (checkbox)</td>
				7487	</tr>
				7488	</tbody>
				7489	</table>
				7490	<blockquote>
				7491	<p><strong>Note:</strong> Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled></code>
				7492	This attribute may be added or removed programmatically via scripting.</p>
				7493	</blockquote>
				7494
				7495
				7496
				7497	</div>
				7498
				7499
				7500
				7501	<span class="docs-text-styling">
				7502	<h1 class="mdl-components__classname" id="toggles-section/radio">Radio button</h1>
				7503	</span>
				7504
				7505	<!-- Add warning, if the component has one -->
				7506
				7507	<!-- Generating snippets -->
				7508
				7509
				7510
				7511	<div class="snippet-group">
				7512
				7513	<div class="snippet-header">
				7514	<div class="snippet-demos">
				7515	<div class="snippet-demo-padding"></div>
				7516
				7517
				7518
				7519
				7520	<div class="snippet-demo">
				7521	<div class="snippet-demo-container demo-radio demo-radio__radio-on">
				7522	<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
				7523	<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
				7524	<span class="mdl-radio__label">First</span>
				7525	</label>
				7526
				7527	</div>
				7528	</div>
				7529
				7530
				7531
				7532	<div class="snippet-demo">
				7533	<div class="snippet-demo-container demo-radio demo-radio__radio-off">
				7534	<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
				7535	<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
				7536	<span class="mdl-radio__label">Second</span>
				7537	</label>
				7538
				7539	</div>
				7540	</div>
				7541	<div class="snippet-demo-padding"></div>
				7542	</div>
				7543	<div class="snippet-captions">
				7544	<div class="snippet-caption-padding"></div>
				7545
				7546	<div class="snippet-caption">
				7547	Radio on
				7548	</div>
				7549	<div class="snippet-caption">
				7550	Radio off
				7551	</div>
				7552	<div class="snippet-caption-padding"></div>
				7553	</div>
				7554	</div>
				7555	<div class="snippet-code">
				7556	<pre class="language-markup codepen-button-enabled"><code id="radio/radio-on.html"><label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
				7557	<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
				7558	<span class="mdl-radio__label">First</span>
				7559	</label>
				7560	</code><div class="codepen-extra-css"><style></style></div><code id="radio/radio-off.html"><label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
				7561	<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
				7562	<span class="mdl-radio__label">Second</span>
				7563	</label>
				7564	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				7565	body {
				7566	padding: 20px;
				7567	background: #fafafa;
				7568	position: relative;
				7569	}
				7570	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				7571	</div>
				7572	</div>
				7573
				7574
				7575	<!-- Adding the demo page -->
				7576
				7577	<style>
				7578
				7579	</style>
				7580
				7581	<script>
				7582
				7583	</script>
				7584
				7585
				7586	<div class="docs-text-styling docs-readme">
				7587
				7588
				7589
				7590
				7591	<h2 id="introduction">Introduction</h2>
				7592	<p>The Material Design Lite (MDL) <strong>radio</strong> component is an enhanced version of the standard HTML <code><input type="radio"></code>, or "radio button" element. A radio button consists of a small circle and, typically, text that clearly communicates a condition that will be set when the user clicks or touches it. Radio buttons always appear in groups of two or more and, while they can be individually selected, can only be deselected by selecting a different radio button in the same group (which deselects all other radio buttons in the group). The MDL radio component allows you to add display and click effects.</p>
				7593	<p>Radio buttons are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the radio component's <a href="https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button">Material Design specifications page</a> for details.</p>
				7594	<p>The enhanced radio component has a more vivid visual look than a standard radio button, and may be initially or programmatically <em>disabled</em>.</p>
				7595	<h3 id="to-include-an-mdl-radio-component-">To include an MDL <strong>radio</strong> component:</h3>
				7596	<p> 1. Code a <code><label></code> element and give it a <code>for</code> attribute whose value is the unique id of the radio button it will contain. The <code>for</code> attribute is optional when the <code><input></code> element is contained inside the <code><label></code> element, but is recommended for clarity.</p>
				7597	<pre><code class="language-markup"><label for="radio1">
				7598	...
				7599	</label>
				7600	</code></pre>
				7601	<p> 2. Inside the label, code an <code><input></code> element and give it a <code>type</code> attribute whose value is <code>"radio"</code>. Also give it an <code>id</code> attribute whose value matches the label's <code>for</code> attribute value, and a <code>name</code> attribute whose value identifies the radio button group. Optionally, give it a <code>value</code> attribute whose value provides some information about the radio button for scripting purposes.</p>
				7602	<pre><code class="language-markup"><label for="radio1">
				7603	<input type="radio" id="radio1" name="flash" value="on">
				7604	</label>
				7605	</code></pre>
				7606	<p> 3. Also inside the label, after the radio button, code a <code><span></code> element containing the radio button's text caption.</p>
				7607	<pre><code class="language-markup"><label for="radio1">
				7608	<input type="radio" id="radio1" name="flash" value="on">
				7609	<span>Always on</span>
				7610	</label>
				7611	</code></pre>
				7612	<p> 4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the <code>class</code> attribute.</p>
				7613	<pre><code class="language-markup"><label for="radio1" class="mdl-radio mdl-js-radio">
				7614	<input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
				7615	<span class="mdl-radio__label">Always on</span>
				7616	</label>
				7617	</code></pre>
				7618	<p> 5. Repeat steps 1 through 4 for the other radio components in the group. For each one:</p>
				7619	<ul>
				7620	<li>on the <code>label</code> element, specify a unique <code>for</code> attribute value</li>
				7621	<li>on the <code>input</code> element, specify an <code>id</code> attribute value that matches its <code>label</code> element's <code>for</code> attribute value</li>
				7622	<li>on the <code>input</code> element, specify the same <code>name</code> attribute value for all radio components in the group</li>
				7623	<li>optionally, on the <code>input</code> element, specify a unique <code>value</code> attribute value</li>
				7624	</ul>
				7625	<p>The radio components are ready for use.</p>
				7626	<h4 id="example">Example</h4>
				7627	<p>A group of radio buttons to control a camera's flash setting.</p>
				7628	<pre><code class="language-markup"><label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
				7629	<input checked class="mdl-radio__button" id="flash1" name="flash" type="radio"
				7630	value="on">
				7631	<span class="mdl-radio__label">Always on</span>
				7632	</label>
				7633	<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
				7634	<input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
				7635	<span class="mdl-radio__label">Always off</span>
				7636	</label>
				7637	<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
				7638	<input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
				7639	<span class="mdl-radio__label">Automatic</span>
				7640	</label>
				7641	</code></pre>
				7642	<h2 id="configuration-options">Configuration options</h2>
				7643	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the radio button. The table below lists the available classes and their effects.</p>
				7644	<table>
				7645	<thead>
				7646	<tr>
				7647	<th>MDL class</th>
				7648	<th>Effect</th>
				7649	<th>Remarks</th>
				7650	</tr>
				7651	</thead>
				7652	<tbody>
				7653	<tr>
				7654	<td><code>mdl-radio</code></td>
				7655	<td>Defines label as an MDL component</td>
				7656	<td>Required on label element</td>
				7657	</tr>
				7658	<tr>
				7659	<td><code>mdl-js-radio</code></td>
				7660	<td>Assigns basic MDL behavior to label</td>
				7661	<td>Required on label element</td>
				7662	</tr>
				7663	<tr>
				7664	<td><code>mdl-radio__button</code></td>
				7665	<td>Applies basic MDL behavior to radio</td>
				7666	<td>Required on input element (radio button)</td>
				7667	</tr>
				7668	<tr>
				7669	<td><code>mdl-radio__label</code></td>
				7670	<td>Applies basic MDL behavior to caption</td>
				7671	<td>Required on span element (caption)</td>
				7672	</tr>
				7673	<tr>
				7674	<td><code>mdl-js-ripple-effect</code></td>
				7675	<td>Applies <em>ripple</em> click effect</td>
				7676	<td>Optional; goes on label element, not input element (radio button)</td>
				7677	</tr>
				7678	</tbody>
				7679	</table>
				7680	<blockquote>
				7681	<p><strong>Note:</strong> Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled></code>
				7682	This attribute may be added or removed programmatically via scripting.</p>
				7683	</blockquote>
				7684
				7685
				7686
				7687	</div>
				7688
				7689
				7690
				7691	<span class="docs-text-styling">
				7692	<h1 class="mdl-components__classname" id="toggles-section/icon-toggle">Icon toggle</h1>
				7693	</span>
				7694
				7695	<!-- Add warning, if the component has one -->
				7696
				7697	<!-- Generating snippets -->
				7698
				7699
				7700
				7701	<div class="snippet-group">
				7702
				7703	<div class="snippet-header">
				7704	<div class="snippet-demos">
				7705	<div class="snippet-demo-padding"></div>
				7706
				7707
				7708
				7709
				7710	<div class="snippet-demo">
				7711	<div class="snippet-demo-container demo-icon-toggle demo-icon-toggle__icon-on">
				7712	<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
				7713	<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
				7714	<i class="mdl-icon-toggle__label material-icons">format_bold</i>
				7715	</label>
				7716
				7717	</div>
				7718	</div>
				7719
				7720
				7721
				7722	<div class="snippet-demo">
				7723	<div class="snippet-demo-container demo-icon-toggle demo-icon-toggle__icon-off">
				7724	<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
				7725	<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
				7726	<i class="mdl-icon-toggle__label material-icons">format_italic</i>
				7727	</label>
				7728
				7729	</div>
				7730	</div>
				7731	<div class="snippet-demo-padding"></div>
				7732	</div>
				7733	<div class="snippet-captions">
				7734	<div class="snippet-caption-padding"></div>
				7735
				7736	<div class="snippet-caption">
				7737	Icon on
				7738	</div>
				7739	<div class="snippet-caption">
				7740	Icon off
				7741	</div>
				7742	<div class="snippet-caption-padding"></div>
				7743	</div>
				7744	</div>
				7745	<div class="snippet-code">
				7746	<pre class="language-markup codepen-button-enabled"><code id="icon-toggle/icon-on.html"><label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
				7747	<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
				7748	<i class="mdl-icon-toggle__label material-icons">format_bold</i>
				7749	</label>
				7750	</code><div class="codepen-extra-css"><style></style></div><code id="icon-toggle/icon-off.html"><label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
				7751	<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
				7752	<i class="mdl-icon-toggle__label material-icons">format_italic</i>
				7753	</label>
				7754	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				7755	body {
				7756	padding: 20px;
				7757	background: #fafafa;
				7758	position: relative;
				7759	}
				7760	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				7761	</div>
				7762	</div>
				7763
				7764
				7765	<!-- Adding the demo page -->
				7766
				7767	<style>
				7768
				7769	</style>
				7770
				7771	<script>
				7772
				7773	</script>
				7774
				7775
				7776	<div class="docs-text-styling docs-readme">
				7777
				7778
				7779
				7780
				7781	<h2 id="introduction">Introduction</h2>
				7782	<p>The Material Design Lite (MDL) <strong>icon-toggle</strong> component is an enhanced version of the standard HTML <code><input type="checkbox"></code> element. An icon-toggle consists of a user defined icon that indicates, by visual highlighting, a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, icon-toggles may appear individually or in groups, and can be selected and deselected individually.</p>
				7783	<p>Icon toggles, particularly as a replacement for certain checkboxes, can be a valuable feature in user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the icon-toggle component's <a href="http://www.google.com/design/spec/components/buttons.html#buttons-other-buttons">Material Design specifications page</a> for details.</p>
				7784	<p>The icon-toggle component can have a more customized visual look than a standard checkbox, and may be initially or programmatically <em>disabled</em>.</p>
				7785	<h3 id="to-include-an-mdl-icon-toggle-component-">To include an MDL <strong>icon-toggle</strong> component:</h3>
				7786	<p> 1. Code a <code><label></code> element and give it a <code>for</code> attribute whose value is the unique id of the icon-toggle it will contain.</p>
				7787	<pre><code class="language-markup"><label for="icon-toggle-1">
				7788	...
				7789	</label>
				7790	</code></pre>
				7791	<p> 2. Inside the label, code an <code><input></code> element and give it a <code>type</code> attribute whose value is <code>"checkbox"</code>. Also give it an <code>id</code> attribute whose value matches the label's <code>for</code> attribute value.</p>
				7792	<pre><code class="language-markup"><label for="icon-toggle-1">
				7793	<input type="checkbox" id="icon-toggle-1">
				7794	</label>
				7795	</code></pre>
				7796	<p> 3. Also inside the label, after the input element, code an <code><i></code> element containing the icon-toggle's desired icon.</p>
				7797	<pre><code class="language-markup"><label for="icon-toggle-1">
				7798	<input type="checkbox" id="icon-toggle-1">
				7799	<i class="mdl-icon-toggle__label material-icons">format_bold</i>
				7800	</label>
				7801	</code></pre>
				7802	<p> 4. Add one or more MDL classes, separated by spaces, to the label and input elements, using the <code>class</code> attribute.</p>
				7803	<pre><code class="language-markup"><label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
				7804	<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
				7805	<i class="mdl-icon-toggle__label material-icons">format_bold</i>
				7806	</label>
				7807	</code></pre>
				7808	<p>The icon-toggle component is ready for use.</p>
				7809	<h4 id="example">Example</h4>
				7810	<p>An icon-toggle with a ripple click effect.</p>
				7811	<pre><code class="language-markup"><label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
				7812	<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
				7813	<i class="mdl-icon-toggle__label material-icons">format_bold</i>
				7814	</label>
				7815	</code></pre>
				7816	<h2 id="configuration-options">Configuration options</h2>
				7817	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the icon-toggle. The table below lists the available classes and their effects.</p>
				7818	<table>
				7819	<thead>
				7820	<tr>
				7821	<th>MDL class</th>
				7822	<th>Effect</th>
				7823	<th>Remarks</th>
				7824	</tr>
				7825	</thead>
				7826	<tbody>
				7827	<tr>
				7828	<td><code>mdl-icon-toggle</code></td>
				7829	<td>Defines label as an MDL component</td>
				7830	<td>Required on label element</td>
				7831	</tr>
				7832	<tr>
				7833	<td><code>mdl-js-icon-toggle</code></td>
				7834	<td>Assigns basic MDL behavior to label</td>
				7835	<td>Required on label element</td>
				7836	</tr>
				7837	<tr>
				7838	<td><code>mdl-icon-toggle__input</code></td>
				7839	<td>Applies basic MDL behavior to icon-toggle</td>
				7840	<td>Required on input element (icon-toggle)</td>
				7841	</tr>
				7842	<tr>
				7843	<td><code>mdl-icon-toggle__label</code></td>
				7844	<td>Applies basic MDL behavior to caption</td>
				7845	<td>Required on i element (icon)</td>
				7846	</tr>
				7847	<tr>
				7848	<td><code>mdl-js-ripple-effect</code></td>
				7849	<td>Applies <em>ripple</em> click effect</td>
				7850	<td>Optional; goes on label element, not input element (icon-toggle)</td>
				7851	</tr>
				7852	</tbody>
				7853	</table>
				7854	<blockquote>
				7855	<p><strong>Note:</strong> Disabled versions of all available input types are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled></code>
				7856	This attribute may be added or removed programmatically via scripting.</p>
				7857	</blockquote>
				7858
				7859
				7860
				7861	</div>
				7862
				7863
				7864
				7865	<span class="docs-text-styling">
				7866	<h1 class="mdl-components__classname" id="toggles-section/switch">Switch</h1>
				7867	</span>
				7868
				7869	<!-- Add warning, if the component has one -->
				7870
				7871	<!-- Generating snippets -->
				7872
				7873
				7874
				7875	<div class="snippet-group">
				7876
				7877	<div class="snippet-header">
				7878	<div class="snippet-demos">
				7879	<div class="snippet-demo-padding"></div>
				7880
				7881
				7882
				7883
				7884	<div class="snippet-demo">
				7885	<div class="snippet-demo-container demo-switch demo-switch__switch-on">
				7886	<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
				7887	<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
				7888	<span class="mdl-switch__label"></span>
				7889	</label>
				7890
				7891	</div>
				7892	</div>
				7893
				7894
				7895
				7896	<div class="snippet-demo">
				7897	<div class="snippet-demo-container demo-switch demo-switch__switch-off">
				7898	<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
				7899	<input type="checkbox" id="switch-2" class="mdl-switch__input">
				7900	<span class="mdl-switch__label"></span>
				7901	</label>
				7902
				7903	</div>
				7904	</div>
				7905	<div class="snippet-demo-padding"></div>
				7906	</div>
				7907	<div class="snippet-captions">
				7908	<div class="snippet-caption-padding"></div>
				7909
				7910	<div class="snippet-caption">
				7911	Switch on
				7912	</div>
				7913	<div class="snippet-caption">
				7914	Switch off
				7915	</div>
				7916	<div class="snippet-caption-padding"></div>
				7917	</div>
				7918	</div>
				7919	<div class="snippet-code">
				7920	<pre class="language-markup codepen-button-enabled"><code id="switch/switch-on.html"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
				7921	<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
				7922	<span class="mdl-switch__label"></span>
				7923	</label>
				7924	</code><div class="codepen-extra-css"><style></style></div><code id="switch/switch-off.html"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
				7925	<input type="checkbox" id="switch-2" class="mdl-switch__input">
				7926	<span class="mdl-switch__label"></span>
				7927	</label>
				7928	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				7929	body {
				7930	padding: 20px;
				7931	background: #fafafa;
				7932	position: relative;
				7933	}
				7934	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				7935	</div>
				7936	</div>
				7937
				7938
				7939	<!-- Adding the demo page -->
				7940
				7941	<style>
				7942
				7943	</style>
				7944
				7945	<script>
				7946
				7947	</script>
				7948
				7949
				7950	<div class="docs-text-styling docs-readme">
				7951
				7952
				7953
				7954
				7955	<h2 id="introduction">Introduction</h2>
				7956	<p>The Material Design Lite (MDL) <strong>switch</strong> component is an enhanced version of the standard HTML <code><input type="checkbox"></code> element. A switch consists of a short horizontal "track" with a prominent circular state indicator and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, switches may appear individually or in groups, and can be selected and deselected individually. However, switches provide a more intuitive visual representation of their state: left/gray for <em>off</em>, right/colored for <em>on</em>. The MDL switch component allows you to add both display and click effects.</p>
				7957	<p>Switches, particularly as a replacement for certain checkboxes, can be a valuable feature in user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the switch component's <a href="http://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch">Material Design specifications page</a> for details.</p>
				7958	<p>The enhanced switch component has a more vivid visual look than a standard checkbox, and may be initially or programmatically <em>disabled</em>.</p>
				7959	<h3 id="to-include-an-mdl-switch-component-">To include an MDL <strong>switch</strong> component:</h3>
				7960	<p> 1. Code a <code><label></code> element and give it a <code>for</code> attribute whose value is the unique id of the switch it will contain.</p>
				7961	<pre><code class="language-markup"><label for="switch1">
				7962	...
				7963	</label>
				7964	</code></pre>
				7965	<p> 2. Inside the label, code an <code><input></code> element and give it a <code>type</code> attribute whose value is <code>"checkbox"</code>. Also give it an <code>id</code> attribute whose value matches the label's <code>for</code> attribute value.</p>
				7966	<pre><code class="language-markup"><label for="switch1">
				7967	<input type="checkbox" id="switch1">
				7968	</label>
				7969	</code></pre>
				7970	<p> 3. Also inside the label, after the checkbox, code a <code><span></code> element containing the switch's text caption.</p>
				7971	<pre><code class="language-markup"><label for="switch1">
				7972	<input type="checkbox" id="switch1">
				7973	<span>Sound off/on</span>
				7974	</label>
				7975	</code></pre>
				7976	<p> 4. Add one or more MDL classes, separated by spaces, to the label, switch, and caption using the <code>class</code> attribute.</p>
				7977	<pre><code class="language-markup"><label for="switch1" class="mdl-switch mdl-js-switch">
				7978	<input type="checkbox" id="switch1" class="mdl-switch__input">
				7979	<span class="mdl-switch__label">Sound off/on</span>
				7980	</label>
				7981	</code></pre>
				7982	<p>The switch component is ready for use.</p>
				7983	<h4 id="example">Example</h4>
				7984	<p>A switch with a ripple click effect.</p>
				7985	<pre><code class="language-markup"><label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
				7986	<input type="checkbox" id="switch1" class="mdl-switch__input">
				7987	<span class="mdl-switch__label">Sound off/on</span>
				7988	</label>
				7989	</code></pre>
				7990	<h2 id="configuration-options">Configuration options</h2>
				7991	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the switch. The table below lists the available classes and their effects.</p>
				7992	<table>
				7993	<thead>
				7994	<tr>
				7995	<th>MDL class</th>
				7996	<th>Effect</th>
				7997	<th>Remarks</th>
				7998	</tr>
				7999	</thead>
				8000	<tbody>
				8001	<tr>
				8002	<td><code>mdl-switch</code></td>
				8003	<td>Defines label as an MDL component</td>
				8004	<td>Required on label element</td>
				8005	</tr>
				8006	<tr>
				8007	<td><code>mdl-js-switch</code></td>
				8008	<td>Assigns basic MDL behavior to label</td>
				8009	<td>Required on label element</td>
				8010	</tr>
				8011	<tr>
				8012	<td><code>mdl-switch__input</code></td>
				8013	<td>Applies basic MDL behavior to switch</td>
				8014	<td>Required on input element (switch)</td>
				8015	</tr>
				8016	<tr>
				8017	<td><code>mdl-switch__label</code></td>
				8018	<td>Applies basic MDL behavior to caption</td>
				8019	<td>Required on span element (caption)</td>
				8020	</tr>
				8021	<tr>
				8022	<td><code>mdl-js-ripple-effect</code></td>
				8023	<td>Applies <em>ripple</em> click effect</td>
				8024	<td>Optional; goes on label element, not input element (switch)</td>
				8025	</tr>
				8026	</tbody>
				8027	</table>
				8028	<blockquote>
				8029	<p><strong>Note:</strong> Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input type="checkbox" id="switch5" class="mdl-switch__input" disabled></code>
				8030	This attribute may be added or removed programmatically via scripting.</p>
				8031	</blockquote>
				8032
				8033
				8034
				8035	</div>
				8036
				8037	</div>
				8038	</section>
				8039	<section id="tables-section" class="mdl-components__page mdl-grid">
				8040	<div class="mdl-cell mdl-cell--12-col">
				8041	<div class="docs-text-styling component-title">
				8042	<h3>Tables</h3>
				8043	<p>Organize data.</p>
				8044	</div>
				8045
				8046
				8047
				8048
				8049
				8050
				8051	<!-- Add warning, if the component has one -->
				8052
				8053	<!-- Generating snippets -->
				8054
				8055
				8056
				8057	<div class="snippet-group">
				8058
				8059	<div class="snippet-header">
				8060	<div class="snippet-demos">
				8061	<div class="snippet-demo-padding"></div>
				8062
				8063
				8064
				8065
				8066	<div class="snippet-demo">
				8067	<div class="snippet-demo-container demo-data-table demo-data-table__data-table">
				8068	<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
				8069	<thead>
				8070	<tr>
				8071	<th class="mdl-data-table__cell--non-numeric">Material</th>
				8072	<th>Quantity</th>
				8073	<th>Unit price</th>
				8074	</tr>
				8075	</thead>
				8076	<tbody>
				8077	<tr>
				8078	<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
				8079	<td>25</td>
				8080	<td>$2.90</td>
				8081	</tr>
				8082	<tr>
				8083	<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
				8084	<td>50</td>
				8085	<td>$1.25</td>
				8086	</tr>
				8087	<tr>
				8088	<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
				8089	<td>10</td>
				8090	<td>$2.35</td>
				8091	</tr>
				8092	</tbody>
				8093	</table>
				8094
				8095	</div>
				8096	</div>
				8097	<div class="snippet-demo-padding"></div>
				8098	</div>
				8099	<div class="snippet-captions">
				8100	<div class="snippet-caption-padding"></div>
				8101
				8102	<div class="snippet-caption">
				8103	Data table
				8104	</div>
				8105	<div class="snippet-caption-padding"></div>
				8106	</div>
				8107	</div>
				8108	<div class="snippet-code">
				8109	<pre class="language-markup codepen-button-enabled"><code id="data-table/data-table.html"><table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
				8110	<thead>
				8111	<tr>
				8112	<th class="mdl-data-table__cell--non-numeric">Material</th>
				8113	<th>Quantity</th>
				8114	<th>Unit price</th>
				8115	</tr>
				8116	</thead>
				8117	<tbody>
				8118	<tr>
				8119	<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
				8120	<td>25</td>
				8121	<td>$2.90</td>
				8122	</tr>
				8123	<tr>
				8124	<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
				8125	<td>50</td>
				8126	<td>$1.25</td>
				8127	</tr>
				8128	<tr>
				8129	<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
				8130	<td>10</td>
				8131	<td>$2.35</td>
				8132	</tr>
				8133	</tbody>
				8134	</table>
				8135	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				8136	body {
				8137	padding: 20px;
				8138	background: #fafafa;
				8139	position: relative;
				8140	}
				8141	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				8142	</div>
				8143	</div>
				8144
				8145
				8146	<!-- Adding the demo page -->
				8147
				8148	<style>
				8149
				8150	</style>
				8151
				8152	<script>
				8153
				8154	</script>
				8155
				8156
				8157	<div class="docs-text-styling docs-readme">
				8158
				8159
				8160
				8161
				8162	<h2 id="introduction">Introduction</h2>
				8163	<p>The Material Design Lite (MDL) <strong>data-table</strong> component is an enhanced version of the standard HTML <code><table></code>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.</p>
				8164	<p>Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the data-table component's <a href="http://www.google.com/design/spec/components/data-tables.html">Material Design specifications page</a> for details.</p>
				8165	<p>The available row/column/cell types in a data-table are mostly self-formatting; that is, once the data-table is defined, the individual cells require very little specific attention. For example, the rows exhibit shading behavior on mouseover and selection, numeric values are automatically formatted by default, and the addition of a single class makes the table rows individually or collectively selectable. This makes the data-table component convenient and easy to code for the developer, as well as attractive and intuitive for the user.</p>
				8166	<h3 id="to-include-an-mdl-data-table-component-">To include an MDL <strong>data-table</strong> component:</h3>
				8167	<p> 1. Code a <code><table></code> element. Include <code><thead></code> and <code><tbody></code> elements to hold the title and data rows, respectively.</p>
				8168	<pre><code class="language-markup"><table>
				8169	<thead>
				8170	</thead>
				8171	<tbody>
				8172	</tbody>
				8173	</table>
				8174	</code></pre>
				8175	<p> 2. Add one or more MDL classes, separated by spaces, to the table using the <code>class</code> attribute.</p>
				8176	<pre><code class="language-markup"><table class="mdl-data-table mdl-js-data-table">
				8177	<thead>
				8178	</thead>
				8179	<tbody>
				8180	</tbody>
				8181	</table>
				8182	</code></pre>
				8183	<p> 2. Inside the <code><thead></code>, code exactly one table row <code><tr></code> containing one table header cell <code><th></code> for each column, and include the desired text in the header cells. To ensure proper header alignment, add the "non-numeric" MDL class to the header cell of text-only columns. (Data cells are formatted as numeric by default.)</p>
				8184	<pre><code class="language-markup"><table class="mdl-data-table mdl-js-data-table">
				8185	<thead>
				8186	<tr>
				8187	<th class="mdl-data-table__cell--non-numeric">Name</th>
				8188	<th>Age</th>
				8189	<th>ID Number</th>
				8190	</tr>
				8191	</thead>
				8192	<tbody>
				8193	</tbody>
				8194	</table>
				8195	</code></pre>
				8196	<p> 3. Inside the <code><tbody></code>, code one table row <code><tr></code> for each data row and one table data cell <code><td></code> for each column in the row. As with the header cells, add the "non-numeric" MDL class to text-only data cells to ensure proper alignment.</p>
				8197	<pre><code class="language-markup"><table class="mdl-data-table mdl-js-data-table">
				8198	<thead>
				8199	<tr>
				8200	<th class="mdl-data-table__cell--non-numeric">Name</th>
				8201	<th>Age</th>
				8202	<th>ID Number</th>
				8203	</tr>
				8204	</thead>
				8205	<tbody>
				8206	<tr>
				8207	<td class="mdl-data-table__cell--non-numeric">Don Aubrey</td>
				8208	<td>25</td>
				8209	<td>49021</td>
				8210	</tr>
				8211	<tr>
				8212	<td class="mdl-data-table__cell--non-numeric">Sophia Carson</td>
				8213	<td>32</td>
				8214	<td>10258</td>
				8215	</tr>
				8216	<tr>
				8217	<td class="mdl-data-table__cell--non-numeric">Steve Moreno</td>
				8218	<td>29</td>
				8219	<td>12359</td>
				8220	</tr>
				8221	</tbody>
				8222	</table>
				8223	</code></pre>
				8224	<p>The data-table component is ready for use.</p>
				8225	<h4 id="examples">Examples</h4>
				8226	<p>A data-table with a "master" select checkbox and individual row select checkboxes.</p>
				8227	<pre><code class="language-markup"><table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
				8228	<thead>
				8229	<tr>
				8230	<th class="mdl-data-table__cell--non-numeric">Material</th>
				8231	<th>Quantity</th>
				8232	<th>Unit price</th>
				8233	</tr>
				8234	</thead>
				8235	<tbody>
				8236	<tr>
				8237	<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
				8238	<td>250</td>
				8239	<td>$2.90</td>
				8240	</tr>
				8241	<tr>
				8242	<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
				8243	<td>50</td>
				8244	<td>$1.25</td>
				8245	</tr>
				8246	<tr>
				8247	<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
				8248	<td>10</td>
				8249	<td>$12.35</td>
				8250	</tr>
				8251	</tbody>
				8252	</table>
				8253	</code></pre>
				8254	<p>A data-table without select checkboxes containing mostly text data.</p>
				8255	<pre><code class="language-markup"><table class="mdl-data-table mdl-js-data-table">
				8256	<thead>
				8257	<tr>
				8258	<th class="mdl-data-table__cell--non-numeric">Name</th>
				8259	<th class="mdl-data-table__cell--non-numeric">Nickname</th>
				8260	<th>Age</th>
				8261	<th class="mdl-data-table__cell--non-numeric">Living?</th>
				8262	</tr>
				8263	</thead>
				8264	<tbody>
				8265	<tr>
				8266	<td class="mdl-data-table__cell--non-numeric">John Lennon</td>
				8267	<td class="mdl-data-table__cell--non-numeric">The smart one</td>
				8268	<td>40</td>
				8269	<td class="mdl-data-table__cell--non-numeric">No</td>
				8270	</tr>
				8271	<tr>
				8272	<td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
				8273	<td class="mdl-data-table__cell--non-numeric">The cute one</td>
				8274	<td>73</td>
				8275	<td class="mdl-data-table__cell--non-numeric">Yes</td>
				8276	</tr>
				8277	<tr>
				8278	<td class="mdl-data-table__cell--non-numeric">George Harrison</td>
				8279	<td class="mdl-data-table__cell--non-numeric">The shy one</td>
				8280	<td>58</td>
				8281	<td class="mdl-data-table__cell--non-numeric">No</td>
				8282	</tr>
				8283	<tr>
				8284	<td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
				8285	<td class="mdl-data-table__cell--non-numeric">The funny one</td>
				8286	<td>74</td>
				8287	<td class="mdl-data-table__cell--non-numeric">Yes</td>
				8288	</tr>
				8289	</tbody>
				8290	</table>
				8291	</code></pre>
				8292	<h2 id="configuration-options">Configuration options</h2>
				8293	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects.</p>
				8294	<table>
				8295	<thead>
				8296	<tr>
				8297	<th>MDL class</th>
				8298	<th>Effect</th>
				8299	<th>Remarks</th>
				8300	</tr>
				8301	</thead>
				8302	<tbody>
				8303	<tr>
				8304	<td><code>mdl-data-table</code></td>
				8305	<td>Defines table as an MDL component</td>
				8306	<td>Required on table element</td>
				8307	</tr>
				8308	<tr>
				8309	<td><code>mdl-js-data-table</code></td>
				8310	<td>Assigns basic MDL behavior to table</td>
				8311	<td>Required on table element</td>
				8312	</tr>
				8313	<tr>
				8314	<td><code>mdl-data-table--selectable</code></td>
				8315	<td>Applies all/individual selectable behavior (checkboxes)</td>
				8316	<td>Optional; goes on table element</td>
				8317	</tr>
				8318	<tr>
				8319	<td><code>mdl-data-table__header--sorted-ascending</code></td>
				8320	<td>Applies visual styling to indicate the column is sorted in ascending order</td>
				8321	<td>Optional; goes on table header (<code>th</code>)</td>
				8322	</tr>
				8323	<tr>
				8324	<td><code>mdl-data-table__header--sorted-descending</code></td>
				8325	<td>Applies visual styling to indicate the column is sorted in descending order</td>
				8326	<td>Optional; goes on table header (<code>th</code>)</td>
				8327	</tr>
				8328	<tr>
				8329	<td><code>mdl-data-table__cell--non-numeric</code></td>
				8330	<td>Applies text formatting to data cell</td>
				8331	<td>Optional; goes on both table header and table data cells</td>
				8332	</tr>
				8333	<tr>
				8334	<td>(none)</td>
				8335	<td>Applies numeric formatting to header or data cell (default)</td>
				8336	</tr>
				8337	</tbody>
				8338	</table>
				8339
				8340
				8341
				8342	</div>
				8343
				8344	</div>
				8345	</section>
				8346	<section id="textfields-section" class="mdl-components__page mdl-grid">
				8347	<div class="mdl-cell mdl-cell--12-col">
				8348	<div class="docs-text-styling component-title">
				8349	<h3>Text Fields</h3>
				8350	<p>Textual input components.</p>
				8351	</div>
				8352
				8353
				8354
				8355
				8356
				8357
				8358	<!-- Add warning, if the component has one -->
				8359
				8360	<!-- Generating snippets -->
				8361
				8362
				8363
				8364	<div class="snippet-group">
				8365
				8366	<div class="snippet-header">
				8367	<div class="snippet-demos">
				8368	<div class="snippet-demo-padding"></div>
				8369
				8370
				8371
				8372
				8373	<div class="snippet-demo">
				8374	<div class="snippet-demo-container demo-textfield demo-textfield__textfield-text">
				8375	<style>
				8376	.demo-textfield__textfield-text .mdl-textfield {
				8377	width: 100px;
				8378	}
				8379	</style>
				8380
				8381	<!-- Simple Textfield -->
				8382	<form action="#">
				8383	<div class="mdl-textfield mdl-js-textfield">
				8384	<input class="mdl-textfield__input" type="text" id="sample1">
				8385	<label class="mdl-textfield__label" for="sample1">Text...</label>
				8386	</div>
				8387	</form>
				8388
				8389
				8390	</div>
				8391	</div>
				8392
				8393
				8394
				8395	<div class="snippet-demo">
				8396	<div class="snippet-demo-container demo-textfield demo-textfield__textfield-numeric">
				8397	<style>
				8398	.demo-textfield__textfield-numeric .mdl-textfield {
				8399	width: 100px;
				8400	}
				8401	</style>
				8402
				8403	<!-- Numeric Textfield -->
				8404	<form action="#">
				8405	<div class="mdl-textfield mdl-js-textfield">
				8406	<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
				8407	<label class="mdl-textfield__label" for="sample2">Number...</label>
				8408	<span class="mdl-textfield__error">Input is not a number!</span>
				8409	</div>
				8410	</form>
				8411
				8412
				8413	</div>
				8414	</div>
				8415	<div class="snippet-demo-padding"></div>
				8416	</div>
				8417	<div class="snippet-captions">
				8418	<div class="snippet-caption-padding"></div>
				8419
				8420	<div class="snippet-caption">
				8421	Text
				8422	</div>
				8423	<div class="snippet-caption">
				8424	Numeric
				8425	</div>
				8426	<div class="snippet-caption-padding"></div>
				8427	</div>
				8428	</div>
				8429	<div class="snippet-code">
				8430	<pre class="language-markup codepen-button-enabled"><code id="textfield/textfield-text.html"><!-- Simple Textfield -->
				8431	<form action="#">
				8432	<div class="mdl-textfield mdl-js-textfield">
				8433	<input class="mdl-textfield__input" type="text" id="sample1">
				8434	<label class="mdl-textfield__label" for="sample1">Text...</label>
				8435	</div>
				8436	</form>
				8437	</code><div class="codepen-extra-css"><style></style></div><code id="textfield/textfield-numeric.html"><!-- Numeric Textfield -->
				8438	<form action="#">
				8439	<div class="mdl-textfield mdl-js-textfield">
				8440	<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
				8441	<label class="mdl-textfield__label" for="sample2">Number...</label>
				8442	<span class="mdl-textfield__error">Input is not a number!</span>
				8443	</div>
				8444	</form>
				8445	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				8446	body {
				8447	padding: 20px;
				8448	background: #fafafa;
				8449	position: relative;
				8450	}
				8451	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				8452	</div>
				8453	</div>
				8454
				8455
				8456
				8457
				8458	<div class="snippet-group">
				8459
				8460	<div class="snippet-header">
				8461	<div class="snippet-demos">
				8462	<div class="snippet-demo-padding"></div>
				8463
				8464
				8465
				8466
				8467	<div class="snippet-demo">
				8468	<div class="snippet-demo-container demo-textfield demo-textfield__textfield-floating-text">
				8469	<style>
				8470	.demo-textfield__textfield-floating-text .mdl-textfield {
				8471	width: 100px;
				8472	}
				8473	</style>
				8474
				8475	<!-- Textfield with Floating Label -->
				8476
				8477	<form action="#">
				8478	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				8479	<input class="mdl-textfield__input" type="text" id="sample3">
				8480	<label class="mdl-textfield__label" for="sample3">Text...</label>
				8481	</div>
				8482	</form>
				8483
				8484
				8485	</div>
				8486	</div>
				8487
				8488
				8489
				8490	<div class="snippet-demo">
				8491	<div class="snippet-demo-container demo-textfield demo-textfield__textfield-floating-numeric">
				8492	<style>
				8493	.demo-textfield__textfield-floating-numeric .mdl-textfield {
				8494	width: 100px;
				8495	}
				8496	</style>
				8497
				8498	<!-- Numeric Textfield with Floating Label -->
				8499	<form action="#">
				8500	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				8501	<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
				8502	<label class="mdl-textfield__label" for="sample4">Number...</label>
				8503	<span class="mdl-textfield__error">Input is not a number!</span>
				8504	</div>
				8505	</form>
				8506
				8507
				8508	</div>
				8509	</div>
				8510	<div class="snippet-demo-padding"></div>
				8511	</div>
				8512	<div class="snippet-captions">
				8513	<div class="snippet-caption-padding"></div>
				8514
				8515	<div class="snippet-caption">
				8516	Text with floating label
				8517	</div>
				8518	<div class="snippet-caption">
				8519	Numeric with floating label
				8520	</div>
				8521	<div class="snippet-caption-padding"></div>
				8522	</div>
				8523	</div>
				8524	<div class="snippet-code">
				8525	<pre class="language-markup codepen-button-enabled"><code id="textfield/textfield-floating-text.html"><!-- Textfield with Floating Label -->
				8526
				8527	<form action="#">
				8528	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				8529	<input class="mdl-textfield__input" type="text" id="sample3">
				8530	<label class="mdl-textfield__label" for="sample3">Text...</label>
				8531	</div>
				8532	</form>
				8533	</code><div class="codepen-extra-css"><style></style></div><code id="textfield/textfield-floating-numeric.html"><!-- Numeric Textfield with Floating Label -->
				8534	<form action="#">
				8535	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				8536	<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
				8537	<label class="mdl-textfield__label" for="sample4">Number...</label>
				8538	<span class="mdl-textfield__error">Input is not a number!</span>
				8539	</div>
				8540	</form>
				8541	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				8542	body {
				8543	padding: 20px;
				8544	background: #fafafa;
				8545	position: relative;
				8546	}
				8547	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				8548	</div>
				8549	</div>
				8550
				8551
				8552
				8553
				8554	<div class="snippet-group">
				8555
				8556	<div class="snippet-header">
				8557	<div class="snippet-demos">
				8558	<div class="snippet-demo-padding"></div>
				8559
				8560
				8561
				8562
				8563	<div class="snippet-demo">
				8564	<div class="snippet-demo-container demo-textfield demo-textfield__textfield-multi-line">
				8565	<style>
				8566	.demo-textfield__textfield-multi-line .mdl-textfield {
				8567	width: 100px;
				8568	}
				8569	</style>
				8570
				8571	<!-- Floating Multiline Textfield -->
				8572	<form action="#">
				8573	<div class="mdl-textfield mdl-js-textfield">
				8574	<textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
				8575	<label class="mdl-textfield__label" for="sample5">Text lines...</label>
				8576	</div>
				8577	</form>
				8578
				8579
				8580	</div>
				8581	</div>
				8582
				8583
				8584
				8585	<div class="snippet-demo">
				8586	<div class="snippet-demo-container demo-textfield demo-textfield__textfield-expanding">
				8587	<style>
				8588	.demo-textfield__textfield-expanding .mdl-textfield {
				8589	width: 100px;
				8590	}
				8591	</style>
				8592
				8593	<!-- Expandable Textfield -->
				8594	<form action="#">
				8595	<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
				8596	<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
				8597	<i class="material-icons">search</i>
				8598	</label>
				8599	<div class="mdl-textfield__expandable-holder">
				8600	<input class="mdl-textfield__input" type="text" id="sample6">
				8601	<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
				8602	</div>
				8603	</div>
				8604	</form>
				8605
				8606
				8607	</div>
				8608	</div>
				8609	<div class="snippet-demo-padding"></div>
				8610	</div>
				8611	<div class="snippet-captions">
				8612	<div class="snippet-caption-padding"></div>
				8613
				8614	<div class="snippet-caption">
				8615	Multiple line
				8616	</div>
				8617	<div class="snippet-caption">
				8618	Expanding
				8619	</div>
				8620	<div class="snippet-caption-padding"></div>
				8621	</div>
				8622	</div>
				8623	<div class="snippet-code">
				8624	<pre class="language-markup codepen-button-enabled"><code id="textfield/textfield-multi-line.html"><!-- Floating Multiline Textfield -->
				8625	<form action="#">
				8626	<div class="mdl-textfield mdl-js-textfield">
				8627	<textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
				8628	<label class="mdl-textfield__label" for="sample5">Text lines...</label>
				8629	</div>
				8630	</form>
				8631	</code><div class="codepen-extra-css"><style></style></div><code id="textfield/textfield-expanding.html"><!-- Expandable Textfield -->
				8632	<form action="#">
				8633	<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
				8634	<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
				8635	<i class="material-icons">search</i>
				8636	</label>
				8637	<div class="mdl-textfield__expandable-holder">
				8638	<input class="mdl-textfield__input" type="text" id="sample6">
				8639	<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
				8640	</div>
				8641	</div>
				8642	</form>
				8643	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				8644	body {
				8645	padding: 20px;
				8646	background: #fafafa;
				8647	position: relative;
				8648	}
				8649	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				8650	</div>
				8651	</div>
				8652
				8653
				8654	<!-- Adding the demo page -->
				8655
				8656	<style>
				8657
				8658	</style>
				8659
				8660	<script>
				8661
				8662	</script>
				8663
				8664
				8665	<div class="docs-text-styling docs-readme">
				8666
				8667
				8668
				8669
				8670	<h2 id="introduction">Introduction</h2>
				8671	<p>The Material Design Lite (MDL) <strong>text field</strong> component is an enhanced version of the standard HTML <code><input type="text"></code> and <code><input type="textarea"></code> elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects.</p>
				8672	<p>Text fields are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the text field component's <a href="http://www.google.com/design/spec/components/text-fields.html">Material Design specifications page</a> for details.</p>
				8673	<p>The enhanced text field component has a more vivid visual look than a standard text field, and may be initially or programmatically <em>disabled</em>.
				8674	There are three main types of text fields in the text field component, each with its own basic coding requirements. The types are <em>single-line</em>, <em>multi-line</em>, and <em>expandable</em>.</p>
				8675	<h3 id="to-include-a-single-line-mdl-text-field-component-">To include a <em>single-line</em> MDL <strong>text field</strong> component:</h3>
				8676	<p> 1. Code a <code><div></code> element to hold the text field.</p>
				8677	<pre><code class="language-markup"><div>
				8678	...
				8679	</div>
				8680	</code></pre>
				8681	<p> 2. Inside the div, code an <code><input></code> element with a <code>type</code> attribute of <code>"text"</code> (the text field), and an <code>id</code> attribute of your choice.</p>
				8682	<pre><code class="language-markup"><div>
				8683	<input type="text" id="user">
				8684	</div>
				8685	</code></pre>
				8686	<p> 3. Also inside the div, after the text field, code a <code><label></code> element with a <code>for</code> attribute whose value matches the <code>input</code> element's <code>id</code> value, and a short string to be used as the field's placeholder text.</p>
				8687	<pre><code class="language-markup"><div>
				8688	<input type="text" id="user">
				8689	<label for="user">User name</label>
				8690	</div>
				8691	</code></pre>
				8692	<p> 4. Optionally, add a <code>pattern</code> attribute and value to the <code><input></code> element (see the <a href="http://www.w3.org/TR/html5/forms.html#the-pattern-attribute">W3C HTML5 forms specification</a> for details) and an associated error message in a <code><span></code> element following the <code><label></code>.</p>
				8693	<pre><code class="language-markup"><div>
				8694	<input type="text" id="user" pattern="[A-Z,a-z, ]*">
				8695	<label for="user">User name</label>
				8696	<span>Letters and spaces only</span>
				8697	</div>
				8698	</code></pre>
				8699	<p> 5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the <code>class</code> attribute.</p>
				8700	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield">
				8701	<input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
				8702	<label class="mdl-textfield__label" for="user">User name</label>
				8703	<span class="mdl-textfield__error">Letters and spaces only</span>
				8704	</div>
				8705	</code></pre>
				8706	<p>The single-line text field component is ready for use.</p>
				8707	<h4 id="examples">Examples</h4>
				8708	<p>Single-line text field with a standard label.</p>
				8709	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield">
				8710	<input class="mdl-textfield__input" type="text" id="fname">
				8711	<label class="mdl-textfield__label" for="fname">First name</label>
				8712	</div>
				8713	</code></pre>
				8714	<p>Single-line text field with a floating label.</p>
				8715	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				8716	<input class="mdl-textfield__input" type="text" id="addr1">
				8717	<label class="mdl-textfield__label" for="addr1">Address line 1</label>
				8718	</div>
				8719	</code></pre>
				8720	<p>Single-line text field with a standard label, pattern matching, and error message.</p>
				8721	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield">
				8722	<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
				8723	<label class="mdl-textfield__label" for="phone">Phone</label>
				8724	<span class="mdl-textfield__error">Digits only</span>
				8725	</div>
				8726	</code></pre>
				8727	<h3 id="to-include-a-multi-line-mdl-text-field-component-">To include a <em>multi-line</em> MDL <strong>text field</strong> component:</h3>
				8728	<p> 1. Code a <code><div></code> element to hold the text field.</p>
				8729	<pre><code class="language-markup"><div>
				8730	...
				8731	</div>
				8732	</code></pre>
				8733	<p> 2. Inside the div, code a <code><textarea></code> element with a <code>type</code> attribute of <code>"text"</code> (the multi-line text field), and an <code>id</code> attribute of your choice. Include a <code>rows</code> attribute with a value of <code>"1"</code> (this attribute sets the number of <em>concurrently visible</em> input rows).</p>
				8734	<pre><code class="language-markup"><div>
				8735	<textarea type="text" rows="1" id="address"></textarea>
				8736	</div>
				8737	</code></pre>
				8738	<p> 3. Also inside the div, after the text field, code a <code><label></code> element with a <code>for</code> attribute whose value matches the <code><textarea></code> element's <code>id</code> value, and a short string to be used as the field's placeholder text.</p>
				8739	<pre><code class="language-markup"><div>
				8740	<textarea type="text" rows="1" id="address"></textarea>
				8741	<label for="address">Full address</label>
				8742	</div>
				8743	</code></pre>
				8744	<p> 4. Add one or more MDL classes, separated by spaces, to the div container, text field, and field label using the <code>class</code> attribute.</p>
				8745	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield">
				8746	<textarea class="mdl-textfield__input" type="text" rows="1" id="address"></textarea>
				8747	<label class="mdl-textfield__label" for="address">Full address</label>
				8748	</div>
				8749	</code></pre>
				8750	<p>The multi-line text field component is ready for use.</p>
				8751	<h4 id="examples">Examples</h4>
				8752	<p>Multi-line text field with one visible input line.</p>
				8753	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield">
				8754	<textarea class="mdl-textfield__input" type="text" rows="1" id="schools"></textarea>
				8755	<label class="mdl-textfield__label" for="schools">Schools attended</label>
				8756	</div>
				8757	</code></pre>
				8758	<p>Multi-line text field with one visible input line and floating label.</p>
				8759	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				8760	<textarea class="mdl-textfield__input" type="text" rows= "1" id="schools"></textarea>
				8761	<label class="mdl-textfield__label" for="schools">Schools attended</label>
				8762	</div>
				8763	</code></pre>
				8764	<p>Multi-line text field with multiple visible input lines and a maximum number of lines.</p>
				8765	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield">
				8766	<textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6"
				8767	id="schools"></textarea>
				8768	<label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
				8769	</div>
				8770	</code></pre>
				8771	<h3 id="to-include-an-expandable-mdl-text-field-component-">To include an <em>expandable</em> MDL <strong>text field</strong> component:</h3>
				8772	<p> 1. Code an "outer" <code><div></code> element to hold the expandable text field.</p>
				8773	<pre><code class="language-markup"><div>
				8774	...
				8775	</div>
				8776	</code></pre>
				8777	<p> 2. Inside the div, code a <code><label></code> element with a <code>for</code> attribute whose value will match the <code><input></code> element's <code>id</code> value (to be coded in step 5).</p>
				8778	<pre><code class="language-markup"><div>
				8779	<label for="expando1">
				8780	...
				8781	</label>
				8782	</div>
				8783	</code></pre>
				8784	<p> 3. Inside the label, code a <code><span></code> element; the span should be empty, and should be the label's only content. This element will contain the expandable text field's icon.</p>
				8785	<pre><code class="language-markup"><div>
				8786	<label for="expando1">
				8787	<span></span>
				8788	</label>
				8789	</div>
				8790	</code></pre>
				8791	<p> 4. Still inside the "outer" div, after the label containing the span, code an "inner" (nested) <code><div></code> element.</p>
				8792	<pre><code class="language-markup"><div>
				8793	<label for="expando1">
				8794	<span></span>
				8795	</label>
				8796	<div>
				8797	...
				8798	</div>
				8799	</div>
				8800	</code></pre>
				8801	<p> 5. Inside the "inner" div, code an <code><input></code> element with a <code>type</code> attribute of <code>"text"</code> (the text field), and an <code>id</code> attribute whose value matches that of the <code>for</code> attribute in step 2.</p>
				8802	<pre><code class="language-markup"><div>
				8803	<label for="expando1">
				8804	<span></span>
				8805	</label>
				8806	<div>
				8807	<input type="text" id="expando1">
				8808	</div>
				8809	</div>
				8810	</code></pre>
				8811	<p> 6. Still inside the "inner" div, after the text field, code a <code><label></code> element with a <code>for</code> attribute whose value also matches the <code><input></code> element's <code>id</code> value (coded in step 5), and a short string to be used as the field's placeholder text.</p>
				8812	<pre><code class="language-markup"><div>
				8813	<label for="expando1">
				8814	<span></span>
				8815	</label>
				8816	<div>
				8817	<input type="text" id="expando1">
				8818	<label for="expando1">Expandable text field</label>
				8819	</div>
				8820	</div>
				8821	</code></pre>
				8822	<p> 7. Add one or more MDL classes, separated by spaces, to the "outer" div container, label, and span, and to the "inner" div container, text field, and field label using the <code>class</code> attribute.</p>
				8823	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
				8824	<label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
				8825	<i class="material-icons">search</i>
				8826	</label>
				8827	<div class="mdl-textfield__expandable-holder">
				8828	<input class="mdl-textfield__input" type="text" id="expando1">
				8829	<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
				8830	</div>
				8831	</div>
				8832	</code></pre>
				8833	<p>The expandable text field component is ready for use. It will expand when the icon (the empty <code><span></code>) is clicked or gains focus.</p>
				8834	<h4 id="examples">Examples</h4>
				8835	<p>Expandable text field with a standard label.</p>
				8836	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
				8837	<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
				8838	<i class="material-icons">search</i>
				8839	</label>
				8840	<div class="mdl-textfield__expandable-holder">
				8841	<input class="mdl-textfield__input" type="text" id="search-expandable">
				8842	<label class="mdl-textfield__label" for="search-expandable">Search text</label>
				8843	</div>
				8844	</div>
				8845	</code></pre>
				8846	<p>Expandable text field with a floating label.</p>
				8847	<pre><code class="language-markup"><div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
				8848	mdl-textfield--floating-label">
				8849	<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable2">
				8850	<i class="material-icons">search</i>
				8851	</label>
				8852	<div class="mdl-textfield__expandable-holder">
				8853	<input class="mdl-textfield__input" type="text" id="search-expandable2">
				8854	<label class="mdl-textfield__label" for="search-expandable2">
				8855	Enter search text below
				8856	</label>
				8857	</div>
				8858	</div>
				8859	</code></pre>
				8860	<h2 id="configuration-options">Configuration options</h2>
				8861	<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the text field. The table below lists the available classes and their effects.</p>
				8862	<table>
				8863	<thead>
				8864	<tr>
				8865	<th>MDL class</th>
				8866	<th>Effect</th>
				8867	<th>Remarks</th>
				8868	</tr>
				8869	</thead>
				8870	<tbody>
				8871	<tr>
				8872	<td><code>mdl-textfield</code></td>
				8873	<td>Defines container as an MDL component</td>
				8874	<td>Required on "outer" div element</td>
				8875	</tr>
				8876	<tr>
				8877	<td><code>mdl-js-textfield</code></td>
				8878	<td>Assigns basic MDL behavior to input</td>
				8879	<td>Required on "outer" div element</td>
				8880	</tr>
				8881	<tr>
				8882	<td><code>mdl-textfield__input</code></td>
				8883	<td>Defines element as textfield input</td>
				8884	<td>Required on input or textarea element</td>
				8885	</tr>
				8886	<tr>
				8887	<td><code>mdl-textfield__label</code></td>
				8888	<td>Defines element as textfield label</td>
				8889	<td>Required on label element for input or textarea elements</td>
				8890	</tr>
				8891	<tr>
				8892	<td><code>mdl-textfield--floating-label</code></td>
				8893	<td>Applies <em>floating label</em> effect</td>
				8894	<td>Optional; goes on "outer" div element</td>
				8895	</tr>
				8896	<tr>
				8897	<td><code>mdl-textfield__error</code></td>
				8898	<td>Defines span as an MDL error message</td>
				8899	<td>Optional; goes on span element for MDL input element with <em>pattern</em></td>
				8900	</tr>
				8901	<tr>
				8902	<td><code>mdl-textfield--expandable</code></td>
				8903	<td>Defines a div as an MDL expandable text field container</td>
				8904	<td>For expandable input fields, required on "outer" div element</td>
				8905	</tr>
				8906	<tr>
				8907	<td><code>mdl-button</code></td>
				8908	<td>Defines label as an MDL icon button</td>
				8909	<td>For expandable input fields, required on "outer" div's label element</td>
				8910	</tr>
				8911	<tr>
				8912	<td><code>mdl-js-button</code></td>
				8913	<td>Assigns basic behavior to icon container</td>
				8914	<td>For expandable input fields, required on "outer" div's label element</td>
				8915	</tr>
				8916	<tr>
				8917	<td><code>mdl-button--icon</code></td>
				8918	<td>Defines label as an MDL icon container</td>
				8919	<td>For expandable input fields, required on "outer" div's label element</td>
				8920	</tr>
				8921	<tr>
				8922	<td><code>mdl-input__expandable-holder</code></td>
				8923	<td>Defines a container as an MDL component</td>
				8924	<td>For expandable input fields, required on "inner" div element</td>
				8925	</tr>
				8926	<tr>
				8927	<td><code>is-invalid</code></td>
				8928	<td>Defines the textfield as invalid on initial load.</td>
				8929	<td>Optional on <code>mdl-textfield</code> element</td>
				8930	</tr>
				8931	</tbody>
				8932	</table>
				8933	<p>(1) The "search" icon is used here as an example. Other icons can be used by modifying the text. For a list of available icons, see <a href="https://www.google.com/design/icons">this page</a>.</p>
				8934	<blockquote>
				8935	<p><strong>Note:</strong> Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input class="mdl-textfield mdl-js-textfield" type="text" disabled></code>
				8936	This attribute may be added or removed programmatically via scripting.</p>
				8937	</blockquote>
				8938
				8939
				8940
				8941	</div>
				8942
				8943	</div>
				8944	</section>
				8945	<section id="tooltips-section" class="mdl-components__page mdl-grid">
				8946	<div class="mdl-cell mdl-cell--12-col">
				8947	<div class="docs-text-styling component-title">
				8948	<h3>Tooltips</h3>
				8949	<p>Useful information on hover.</p>
				8950	</div>
				8951
				8952
				8953
				8954
				8955
				8956
				8957	<!-- Add warning, if the component has one -->
				8958
				8959	<!-- Generating snippets -->
				8960
				8961
				8962
				8963	<div class="snippet-group">
				8964
				8965	<div class="snippet-header">
				8966	<div class="snippet-demos">
				8967	<div class="snippet-demo-padding"></div>
				8968
				8969
				8970
				8971
				8972	<div class="snippet-demo">
				8973	<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-simple">
				8974	<!-- Simple Tooltip -->
				8975	<div id="tt1" class="icon material-icons">add</div>
				8976	<div class="mdl-tooltip" data-mdl-for="tt1">
				8977	Follow
				8978	</div>
				8979
				8980	</div>
				8981	</div>
				8982
				8983
				8984
				8985	<div class="snippet-demo">
				8986	<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-large">
				8987	<!-- Large Tooltip -->
				8988	<div id="tt2" class="icon material-icons">print</div>
				8989	<div class="mdl-tooltip mdl-tooltip--large" for="tt2">
				8990	Print
				8991	</div>
				8992
				8993	</div>
				8994	</div>
				8995	<div class="snippet-demo-padding"></div>
				8996	</div>
				8997	<div class="snippet-captions">
				8998	<div class="snippet-caption-padding"></div>
				8999
				9000	<div class="snippet-caption">
				9001	Simple
				9002	</div>
				9003	<div class="snippet-caption">
				9004	Large
				9005	</div>
				9006	<div class="snippet-caption-padding"></div>
				9007	</div>
				9008	</div>
				9009	<div class="snippet-code">
				9010	<pre class="language-markup codepen-button-enabled"><code id="tooltip/tooltip-simple.html"><!-- Simple Tooltip -->
				9011	<div id="tt1" class="icon material-icons">add</div>
				9012	<div class="mdl-tooltip" data-mdl-for="tt1">
				9013	Follow
				9014	</div>
				9015	</code><div class="codepen-extra-css"><style></style></div><code id="tooltip/tooltip-large.html"><!-- Large Tooltip -->
				9016	<div id="tt2" class="icon material-icons">print</div>
				9017	<div class="mdl-tooltip mdl-tooltip--large" for="tt2">
				9018	Print
				9019	</div>
				9020	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				9021	body {
				9022	padding: 20px;
				9023	background: #fafafa;
				9024	position: relative;
				9025	}
				9026	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				9027	</div>
				9028	</div>
				9029
				9030
				9031
				9032
				9033	<div class="snippet-group">
				9034
				9035	<div class="snippet-header">
				9036	<div class="snippet-demos">
				9037	<div class="snippet-demo-padding"></div>
				9038
				9039
				9040
				9041
				9042	<div class="snippet-demo">
				9043	<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-rich">
				9044	<!-- Rich Tooltip -->
				9045	<div id="tt3" class="icon material-icons">cloud_upload</div>
				9046	<div class="mdl-tooltip" data-mdl-for="tt3">
				9047	Upload <strong>file.zip</strong>
				9048	</div>
				9049
				9050	</div>
				9051	</div>
				9052
				9053
				9054
				9055	<div class="snippet-demo">
				9056	<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-multiline">
				9057	<!-- Multiline Tooltip -->
				9058	<div id="tt4" class="icon material-icons">share</div>
				9059	<div class="mdl-tooltip" for="tt4">
				9060	Share your content<br>via social media
				9061	</div>
				9062
				9063	</div>
				9064	</div>
				9065	<div class="snippet-demo-padding"></div>
				9066	</div>
				9067	<div class="snippet-captions">
				9068	<div class="snippet-caption-padding"></div>
				9069
				9070	<div class="snippet-caption">
				9071	Rich
				9072	</div>
				9073	<div class="snippet-caption">
				9074	Multiple lines
				9075	</div>
				9076	<div class="snippet-caption-padding"></div>
				9077	</div>
				9078	</div>
				9079	<div class="snippet-code">
				9080	<pre class="language-markup codepen-button-enabled"><code id="tooltip/tooltip-rich.html"><!-- Rich Tooltip -->
				9081	<div id="tt3" class="icon material-icons">cloud_upload</div>
				9082	<div class="mdl-tooltip" data-mdl-for="tt3">
				9083	Upload <strong>file.zip</strong>
				9084	</div>
				9085	</code><div class="codepen-extra-css"><style></style></div><code id="tooltip/tooltip-multiline.html"><!-- Multiline Tooltip -->
				9086	<div id="tt4" class="icon material-icons">share</div>
				9087	<div class="mdl-tooltip" for="tt4">
				9088	Share your content<br>via social media
				9089	</div>
				9090	</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
				9091	body {
				9092	padding: 20px;
				9093	background: #fafafa;
				9094	position: relative;
				9095	}
				9096	</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
				9097	</div>
				9098	</div>
				9099
				9100
				9101	<!-- Adding the demo page -->
				9102
				9103	<style>
				9104
				9105	</style>
				9106
				9107	<script>
				9108
				9109	</script>
				9110
				9111
				9112	<div class="docs-text-styling docs-readme">
				9113
				9114
				9115
				9116
				9117	<h2 id="introduction">Introduction</h2>
				9118	<p>The Material Design Lite (MDL) <strong>tooltip</strong> component is an enhanced version of the standard HTML tooltip as produced by the <code>title</code> attribute. A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. The MDL tooltip component is pre-styled (colors, fonts, and other settings are contained in <em>material.min.css</em>) to provide a vivid, attractive visual element that displays related but typically non-essential content, e.g., a definition, clarification, or brief instruction.</p>
				9119	<p>Tooltips are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is an important factor in the overall user experience. See the tooltip component's <a href="http://www.google.com/design/spec/components/tooltips.html">Material Design specifications page</a> for details.</p>
				9120	<h3 id="to-include-an-mdl-tooltip-component-">To include an MDL <strong>tooltip</strong> component:</h3>
				9121	<p> 1. Code an element, such as a <code><div></code>, <code><p></code>, or <code><span></code>, and style it as desired; this will be the tooltip's target. Include an <code>id</code> attribute and unique value to link the container to its tooltip.</p>
				9122	<pre><code class="language-markup"><p id="tt1">HTML</p>
				9123	</code></pre>
				9124	<p> 2. Following the target element, code a second element, such as a <code><div></code>, <code><p></code>, or <code><span></code>; this will be the tooltip itself. Include a <code>for</code> (or <code>data-mdl-for</code>) attribute whose value matches that of the target's <code>id</code>.</p>
				9125	<pre><code class="language-markup"><p id="tt1">HTML</p>
				9126	<span for="tt1">HyperText Markup Language</span>
				9127	</code></pre>
				9128	<p> 3. Add one or more MDL classes, separated by spaces, to the tooltip element using the <code>class</code> attribute.</p>
				9129	<pre><code class="language-markup"><p id="tt1">HTML</p>
				9130	<span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>
				9131	</code></pre>
				9132	<p>The tooltip component is ready for use.</p>
				9133	<h4 id="examples">Examples</h4>
				9134	<p>A target with a simple text tooltip.</p>
				9135	<pre><code class="language-markup"><p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
				9136	<span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>
				9137	</code></pre>
				9138	<p>A target with "rich" (containing HTML markup) tooltip text.</p>
				9139	<pre><code class="language-markup"><p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
				9140	<span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>
				9141	</code></pre>
				9142	<p>A target with a long text tooltip that automatically wraps.</p>
				9143	<pre><code class="language-markup"><p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
				9144	<span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>
				9145	</code></pre>
				9146	<p>A target with tooltip text in a larger font size.</p>
				9147	<pre><code class="language-markup"><p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
				9148	<span class="mdl-tooltip mdl-tooltip--large" for="xml">eXtensible Markup Language</span>
				9149	</code></pre>
				9150	<p>A target with a tooltip containing both an image and text.</p>
				9151	<pre><code class="language-markup"><p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
				9152	<span class="mdl-tooltip" for="xml">
				9153	<img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
				9154	</code></pre>
				9155	<h2 id="configuration-options">Configuration options</h2>
				9156	<p>The MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.</p>
				9157	<table>
				9158	<thead>
				9159	<tr>
				9160	<th>MDL class</th>
				9161	<th>Effect</th>
				9162	<th>Remarks</th>
				9163	</tr>
				9164	</thead>
				9165	<tbody>
				9166	<tr>
				9167	<td><code>mdl-tooltip</code></td>
				9168	<td>Defines a container as an MDL tooltip</td>
				9169	<td>Required on tooltip container element</td>
				9170	</tr>
				9171	<tr>
				9172	<td><code>mdl-tooltip--large</code></td>
				9173	<td>Applies large-font effect</td>
				9174	<td>Optional; goes on tooltip container element</td>
				9175	</tr>
				9176	<tr>
				9177	<td><code>mdl-tooltip--left</code></td>
				9178	<td>Positions the tooltip to the left of the target</td>
				9179	<td>Optional; goes on tooltip container element</td>
				9180	</tr>
				9181	<tr>
				9182	<td><code>mdl-tooltip--right</code></td>
				9183	<td>Positions the tooltip to the right of the target</td>
				9184	<td>Optional; goes on tooltip container element</td>
				9185	</tr>
				9186	<tr>
				9187	<td><code>mdl-tooltip--top</code></td>
				9188	<td>Positions the tooltip to the top of the target</td>
				9189	<td>Optional; goes on tooltip container element</td>
				9190	</tr>
				9191	<tr>
				9192	<td><code>mdl-tooltip--bottom</code></td>
				9193	<td>Positions the tooltip to the bottom of the target</td>
				9194	<td>Optional; goes on tooltip container element</td>
				9195	</tr>
				9196	</tbody>
				9197	</table>
				9198
				9199
				9200
				9201	</div>
				9202
				9203	</div>
				9204	</section>
				9205
				9206	</main>
				9207	</div>
				9208
				9209
				9210	</div>
				9211	<section class="docs-text-styling download mdl-color--grey-800">
				9212	<a href="../started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a>
				9213	</section>
				9214	<footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
				9215	<ul>
				9216	<li class="mdl-mini-footer--social-btn">
				9217	<a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a>
				9218	</li>
				9219	<li class="mdl-mini-footer--social-btn">
				9220	<a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a>
				9221	</li>
				9222	<li class="mdl-mini-footer--social-btn">
				9223	<a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
				9224	</li>
				9225	</ul>
				9226	<ul class="docs-link-list">
				9227	<li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
				9228	<li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
				9229	</ul>
				9230	</footer>
				9231	</main>
				9232	</div>
				9233
				9234	<!-- IE Compatibility shims -->
				9235	<!--[if lt IE 9]>
				9236	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
				9237	<![endif]-->
				9238
				9239	<!--[if IE]>
				9240	<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
				9241	<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
				9242	<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
				9243	<script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
				9244	<link href="../assets/ie.css" rel="stylesheet">
				9245	<![endif]-->
				9246	<!-- end shims -->
				9247
				9248
				9249	<!-- Material Design Lite -->
				9250	<script src="../material.min.js"></script>
				9251	<!-- Add Copy-to-CodePen buttons to code blocks -->
				9252	<script src="../assets/codepen.js"></script>
				9253	<!-- Enable Prism syntax highlighting -->
				9254	<script src="../assets/prism.js"></script>
				9255	<script src="../assets/prism-markup.min.js"></script>
				9256	<script src="../assets/prism-javascript.min.js"></script>
				9257	<script src="../assets/prism-css.min.js"></script>
				9258	<script src="../assets/prism-bash.min.js"></script>
				9259	<script src="../assets/main.js"></script>
				9260	<!-- Built with love using Material Design Lite -->
				9261	</body>
				9262	</html>