Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / components / index.html
blob: 62a4e35e78de7961dee76915127a6e76a39c108e [file] [log] [blame]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Material Design Lite</title>
<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">
<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Material Design Lite">
<link rel="icon" sizes="192x192" href="../assets/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon" href="../assets/ios-desktop.png">
<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
<meta name="theme-color" content="#263238">
<link rel="shortcut icon" href="../assets/favicon.png">
<!-- 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 -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!-- Page styles -->
<link rel="stylesheet" href="../assets/prism-default.css">
<link rel="stylesheet" href="../material.min.css">
<link rel="stylesheet" href="../assets/main.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="components">
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
// if (document.location.hostname !== 'localhost' &&
// document.location.hostname !== '127.0.0.1' &&
// document.location.hostname.search('.corp.') === -1) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-25993200-9', 'auto');
// If a specific component page is loaded directly we'll attribute the
// page view to the specific component's page
if (window.location.pathname.indexOf('/components/') !== -1 &&
window.location.hash.indexOf('-section') !== -1) {
ga('send', 'pageview', '/components/' +
window.location.hash.split('#')[1].split('/')[0]);
} else {
ga('send', 'pageview');
}
// }
// Setup error tracking before anything else runs.
window.onerror = function(message, file, lineNumber, columnNumber, error) {
try {
if (error !== undefined) {
message = error.stack;
}
ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
} catch (e) {
// no-op
}
};
</script>
<div class="image-preloader"></div>
<div class="docs-layout mdl-layout mdl-js-layout">
<header class="docs-layout-header mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="docs-layout-title mdl-layout-title"><a href="../">Material<br>Design<br>Lite</a></span>
</div>
<div class="docs-navigation__container">
<nav class="docs-navigation mdl-navigation">
<a href="../index.html" class="mdl-navigation__link about">About</a>
<a href="../started/index.html" class="mdl-navigation__link started">Getting Started</a>
<a href="../templates/index.html" class="mdl-navigation__link templates">Templates</a>
<a href="../components/index.html" class="mdl-navigation__link components">Components</a>
<a href="../styles/index.html" class="mdl-navigation__link styles">Styles</a>
<a href="../customize/index.html" class="mdl-navigation__link customize">Customize</a>
<a href="../showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
<a href="../faq/index.html" class="mdl-navigation__link faq">FAQ</a>
<div class="spacer"></div>
<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>
<a href="../started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
<i class="material-icons">&#xE2C4;</i><span>Download</span>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
<i class="material-icons">&#xE2C4;</i>
</button>
</a>
</nav>
</div>
<i class="material-icons scrollindicator scrollindicator--right">&#xE315;</i>
<i class="material-icons scrollindicator scrollindicator--left">&#xE314;</i>
</header>
<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
<div class="content mdl-grid mdl-grid--no-spacing" id="content">
<div class="subpageheader mdl-cell--12-col">Components</div>
<link href="../assets/components.css" rel="stylesheet">
<script src="../assets/snippets.js"></script>
<script src="../assets/components.js"></script>
<link rel="stylesheet" href="../components/demos.css">
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
<aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
<a href="#badges-section" class="mdl-components__link mdl-component badges">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_badges.png')">
</div>
<span class="mdl-components__link-text">Badges</span>
</a>
<a href="#buttons-section" class="mdl-components__link mdl-component buttons">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_buttons.png')">
</div>
<span class="mdl-components__link-text">Buttons</span>
</a>
<a href="#cards-section" class="mdl-components__link mdl-component cards">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_cards.png')">
</div>
<span class="mdl-components__link-text">Cards</span>
</a>
<a href="#chips-section" class="mdl-components__link mdl-component chips">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_chips.png')">
</div>
<span class="mdl-components__link-text">Chips</span>
</a>
<a href="#dialog-section" class="mdl-components__link mdl-component dialog">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_dialog.png')">
</div>
<span class="mdl-components__link-text">Dialogs</span>
</a>
<a href="#layout-section" class="mdl-components__link mdl-component layout">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_layout.png')">
</div>
<span class="mdl-components__link-text">Layout</span>
</a>
<a href="#lists-section" class="mdl-components__link mdl-component lists">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_lists.png')">
</div>
<span class="mdl-components__link-text">Lists</span>
</a>
<a href="#loading-section" class="mdl-components__link mdl-component loading">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_loading.png')">
</div>
<span class="mdl-components__link-text">Loading</span>
</a>
<a href="#menus-section" class="mdl-components__link mdl-component menus">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_menus.png')">
</div>
<span class="mdl-components__link-text">Menus</span>
</a>
<a href="#sliders-section" class="mdl-components__link mdl-component sliders">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_sliders.png')">
</div>
<span class="mdl-components__link-text">Sliders</span>
</a>
<a href="#snackbar-section" class="mdl-components__link mdl-component snackbar">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_snackbar.png')">
</div>
<span class="mdl-components__link-text">Snackbar</span>
</a>
<a href="#toggles-section" class="mdl-components__link mdl-component toggles">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_toggles.png')">
</div>
<span class="mdl-components__link-text">Toggles</span>
</a>
<a href="#tables-section" class="mdl-components__link mdl-component tables">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_tables.png')">
</div>
<span class="mdl-components__link-text">Tables</span>
</a>
<a href="#textfields-section" class="mdl-components__link mdl-component textfields">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_textfields.png')">
</div>
<span class="mdl-components__link-text">Text Fields</span>
</a>
<a href="#tooltips-section" class="mdl-components__link mdl-component tooltips">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_tooltips.png')">
</div>
<span class="mdl-components__link-text">Tooltips</span>
</a>
</aside>
<main class="mdl-components__pages">
<section id="index-section" class="mdl-components-index mdl-components__page">
<div class="mdl-components-index-text mdl-grid">
<div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
<dl class="mdl-components-dl">
<dt class="mdl-components-dt">COMPONENTS</dt>
<dd class="mdl_components-dd">
Material Design Lite (MDL) is a library of components for web developers
based on Google's Material Design Philosophy: "A visual language for our
users that synthesizes the classic principles of good design with the
innovation and possibility of technology and science." Understanding the
goals and principles of Material Design is critical to the proper use of
the Material Design Lite components. If you have not yet read the
<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
you should do so before attempting to use the components.
</dd>
</dl>
</div>
</div>
<div class="mdl-components-img"></div>
</section>
<section id="badges-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Badges</h3>
<p>Small status descriptors for UI elements.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-icon-text">
<style>
.demo-badge__badge-on-icon-text .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
.demo-badge__badge-on-icon-text .mdl-badge.material-icons {
font-size: 32px;
}
</style>
<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-icon-icon">
<style>
.demo-badge__badge-on-icon-icon .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
.demo-badge__badge-on-icon-icon .mdl-badge.material-icons {
font-size: 32px;
}
</style>
<!-- Icon badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Number
</div>
<div class="snippet-caption">
Icon
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="badge/badge-on-icon-text.html">&lt;!-- Number badge on icon --&gt;
&lt;div class=&quot;material-icons mdl-badge mdl-badge--overlap&quot; data-badge=&quot;1&quot;&gt;account_box&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="badge/badge-on-icon-icon.html">&lt;!-- Icon badge on icon --&gt;
&lt;div class=&quot;material-icons mdl-badge mdl-badge--overlap&quot; data-badge=&quot;♥&quot;&gt;account_box&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-text-text">
<style>
.demo-badge__badge-on-text-text .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
</style>
<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-text-icon">
<style>
.demo-badge__badge-on-text-icon .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
</style>
<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Number
</div>
<div class="snippet-caption">
Icon
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="badge/badge-on-text-text.html">&lt;!-- Number badge --&gt;
&lt;span class=&quot;mdl-badge&quot; data-badge=&quot;4&quot;&gt;Inbox&lt;/span&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="badge/badge-on-text-icon.html">&lt;!-- Icon badge --&gt;
&lt;span class=&quot;mdl-badge&quot; data-badge=&quot;♥&quot;&gt;Mood&lt;/span&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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>
<p>You can use a badge to unobtrusively draw the user&#39;s attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:</p>
<ul>
<li>A &quot;New messages&quot; notification might be followed by a badge containing the number of unread messages.</li>
<li>A &quot;You have unpurchased items in your shopping cart&quot; reminder might include a badge showing the number of items in the cart.</li>
<li>A &quot;Join the discussion!&quot; button might have an accompanying badge indicating the number of users currently participating in the discussion.</li>
</ul>
<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>
<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>
<h3 id="to-include-an-mdl-badge-component-">To include an MDL <strong>badge</strong> component:</h3>
<p>&nbsp;1. Code an <code>&lt;a&gt;</code> (anchor/link) or a <code>&lt;span&gt;</code> element. Include any desired attributes and content.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot;&gt;This link has a badge.&lt;/a&gt;
</code></pre>
<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the element using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot; class=&quot;mdl-badge&quot;&gt;This link has a badge.&lt;/a&gt;
</code></pre>
<p>&nbsp;3. Add a <code>data-badge</code> attribute and quoted string value for the badge.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot; class=&quot;mdl-badge&quot; data-badge=&quot;5&quot;&gt;This link has a badge.&lt;/a&gt;
</code></pre>
<p>The badge component is ready for use.</p>
<blockquote>
<p><strong>Note:</strong> Because of the badge component&#39;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>
</blockquote>
<h4 id="examples">Examples</h4>
<p>A badge inside a link.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot; class=&quot;mdl-badge&quot; data-badge=&quot;7&quot;&gt;This link contains a badge.&lt;/a&gt;
</code></pre>
<p>A badge near, but not included in, a link.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot;&gt;This link is followed by a badge.&lt;/a&gt;
&lt;span class=&quot;mdl-badge&quot; data-badge=&quot;12&quot;&gt;&lt;/span&gt;
</code></pre>
<p>A badge inside a link with too many characters to fit inside the badge.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot; class=&quot;mdl-badge&quot; data-badge=&quot;123456789&quot;&gt;
This badge has too many characters.&lt;/a&gt;
</code></pre>
<p>A badge inside a link with no badge background color.</p>
<pre><code class="language-markup">&lt;a href=&quot;#&quot; class=&quot;mdl-badge mdl-badge--no-background&quot; data-badge=&quot;123&quot;&gt;
This badge has no background color.&lt;/a&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-badge</code></td>
<td>Defines badge as an MDL component</td>
<td>Required on span or link</td>
</tr>
<tr>
<td><code>mdl-badge--no-background</code></td>
<td>Applies open-circle effect to badge</td>
<td>Optional</td>
</tr>
<tr>
<td><code>mdl-badge--overlap</code></td>
<td>Make the badge overlap with its container</td>
<td>Optional</td>
</tr>
<tr>
<td><code>data-badge=&quot;value&quot;</code></td>
<td>Assigns string value to badge</td>
<td>Not a class, but a separate attribute; required on span or link</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="buttons-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Buttons</h3>
<p>Variations on Material Design buttons.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-colored">
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-colored-ripple">
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Colored FAB
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/fab-colored.html">&lt;!-- Colored FAB button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab mdl-button--colored&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/fab-colored-ripple.html">&lt;!-- Colored FAB button with ripple --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab">
<!-- FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-ripple">
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-disabled">
<!-- Disabled FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Plain FAB
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption">
Disabled
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/fab.html">&lt;!-- FAB button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/fab-ripple.html">&lt;!-- FAB button with ripple --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/fab-disabled.html">&lt;!-- Disabled FAB button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab&quot; disabled&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised">
<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-ripple">
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-disabled">
<!-- Raised disabled button -->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Raised Button
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption">
Disabled
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/raised.html">&lt;!-- Raised button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/raised-ripple.html">&lt;!-- Raised button with ripple --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/raised-disabled.html">&lt;!-- Raised disabled button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised&quot; disabled&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-colored">
<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-accent">
<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-ripple-accent">
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Colored button
</div>
<div class="snippet-caption">
Accent colored
</div>
<div class="snippet-caption">
With Ripples
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/raised-colored.html">&lt;!-- Colored raised button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised mdl-button--colored&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/raised-accent.html">&lt;!-- Accent-colored raised button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised mdl-button--accent&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/raised-ripple-accent.html">&lt;!-- Accent-colored raised button with ripple --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat">
<!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-ripple">
<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-disabled">
<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Flat button
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption">
Disabled
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/flat.html">&lt;!-- Flat button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/flat-ripple.html">&lt;!-- Flat button with ripple --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-js-ripple-effect&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/flat-disabled.html">&lt;!-- Disabled flat button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button&quot; disabled&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-primary">
<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-accent">
<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Primary colored flat
</div>
<div class="snippet-caption">
Accent colored flat
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/flat-primary.html">&lt;!-- Primary-colored flat button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--primary&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/flat-accent.html">&lt;!-- Accent-colored flat button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--accent&quot;&gt;
Button
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__icon">
<!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__icon-colored">
<!-- Colored icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons">mood</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Icon button
</div>
<div class="snippet-caption">
Colored
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/icon.html">&lt;!-- Icon button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;mood&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/icon-colored.html">&lt;!-- Colored icon button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--icon mdl-button--colored&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;mood&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-mini">
<!-- Mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-mini-colored">
<!-- Colored mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Mini FAB
</div>
<div class="snippet-caption">
Colored
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/fab-mini.html">&lt;!-- Mini FAB button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="button/fab-mini-colored.html">&lt;!-- Colored mini FAB button --&gt;
&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt;
&lt;/button&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>button</strong> component is an enhanced version of the standard HTML <code>&lt;button&gt;</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>
<p>Buttons are a ubiquitous feature of most user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the button component&#39;s <a href="http://www.google.com/design/spec/components/buttons.html">Material Design specifications page</a> for details.</p>
<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>
<h3 id="to-include-an-mdl-button-component-">To include an MDL <strong>button</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;button&gt;</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>
<pre><code class="language-markup">&lt;button&gt;Save&lt;/button&gt;
</code></pre>
<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the button using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised&quot;&gt;Save&lt;/button&gt;
</code></pre>
<p>The button component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A button with the &quot;raised&quot; effect.</p>
<pre><code class="language-markup">&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised&quot;&gt;Save&lt;/button&gt;
</code></pre>
<p>A button with the &quot;fab&quot; effect.</p>
<pre><code class="language-markup">&lt;button class=&quot;mdl-button mdl-js-button mdl-button--fab&quot;&gt;OK&lt;/button&gt;
</code></pre>
<p>A button with the &quot;icon&quot; and &quot;colored&quot; effects.</p>
<pre><code class="language-markup">&lt;button class=&quot;mdl-button mdl-js-button mdl-button--icon mdl-button--colored&quot;&gt;?&lt;/button&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-button</code></td>
<td>Defines button as an MDL component</td>
<td>Required</td>
</tr>
<tr>
<td><code>mdl-js-button</code></td>
<td>Assigns basic MDL behavior to button</td>
<td>Required</td>
</tr>
<tr>
<td>(none)</td>
<td>Applies <em>flat</em> display effect to button (default)</td>
<td></td>
</tr>
<tr>
<td><code>mdl-button--raised</code></td>
<td>Applies <em>raised</em> display effect</td>
<td>Mutually exclusive with <em>fab</em>, <em>mini-fab</em>, and <em>icon</em></td>
</tr>
<tr>
<td><code>mdl-button--fab</code></td>
<td>Applies <em>fab</em> (circular) display effect</td>
<td>Mutually exclusive with <em>raised</em>, <em>mini-fab</em>, and <em>icon</em></td>
</tr>
<tr>
<td><code>mdl-button--mini-fab</code></td>
<td>Applies <em>mini-fab</em> (small fab circular) display effect</td>
<td>Mutually exclusive with <em>raised</em>, <em>fab</em>, and <em>icon</em></td>
</tr>
<tr>
<td><code>mdl-button--icon</code></td>
<td>Applies <em>icon</em> (small plain circular) display effect</td>
<td>Mutually exclusive with <em>raised</em>, <em>fab</em>, and <em>mini-fab</em></td>
</tr>
<tr>
<td><code>mdl-button--colored</code></td>
<td>Applies <em>colored</em> display effect (primary or accent color, depending on the type of button)</td>
<td>Colors are defined in <code>material.min.css</code></td>
</tr>
<tr>
<td><code>mdl-button--primary</code></td>
<td>Applies <em>primary</em> color display effect</td>
<td>Colors are defined in <code>material.min.css</code></td>
</tr>
<tr>
<td><code>mdl-button--accent</code></td>
<td>Applies <em>accent</em> color display effect</td>
<td>Colors are defined in <code>material.min.css</code></td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect</td>
<td>May be used in combination with any other classes</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;button class=&quot;mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect&quot; disabled&gt;Raised Ripples Disabled&lt;/button&gt;</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.
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
</div>
</section>
<section id="cards-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Cards</h3>
<p>Self-contained pieces of paper with data.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-card demo-card__wide">
<!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Wide
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="card/wide.html">&lt;!-- Wide card with share menu button --&gt;
&lt;style&gt;
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide &gt; .mdl-card__title {
color: #fff;
height: 176px;
background: url(&#39;../assets/demos/welcome_card.jpg&#39;) center / cover;
}
.demo-card-wide &gt; .mdl-card__menu {
color: #fff;
}
&lt;/style&gt;
&lt;div class=&quot;demo-card-wide mdl-card mdl-shadow--2dp&quot;&gt;
&lt;div class=&quot;mdl-card__title&quot;&gt;
&lt;h2 class=&quot;mdl-card__title-text&quot;&gt;Welcome&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions mdl-card--border&quot;&gt;
&lt;a class=&quot;mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect&quot;&gt;
Get Started
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__menu&quot;&gt;
&lt;button class=&quot;mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;share&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-card demo-card__square">
<!-- Square card -->
<style>
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
background:
url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
}
</style>
<div class="demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Update</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Square
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="card/square.html">&lt;!-- Square card --&gt;
&lt;style&gt;
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
.demo-card-square &gt; .mdl-card__title {
color: #fff;
background:
url(&#39;../assets/demos/dog.png&#39;) bottom right 15% no-repeat #46B6AC;
}
&lt;/style&gt;
&lt;div class=&quot;demo-card-square mdl-card mdl-shadow--2dp&quot;&gt;
&lt;div class=&quot;mdl-card__title mdl-card--expand&quot;&gt;
&lt;h2 class=&quot;mdl-card__title-text&quot;&gt;Update&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions mdl-card--border&quot;&gt;
&lt;a class=&quot;mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect&quot;&gt;
View Updates
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-card demo-card__image">
<!-- Image card -->
<style>
.demo-card-image.mdl-card {
width: 256px;
height: 256px;
background: url('../assets/demos/image_card.jpg') center / cover;
}
.demo-card-image > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename {
color: #fff;
font-size: 14px;
font-weight: 500;
}
</style>
<div class="demo-card-image mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Image.jpg</span>
</div>
</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-card demo-card__event">
<!-- Event card -->
<style>
.demo-card-event.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.demo-card-event > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title {
align-items: flex-start;
}
.demo-card-event > .mdl-card__title > h4 {
margin-top: 0;
}
.demo-card-event > .mdl-card__actions {
display: flex;
box-sizing:border-box;
align-items: center;
}
.demo-card-event > .mdl-card__actions > .material-icons {
padding-right: 10px;
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {
color: #fff;
}
</style>
<div class="demo-card-event mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h4>
Featured event:<br>
May 24, 2016<br>
7-11pm
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">event</i>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Image
</div>
<div class="snippet-caption">
Event
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="card/image.html">&lt;!-- Image card --&gt;
&lt;style&gt;
.demo-card-image.mdl-card {
width: 256px;
height: 256px;
background: url(&#39;../assets/demos/image_card.jpg&#39;) center / cover;
}
.demo-card-image &gt; .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename {
color: #fff;
font-size: 14px;
font-weight: 500;
}
&lt;/style&gt;
&lt;div class=&quot;demo-card-image mdl-card mdl-shadow--2dp&quot;&gt;
&lt;div class=&quot;mdl-card__title mdl-card--expand&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions&quot;&gt;
&lt;span class=&quot;demo-card-image__filename&quot;&gt;Image.jpg&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="card/event.html">&lt;!-- Event card --&gt;
&lt;style&gt;
.demo-card-event.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.demo-card-event &gt; .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event &gt; .mdl-card__title {
align-items: flex-start;
}
.demo-card-event &gt; .mdl-card__title &gt; h4 {
margin-top: 0;
}
.demo-card-event &gt; .mdl-card__actions {
display: flex;
box-sizing:border-box;
align-items: center;
}
.demo-card-event &gt; .mdl-card__actions &gt; .material-icons {
padding-right: 10px;
}
.demo-card-event &gt; .mdl-card__title,
.demo-card-event &gt; .mdl-card__actions,
.demo-card-event &gt; .mdl-card__actions &gt; .mdl-button {
color: #fff;
}
&lt;/style&gt;
&lt;div class=&quot;demo-card-event mdl-card mdl-shadow--2dp&quot;&gt;
&lt;div class=&quot;mdl-card__title mdl-card--expand&quot;&gt;
&lt;h4&gt;
Featured event:&lt;br&gt;
May 24, 2016&lt;br&gt;
7-11pm
&lt;/h4&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions mdl-card--border&quot;&gt;
&lt;a class=&quot;mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect&quot;&gt;
Add to Calendar
&lt;/a&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;i class=&quot;material-icons&quot;&gt;event&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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 &mdash; such as a photo, some text, and a link &mdash; that are all about a single subject.</p>
<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>
<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&#39;s <a href="http://www.google.com/design/spec/components/cards.html">Material Design specifications page</a> for details.</p>
<h3 id="to-include-an-mdl-card-component-">To include an MDL <strong>card</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element; this is the &quot;outer&quot; container, intended to hold all of the card&#39;s content.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Inside the div, code one or more &quot;inner&quot; divs, one for each desired content block. A card containing a title, an image, some text, and an action bar would contain four &quot;inner&quot; divs, all siblings.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;3. Add one or more MDL classes, separated by spaces, to the &quot;outer&quot; div and the &quot;inner&quot; divs (depending on their intended use) using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-card&quot;&gt;
&lt;div class=&quot;mdl-card__title&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-card__media&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;4. Add content to each &quot;inner&quot; div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-card&quot;&gt;
&lt;div class=&quot;mdl-card__title&quot;&gt;
&lt;h2 class=&quot;mdl-card__title-text&quot;&gt;title Text Goes Here&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__media&quot;&gt;
&lt;img src=&quot;photo.jpg&quot; width=&quot;220&quot; height=&quot;140&quot; border=&quot;0&quot; alt=&quot;&quot; style=&quot;padding:20px;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
This text might describe the photo and provide further information, such as where and
when it was taken.
&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions&quot;&gt;
&lt;a href=&quot;(URL or function)&quot;&gt;Related Action&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>The card component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A card (no shadow) with a title, image, text, and action.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-card&quot;&gt;
&lt;div class=&quot;mdl-card__title&quot;&gt;
&lt;h2 class=&quot;mdl-card__title-text&quot;&gt;Auckland Sky Tower&lt;br&gt;Auckland, New Zealand&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__media&quot;&gt;
&lt;img src=&quot;skytower.jpg&quot; width=&quot;173&quot; height=&quot;157&quot; border=&quot;0&quot; alt=&quot;&quot;
style=&quot;padding:10px;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
The Sky Tower is an observation and telecommunications tower located in Auckland,
New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
in the Southern Hemisphere.
&lt;/div&gt;
&lt;div class=&quot;mdl-card__actions&quot;&gt;
&lt;a href=&quot;http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29&quot;&gt;Wikipedia entry&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Card (level-3 shadow) with an image, caption, and text:</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-card mdl-shadow--4dp&quot;&gt;
&lt;div class=&quot;mdl-card__media&quot;&gt;&lt;img src=&quot;skytower.jpg&quot; width=&quot;173&quot; height=&quot;157&quot; border=&quot;0&quot;
alt=&quot;&quot; style=&quot;padding:10px;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
Auckland Sky Tower, taken March 24th, 2014
&lt;/div&gt;
&lt;div class=&quot;mdl-card__supporting-text&quot;&gt;
The Sky Tower is an observation and telecommunications tower located in Auckland,
New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
in the Southern Hemisphere.
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-card</code></td>
<td>Defines div element as an MDL card container</td>
<td>Required on &quot;outer&quot; div</td>
</tr>
<tr>
<td><code>mdl-card--border</code></td>
<td>Adds a border to the card section that it&#39;s applied to</td>
<td>Used on the &quot;inner&quot; divs</td>
</tr>
<tr>
<td><code>mdl-shadow--2dp through mdl-shadow--16dp</code></td>
<td>Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card</td>
<td>Optional, goes on &quot;outer&quot; div; if omitted, no shadow is present</td>
</tr>
<tr>
<td><code>mdl-card__title</code></td>
<td>Defines div as a card title container</td>
<td>Required on &quot;inner&quot; title div</td>
</tr>
<tr>
<td><code>mdl-card__title-text</code></td>
<td>Assigns appropriate text characteristics to card title</td>
<td>Required on head tag (H1 - H6) inside title div</td>
</tr>
<tr>
<td><code>mdl-card__subtitle-text</code></td>
<td>Assigns text characteristics to a card subtitle</td>
<td>Optional. Should be a child of the title element.</td>
</tr>
<tr>
<td><code>mdl-card__media</code></td>
<td>Defines div as a card media container</td>
<td>Required on &quot;inner&quot; media div</td>
</tr>
<tr>
<td><code>mdl-card__supporting-text</code></td>
<td>Defines div as a card body text container and assigns appropriate text characteristics to body text</td>
<td>Required on &quot;inner&quot; body text div; text goes directly inside the div with no intervening containers</td>
</tr>
<tr>
<td><code>mdl-card__actions</code></td>
<td>Defines div as a card actions container and assigns appropriate text characteristics to actions text</td>
<td>Required on &quot;inner&quot; actions div; content goes directly inside the div with no intervening containers</td>
</tr>
<tr>
<td><code>mdl-card__menu</code></td>
<td>Defines element as top right menu button</td>
<td>Optional. Should be a child of the <code>mdl-card</code> element.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="chips-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Chips</h3>
<p>Represents complex entities in small blocks.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-chip demo-chip__basic">
<!-- Basic Chip -->
<span class="mdl-chip">
<span class="mdl-chip__text">Basic Chip</span>
</span>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-chip demo-chip__deletable">
<!-- Deletable Chip -->
<span class="mdl-chip mdl-chip--deletable">
<span class="mdl-chip__text">Deletable Chip</span>
<button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
</span>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-chip demo-chip__button">
<!-- Button Chip -->
<button type="button" class="mdl-chip">
<span class="mdl-chip__text">Button Chip</span>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Basic Chip
</div>
<div class="snippet-caption">
Deletable Chip
</div>
<div class="snippet-caption">
Button Chip
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="chip/basic.html">&lt;!-- Basic Chip --&gt;
&lt;span class=&quot;mdl-chip&quot;&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Basic Chip&lt;/span&gt;
&lt;/span&gt;</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="chip/deletable.html">&lt;!-- Deletable Chip --&gt;
&lt;span class=&quot;mdl-chip mdl-chip--deletable&quot;&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Deletable Chip&lt;/span&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-chip__action&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;cancel&lt;/i&gt;&lt;/button&gt;
&lt;/span&gt;</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="chip/button.html">&lt;!-- Button Chip --&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-chip&quot;&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Button Chip&lt;/span&gt;
&lt;/button&gt;</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-chip demo-chip__contact">
<!-- Contact Chip -->
<span class="mdl-chip mdl-chip--contact">
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
<span class="mdl-chip__text">Contact Chip</span>
</span>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-chip demo-chip__deletable-contact">
<!-- Deletable Contact Chip -->
<span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
<img class="mdl-chip__contact" src="/templates/dashboard/images/user.jpg"></img>
<span class="mdl-chip__text">Deletable Contact Chip</span>
<a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Contact Chip
</div>
<div class="snippet-caption">
Deletable Contact Chip
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="chip/contact.html">&lt;!-- Contact Chip --&gt;
&lt;span class=&quot;mdl-chip mdl-chip--contact&quot;&gt;
&lt;span class=&quot;mdl-chip__contact mdl-color--teal mdl-color-text--white&quot;&gt;A&lt;/span&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Contact Chip&lt;/span&gt;
&lt;/span&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="chip/deletable-contact.html">&lt;!-- Deletable Contact Chip --&gt;
&lt;span class=&quot;mdl-chip mdl-chip--contact mdl-chip--deletable&quot;&gt;
&lt;img class=&quot;mdl-chip__contact&quot; src=&quot;/templates/dashboard/images/user.jpg&quot;&gt;&lt;/img&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Deletable Contact Chip&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;mdl-chip__action&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;cancel&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>chip</strong> component is a small, interactive element.
Chips are commonly used for contacts, text, rules, icons, and photos.</p>
<h2 id="to-include-an-mdl-chip-component-">TO INCLUDE AN MDL CHIP COMPONENT:</h2>
<p>&nbsp;1. Create a container element for the chip; typically <code>&lt;span&gt;</code> and <code>&lt;div&gt;</code> are used, but any container element should work equally well. If you need interactivity, use a <code>&lt;button&gt;</code>, or add the <code>tabindex</code> attribute to your container.</p>
<pre><code class="language-markup">&lt;span&gt;
&lt;/span&gt;
</code></pre>
<p>&nbsp;2. Add in the text wrapper and the MDL classes.</p>
<pre><code class="language-markup">&lt;span class=&quot;mdl-chip&quot;&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Chip Text&lt;/span&gt;
&lt;/span&gt;
</code></pre>
<p>&nbsp;3. For deletable chips, add in the delete icon. This can be an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or non-interactive tags like <code>&lt;span&gt;</code>.</p>
<pre><code class="language-markup">&lt;span class=&quot;mdl-chip&quot;&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Chip Text&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;mdl-chip__action&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;cancel&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
</code></pre>
<p>&nbsp;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>&lt;img&gt;</code> tag, but other types of content can be used with a little extra supporting css.</p>
<pre><code class="language-markup">&lt;span class=&quot;mdl-chip&quot;&gt;
&lt;span class=&quot;mdl-chip__contact mdl-color--teal mdl-color-text--white&quot;&gt;A&lt;/span&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Chip Text&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;mdl-chip__action&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;cancel&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
</code></pre>
<h2 id="examples">Examples</h2>
<p>A button based contact chip whose contact image is a <code>&lt;span&gt;</code> with a <code>background-image</code>.</p>
<pre><code class="language-markup">&lt;style&gt;
.demo-chip .mdl-chip__contact {
background-image: url(&quot;./path/to/image&quot;);
background-size: cover;
}
&lt;/style&gt;
&lt;button class=&quot;mdl-chip demo-chip&quot;&gt;
&lt;span class=&quot;mdl-chip__contact&quot;&gt;&amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;mdl-chip__text&quot;&gt;Chip Text&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;mdl-chip__action&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;cancel&lt;/i&gt;&lt;/a&gt;
&lt;/button&gt;
</code></pre>
<h2 id="css-classes">CSS Classes</h2>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-chip</code></td>
<td>Defines element as an MDL chip container</td>
<td>Required on &quot;outer&quot; container</td>
</tr>
<tr>
<td><code>mdl-chip--contact</code></td>
<td>Defines an MDL chip as a contact style chip</td>
<td>Optional, goes on &quot;outer&quot; container</td>
</tr>
<tr>
<td><code>mdl-chip__text</code></td>
<td>Defines element as the chip&#39;s text</td>
<td>Required on &quot;inner&quot; text container</td>
</tr>
<tr>
<td><code>mdl-chip__action</code></td>
<td>Defines element as the chip&#39;s action</td>
<td>Required on &quot;inner&quot; action container, if present</td>
</tr>
<tr>
<td><code>mdl-chip__contact</code></td>
<td>Defines element as the chip&#39;s contact container</td>
<td>Required on &quot;inner&quot; contact container, if the <code>mdl-chip--contact</code> class is present on &quot;outer&quot; container</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="dialog-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Dialogs</h3>
<p>Modal windows for dedicated user input.</p>
</div>
<!-- Add warning, if the component has one -->
<div class="mdl-components__warning"><b>Note: </b>Dialogs use the HTML &lt;dialog&gt; 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>
<!-- Generating snippets -->
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>dialog</strong> component allows for verification of
user actions, simple data input, and alerts to provide extra information to users.</p>
<h2 id="basic-usage">Basic Usage</h2>
<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>.
Only Chrome and Opera have native support at the time of writing.
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>
<p>Once you have dialog support create a dialog element.
The element when using the polyfill <strong>must</strong> be a child of the <code>body</code> element.
Within that container, add a content element with the class <code>mdl-dialog__content</code>.
Add you content, then create an action container with the class <code>mdl-dialog__actions</code>.
Finally for the markup, add your buttons within this container for triggering dialog functions.</p>
<p>Keep in mind, the order is automatically reversed for actions.
Material Design requires that the primary (confirmation) action be displayed last.
So, the first action you create will appear last on the action bar.
This allows for more natural coding and tab ordering while following the specification.</p>
<p>Remember to add the event handlers for your action items.
After your dialog markup is created, add the event listeners to the page to trigger the dialog to show.</p>
<p>For example:</p>
<pre><code class="language-javascript"> var button = document.querySelector(&#39;button&#39;);
var dialog = document.querySelector(&#39;dialog&#39;);
button.addEventListener(&#39;click&#39;, function() {
dialog.showModal();
/* Or dialog.show(); to show the dialog without a backdrop. */
});
</code></pre>
<h2 id="examples">Examples</h2>
<h3 id="simple-dialog">Simple Dialog</h3>
<p>See this example live in <a href="http://codepen.io/Garbee/full/EPoaMj/">codepen</a>.</p>
<pre><code class="language-markup">&lt;body&gt;
&lt;button id=&quot;show-dialog&quot; type=&quot;button&quot; class=&quot;mdl-button&quot;&gt;Show Dialog&lt;/button&gt;
&lt;dialog class=&quot;mdl-dialog&quot;&gt;
&lt;h4 class=&quot;mdl-dialog__title&quot;&gt;Allow data collection?&lt;/h4&gt;
&lt;div class=&quot;mdl-dialog__content&quot;&gt;
&lt;p&gt;
Allowing us to collect data will let us get you the information you want faster.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-dialog__actions&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-button&quot;&gt;Agree&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-button close&quot;&gt;Disagree&lt;/button&gt;
&lt;/div&gt;
&lt;/dialog&gt;
&lt;script&gt;
var dialog = document.querySelector(&#39;dialog&#39;);
var showDialogButton = document.querySelector(&#39;#show-dialog&#39;);
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener(&#39;click&#39;, function() {
dialog.showModal();
});
dialog.querySelector(&#39;.close&#39;).addEventListener(&#39;click&#39;, function() {
dialog.close();
});
&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<h3 id="dialog-with-full-width-actions">Dialog with full width actions</h3>
<p>See this example live in <a href="http://codepen.io/Garbee/full/JGMowG/">codepen</a>.</p>
<pre><code class="language-markup">&lt;body&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-button show-modal&quot;&gt;Show Modal&lt;/button&gt;
&lt;dialog class=&quot;mdl-dialog&quot;&gt;
&lt;div class=&quot;mdl-dialog__content&quot;&gt;
&lt;p&gt;
Allow this site to collect usage data to improve your experience?
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-dialog__actions mdl-dialog__actions--full-width&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-button&quot;&gt;Agree&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-button close&quot;&gt;Disagree&lt;/button&gt;
&lt;/div&gt;
&lt;/dialog&gt;
&lt;script&gt;
var dialog = document.querySelector(&#39;dialog&#39;);
var showModalButton = document.querySelector(&#39;.show-modal&#39;);
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showModalButton.addEventListener(&#39;click&#39;, function() {
dialog.showModal();
});
dialog.querySelector(&#39;.close&#39;).addEventListener(&#39;click&#39;, function() {
dialog.close();
});
&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<h2 id="css-classes">CSS Classes</h2>
<h3 id="blocks">Blocks</h3>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-dialog</code></td>
<td>Defines the container of the dialog component.</td>
<td>Required on dialog container.</td>
</tr>
</tbody>
</table>
<h3 id="elements">Elements</h3>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-dialog__title</code></td>
<td>Defines the title container in the dialog.</td>
<td>Optional on title container.</td>
</tr>
<tr>
<td><code>mdl-dialog__content</code></td>
<td>Defines the content container of the dialog.</td>
<td>Required on content container.</td>
</tr>
<tr>
<td><code>mdl-dialog__actions</code></td>
<td>Defines the actions container in the dialog.</td>
<td>Required on action container.</td>
</tr>
</tbody>
</table>
<h3 id="modifiers">Modifiers</h3>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-dialog__actions--full-width</code></td>
<td>Modifies the actions to each take the full width of the container. This makes each take their own line.</td>
<td>Optional on action container.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="layout-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Layout</h3>
<p>Building blocks for constructing a page layout.</p>
</div>
<section class="docs-toc docs-text-styling">
<nav class="section-content">
<ul>
<li><a href="#layout-section/layout">Navigation layouts</a></li>
<li><a href="#layout-section/grid">Grid</a></li>
<li><a href="#layout-section/tabs">Tabs</a></li>
<li><a href="#layout-section/footer">Footer</a></li>
</ul>
</nav>
</section>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="layout-section/layout">Navigation layouts</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__transparent">
<style>
.demo-layout.demo-layout__transparent {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
</style>
<!-- Uses a transparent header that draws on top of the layout's background -->
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
</style>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Transparent header
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/transparent.html">&lt;!-- Uses a transparent header that draws on top of the layout&#39;s background --&gt;
&lt;style&gt;
.demo-layout-transparent {
background: url(&#39;../assets/demos/transparent.jpg&#39;) center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
&lt;/style&gt;
&lt;div class=&quot;demo-layout-transparent mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header mdl-layout__header--transparent&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;!-- Title --&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;!-- Add spacer, to align navigation to the right --&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;!-- Navigation --&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__fixed-drawer">
<style>
.demo-layout.demo-layout__fixed-drawer {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__fixed-drawer .mdl-layout__content {
background: white;
}
</style>
<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Fixed drawer, no header
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-drawer.html">&lt;!-- No header, and the drawer stays open on larger screens (fixed drawer). --&gt;
&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-drawer&quot;&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__fixed-header">
<style>
.demo-layout.demo-layout__fixed-header {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__fixed-header .mdl-layout__content {
background: white;
}
</style>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Fixed header
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-header.html">&lt;!-- Always shows a header, even in smaller screens. --&gt;
&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-header&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;!-- Title --&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;!-- Add spacer, to align navigation to the right --&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;!-- Navigation. We hide it in small screens. --&gt;
&lt;nav class=&quot;mdl-navigation mdl-layout--large-screen-only&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__fixed-header-drawer">
<style>
.demo-layout.demo-layout__fixed-header-drawer {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__fixed-header-drawer.mdl-layout__content {
background: white;
}
</style>
<!-- The drawer is always open in large screens. The header is always shown,
even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp">
</div>
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Fixed header and drawer
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-header-drawer.html">&lt;!-- The drawer is always open in large screens. The header is always shown,
even in small screens. --&gt;
&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right&quot;&gt;
&lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;
for=&quot;fixed-header-drawer-exp&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
&lt;/label&gt;
&lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; name=&quot;sample&quot;
id=&quot;fixed-header-drawer-exp&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__scrolling-header">
<style>
.demo-layout.demo-layout__scrolling-header {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__scrolling-header .page-content {
height: 600px;
background: white;
}
</style>
<!-- Uses a header that scrolls with the text, rather than staying
locked at the top -->
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Scrolling header
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/scrolling-header.html">&lt;!-- Uses a header that scrolls with the text, rather than staying
locked at the top --&gt;
&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header mdl-layout__header--scroll&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;!-- Title --&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;!-- Add spacer, to align navigation to the right --&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;!-- Navigation --&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__waterfall-header">
<style>
.demo-layout.demo-layout__waterfall-header {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__waterfall-header .page-content {
height: 600px;
background: white;
}
</style>
<!-- Uses a header that contracts as the page scrolls down. -->
<style>
.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
padding-right: 0;
}
</style>
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp">
</div>
</div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Waterfall header
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/waterfall-header.html">&lt;!-- Uses a header that contracts as the page scrolls down. --&gt;
&lt;style&gt;
.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
padding-right: 0;
}
&lt;/style&gt;
&lt;div class=&quot;demo-layout-waterfall mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header mdl-layout__header--waterfall&quot;&gt;
&lt;!-- Top row, always visible --&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;!-- Title --&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right&quot;&gt;
&lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;
for=&quot;waterfall-exp&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
&lt;/label&gt;
&lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; name=&quot;sample&quot;
id=&quot;waterfall-exp&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Bottom row, not visible on scroll --&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;!-- Navigation --&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__scrollable-tabs">
<style>
.demo-layout.demo-layout__scrollable-tabs {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__scrollable-tabs .mdl-layout__content {
background: white;
}
</style>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
<a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
<a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
<a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Scrollable tabs
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/scrollable-tabs.html">&lt;!-- Simple header with scrollable tabs. --&gt;
&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-header&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;!-- Title --&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;/div&gt;
&lt;!-- Tabs --&gt;
&lt;div class=&quot;mdl-layout__tab-bar mdl-js-ripple-effect&quot;&gt;
&lt;a href=&quot;#scroll-tab-1&quot; class=&quot;mdl-layout__tab is-active&quot;&gt;Tab 1&lt;/a&gt;
&lt;a href=&quot;#scroll-tab-2&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 2&lt;/a&gt;
&lt;a href=&quot;#scroll-tab-3&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 3&lt;/a&gt;
&lt;a href=&quot;#scroll-tab-4&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 4&lt;/a&gt;
&lt;a href=&quot;#scroll-tab-5&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 5&lt;/a&gt;
&lt;a href=&quot;#scroll-tab-6&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 6&lt;/a&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;section class=&quot;mdl-layout__tab-panel is-active&quot; id=&quot;scroll-tab-1&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;scroll-tab-2&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;scroll-tab-3&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;scroll-tab-4&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;scroll-tab-5&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;scroll-tab-6&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-layout demo-layout__fixed-tabs">
<style>
.demo-layout.demo-layout__fixed-tabs {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 100%;
position: relative;
height: 300px;
}
.demo-layout.demo-layout__fixed-tabs .mdl-layout__content {
background: white;
}
</style>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Fixed tabs
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="layout/fixed-tabs.html">&lt;!-- Simple header with fixed tabs. --&gt;
&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;!-- Title --&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;/div&gt;
&lt;!-- Tabs --&gt;
&lt;div class=&quot;mdl-layout__tab-bar mdl-js-ripple-effect&quot;&gt;
&lt;a href=&quot;#fixed-tab-1&quot; class=&quot;mdl-layout__tab is-active&quot;&gt;Tab 1&lt;/a&gt;
&lt;a href=&quot;#fixed-tab-2&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 2&lt;/a&gt;
&lt;a href=&quot;#fixed-tab-3&quot; class=&quot;mdl-layout__tab&quot;&gt;Tab 3&lt;/a&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout-title&quot;&gt;Title&lt;/span&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;section class=&quot;mdl-layout__tab-panel is-active&quot; id=&quot;fixed-tab-1&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;fixed-tab-2&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;mdl-layout__tab-panel&quot; id=&quot;fixed-tab-3&quot;&gt;
&lt;div class=&quot;page-content&quot;&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;/main&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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>
<p>Appropriate and accessible layout is a critical feature of all user interfaces, regardless of a site&#39;s content or function. Page design and presentation is therefore an important factor in the overall user experience. See the layout component&#39;s <a href="http://www.google.com/design/spec/layout/principles.html">Material Design specifications page</a> for details.</p>
<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>
<h3 id="to-include-a-basic-mdl-layout-component-">To include a basic MDL <strong>layout</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element. This is the &quot;outer&quot; div that holds the entire layout.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;/div&gt;
</code></pre>
<blockquote>
<p><strong>Note:</strong> The layout cannot be applied directly on the <code>&lt;body&gt;</code> element. Always create a nested <code>&lt;div&gt;</code> element.</p>
</blockquote>
<p>&nbsp;2. Add MDL classes as indicated, separated by spaces, to the div using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;3. Inside the div, code a <code>&lt;header&gt;</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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;/header&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;4. Inside the header, add a <code>&lt;div&gt;</code> to produce the menu icon, and include the MDL class as indicated. The div has no content of its own.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;/header&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;5. Still inside the header, add another <code>&lt;div&gt;</code> to hold the header row&#39;s content, and include the MDL class as indicated.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;6. Inside the header row div, add a span containing the layout title, and include the MDL class as indicated.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;7. Following the span, add a <code>&lt;div&gt;</code> to align the header&#39;s navigation links to the right, and include the MDL class as indicated.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;8. Following the spacer div, add a <code>&lt;nav&gt;</code> element to contain the header&#39;s navigation links, and include the MDL class as indicated. Inside the nav, add one anchor <code>&lt;a&gt;</code> element for each header link, and include the MDL class as indicated. This completes the layout&#39;s header.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;9. Following the header, add a <code>&lt;div&gt;</code> element to hold the slide-out drawer&#39;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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;11. Following the span, add a <code>&lt;nav&gt;</code> element to contain the drawer&#39;s navigation links, and one anchor <code>&lt;a&gt;</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&#39;s drawer.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;12. Finally, following the drawer div, add a <code>&lt;main&gt;</code> element to hold the layout&#39;s primary content, and include the MDL class as indicated. Inside that element, add your desired content.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Simple Layout&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 1&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 2&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Nav link 3&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;p&gt;Goes&lt;/p&gt;
&lt;p&gt;Here&lt;/p&gt;
&lt;/main&gt;
&lt;/div&gt;
</code></pre>
<p>The layout component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A layout with a fixed header for larger screens and a collapsible drawer for smaller screens.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout-icon&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Material Design Lite&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;World.&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;How&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Are&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;You?&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Material Design Lite&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;World.&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;How&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Are&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;You?&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div&gt;Content&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code></pre>
<p>The same layout with a non-fixed header that scrolls with the content.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout&quot;&gt;
&lt;header class=&quot;mdl-layout__header mdl-layout__header--scroll&quot;&gt;
&lt;img class=&quot;mdl-layout-icon&quot;&gt;&lt;/img&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Material Design Lite&lt;/span&gt;
&lt;div class=&quot;mdl-layout-spacer&quot;&gt;&lt;/div&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;World.&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;How&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Are&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;You?&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Material Design Lite&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;World.&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;How&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Are&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;You?&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div&gt;Content&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code></pre>
<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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-drawer&quot;&gt;
&lt;header class=&quot;mdl-layout__header&quot;&gt;
&lt;div class=&quot;mdl-layout__header-row&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Fixed drawer layout demo&lt;/span&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Material Design Lite&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;World.&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;How&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Are&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;You?&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div&gt;Content&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code></pre>
<p>A layout with a fixed drawer but no header.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-layout mdl-js-layout mdl-layout--fixed-drawer&quot;&gt;
&lt;div class=&quot;mdl-layout__drawer&quot;&gt;
&lt;span class=&quot;mdl-layout__title&quot;&gt;Material Design Lite&lt;/span&gt;
&lt;nav class=&quot;mdl-navigation&quot;&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;World.&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;How&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;Are&lt;/a&gt;
&lt;a class=&quot;mdl-navigation__link&quot; href=&quot;#&quot;&gt;You?&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;main class=&quot;mdl-layout__content&quot;&gt;
&lt;div&gt;Content&lt;/div&gt;
&lt;/main&gt;
&lt;/div&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-layout</code></td>
<td>Defines container as an MDL component</td>
<td>Required on outer div element</td>
</tr>
<tr>
<td><code>mdl-js-layout</code></td>
<td>Assigns basic MDL behavior to layout</td>
<td>Required on outer div element</td>
</tr>
<tr>
<td><code>mdl-layout__header</code></td>
<td>Defines container as an MDL component</td>
<td>Required on header element</td>
</tr>
<tr>
<td><code>mdl-layout-icon</code></td>
<td>Used for adding an application icon. Gets concealed by menu icon if both are visible.</td>
<td>Goes on optional icon element</td>
</tr>
<tr>
<td><code>mdl-layout__header-row</code></td>
<td>Defines container as MDL header row</td>
<td>Required on header content div</td>
</tr>
<tr>
<td><code>mdl-layout__title</code></td>
<td>Defines layout title text</td>
<td>Required on layout title span</td>
</tr>
<tr>
<td><code>mdl-layout-spacer</code></td>
<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>
<td>Goes on optional div following layout title</td>
</tr>
<tr>
<td><code>mdl-navigation</code></td>
<td>Defines container as MDL navigation group</td>
<td>Required on nav element</td>
</tr>
<tr>
<td><code>mdl-navigation__link</code></td>
<td>Defines anchor as MDL navigation link</td>
<td>Required on header and/or drawer anchor elements</td>
</tr>
<tr>
<td><code>mdl-layout__drawer</code></td>
<td>Defines container as MDL layout drawer</td>
<td>Required on drawer div element</td>
</tr>
<tr>
<td><code>mdl-layout__content</code></td>
<td>Defines container as MDL layout content</td>
<td>Required on main element</td>
</tr>
<tr>
<td><code>mdl-layout__header--scroll</code></td>
<td>Makes the header scroll with the content</td>
<td>Optional; goes on header element</td>
</tr>
<tr>
<td><code>mdl-layout--fixed-drawer</code></td>
<td>Makes the drawer always visible and open in larger screens</td>
<td>Optional; goes on outer div element (not drawer div element)</td>
</tr>
<tr>
<td><code>mdl-layout--fixed-header</code></td>
<td>Makes the header always visible, even in small screens</td>
<td>Optional; goes on outer div element</td>
</tr>
<tr>
<td><code>mdl-layout--no-drawer-button</code></td>
<td>Does not display a drawer button</td>
<td>Optional; goes on <code>mdl-layout</code> element</td>
</tr>
<tr>
<td><code>mdl-layout--no-desktop-drawer-button</code></td>
<td>Does not display a drawer button in desktop mode</td>
<td>Optional; goes on <code>mdl-layout</code> element</td>
</tr>
<tr>
<td><code>mdl-layout--large-screen-only</code></td>
<td>Hides an element on smaller screens</td>
<td>Optional; goes on any descendant of <code>mdl-layout</code></td>
</tr>
<tr>
<td><code>mdl-layout--small-screen-only</code></td>
<td>Hides an element on larger screens</td>
<td>Optional; goes on any descendant of <code>mdl-layout</code></td>
</tr>
<tr>
<td><code>mdl-layout__header--waterfall</code></td>
<td>Allows a &quot;waterfall&quot; effect with multiple header lines</td>
<td>Optional; goes on header element</td>
</tr>
<tr>
<td><code>mdl-layout__header--waterfall-hide-top</code></td>
<td>Hides the top rather than the bottom rows on a waterfall header</td>
<td>Optional; goes on header element. Requires <code>mdl-layout__header--waterfall</code></td>
</tr>
<tr>
<td><code>mdl-layout__header--transparent</code></td>
<td>Makes header transparent (draws on top of layout background)</td>
<td>Optional; goes on header element</td>
</tr>
<tr>
<td><code>mdl-layout__header--seamed</code></td>
<td>Uses a header without a shadow</td>
<td>Optional; goes on header element</td>
</tr>
<tr>
<td><code>mdl-layout__tab-bar</code></td>
<td>Defines container as an MDL tab bar</td>
<td>Required on div element inside header (tabbed layout)</td>
</tr>
<tr>
<td><code>mdl-layout__tab</code></td>
<td>Defines anchor as MDL tab link</td>
<td>Required on tab bar anchor elements</td>
</tr>
<tr>
<td><code>is-active</code></td>
<td>Defines tab as default active tab</td>
<td>Optional; goes on tab bar anchor element and associated tab section element</td>
</tr>
<tr>
<td><code>mdl-layout__tab-panel</code></td>
<td>Defines container as tab content panel</td>
<td>Required on tab section elements</td>
</tr>
<tr>
<td><code>mdl-layout__tab-manual-switch</code></td>
<td>Disables tab switching when clicking on tab separators. Useful for disabling default behavior and setting up your own event listeners.</td>
<td>Optional; goes on tab bar element</td>
</tr>
<tr>
<td><code>mdl-layout--fixed-tabs</code></td>
<td>Uses fixed tabs instead of the default scrollable tabs</td>
<td>Optional; goes on outer div element (not div inside header)</td>
</tr>
</tbody>
</table>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="layout-section/grid">Grid</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-grid demo-grid__grid">
<style>
.demo-grid .mdl-cell {
box-sizing: border-box;
background-color: #BDBDBD;
height: 200px;
padding-left: 8px;
padding-top: 4px;
color: white;
}
.demo-grid .mdl-grid:first-of-type .mdl-cell {
height: 50px;
}
</style>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">6</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--2-col">2</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Responsive grid
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="grid/grid.html">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;4&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;4&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--6-col&quot;&gt;6&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;4&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col&quot;&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet&quot;&gt;6 (8 tablet)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet&quot;&gt;4 (6 tablet)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col mdl-cell--4-col-phone&quot;&gt;2 (4 phone)&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;.mdl-cell {
box-sizing: border-box;
background-color: #BDBDBD;
height: 200px;
padding-left: 8px;
padding-top: 4px;
color: white;
}
.mdl-grid:first-of-type .mdl-cell {
height: 50px;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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>
<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>
<ul>
<li>If a cell doesn&#39;t fit in the row in one of the screen sizes, it flows into the following line.</li>
<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>
</ul>
<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>
<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>
<h3 id="to-include-an-mdl-grid-component-">To include an MDL <strong>grid</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element; this is the &quot;outer&quot; container, intended to hold all of the grid&#39;s cells. Style the div as desired (colors, font size, etc.).</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Add the <code>mdl-grid</code> MDL class to the div using the <code>class</code> attribute.</p>
<pre><code>&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;/div&gt;
</code></pre><p>&nbsp;3. For each cell, code one &quot;inner&quot; div, including the text to be displayed.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div&gt;Content&lt;/div&gt;
&lt;div&gt;goes&lt;/div&gt;
&lt;div&gt;here&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;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 &quot;inner&quot; divs using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;Content&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;goes&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;here&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet&quot;&gt;Content&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet&quot;&gt;goes&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet&quot;&gt;here&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>The grid component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A grid with five cells of column size 1.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;CS 1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;CS 1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;CS 1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;CS 1&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--1-col&quot;&gt;CS 1&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>A grid with three cells, one of column size 6, one of column size 4, and one of column size 2.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--6-col&quot;&gt;CS 6&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--4-col&quot;&gt;CS 4&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col&quot;&gt;CS 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>A grid with three cells of column size 6 that will display as column size 8 on a tablet device.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet&quot;&gt;CS 6 (8 on tablet)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet&quot;&gt;CS 6 (8 on tablet)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet&quot;&gt;CS 6 (8 on tablet)&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>A grid with four cells of column size 2 that will display as column size 4 on a phone device.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-grid&quot;&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col mdl-cell--4-col-phone&quot;&gt;CS 2 (4 on phone)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col mdl-cell--4-col-phone&quot;&gt;CS 2 (4 on phone)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col mdl-cell--4-col-phone&quot;&gt;CS 2 (4 on phone)&lt;/div&gt;
&lt;div class=&quot;mdl-cell mdl-cell--2-col mdl-cell--4-col-phone&quot;&gt;CS 2 (4 on phone)&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-grid</code></td>
<td>Defines a container as an MDL grid component</td>
<td>Required on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-cell</code></td>
<td>Defines a container as an MDL cell</td>
<td>Required on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-grid--no-spacing</code></td>
<td>Modifies the grid cells to have no margin between them.</td>
<td>Optional on grid container.</td>
</tr>
<tr>
<td><code>mdl-cell--N-col</code></td>
<td>Sets the column size for the cell to N</td>
<td>N is 1-12 inclusive, defaults to 4; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-col-desktop</code></td>
<td>Sets the column size for the cell to N in desktop mode only</td>
<td>N is 1-12 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-col-tablet</code></td>
<td>Sets the column size for the cell to N in tablet mode only</td>
<td>N is 1-8 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-col-phone</code></td>
<td>Sets the column size for the cell to N in phone mode only</td>
<td>N is 1-4 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-offset</code></td>
<td>Adds N columns of whitespace before the cell</td>
<td>N is 1-11 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-offset-desktop</code></td>
<td>Adds N columns of whitespace before the cell in desktop mode</td>
<td>N is 1-11 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-offset-tablet</code></td>
<td>Adds N columns of whitespace before the cell in tablet mode</td>
<td>N is 1-7 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--N-offset-phone</code></td>
<td>Adds N columns of whitespace before the cell in phone mode</td>
<td>N is 1-3 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--order-N</code></td>
<td>Reorders cell to position N</td>
<td>N is 1-12 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--order-N-desktop</code></td>
<td>Reorders cell to position N when in desktop mode</td>
<td>N is 1-12 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--order-N-tablet</code></td>
<td>Reorders cell to position N when in tablet mode</td>
<td>N is 1-12 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--order-N-phone</code></td>
<td>Reorders cell to position N when in phone mode</td>
<td>N is 1-12 inclusive; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--hide-desktop</code></td>
<td>Hides the cell when in desktop mode</td>
<td>Optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--hide-tablet</code></td>
<td>Hides the cell when in tablet mode</td>
<td>Optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--hide-phone</code></td>
<td>Hides the cell when in phone mode</td>
<td>Optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--stretch</code></td>
<td>Stretches the cell vertically to fill the parent</td>
<td>Default; optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--top</code></td>
<td>Aligns the cell to the top of the parent</td>
<td>Optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--middle</code></td>
<td>Aligns the cell to the middle of the parent</td>
<td>Optional on &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-cell--bottom</code></td>
<td>Aligns the cell to the bottom of the parent</td>
<td>Optional on &quot;inner&quot; div elements</td>
</tr>
</tbody>
</table>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="layout-section/tabs">Tabs</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-tabs demo-tabs__tabs">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
<a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
<a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
</div>
<div class="mdl-tabs__panel is-active" id="starks-panel">
<ul>
<li>Eddard</li>
<li>Catelyn</li>
<li>Robb</li>
<li>Sansa</li>
<li>Brandon</li>
<li>Arya</li>
<li>Rickon</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="lannisters-panel">
<ul>
<li>Tywin</li>
<li>Cersei</li>
<li>Jamie</li>
<li>Tyrion</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="targaryens-panel">
<ul>
<li>Viserys</li>
<li>Daenerys</li>
</ul>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Content tabs
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="tabs/tabs.html">&lt;div class=&quot;mdl-tabs mdl-js-tabs mdl-js-ripple-effect&quot;&gt;
&lt;div class=&quot;mdl-tabs__tab-bar&quot;&gt;
&lt;a href=&quot;#starks-panel&quot; class=&quot;mdl-tabs__tab is-active&quot;&gt;Starks&lt;/a&gt;
&lt;a href=&quot;#lannisters-panel&quot; class=&quot;mdl-tabs__tab&quot;&gt;Lannisters&lt;/a&gt;
&lt;a href=&quot;#targaryens-panel&quot; class=&quot;mdl-tabs__tab&quot;&gt;Targaryens&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel is-active&quot; id=&quot;starks-panel&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Eddard&lt;/li&gt;
&lt;li&gt;Catelyn&lt;/li&gt;
&lt;li&gt;Robb&lt;/li&gt;
&lt;li&gt;Sansa&lt;/li&gt;
&lt;li&gt;Brandon&lt;/li&gt;
&lt;li&gt;Arya&lt;/li&gt;
&lt;li&gt;Rickon&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel&quot; id=&quot;lannisters-panel&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Tywin&lt;/li&gt;
&lt;li&gt;Cersei&lt;/li&gt;
&lt;li&gt;Jamie&lt;/li&gt;
&lt;li&gt;Tyrion&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel&quot; id=&quot;targaryens-panel&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Viserys&lt;/li&gt;
&lt;li&gt;Daenerys&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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 &quot;headings&quot; for their respective content; the <em>active</em> tab &mdash; the one whose content is currently displayed &mdash; is always visually distinguished from the others so the user knows which heading the current content belongs to.</p>
<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&#39;s <a href="http://www.google.com/design/spec/components/tabs.html">Material Design specifications page</a> for details.</p>
<h3 id="to-include-a-set-of-mdl-tab-components-">To include a set of MDL <strong>tab</strong> components:</h3>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element; this is the &quot;outer&quot; div, intended to contain all of the tabs and their content.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Inside the &quot;outer&quot; div, code one &quot;inner&quot; div for the tabs themselves, and one for each tab&#39;s content, all siblings. That is, for three content tabs, you would code four &quot;inner&quot; divs.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;3. Inside the first &quot;inner&quot; div (the tabs), code one anchor <code>&lt;a&gt;</code> (link) tag for each tab. Include <code>href</code> attributes with values to match the tabs&#39; <code>id</code> attribute values, and some brief link text. On the remaining &quot;inner&quot; divs (the content), code <code>id</code> attributes whose values match the links&#39; <code>href</code>s.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;div&gt;
&lt;a href=&quot;#tab1&quot;&gt;Tab One&lt;/a&gt;
&lt;a href=&quot;#tab2&quot;&gt;Tab Two&lt;/a&gt;
&lt;a href=&quot;#tab3&quot;&gt;Tab Three&lt;/a&gt;
&lt;/div&gt;
&lt;div id=&quot;tab1&quot;&gt;
...
&lt;/div&gt;
&lt;div id=&quot;tab2&quot;&gt;
...
&lt;/div&gt;
&lt;div id=&quot;tab3&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;4. Inside the remaining &quot;inner&quot; divs, code the content you intend to display in each panel; use standard HTML tags to structure the content as desired.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;div&gt;
&lt;a href=&quot;#tab1&quot;&gt;Tab One&lt;/a&gt;
&lt;a href=&quot;#tab2&quot;&gt;Tab Two&lt;/a&gt;
&lt;a href=&quot;#tab3&quot;&gt;Tab Three&lt;/a&gt;
&lt;/div&gt;
&lt;div id=&quot;tab1&quot;&gt;
&lt;p&gt;First tab&#39;s content.&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&quot;tab2&quot;&gt;
&lt;p&gt;Second tab&#39;s content.&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&quot;tab3&quot;&gt;
&lt;p&gt;Third tab&#39;s content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;5. Add one or more MDL classes, separated by spaces, to the &quot;outer&quot; and &quot;inner&quot; 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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-tabs mdl-js-tabs&quot;&gt;
&lt;div class=&quot;mdl-tabs__tab-bar&quot;&gt;
&lt;a href=&quot;#tab1&quot; class=&quot;mdl-tabs__tab&quot;&gt;Tab One&lt;/a&gt;
&lt;a href=&quot;#tab2&quot; class=&quot;mdl-tabs__tab&quot;&gt;Tab Two&lt;/a&gt;
&lt;a href=&quot;#tab3&quot; class=&quot;mdl-tabs__tab&quot;&gt;Tab Three&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel is-active&quot; id=&quot;tab1&quot;&gt;
&lt;p&gt;First tab&#39;s content.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel&quot; id=&quot;tab2&quot;&gt;
&lt;p&gt;Second tab&#39;s content.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel&quot; id=&quot;tab3&quot;&gt;
&lt;p&gt;Third tab&#39;s content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>The tab components are ready for use.</p>
<h4 id="example">Example</h4>
<p>Three tabs, with ripple effect on tab links.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-tabs mdl-js-tabs mdl-js-ripple-effect&quot;&gt;
&lt;div class=&quot;mdl-tabs__tab-bar&quot;&gt;
&lt;a href=&quot;#about-panel&quot; class=&quot;mdl-tabs__tab is-active&quot;&gt;About the Beatles&lt;/a&gt;
&lt;a href=&quot;#members-panel&quot; class=&quot;mdl-tabs__tab&quot;&gt;Members&lt;/a&gt;
&lt;a href=&quot;#albums-panel&quot; class=&quot;mdl-tabs__tab&quot;&gt;Discography&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel is-active&quot; id=&quot;about-panel&quot;&gt;
&lt;p&gt;&lt;b&gt;The Beatles&lt;/b&gt; were a four-piece musical group from Liverpool, England.
Formed in 1960, their career spanned just over a decade, yet they are widely
regarded as the most influential band in history.&lt;/p&gt;
&lt;p&gt;Their songs are among the best-loved music of all time. It is said that every
minute of every day, a radio station somewhere is playing a Beatles song.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel&quot; id=&quot;members-panel&quot;&gt;
&lt;p&gt;The Beatles&#39; members were:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;John Lennon (1940-1980)&lt;/li&gt;
&lt;li&gt;Paul McCartney (1942-)&lt;/li&gt;
&lt;li&gt;George Harrison (1943-2001)&lt;/li&gt;
&lt;li&gt;Ringo Starr (1940-)&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-tabs__panel&quot; id=&quot;albums-panel&quot;&gt;
&lt;p&gt;The Beatles&#39; original UK LPs, in order of release:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Please Please Me (1963)&lt;/li&gt;
&lt;li&gt;With the Beatles (1963)&lt;/li&gt;
&lt;li&gt;A Hard Day&#39;s Night (1964)&lt;/li&gt;
&lt;li&gt;Beatles for Sale (1964)&lt;/li&gt;
&lt;li&gt;Help! (1965)&lt;/li&gt;
&lt;li&gt;Rubber Soul (1965)&lt;/li&gt;
&lt;li&gt;Revolver (1966)&lt;/li&gt;
&lt;li&gt;Sgt. Pepper&#39;s Lonely Hearts Club Band (1967)&lt;/li&gt;
&lt;li&gt;The Beatles (&quot;The White Album&quot;, 1968)&lt;/li&gt;
&lt;li&gt;Yellow Submarine (1969)&lt;/li&gt;
&lt;li&gt;Abbey Road (1969)&lt;/li&gt;
&lt;li&gt;Let It Be (1970)&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-tabs</code></td>
<td>Defines a tabs container as an MDL component</td>
<td>Required on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-js-tabs</code></td>
<td>Assigns basic MDL behavior to tabs container</td>
<td>Required on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect to tab links</td>
<td>Optional; goes on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-tabs__tab-bar</code></td>
<td>Defines a container as an MDL tabs link bar</td>
<td>Required on first &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>mdl-tabs__tab</code></td>
<td>Defines an anchor (link) as an MDL tab activator</td>
<td>Required on all links in first &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>is-active</code></td>
<td>Defines a tab as the default display tab</td>
<td>Required on one (and only one) of the &quot;inner&quot; div (tab) elements</td>
</tr>
<tr>
<td><code>mdl-tabs__panel</code></td>
<td>Defines a container as tab content</td>
<td>Required on each of the &quot;inner&quot; div (tab) elements</td>
</tr>
</tbody>
</table>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="layout-section/footer">Footer</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-footer demo-footer__mega-footer">
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Features</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Details</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Specs</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Technology</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">How it works</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Usage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contracts</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">FAQ</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Questions</a></li>
<li><a href="#">Answers</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Mega footer
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="footer/mega-footer.html">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;input class=&quot;mdl-mega-footer__heading-checkbox&quot; type=&quot;checkbox&quot; checked&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Features&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Terms&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Partners&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Updates&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;input class=&quot;mdl-mega-footer__heading-checkbox&quot; type=&quot;checkbox&quot; checked&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Details&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Specs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tools&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Resources&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;input class=&quot;mdl-mega-footer__heading-checkbox&quot; type=&quot;checkbox&quot; checked&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Technology&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;How it works&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Patterns&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contracts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;input class=&quot;mdl-mega-footer__heading-checkbox&quot; type=&quot;checkbox&quot; checked&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;FAQ&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Questions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Answers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;Title&lt;/div&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy &amp; Terms&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group is-full-width">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-footer demo-footer__mini-footer">
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
</footer>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Mini footer
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="footer/mini-footer.html">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
&lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;Title&lt;/div&gt;
&lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy &amp; Terms&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>footer</strong> component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called &quot;footer&quot;, it may be placed at any appropriate location on a device screen, either before or after other content.</p>
<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>
<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>
<h3 id="to-include-an-mdl-mega-footer-component-">To include an MDL <strong>mega-footer</strong> component:</h3>
<p>&nbsp;1a. Code a <code>&lt;footer&gt;</code> element. Inside the footer, include one <code>&lt;div&gt;</code> element for each content section, typically three: <em>top</em>, <em>middle</em>, and <em>bottom</em>.</p>
<pre><code class="language-markup">&lt;footer&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;2a. Inside the top section div, code two sibling &quot;inner&quot; divs for the <em>left</em> and <em>right</em> content sections.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;2b. Add the appropriate MDL classes to the two &quot;inner&quot; left and right divs using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;3a. Inside the middle section div, code one or more sibling &quot;inner&quot; divs for the <em>drop-down</em> content sections. That is, for two drop-down sections, you would code two divs.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;3b. Add the appropriate MDL classes to the two &quot;inner&quot; drop-down divs using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;4a. Inside the bottom section div, code an &quot;inner&quot; div for the section heading and a sibling unordered list for the bottom section links.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;4b. Add the appropriate MDL classes to the &quot;inner&quot; div heading and list using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;
&lt;/div&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
&lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
&lt;a href=&quot;&quot;&gt;Link 1&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Link 2&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Link 3&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Drop-down 1 Heading&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link A&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link B&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link C&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link D&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Drop-down 2 Heading&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link A&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link B&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link C&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;
Mega-Footer Bottom Section Heading
&lt;/div&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link A&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link B&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>The mega-footer component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A mega-footer component with three sections and two drop-down sections in the middle section.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mega-footer&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__top-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__left-section&quot;&gt;
&lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mega-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__right-section&quot;&gt;
&lt;a href=&quot;#&quot;&gt;Introduction&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;App Status Dashboard&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Terms of Service&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__middle-section&quot;&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Learning and Support&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Resource Center&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help Center&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Learn with Google&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Small Business Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Think Insights&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__drop-down-section&quot;&gt;
&lt;h1 class=&quot;mdl-mega-footer__heading&quot;&gt;Just for Developers&lt;/h1&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Google Developers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;AdWords API&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;AdWords Scipts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;AdWords Remarketing Tag&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mega-footer__bottom-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;
More Information
&lt;/div&gt;
&lt;ul class=&quot;mdl-mega-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy and Terms&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<h3 id="to-include-an-mdl-mini-footer-component-">To include an MDL <strong>mini-footer</strong> component:</h3>
<p>&nbsp;1a. Code a <code>&lt;footer&gt;</code> element. Inside the footer, code two <code>&lt;div&gt;</code> elements, one for the <em>left</em> section and one for the <em>right</em> section.</p>
<pre><code class="language-markup">&lt;footer&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
&lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;2a. Inside the left section div, code an &quot;inner&quot; div for the section heading and a sibling unordered list for the left section links.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
&lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;2b. Add the appropriate MDL classes to the &quot;inner&quot; div and list using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
&lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;
...
&lt;/div&gt;
&lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
...
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>&nbsp;3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
&lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;
Mini-footer Heading
&lt;/div&gt;
&lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
&lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<p>The mini-footer component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A mini-footer with left and right sections.</p>
<pre><code class="language-markup">&lt;footer class=&quot;mdl-mini-footer&quot;&gt;
&lt;div class=&quot;mdl-mini-footer__left-section&quot;&gt;
&lt;div class=&quot;mdl-logo&quot;&gt;
More Information
&lt;/div&gt;
&lt;ul class=&quot;mdl-mini-footer__link-list&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy and Terms&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;User Agreement&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-mini-footer__right-section&quot;&gt;
&lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;mdl-mini-footer__social-btn&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/footer&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-mega-footer</code></td>
<td>Defines container as an MDL mega-footer component</td>
<td>Required on footer element</td>
</tr>
<tr>
<td><code>mdl-mega-footer__top-section</code></td>
<td>Defines container as a footer top section</td>
<td>Required on top section &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mega-footer__left-section</code></td>
<td>Defines container as a left section</td>
<td>Required on left section &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mega-footer__social-btn</code></td>
<td>Defines a decorative square within mega-footer</td>
<td>Required on button element (if used)</td>
</tr>
<tr>
<td><code>mdl-mega-footer__right-section</code></td>
<td>Defines container as a right section</td>
<td>Required on right section &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mega-footer__middle-section</code></td>
<td>Defines container as a footer middle section</td>
<td>Required on middle section &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mega-footer__drop-down-section</code></td>
<td>Defines container as a drop-down (vertical) content area</td>
<td>Required on drop-down &quot;inner&quot; div elements</td>
</tr>
<tr>
<td><code>mdl-mega-footer__heading</code></td>
<td>Defines a heading as a mega-footer heading</td>
<td>Required on h1 element inside drop-down section</td>
</tr>
<tr>
<td><code>mdl-mega-footer__link-list</code></td>
<td>Defines an unordered list as a drop-down (vertical) list</td>
<td>Required on ul element inside drop-down section</td>
</tr>
<tr>
<td><code>mdl-mega-footer__bottom-section</code></td>
<td>Defines container as a footer bottom section</td>
<td>Required on bottom section &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-logo</code></td>
<td>Defines a container as a styled section heading</td>
<td>Required on &quot;inner&quot; div element in mega-footer bottom-section or mini-footer left-section</td>
</tr>
<tr>
<td><code>mdl-mini-footer</code></td>
<td>Defines container as an MDL mini-footer component</td>
<td>Required on footer element</td>
</tr>
<tr>
<td><code>mdl-mini-footer__left-section</code></td>
<td>Defines container as a left section</td>
<td>Required on left section &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mini-footer__link-list</code></td>
<td>Defines an unordered list as an inline (horizontal) list</td>
<td>Required on ul element sibling to &quot;mdl-logo&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mini-footer__right-section</code></td>
<td>Defines container as a right section</td>
<td>Required on right section &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>mdl-mini-footer__social-btn</code></td>
<td>Defines a decorative square within mini-footer</td>
<td>Required on button element (if used)</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="lists-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Lists</h3>
<p>Customizable scrollable lists.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-list demo-list__list-item">
<!-- Simple list -->
<style>
.demo-list-item {
width: 300px;
}
</style>
<ul class="demo-list-item mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bob Odenkirk
</span>
</li>
</ul>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Simple list
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="list/list-item.html">&lt;!-- Simple list --&gt;
&lt;style&gt;
.demo-list-item {
width: 300px;
}
&lt;/style&gt;
&lt;ul class=&quot;demo-list-item mdl-list&quot;&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
Bryan Cranston
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
Aaron Paul
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
Bob Odenkirk
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-list demo-list__icon">
<!-- Icon List -->
<style>
.demo-list-icon {
width: 300px;
}
</style>
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bob Odenkirk
</span>
</li>
</ul>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Icons
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="list/icon.html">&lt;!-- Icon List --&gt;
&lt;style&gt;
.demo-list-icon {
width: 300px;
}
&lt;/style&gt;
&lt;ul class=&quot;demo-list-icon mdl-list&quot;&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-icon&quot;&gt;person&lt;/i&gt;
Bryan Cranston
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-icon&quot;&gt;person&lt;/i&gt;
Aaron Paul
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-icon&quot;&gt;person&lt;/i&gt;
Bob Odenkirk
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-list demo-list__action">
<!-- List items with avatar and action -->
<style>
.demo-list-action {
width: 300px;
}
</style>
<div class="demo-list-action mdl-list">
<div class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bryan Cranston</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</div>
<div class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Aaron Paul</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</div>
<div class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bob Odenkirk</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Avatars and actions
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="list/action.html">&lt;!-- List items with avatar and action --&gt;
&lt;style&gt;
.demo-list-action {
width: 300px;
}
&lt;/style&gt;
&lt;div class=&quot;demo-list-action mdl-list&quot;&gt;
&lt;div class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Bryan Cranston&lt;/span&gt;
&lt;/span&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Aaron Paul&lt;/span&gt;
&lt;/span&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Bob Odenkirk&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-list demo-list__list-control">
<!-- List with avatar and controls -->
<style>
.demo-list-control {
width: 300px;
}
.demo-list-radio {
display: inline;
}
</style>
<ul class="demo-list-control mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
Bryan Cranston
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
<input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
Aaron Paul
</span>
<span class="mdl-list__item-secondary-action">
<label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
<input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
Bob Odenkirk
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
<input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
</label>
</span>
</li>
</ul>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Avatars and controls
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="list/list-control.html">&lt;!-- List with avatar and controls --&gt;
&lt;style&gt;
.demo-list-control {
width: 300px;
}
.demo-list-radio {
display: inline;
}
&lt;/style&gt;
&lt;ul class=&quot;demo-list-control mdl-list&quot;&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
Bryan Cranston
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-action&quot;&gt;
&lt;label class=&quot;mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect&quot; for=&quot;list-checkbox-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;list-checkbox-1&quot; class=&quot;mdl-checkbox__input&quot; checked /&gt;
&lt;/label&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
Aaron Paul
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-action&quot;&gt;
&lt;label class=&quot;demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;list-option-1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;list-option-1&quot; class=&quot;mdl-radio__button&quot; name=&quot;options&quot; value=&quot;1&quot; checked /&gt;
&lt;/label&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
Bob Odenkirk
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-action&quot;&gt;
&lt;label class=&quot;mdl-switch mdl-js-switch mdl-js-ripple-effect&quot; for=&quot;list-switch-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;list-switch-1&quot; class=&quot;mdl-switch__input&quot; checked /&gt;
&lt;/label&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-list demo-list__two-line">
<!-- Two Line List with secondary info and action -->
<style>
.demo-list-two {
width: 300px;
}
</style>
<ul class="demo-list-two mdl-list">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
</ul>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Two line
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="list/two-line.html">&lt;!-- Two Line List with secondary info and action --&gt;
&lt;style&gt;
.demo-list-two {
width: 300px;
}
&lt;/style&gt;
&lt;ul class=&quot;demo-list-two mdl-list&quot;&gt;
&lt;li class=&quot;mdl-list__item mdl-list__item--two-line&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Bryan Cranston&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-sub-title&quot;&gt;62 Episodes&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;span class=&quot;mdl-list__item-secondary-info&quot;&gt;Actor&lt;/span&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item mdl-list__item--two-line&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Aaron Paul&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-sub-title&quot;&gt;62 Episodes&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item mdl-list__item--two-line&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Bob Odenkirk&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-sub-title&quot;&gt;62 Episodes&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-list demo-list__three-line">
<!-- Three Line List with secondary info and action -->
<style>
.demo-list-three {
width: 650px;
}
</style>
<ul class="demo-list-three mdl-list">
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bryan Cranston</span>
<span class="mdl-list__item-text-body">
Bryan Cranston played the role of Walter in Breaking Bad. He is also known
for playing Hal in Malcom in the Middle.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Aaron Paul</span>
<span class="mdl-list__item-text-body">
Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
the "Need For Speed" Movie.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bob Odenkirk</span>
<span class="mdl-list__item-text-body">
Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
character, Bob stars in his own show now, called "Better Call Saul".
</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
</ul>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Three line
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="list/three-line.html">&lt;!-- Three Line List with secondary info and action --&gt;
&lt;style&gt;
.demo-list-three {
width: 650px;
}
&lt;/style&gt;
&lt;ul class=&quot;demo-list-three mdl-list&quot;&gt;
&lt;li class=&quot;mdl-list__item mdl-list__item--three-line&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Bryan Cranston&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-text-body&quot;&gt;
Bryan Cranston played the role of Walter in Breaking Bad. He is also known
for playing Hal in Malcom in the Middle.
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item mdl-list__item--three-line&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Aaron Paul&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-text-body&quot;&gt;
Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
the &quot;Need For Speed&quot; Movie.
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item mdl-list__item--three-line&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;
&lt;i class=&quot;material-icons mdl-list__item-avatar&quot;&gt;person&lt;/i&gt;
&lt;span&gt;Bob Odenkirk&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-text-body&quot;&gt;
Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
character, Bob stars in his own show now, called &quot;Better Call Saul&quot;.
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;mdl-list__item-secondary-content&quot;&gt;
&lt;a class=&quot;mdl-list__item-secondary-action&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;star&lt;/i&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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
Spec</a> to know more about the content options.</p>
<h3 id="to-include-the-mdl-list-component-">To include the MDL <strong>list</strong> component:</h3>
<h2 id="create-a-list-with-basic-items-">Create a List with basic items.</h2>
<p>&nbsp;1. Code a <code>&lt;ul&gt;</code> element with the class <code>mdl-list</code>; this is the &quot;outer&quot; container, intended to hold all of the list&#39;s content.</p>
<pre><code class="language-markup">&lt;ul class=&#39;mdl-list&#39;&gt;
&lt;/ul&gt;
</code></pre>
<p>&nbsp;2. Code as many <code>&lt;li&gt;</code> elements as required with the class <code>mdl-list__item</code>; this is intended to hold all of the <strong>item&#39;s</strong> content.</p>
<pre><code class="language-markup">&lt;ul class=&#39;mdl-list&#39;&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>&nbsp;3. Add your content as the children of the <code>&lt;li&gt;</code>, with the appropriate content type modification class for example .</p>
<pre><code class="language-markup">&lt;ul class=&#39;mdl-list&#39;&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;mdl-list__item&quot;&gt;
&lt;span class=&quot;mdl-list__item-primary-content&quot;&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th style="text-align:center">Effect</th>
<th style="text-align:right">Remark</th>
</tr>
</thead>
<tbody>
<tr>
<td>.mdl-list</td>
<td style="text-align:center">Defines list as an MDL component</td>
<td style="text-align:right">-</td>
</tr>
<tr>
<td>.mdl-list__item</td>
<td style="text-align:center">Defines the List&#39;s Items</td>
<td style="text-align:right">required</td>
</tr>
<tr>
<td>.mdl-list__item--two-line</td>
<td style="text-align:center">Defines the List&#39;s Items as Two Line</td>
<td style="text-align:right">Optional Two Line List Variant</td>
</tr>
<tr>
<td>.mdl-list__item--three-line</td>
<td style="text-align:center">Defines the List&#39;s Items as a Three Line</td>
<td style="text-align:right">Optional Three Line List Variant</td>
</tr>
<tr>
<td>.mdl-list__item-primary-content</td>
<td style="text-align:center">Defines the primary content sub-division</td>
<td style="text-align:right">-</td>
</tr>
<tr>
<td>.mdl-list__item-avatar</td>
<td style="text-align:center">Defines the avatar sub-division</td>
<td style="text-align:right">-</td>
</tr>
<tr>
<td>.mdl-list__item-icon</td>
<td style="text-align:center">Defines the icon sub-division</td>
<td style="text-align:right">-</td>
</tr>
<tr>
<td>.mdl-list__item-secondary-content</td>
<td style="text-align:center">Defines the secondary content sub-division</td>
<td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td>
</tr>
<tr>
<td>.mdl-list__item-secondary-info</td>
<td style="text-align:center">Defines the information sub-division</td>
<td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td>
</tr>
<tr>
<td>.mdl-list__item-secondary-action</td>
<td style="text-align:center">Defines the Action sub-division</td>
<td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td>
</tr>
<tr>
<td>.mdl-list__item-text-body</td>
<td style="text-align:center">Defines the Text Body sub-division</td>
<td style="text-align:right">requires <code>.mdl-list__item--three-line</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="loading-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Loading</h3>
<p>Indicate loading and progress states.</p>
</div>
<section class="docs-toc docs-text-styling">
<nav class="section-content">
<ul>
<li><a href="#loading-section/progress">Progress bar</a></li>
<li><a href="#loading-section/spinner">Spinner</a></li>
</ul>
</nav>
</section>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="loading-section/progress">Progress bar</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-progress demo-progress__progress-default">
<style>
.demo-progress__progress-default .mdl-progress {
width: 50vw;
max-width: 260px;
}
</style>
<!-- Simple MDL Progress Bar -->
<div id="p1" class="mdl-progress mdl-js-progress"></div>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
</script>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Default
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="progress/progress-default.html">&lt;!-- Simple MDL Progress Bar --&gt;
&lt;div id=&quot;p1&quot; class=&quot;mdl-progress mdl-js-progress&quot;&gt;&lt;/div&gt;
&lt;script&gt;
document.querySelector(&#39;#p1&#39;).addEventListener(&#39;mdl-componentupgraded&#39;, function() {
this.MaterialProgress.setProgress(44);
});
&lt;/script&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-progress demo-progress__progress-indeterminate">
<style>
.demo-progress__progress-indeterminate .mdl-progress {
width: 50vw;
max-width: 260px;
}
</style>
<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Indeterminate
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="progress/progress-indeterminate.html">&lt;!-- MDL Progress Bar with Indeterminate Progress --&gt;
&lt;div id=&quot;p2&quot; class=&quot;mdl-progress mdl-js-progress mdl-progress__indeterminate&quot;&gt;&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-progress demo-progress__progress-buffering">
<style>
.demo-progress__progress-buffering .mdl-progress {
width: 50vw;
max-width: 260px;
}
</style>
<!-- MDL Progress Bar with Buffering -->
<div id="p3" class="mdl-progress mdl-js-progress"></div>
<script>
document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Buffering
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="progress/progress-buffering.html">&lt;!-- MDL Progress Bar with Buffering --&gt;
&lt;div id=&quot;p3&quot; class=&quot;mdl-progress mdl-js-progress&quot;&gt;&lt;/div&gt;
&lt;script&gt;
document.querySelector(&#39;#p3&#39;).addEventListener(&#39;mdl-componentupgraded&#39;, function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
&lt;/script&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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>
<p>Progress indicators are an established but non-standardized feature in user interfaces, and provide users with a visual clue to an application&#39;s status. Their design and use is therefore an important factor in the overall user experience. See the progress component&#39;s <a href="http://www.google.com/design/spec/components/progress-activity.html">Material Design specifications page</a> for details.</p>
<h3 id="to-include-an-mdl-progress-component-">To include an MDL <strong>progress</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element. Include any desired attributes and values, such as an id or width &mdash; typically done using external CSS rather than the inline <code>style</code> attribute as shown here.</p>
<pre><code class="language-markup">&lt;div id=&quot;prog1&quot; style=&quot;width:250px&quot;&gt;&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the div using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;div id=&quot;prog1&quot; style=&quot;width:250px&quot; class=&quot;mdl-js-progress&quot;&gt;&lt;/div&gt;
</code></pre>
<p>The progress component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A static (non-animated) progress indicator.</p>
<pre><code class="language-markup">&lt;div id=&quot;progstatic&quot; style=&quot;width:250px&quot; class=&quot;mdl-js-progress&quot;&gt;&lt;/div&gt;
</code></pre>
<p>An active (animated) progress indicator.</p>
<pre><code class="language-markup">&lt;div id=&quot;progactive&quot; style=&quot;width:200px&quot; class=&quot;mdl-js-progress
mdl-progress--indeterminate&quot;&gt;&lt;/div&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-js-progress</code></td>
<td>Assigns basic MDL behavior to progress indicator</td>
<td>Required</td>
</tr>
<tr>
<td><code>mdl-progress--indeterminate</code></td>
<td>Applies animation effect</td>
<td>Optional</td>
</tr>
</tbody>
</table>
<blockquote>
<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>
</blockquote>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="loading-section/spinner">Spinner</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-spinner demo-spinner__spinner-default">
<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-spinner demo-spinner__spinner-single-color">
<!-- MDL Spinner Component with Single Color -->
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Default
</div>
<div class="snippet-caption">
Single color
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="spinner/spinner-default.html">&lt;!-- MDL Spinner Component --&gt;
&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="spinner/spinner-single-color.html">&lt;!-- MDL Spinner Component with Single Color --&gt;
&lt;div class=&quot;mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>spinner</strong> component is an enhanced replacement for the classic &quot;wait cursor&quot; (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>
<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&#39;s specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.</p>
<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>
<h3 id="to-include-an-mdl-spinner-component-">To include an MDL <strong>spinner</strong> component:</h3>
<p>&nbsp;1. Code an element, such as a <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, or <code>&lt;span&gt;</code>, to contain the spinner; the element should have no content of its own.</p>
<pre><code class="language-markup">&lt;div&gt;&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the container using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
</code></pre>
<p>The spinner component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A default spinner in a div.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
</code></pre>
<p>A single-color spinner in a paragraph.</p>
<pre><code class="language-markup">&lt;p class=&quot;mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active&quot;&gt;&lt;/p&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-spinner</code></td>
<td>Defines the container as an MDL spinner component</td>
<td>Required</td>
</tr>
<tr>
<td><code>mdl-js-spinner</code></td>
<td>Assigns basic MDL behavior to spinner</td>
<td>Required</td>
</tr>
<tr>
<td><code>is-active</code></td>
<td>Makes the spinner visible and animated</td>
<td>Optional</td>
</tr>
<tr>
<td><code>mdl-spinner--single-color</code></td>
<td>Uses a single (primary palette) color instead of changing colors</td>
<td>Optional</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;div class=&quot;mdl-spinner mdl-js-spinner&quot;&gt;&lt;/div&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
</div>
</section>
<section id="menus-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Menus</h3>
<p>Lists of clickable actions.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-menu demo-menu__lower-left">
<style>
.demo-menu.demo-menu__lower-left .container {
position: relative;
width: 200px;
}
.demo-menu.demo-menu__lower-left .background {
background: white;
height: 148px;
width: 100%;
}
.demo-menu.demo-menu__lower-left .bar {
box-sizing: border-box;
background: #3F51B5;
color: white;
width: 100%;
padding: 16px;
}
</style>
<div class="container mdl-shadow--2dp">
<div class="bar">
<!-- Left aligned menu below button -->
<button id="demo-menu-lower-left"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
<div class="background"></div>
</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-menu demo-menu__lower-right">
<style>
.demo-menu.demo-menu__lower-right .container {
position: relative;
width: 200px;
}
.demo-menu.demo-menu__lower-right .background {
background: white;
height: 148px;
width: 100%;
}
.demo-menu.demo-menu__lower-right .bar {
box-sizing: border-box;
position: relative;
background: #3F51B5;
color: white;
height: 64px;
width: 100%;
padding: 16px;
}
.demo-menu.demo-menu__lower-right .wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
<div class="container mdl-shadow--2dp">
<div class="bar">
<div class="wrapper">
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</div>
<div class="background"></div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Lower left
</div>
<div class="snippet-caption">
Lower right
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="menu/lower-left.html">&lt;!-- Left aligned menu below button --&gt;
&lt;button id=&quot;demo-menu-lower-left&quot;
class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect&quot;
for=&quot;demo-menu-lower-left&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Some Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item mdl-menu__item--full-bleed-divider&quot;&gt;Another Action&lt;/li&gt;
&lt;li disabled class=&quot;mdl-menu__item&quot;&gt;Disabled Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Yet Another Action&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;#demo-menu-lower-left {
margin-left: 40%;
}
&lt;/style&gt;</div><code id="menu/lower-right.html">&lt;!-- Right aligned menu below button --&gt;
&lt;button id=&quot;demo-menu-lower-right&quot;
class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect&quot;
for=&quot;demo-menu-lower-right&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Some Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Another Action&lt;/li&gt;
&lt;li disabled class=&quot;mdl-menu__item&quot;&gt;Disabled Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Yet Another Action&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-menu demo-menu__top-left">
<style>
.demo-menu.demo-menu__top-left .container {
position: relative;
width: 200px;
}
.demo-menu.demo-menu__top-left .background {
background: white;
height: 148px;
width: 100%;
}
.demo-menu.demo-menu__top-left .bar {
box-sizing: border-box;
background: #3F51B5;
color: white;
width: 100%;
padding: 16px;
}
</style>
<div class="container mdl-shadow--2dp">
<div class="background"></div>
<div class="bar">
<!-- Left aligned menu on top of button -->
<button id="demo-menu-top-left"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
data-mdl-for="demo-menu-top-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-menu demo-menu__top-right">
<style>
.demo-menu.demo-menu__top-right .container {
position: relative;
width: 200px;
}
.demo-menu.demo-menu__top-right .background {
background: white;
height: 148px;
width: 100%;
}
.demo-menu.demo-menu__top-right .bar {
box-sizing: border-box;
position: relative;
background: #3F51B5;
color: white;
height: 64px;
width: 100%;
padding: 16px;
}
.demo-menu.demo-menu__top-right .wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
<div class="container mdl-shadow--2dp">
<div class="background"></div>
<div class="bar">
<div class="wrapper">
<!-- Right aligned menu on top of button -->
<button id="demo-menu-top-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
data-mdl-for="demo-menu-top-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Top left
</div>
<div class="snippet-caption">
Top right
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="menu/top-left.html">&lt;!-- Left aligned menu on top of button --&gt;
&lt;button id=&quot;demo-menu-top-left&quot;
class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect&quot;
data-mdl-for=&quot;demo-menu-top-left&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Some Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Another Action&lt;/li&gt;
&lt;li disabled class=&quot;mdl-menu__item&quot;&gt;Disabled Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Yet Another Action&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;#demo-menu-top-left {
margin-left: 40%;
}
#demo-menu-top-left,
#demo-menu-top-right {
margin-top: 250px;
}
&lt;/style&gt;</div><code id="menu/top-right.html">&lt;!-- Right aligned menu on top of button --&gt;
&lt;button id=&quot;demo-menu-top-right&quot;
class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect&quot;
data-mdl-for=&quot;demo-menu-top-right&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Some Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Another Action&lt;/li&gt;
&lt;li disabled class=&quot;mdl-menu__item&quot;&gt;Disabled Action&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Yet Another Action&lt;/li&gt;
&lt;/ul&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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>
<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&#39;s <a href="http://www.google.com/design/spec/components/menus.html">Material Design specifications page</a> for details.</p>
<h3 id="to-include-an-mdl-menu-component-">To include an MDL <strong>menu</strong> component:</h3>
<blockquote>
<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>
</blockquote>
<p>&nbsp;1. Code a <code>&lt;button&gt;</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>&lt;i&gt;</code> or <code>&lt;span&gt;</code> element to contain an icon of your choice.</p>
<pre><code class="language-markup">&lt;button id=&quot;menu1&quot;&gt;
&lt;i&gt;&lt;/i&gt;
&lt;/button&gt;
</code></pre>
<p>&nbsp;2. Code a <code>&lt;ul&gt;</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>
<pre><code class="language-markup">&lt;ul for=&quot;menu1&quot;&gt;
&lt;/ul&gt;
</code></pre>
<p>&nbsp;3. Inside the unordered list, code one <code>&lt;li&gt;</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>
<pre><code class="language-markup">&lt;ul for=&quot;menu1&quot;&gt;
&lt;li&gt;Continue&lt;/li&gt;
&lt;li&gt;Stop&lt;/li&gt;
&lt;li&gt;Pause&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>&nbsp;4. Add one or more MDL classes, separated by spaces, to the button and span elements using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;button id=&quot;menu1&quot; class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
</code></pre>
<p>&nbsp;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>
<pre><code class="language-markup">&lt;ul class=&quot;mdl-menu mdl-js-menu&quot; for=&quot;menu1&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Continue&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Stop&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Pause&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>The menu component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A menu with three options.</p>
<pre><code class="language-markup">&lt;button id=&quot;menu-speed&quot; class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-js-menu&quot; for=&quot;menu-speed&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Fast&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Medium&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Slow&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>A menu with three options, with ripple effect on button and option links.</p>
<pre><code class="language-markup">&lt;button id=&quot;menu-speed&quot; class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-js-menu mdl-js-ripple-effect&quot; for=&quot;menu-speed&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Fast&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Medium&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Slow&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>A menu with three options, the second of which is disabled by default.</p>
<pre><code class="language-markup">&lt;button id=&quot;menu-speed&quot; class=&quot;mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;/i&gt;
&lt;/button&gt;
&lt;ul class=&quot;mdl-menu mdl-js-menu&quot; for=&quot;menu-speed&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Fast&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot; disabled&gt;Medium&lt;/li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Slow&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-button</code></td>
<td>Defines button as an MDL component</td>
<td>Required on button element</td>
</tr>
<tr>
<td><code>mdl-js-button</code></td>
<td>Assigns basic MDL behavior to button</td>
<td>Required on button element</td>
</tr>
<tr>
<td><code>mdl-button--icon</code></td>
<td>Applies <em>icon</em> (small plain circular) display effect to button</td>
<td>Required on button element</td>
</tr>
<tr>
<td><code>material-icons</code></td>
<td>Defines span as a material icon</td>
<td>Required on an inline element</td>
</tr>
<tr>
<td><code>mdl-menu</code></td>
<td>Defines an unordered list container as an MDL component</td>
<td>Required on ul element</td>
</tr>
<tr>
<td><code>mdl-js-menu</code></td>
<td>Assigns basic MDL behavior to menu</td>
<td>Required on ul element</td>
</tr>
<tr>
<td><code>mdl-menu__item</code></td>
<td>Defines buttons as MDL menu options and assigns basic MDL behavior</td>
<td>Required on list item elements</td>
</tr>
<tr>
<td><code>mdl-menu__item--full-bleed-divider</code></td>
<td>Modifies an item to have a full bleed divider between it and the next list item.</td>
<td>Optional on list item elements</td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect to option links</td>
<td>Optional; goes on unordered list element</td>
</tr>
<tr>
<td><code>mdl-menu--top-left</code></td>
<td>Positions menu above button, aligns left edge of menu with button</td>
<td>Optional; goes on unordered list element</td>
</tr>
<tr>
<td>(none)</td>
<td>Positions menu below button, aligns left edge of menu with button</td>
<td>Default</td>
</tr>
<tr>
<td><code>mdl-menu--top-right</code></td>
<td>Positions menu above button, aligns right edge of menu with button</td>
<td>Optional; goes on unordered list element</td>
</tr>
<tr>
<td><code>mdl-menu--bottom-right</code></td>
<td>Positions menu below button, aligns right edge of menu with button</td>
<td>Optional; goes on unordered list element</td>
</tr>
</tbody>
</table>
<p>(1) The &quot;more-vert&quot; 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>
<p>(2) The <code>i</code> or <code>span</code> element in &quot;button&quot;&quot; element can be used interchangeably.</p>
<blockquote>
<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>&lt;li class=&quot;mdl-menu__item&quot; disabled&gt;Medium&lt;/li&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
</div>
</section>
<section id="sliders-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Sliders</h3>
<p>Selecting a value out of a range.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-slider demo-slider__slider-default">
<style>
.demo-slider__slider-default .mdl-slider {
width: 30vw;
max-width: 260px;
}
</style>
<!-- Default Slider -->
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="0" tabindex="0">
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-slider demo-slider__slider-starting-value">
<style>
.demo-slider__slider-starting-value .mdl-slider {
width: 30vw;
max-width: 260px;
}
</style>
<!-- Slider with Starting Value -->
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="25" tabindex="0">
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Default slider
</div>
<div class="snippet-caption">
Starting value
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="slider/slider-default.html">&lt;!-- Default Slider --&gt;
&lt;input class=&quot;mdl-slider mdl-js-slider&quot; type=&quot;range&quot;
min=&quot;0&quot; max=&quot;100&quot; value=&quot;0&quot; tabindex=&quot;0&quot;&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="slider/slider-starting-value.html">&lt;!-- Slider with Starting Value --&gt;
&lt;input class=&quot;mdl-slider mdl-js-slider&quot; type=&quot;range&quot;
min=&quot;0&quot; max=&quot;100&quot; value=&quot;25&quot; tabindex=&quot;0&quot;&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>slider</strong> component is an enhanced version of the new HTML5 <code>&lt;input type=&quot;range&quot;&gt;</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>
<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&#39;s <a href="http://www.google.com/design/spec/components/sliders.html">Material Design specifications page</a> for details.</p>
<p>The enhanced slider component may be initially or programmatically <em>disabled</em>.</p>
<h3 id="to-include-an-mdl-slider-component-">To include an MDL <strong>slider</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;p&gt;</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&#39;s size.</p>
<pre><code class="language-markup">&lt;p style=&quot;width:300px&quot;&gt;
...
&lt;/p&gt;
</code></pre>
<p>&nbsp;2. Inside the paragraph container, code an <code>&lt;input&gt;</code> element and give it a <code>type</code> attribute whose value is <code>&quot;range&quot;</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&#39;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&#39;s value.</p>
<pre><code class="language-markup">&lt;p style=&quot;width:300px&quot;&gt;
&lt;input type=&quot;range&quot; id=&quot;s1&quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;4&quot; step=&quot;2&quot;&gt;
&lt;/p&gt;
</code></pre>
<p>&nbsp;3. Add one or more MDL classes, separated by spaces, to the slider using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;p style=&quot;width:300px&quot;&gt;
&lt;input class=&quot;mdl-slider mdl-js-slider&quot; type=&quot;range&quot; id=&quot;s1&quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;4&quot; step=&quot;2&quot;&gt;
&lt;/p&gt;
</code></pre>
<p>The slider component is ready for use.</p>
<h4 id="example">Example</h4>
<p>A slider that controls volume.</p>
<pre><code class="language-markup">&lt;p style=&quot;width:300px&quot;&gt;
&lt;input class=&quot;mdl-slider mdl-js-slider&quot; type=&quot;range&quot; id=&quot;s1&quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;4&quot; step=&quot;2&quot;&gt;
&lt;/p&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-slider</code></td>
<td>Defines input element as an MDL component</td>
<td>Required</td>
</tr>
<tr>
<td><code>mdl-js-slider</code></td>
<td>Assigns basic MDL behavior to input element</td>
<td>Required</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;input class=&quot;mdl-slider mdl-js-slider&quot; type=&quot;range&quot; id=&quot;s1&quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;4&quot; step=&quot;2&quot; disabled&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
<p><strong>Note:</strong> Although the <em>value</em> attribute is used to set a slider&#39;s initial value, it should not be used
to modify the value programmatically; instead, use the MDL <code>change()</code> method. For example, assuming
that <em>slider1</em> is a slider object and <em>newvalue</em> is a variable containing the desired value, do not
use <code>slider1.value = newvalue</code>; instead, use <code>slider1.MaterialSlider.change(newvalue)</code>.</p>
</blockquote>
<h2 id="license">License</h2>
<p>Copyright Google, 2015. Licensed under an Apache-2 license.</p>
</div>
</div>
</section>
<section id="snackbar-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Snackbar</h3>
<p>Transient popup notifications.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-snackbar demo-snackbar__snackbar">
<button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
'use strict';
var snackbarContainer = document.querySelector('#demo-snackbar-example');
var showSnackbarButton = document.querySelector('#demo-show-snackbar');
var handler = function(event) {
showSnackbarButton.style.backgroundColor = '';
};
showSnackbarButton.addEventListener('click', function() {
'use strict';
showSnackbarButton.style.backgroundColor = '#' +
Math.floor(Math.random() * 0xFFFFFF).toString(16);
var data = {
message: 'Button color changed.',
timeout: 2000,
actionHandler: handler,
actionText: 'Undo'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}());
</script>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Snackbar
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="snackbar/snackbar.html">&lt;button id=&quot;demo-show-snackbar&quot; class=&quot;mdl-button mdl-js-button mdl-button--raised&quot; type=&quot;button&quot;&gt;Show Snackbar&lt;/button&gt;
&lt;div id=&quot;demo-snackbar-example&quot; class=&quot;mdl-js-snackbar mdl-snackbar&quot;&gt;
&lt;div class=&quot;mdl-snackbar__text&quot;&gt;&lt;/div&gt;
&lt;button class=&quot;mdl-snackbar__action&quot; type=&quot;button&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
(function() {
&#39;use strict&#39;;
var snackbarContainer = document.querySelector(&#39;#demo-snackbar-example&#39;);
var showSnackbarButton = document.querySelector(&#39;#demo-show-snackbar&#39;);
var handler = function(event) {
showSnackbarButton.style.backgroundColor = &#39;&#39;;
};
showSnackbarButton.addEventListener(&#39;click&#39;, function() {
&#39;use strict&#39;;
showSnackbarButton.style.backgroundColor = &#39;#&#39; +
Math.floor(Math.random() * 0xFFFFFF).toString(16);
var data = {
message: &#39;Button color changed.&#39;,
timeout: 2000,
actionHandler: handler,
actionText: &#39;Undo&#39;
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}());
&lt;/script&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-snackbar demo-snackbar__toast">
<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
'use strict';
window['counter'] = 0;
var snackbarContainer = document.querySelector('#demo-toast-example');
var showToastButton = document.querySelector('#demo-show-toast');
showToastButton.addEventListener('click', function() {
'use strict';
var data = {message: 'Example Message # ' + ++counter};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}());
</script>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Toast
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="snackbar/toast.html">&lt;button id=&quot;demo-show-toast&quot; class=&quot;mdl-button mdl-js-button mdl-button--raised&quot; type=&quot;button&quot;&gt;Show Toast&lt;/button&gt;
&lt;div id=&quot;demo-toast-example&quot; class=&quot;mdl-js-snackbar mdl-snackbar&quot;&gt;
&lt;div class=&quot;mdl-snackbar__text&quot;&gt;&lt;/div&gt;
&lt;button class=&quot;mdl-snackbar__action&quot; type=&quot;button&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
(function() {
&#39;use strict&#39;;
window[&#39;counter&#39;] = 0;
var snackbarContainer = document.querySelector(&#39;#demo-toast-example&#39;);
var showToastButton = document.querySelector(&#39;#demo-show-toast&#39;);
showToastButton.addEventListener(&#39;click&#39;, function() {
&#39;use strict&#39;;
var data = {message: &#39;Example Message # &#39; + ++counter};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}());
&lt;/script&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>snackbar</strong> component is a container used to notify a user of an operation&#39;s status.
It displays at the bottom of the screen.
A snackbar may contain an action button to execute a command for the user.
Actions should undo the committed action or retry it if it failed for example.
Actions should not be to close the snackbar.
By not providing an action, the snackbar becomes a <strong>toast</strong> component.</p>
<h2 id="basic-usage-">Basic Usage:</h2>
<p>Start a snackbar with a container div element.
On that container define the <code>mdl-js-snackbar</code> and <code>mdl-snackbar</code> classes.
It is also beneficial to add the aria live and atomic values to this container.</p>
<p>Within the container create a container element for the message.
This element should have the class <code>mdl-snackbar__text</code>.
Leave this element empty!
Text is added when the snackbar is called to be shown.</p>
<p>Second in the container, add a button element.
This element should have the class <code>mdl-snackbar__action</code>.
It is recommended to set the type to button to make sure no forms get submitted by accident.
Leave the text content empty here as well!
Do not directly apply any event handlers.</p>
<p>You now have complete markup for the snackbar to function.
All that is left is within your JavaScript to call the <code>showSnackbar</code> method on the snackbar container.
This takes a <a href="#data-object">plain object</a> to configure the snackbar content appropriately.
You may call it multiple consecutive times and messages will stack.</p>
<h2 id="examples">Examples</h2>
<p>All snackbars should be shown through the same element.</p>
<h4 id="markup-">Markup:</h4>
<pre><code class="language-markup">&lt;div aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot; aria-relevant=&quot;text&quot; class=&quot;mdl-snackbar mdl-js-snackbar&quot;&gt;
&lt;div class=&quot;mdl-snackbar__text&quot;&gt;&lt;/div&gt;
&lt;button type=&quot;button&quot; class=&quot;mdl-snackbar__action&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<blockquote>
<p>Note: In this example there are a few aria attributes for accessibility. Please modify these as-needed for your site.</p>
</blockquote>
<h3 id="snackbar">Snackbar</h3>
<pre><code class="language-javascript">var notification = document.querySelector(&#39;.mdl-js-snackbar&#39;);
var data = {
message: &#39;Message Sent&#39;,
actionHandler: function(event) {},
actionText: &#39;Undo&#39;,
timeout: 10000
};
notification.MaterialSnackbar.showSnackbar(data);
</code></pre>
<h3 id="toast">Toast</h3>
<pre><code class="language-javascript">var notification = document.querySelector(&#39;.mdl-js-snackbar&#39;);
notification.MaterialSnackbar.showSnackbar(
{
message: &#39;Image Uploaded&#39;
}
);
</code></pre>
<h2 id="css-classes">CSS Classes</h2>
<h3 id="blocks">Blocks</h3>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-snackbar</code></td>
<td>Defines the container of the snackbar component.</td>
<td>Required on snackbar container</td>
</tr>
</tbody>
</table>
<h3 id="elements">Elements</h3>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-snackbar__text</code></td>
<td>Defines the element containing the text of the snackbar.</td>
<td>Required</td>
</tr>
<tr>
<td><code>mdl-snackbar__action</code></td>
<td>Defines the element that triggers the action of a snackbar.</td>
<td>Required</td>
</tr>
</tbody>
</table>
<h3 id="modifiers">Modifiers</h3>
<table>
<thead>
<tr>
<th>MDL Class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-snackbar--active</code></td>
<td>Marks the snackbar as active which causes it to display.</td>
<td>Required when active. Controlled in JavaScript</td>
</tr>
</tbody>
</table>
<h2 id="data-object">Data Object</h2>
<p>The Snackbar components <code>showSnackbar</code> method takes an object for snackbar data.
The table below shows the properties and their usage.</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Effect</th>
<th>Remarks</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>The text message to display.</td>
<td>Required</td>
<td>String</td>
</tr>
<tr>
<td>timeout</td>
<td>The amount of time in milliseconds to show the snackbar.</td>
<td>Optional (default 2750)</td>
<td>Integer</td>
</tr>
<tr>
<td>actionHandler</td>
<td>The function to execute when the action is clicked.</td>
<td>Optional</td>
<td>Function</td>
</tr>
<tr>
<td>actionText</td>
<td>The text to display for the action button.</td>
<td>Required if actionHandler is set</td>
<td>String.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="toggles-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Toggles</h3>
<p>Choose between states.</p>
</div>
<section class="docs-toc docs-text-styling">
<nav class="section-content">
<ul>
<li><a href="#toggles-section/checkbox">Checkbox</a></li>
<li><a href="#toggles-section/radio">Radio button</a></li>
<li><a href="#toggles-section/icon-toggle">Icon toggle</a></li>
<li><a href="#toggles-section/switch">Switch</a></li>
</ul>
</nav>
</section>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="toggles-section/checkbox">Checkbox</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-checkbox demo-checkbox__check-on">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-checkbox demo-checkbox__check-off">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Checkbox</span>
</label>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Check on
</div>
<div class="snippet-caption">
Check off
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="checkbox/check-on.html">&lt;label class=&quot;mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect&quot; for=&quot;checkbox-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;checkbox-1&quot; class=&quot;mdl-checkbox__input&quot; checked&gt;
&lt;span class=&quot;mdl-checkbox__label&quot;&gt;Checkbox&lt;/span&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="checkbox/check-off.html">&lt;label class=&quot;mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect&quot; for=&quot;checkbox-2&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;checkbox-2&quot; class=&quot;mdl-checkbox__input&quot;&gt;
&lt;span class=&quot;mdl-checkbox__label&quot;&gt;Checkbox&lt;/span&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>checkbox</strong> component is an enhanced version of the standard HTML <code>&lt;input type=&quot;checkbox&quot;&gt;</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>
<p>Checkboxes are a common feature of most user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the checkbox component&#39;s <a href="https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox">Material Design specifications page</a> for details.</p>
<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>
<h3 id="to-include-an-mdl-checkbox-component-">To include an MDL <strong>checkbox</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;label&gt;</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>&lt;input&gt;</code> element is contained inside the <code>&lt;label&gt;</code> element, but is recommended for clarity.</p>
<pre><code class="language-markup">&lt;label for=&quot;chkbox1&quot;&gt;
...
&lt;/label&gt;
</code></pre>
<p>&nbsp;2. Inside the label, code an <code>&lt;input&gt;</code> element and give it a <code>type</code> attribute whose value is <code>&quot;checkbox&quot;</code>. Also give it an <code>id</code> attribute whose value matches the label&#39;s <code>for</code> attribute value.</p>
<pre><code class="language-markup">&lt;label for=&quot;chkbox1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;chkbox1&quot;&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;3. Also inside the label, after the checkbox, code a <code>&lt;span&gt;</code> element containing the checkbox&#39;s text caption.</p>
<pre><code class="language-markup">&lt;label for=&quot;chkbox1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;chkbox1&quot;&gt;
&lt;span&gt;Enable AutoSave&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;label for=&quot;chkbox1&quot; class=&quot;mdl-checkbox mdl-js-checkbox&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;chkbox1&quot; class=&quot;mdl-checkbox__input&quot;&gt;
&lt;span class=&quot;mdl-checkbox__label&quot;&gt;Enable AutoSave&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>The checkbox component is ready for use.</p>
<h4 id="example">Example</h4>
<p>A checkbox with a ripple click effect.</p>
<pre><code class="language-markup">&lt;label for=&quot;chkbox1&quot; class=&quot;mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;chkbox1&quot; class=&quot;mdl-checkbox__input&quot;&gt;
&lt;span class=&quot;mdl-checkbox__label&quot;&gt;Enable AutoSave&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-checkbox</code></td>
<td>Defines label as an MDL component</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-js-checkbox</code></td>
<td>Assigns basic MDL behavior to label</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-checkbox__input</code></td>
<td>Applies basic MDL behavior to checkbox</td>
<td>Required on input element (checkbox)</td>
</tr>
<tr>
<td><code>mdl-checkbox__label</code></td>
<td>Applies basic MDL behavior to caption</td>
<td>Required on span element (caption)</td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect</td>
<td>Optional; goes on label element, not input element (checkbox)</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;input type=&quot;checkbox&quot; id=&quot;checkbox-5&quot; class=&quot;mdl-checkbox__input&quot; disabled&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="toggles-section/radio">Radio button</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-radio demo-radio__radio-on">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">First</span>
</label>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-radio demo-radio__radio-off">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
<span class="mdl-radio__label">Second</span>
</label>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Radio on
</div>
<div class="snippet-caption">
Radio off
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="radio/radio-on.html">&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;option-1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;option-1&quot; class=&quot;mdl-radio__button&quot; name=&quot;options&quot; value=&quot;1&quot; checked&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;First&lt;/span&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="radio/radio-off.html">&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;option-2&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;option-2&quot; class=&quot;mdl-radio__button&quot; name=&quot;options&quot; value=&quot;2&quot;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Second&lt;/span&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>radio</strong> component is an enhanced version of the standard HTML <code>&lt;input type=&quot;radio&quot;&gt;</code>, or &quot;radio button&quot; 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>
<p>Radio buttons are a common feature of most user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the radio component&#39;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>
<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>
<h3 id="to-include-an-mdl-radio-component-">To include an MDL <strong>radio</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;label&gt;</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>&lt;input&gt;</code> element is contained inside the <code>&lt;label&gt;</code> element, but is recommended for clarity.</p>
<pre><code class="language-markup">&lt;label for=&quot;radio1&quot;&gt;
...
&lt;/label&gt;
</code></pre>
<p>&nbsp;2. Inside the label, code an <code>&lt;input&gt;</code> element and give it a <code>type</code> attribute whose value is <code>&quot;radio&quot;</code>. Also give it an <code>id</code> attribute whose value matches the label&#39;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>
<pre><code class="language-markup">&lt;label for=&quot;radio1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;radio1&quot; name=&quot;flash&quot; value=&quot;on&quot;&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;3. Also inside the label, after the radio button, code a <code>&lt;span&gt;</code> element containing the radio button&#39;s text caption.</p>
<pre><code class="language-markup">&lt;label for=&quot;radio1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;radio1&quot; name=&quot;flash&quot; value=&quot;on&quot;&gt;
&lt;span&gt;Always on&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;label for=&quot;radio1&quot; class=&quot;mdl-radio mdl-js-radio&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;radio1&quot; name=&quot;flash&quot; value=&quot;on&quot; class=&quot;mdl-radio__button&quot;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Always on&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;5. Repeat steps 1 through 4 for the other radio components in the group. For each one:</p>
<ul>
<li>on the <code>label</code> element, specify a unique <code>for</code> attribute value</li>
<li>on the <code>input</code> element, specify an <code>id</code> attribute value that matches its <code>label</code> element&#39;s <code>for</code> attribute value</li>
<li>on the <code>input</code> element, specify the same <code>name</code> attribute value for all radio components in the group</li>
<li>optionally, on the <code>input</code> element, specify a unique <code>value</code> attribute value</li>
</ul>
<p>The radio components are ready for use.</p>
<h4 id="example">Example</h4>
<p>A group of radio buttons to control a camera&#39;s flash setting.</p>
<pre><code class="language-markup">&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;flash1&quot;&gt;
&lt;input checked class=&quot;mdl-radio__button&quot; id=&quot;flash1&quot; name=&quot;flash&quot; type=&quot;radio&quot;
value=&quot;on&quot;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Always on&lt;/span&gt;
&lt;/label&gt;
&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;flash2&quot;&gt;
&lt;input class=&quot;mdl-radio__button&quot; id=&quot;flash2&quot; name=&quot;flash&quot; type=&quot;radio&quot; value=&quot;off&quot;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Always off&lt;/span&gt;
&lt;/label&gt;
&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;flash3&quot;&gt;
&lt;input class=&quot;mdl-radio__button&quot; id=&quot;flash3&quot; name=&quot;flash&quot; type=&quot;radio&quot; value=&quot;auto&quot;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Automatic&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-radio</code></td>
<td>Defines label as an MDL component</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-js-radio</code></td>
<td>Assigns basic MDL behavior to label</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-radio__button</code></td>
<td>Applies basic MDL behavior to radio</td>
<td>Required on input element (radio button)</td>
</tr>
<tr>
<td><code>mdl-radio__label</code></td>
<td>Applies basic MDL behavior to caption</td>
<td>Required on span element (caption)</td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect</td>
<td>Optional; goes on label element, not input element (radio button)</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;input type=&quot;radio&quot; id=&quot;radio5&quot; name=&quot;flash&quot; class=&quot;mdl-radio__button&quot; disabled&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="toggles-section/icon-toggle">Icon toggle</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-icon-toggle demo-icon-toggle__icon-on">
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-icon-toggle demo-icon-toggle__icon-off">
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Icon on
</div>
<div class="snippet-caption">
Icon off
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="icon-toggle/icon-on.html">&lt;label class=&quot;mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect&quot; for=&quot;icon-toggle-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-1&quot; class=&quot;mdl-icon-toggle__input&quot; checked&gt;
&lt;i class=&quot;mdl-icon-toggle__label material-icons&quot;&gt;format_bold&lt;/i&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="icon-toggle/icon-off.html">&lt;label class=&quot;mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect&quot; for=&quot;icon-toggle-2&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-2&quot; class=&quot;mdl-icon-toggle__input&quot;&gt;
&lt;i class=&quot;mdl-icon-toggle__label material-icons&quot;&gt;format_italic&lt;/i&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>icon-toggle</strong> component is an enhanced version of the standard HTML <code>&lt;input type=&quot;checkbox&quot;&gt;</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>
<p>Icon toggles, particularly as a replacement for certain checkboxes, can be a valuable feature in user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the icon-toggle component&#39;s <a href="http://www.google.com/design/spec/components/buttons.html#buttons-other-buttons">Material Design specifications page</a> for details.</p>
<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>
<h3 id="to-include-an-mdl-icon-toggle-component-">To include an MDL <strong>icon-toggle</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;label&gt;</code> element and give it a <code>for</code> attribute whose value is the unique id of the icon-toggle it will contain.</p>
<pre><code class="language-markup">&lt;label for=&quot;icon-toggle-1&quot;&gt;
...
&lt;/label&gt;
</code></pre>
<p>&nbsp;2. Inside the label, code an <code>&lt;input&gt;</code> element and give it a <code>type</code> attribute whose value is <code>&quot;checkbox&quot;</code>. Also give it an <code>id</code> attribute whose value matches the label&#39;s <code>for</code> attribute value.</p>
<pre><code class="language-markup">&lt;label for=&quot;icon-toggle-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-1&quot;&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;3. Also inside the label, after the input element, code an <code>&lt;i&gt;</code> element containing the icon-toggle&#39;s desired icon.</p>
<pre><code class="language-markup">&lt;label for=&quot;icon-toggle-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-1&quot;&gt;
&lt;i class=&quot;mdl-icon-toggle__label material-icons&quot;&gt;format_bold&lt;/i&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;4. Add one or more MDL classes, separated by spaces, to the label and input elements, using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;label class=&quot;mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect&quot; for=&quot;icon-toggle-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-1&quot; class=&quot;mdl-icon-toggle__input&quot;&gt;
&lt;i class=&quot;mdl-icon-toggle__label material-icons&quot;&gt;format_bold&lt;/i&gt;
&lt;/label&gt;
</code></pre>
<p>The icon-toggle component is ready for use.</p>
<h4 id="example">Example</h4>
<p>An icon-toggle with a ripple click effect.</p>
<pre><code class="language-markup">&lt;label class=&quot;mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect&quot; for=&quot;icon-toggle-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-1&quot; class=&quot;mdl-icon-toggle__input&quot;&gt;
&lt;i class=&quot;mdl-icon-toggle__label material-icons&quot;&gt;format_bold&lt;/i&gt;
&lt;/label&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-icon-toggle</code></td>
<td>Defines label as an MDL component</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-js-icon-toggle</code></td>
<td>Assigns basic MDL behavior to label</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-icon-toggle__input</code></td>
<td>Applies basic MDL behavior to icon-toggle</td>
<td>Required on input element (icon-toggle)</td>
</tr>
<tr>
<td><code>mdl-icon-toggle__label</code></td>
<td>Applies basic MDL behavior to caption</td>
<td>Required on i element (icon)</td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect</td>
<td>Optional; goes on label element, not input element (icon-toggle)</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;input type=&quot;checkbox&quot; id=&quot;icon-toggle-5&quot; class=&quot;mdl-icon-toggle__input&quot; disabled&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="toggles-section/switch">Switch</h1>
</span>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-switch demo-switch__switch-on">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-switch demo-switch__switch-off">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Switch on
</div>
<div class="snippet-caption">
Switch off
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="switch/switch-on.html">&lt;label class=&quot;mdl-switch mdl-js-switch mdl-js-ripple-effect&quot; for=&quot;switch-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch-1&quot; class=&quot;mdl-switch__input&quot; checked&gt;
&lt;span class=&quot;mdl-switch__label&quot;&gt;&lt;/span&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="switch/switch-off.html">&lt;label class=&quot;mdl-switch mdl-js-switch mdl-js-ripple-effect&quot; for=&quot;switch-2&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch-2&quot; class=&quot;mdl-switch__input&quot;&gt;
&lt;span class=&quot;mdl-switch__label&quot;&gt;&lt;/span&gt;
&lt;/label&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>switch</strong> component is an enhanced version of the standard HTML <code>&lt;input type=&quot;checkbox&quot;&gt;</code> element. A switch consists of a short horizontal &quot;track&quot; 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>
<p>Switches, particularly as a replacement for certain checkboxes, can be a valuable feature in user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the switch component&#39;s <a href="http://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch">Material Design specifications page</a> for details.</p>
<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>
<h3 id="to-include-an-mdl-switch-component-">To include an MDL <strong>switch</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;label&gt;</code> element and give it a <code>for</code> attribute whose value is the unique id of the switch it will contain.</p>
<pre><code class="language-markup">&lt;label for=&quot;switch1&quot;&gt;
...
&lt;/label&gt;
</code></pre>
<p>&nbsp;2. Inside the label, code an <code>&lt;input&gt;</code> element and give it a <code>type</code> attribute whose value is <code>&quot;checkbox&quot;</code>. Also give it an <code>id</code> attribute whose value matches the label&#39;s <code>for</code> attribute value.</p>
<pre><code class="language-markup">&lt;label for=&quot;switch1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch1&quot;&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;3. Also inside the label, after the checkbox, code a <code>&lt;span&gt;</code> element containing the switch&#39;s text caption.</p>
<pre><code class="language-markup">&lt;label for=&quot;switch1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch1&quot;&gt;
&lt;span&gt;Sound off/on&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>&nbsp;4. Add one or more MDL classes, separated by spaces, to the label, switch, and caption using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;label for=&quot;switch1&quot; class=&quot;mdl-switch mdl-js-switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch1&quot; class=&quot;mdl-switch__input&quot;&gt;
&lt;span class=&quot;mdl-switch__label&quot;&gt;Sound off/on&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>The switch component is ready for use.</p>
<h4 id="example">Example</h4>
<p>A switch with a ripple click effect.</p>
<pre><code class="language-markup">&lt;label for=&quot;switch1&quot; class=&quot;mdl-switch mdl-js-switch mdl-js-ripple-effect&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch1&quot; class=&quot;mdl-switch__input&quot;&gt;
&lt;span class=&quot;mdl-switch__label&quot;&gt;Sound off/on&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-switch</code></td>
<td>Defines label as an MDL component</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-js-switch</code></td>
<td>Assigns basic MDL behavior to label</td>
<td>Required on label element</td>
</tr>
<tr>
<td><code>mdl-switch__input</code></td>
<td>Applies basic MDL behavior to switch</td>
<td>Required on input element (switch)</td>
</tr>
<tr>
<td><code>mdl-switch__label</code></td>
<td>Applies basic MDL behavior to caption</td>
<td>Required on span element (caption)</td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect</td>
<td>Optional; goes on label element, not input element (switch)</td>
</tr>
</tbody>
</table>
<blockquote>
<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>&lt;input type=&quot;checkbox&quot; id=&quot;switch5&quot; class=&quot;mdl-switch__input&quot; disabled&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
</div>
</section>
<section id="tables-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Tables</h3>
<p>Organize data.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-data-table demo-data-table__data-table">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Data table
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="data-table/data-table.html">&lt;table class=&quot;mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Material&lt;/th&gt;
&lt;th&gt;Quantity&lt;/th&gt;
&lt;th&gt;Unit price&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Acrylic (Transparent)&lt;/td&gt;
&lt;td&gt;25&lt;/td&gt;
&lt;td&gt;$2.90&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Plywood (Birch)&lt;/td&gt;
&lt;td&gt;50&lt;/td&gt;
&lt;td&gt;$1.25&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Laminate (Gold on Blue)&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;$2.35&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>data-table</strong> component is an enhanced version of the standard HTML <code>&lt;table&gt;</code>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.</p>
<p>Tables are a ubiquitous feature of most user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the data-table component&#39;s <a href="http://www.google.com/design/spec/components/data-tables.html">Material Design specifications page</a> for details.</p>
<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>
<h3 id="to-include-an-mdl-data-table-component-">To include an MDL <strong>data-table</strong> component:</h3>
<p>&nbsp;1. Code a <code>&lt;table&gt;</code> element. Include <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> elements to hold the title and data rows, respectively.</p>
<pre><code class="language-markup">&lt;table&gt;
&lt;thead&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the table using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;table class=&quot;mdl-data-table mdl-js-data-table&quot;&gt;
&lt;thead&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>&nbsp;2. Inside the <code>&lt;thead&gt;</code>, code exactly one table row <code>&lt;tr&gt;</code> containing one table header cell <code>&lt;th&gt;</code> for each column, and include the desired text in the header cells. To ensure proper header alignment, add the &quot;non-numeric&quot; MDL class to the header cell of text-only columns. (Data cells are formatted as numeric by default.)</p>
<pre><code class="language-markup">&lt;table class=&quot;mdl-data-table mdl-js-data-table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Name&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;ID Number&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>&nbsp;3. Inside the <code>&lt;tbody&gt;</code>, code one table row <code>&lt;tr&gt;</code> for each data row and one table data cell <code>&lt;td&gt;</code> for each column in the row. As with the header cells, add the &quot;non-numeric&quot; MDL class to text-only data cells to ensure proper alignment.</p>
<pre><code class="language-markup">&lt;table class=&quot;mdl-data-table mdl-js-data-table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Name&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;ID Number&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Don Aubrey&lt;/td&gt;
&lt;td&gt;25&lt;/td&gt;
&lt;td&gt;49021&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Sophia Carson&lt;/td&gt;
&lt;td&gt;32&lt;/td&gt;
&lt;td&gt;10258&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Steve Moreno&lt;/td&gt;
&lt;td&gt;29&lt;/td&gt;
&lt;td&gt;12359&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>The data-table component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A data-table with a &quot;master&quot; select checkbox and individual row select checkboxes.</p>
<pre><code class="language-markup">&lt;table class=&quot;mdl-data-table mdl-js-data-table mdl-data-table--selectable&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Material&lt;/th&gt;
&lt;th&gt;Quantity&lt;/th&gt;
&lt;th&gt;Unit price&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Acrylic (Transparent)&lt;/td&gt;
&lt;td&gt;250&lt;/td&gt;
&lt;td&gt;$2.90&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Plywood (Birch)&lt;/td&gt;
&lt;td&gt;50&lt;/td&gt;
&lt;td&gt;$1.25&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Laminate (Gold on Blue)&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;$12.35&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>A data-table without select checkboxes containing mostly text data.</p>
<pre><code class="language-markup">&lt;table class=&quot;mdl-data-table mdl-js-data-table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Name&lt;/th&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Nickname&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Living?&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;John Lennon&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;The smart one&lt;/td&gt;
&lt;td&gt;40&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Paul McCartney&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;The cute one&lt;/td&gt;
&lt;td&gt;73&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;George Harrison&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;The shy one&lt;/td&gt;
&lt;td&gt;58&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Ringo Starr&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;The funny one&lt;/td&gt;
&lt;td&gt;74&lt;/td&gt;
&lt;td class=&quot;mdl-data-table__cell--non-numeric&quot;&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-data-table</code></td>
<td>Defines table as an MDL component</td>
<td>Required on table element</td>
</tr>
<tr>
<td><code>mdl-js-data-table</code></td>
<td>Assigns basic MDL behavior to table</td>
<td>Required on table element</td>
</tr>
<tr>
<td><code>mdl-data-table--selectable</code></td>
<td>Applies all/individual selectable behavior (checkboxes)</td>
<td>Optional; goes on table element</td>
</tr>
<tr>
<td><code>mdl-data-table__header--sorted-ascending</code></td>
<td>Applies visual styling to indicate the column is sorted in ascending order</td>
<td>Optional; goes on table header (<code>th</code>)</td>
</tr>
<tr>
<td><code>mdl-data-table__header--sorted-descending</code></td>
<td>Applies visual styling to indicate the column is sorted in descending order</td>
<td>Optional; goes on table header (<code>th</code>)</td>
</tr>
<tr>
<td><code>mdl-data-table__cell--non-numeric</code></td>
<td>Applies text formatting to data cell</td>
<td>Optional; goes on both table header and table data cells</td>
</tr>
<tr>
<td>(none)</td>
<td>Applies numeric formatting to header or data cell (default)</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="textfields-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Text Fields</h3>
<p>Textual input components.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-textfield demo-textfield__textfield-text">
<style>
.demo-textfield__textfield-text .mdl-textfield {
width: 100px;
}
</style>
<!-- Simple Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
</form>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-textfield demo-textfield__textfield-numeric">
<style>
.demo-textfield__textfield-numeric .mdl-textfield {
width: 100px;
}
</style>
<!-- Numeric Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
<label class="mdl-textfield__label" for="sample2">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Text
</div>
<div class="snippet-caption">
Numeric
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="textfield/textfield-text.html">&lt;!-- Simple Textfield --&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;sample1&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample1&quot;&gt;Text...&lt;/label&gt;
&lt;/div&gt;
&lt;/form&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="textfield/textfield-numeric.html">&lt;!-- Numeric Textfield --&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; pattern=&quot;-?[0-9]*(\.[0-9]+)?&quot; id=&quot;sample2&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample2&quot;&gt;Number...&lt;/label&gt;
&lt;span class=&quot;mdl-textfield__error&quot;&gt;Input is not a number!&lt;/span&gt;
&lt;/div&gt;
&lt;/form&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-textfield demo-textfield__textfield-floating-text">
<style>
.demo-textfield__textfield-floating-text .mdl-textfield {
width: 100px;
}
</style>
<!-- Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-textfield demo-textfield__textfield-floating-numeric">
<style>
.demo-textfield__textfield-floating-numeric .mdl-textfield {
width: 100px;
}
</style>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
<label class="mdl-textfield__label" for="sample4">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Text with floating label
</div>
<div class="snippet-caption">
Numeric with floating label
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="textfield/textfield-floating-text.html">&lt;!-- Textfield with Floating Label --&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--floating-label&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;sample3&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample3&quot;&gt;Text...&lt;/label&gt;
&lt;/div&gt;
&lt;/form&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="textfield/textfield-floating-numeric.html">&lt;!-- Numeric Textfield with Floating Label --&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--floating-label&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; pattern=&quot;-?[0-9]*(\.[0-9]+)?&quot; id=&quot;sample4&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample4&quot;&gt;Number...&lt;/label&gt;
&lt;span class=&quot;mdl-textfield__error&quot;&gt;Input is not a number!&lt;/span&gt;
&lt;/div&gt;
&lt;/form&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-textfield demo-textfield__textfield-multi-line">
<style>
.demo-textfield__textfield-multi-line .mdl-textfield {
width: 100px;
}
</style>
<!-- Floating Multiline Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
</form>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-textfield demo-textfield__textfield-expanding">
<style>
.demo-textfield__textfield-expanding .mdl-textfield {
width: 100px;
}
</style>
<!-- Expandable Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sample6">
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
</div>
</form>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Multiple line
</div>
<div class="snippet-caption">
Expanding
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="textfield/textfield-multi-line.html">&lt;!-- Floating Multiline Textfield --&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;textarea class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; rows= &quot;3&quot; id=&quot;sample5&quot; &gt;&lt;/textarea&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample5&quot;&gt;Text lines...&lt;/label&gt;
&lt;/div&gt;
&lt;/form&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="textfield/textfield-expanding.html">&lt;!-- Expandable Textfield --&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable&quot;&gt;
&lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot; for=&quot;sample6&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
&lt;/label&gt;
&lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;sample6&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample-expandable&quot;&gt;Expandable Input&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>text field</strong> component is an enhanced version of the standard HTML <code>&lt;input type=&quot;text&quot;&gt;</code> and <code>&lt;input type=&quot;textarea&quot;&gt;</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>
<p>Text fields are a common feature of most user interfaces, regardless of a site&#39;s content or function. Their design and use is therefore an important factor in the overall user experience. See the text field component&#39;s <a href="http://www.google.com/design/spec/components/text-fields.html">Material Design specifications page</a> for details.</p>
<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>.
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>
<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>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element to hold the text field.</p>
<pre><code class="language-markup">&lt;div&gt;
...
&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Inside the div, code an <code>&lt;input&gt;</code> element with a <code>type</code> attribute of <code>&quot;text&quot;</code> (the text field), and an <code>id</code> attribute of your choice.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;user&quot;&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;3. Also inside the div, after the text field, code a <code>&lt;label&gt;</code> element with a <code>for</code> attribute whose value matches the <code>input</code> element&#39;s <code>id</code> value, and a short string to be used as the field&#39;s placeholder text.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;user&quot;&gt;
&lt;label for=&quot;user&quot;&gt;User name&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;4. Optionally, add a <code>pattern</code> attribute and value to the <code>&lt;input&gt;</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>&lt;span&gt;</code> element following the <code>&lt;label&gt;</code>.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;user&quot; pattern=&quot;[A-Z,a-z, ]*&quot;&gt;
&lt;label for=&quot;user&quot;&gt;User name&lt;/label&gt;
&lt;span&gt;Letters and spaces only&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;user&quot; pattern=&quot;[A-Z,a-z, ]*&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;user&quot;&gt;User name&lt;/label&gt;
&lt;span class=&quot;mdl-textfield__error&quot;&gt;Letters and spaces only&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<p>The single-line text field component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>Single-line text field with a standard label.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;fname&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;fname&quot;&gt;First name&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>Single-line text field with a floating label.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--floating-label&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;addr1&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;addr1&quot;&gt;Address line 1&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>Single-line text field with a standard label, pattern matching, and error message.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; pattern=&quot;[0-9]*&quot; id=&quot;phone&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;phone&quot;&gt;Phone&lt;/label&gt;
&lt;span class=&quot;mdl-textfield__error&quot;&gt;Digits only&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<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>
<p>&nbsp;1. Code a <code>&lt;div&gt;</code> element to hold the text field.</p>
<pre><code class="language-markup">&lt;div&gt;
...
&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Inside the div, code a <code>&lt;textarea&gt;</code> element with a <code>type</code> attribute of <code>&quot;text&quot;</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>&quot;1&quot;</code> (this attribute sets the number of <em>concurrently visible</em> input rows).</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;textarea type=&quot;text&quot; rows=&quot;1&quot; id=&quot;address&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;3. Also inside the div, after the text field, code a <code>&lt;label&gt;</code> element with a <code>for</code> attribute whose value matches the <code>&lt;textarea&gt;</code> element&#39;s <code>id</code> value, and a short string to be used as the field&#39;s placeholder text.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;textarea type=&quot;text&quot; rows=&quot;1&quot; id=&quot;address&quot;&gt;&lt;/textarea&gt;
&lt;label for=&quot;address&quot;&gt;Full address&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;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>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;textarea class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; rows=&quot;1&quot; id=&quot;address&quot;&gt;&lt;/textarea&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;address&quot;&gt;Full address&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>The multi-line text field component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>Multi-line text field with one visible input line.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;textarea class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; rows=&quot;1&quot; id=&quot;schools&quot;&gt;&lt;/textarea&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;schools&quot;&gt;Schools attended&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>Multi-line text field with one visible input line and floating label.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--floating-label&quot;&gt;
&lt;textarea class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; rows= &quot;1&quot; id=&quot;schools&quot;&gt;&lt;/textarea&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;schools&quot;&gt;Schools attended&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>Multi-line text field with multiple visible input lines and a maximum number of lines.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;textarea class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; rows=&quot;3&quot; maxrows=&quot;6&quot;
id=&quot;schools&quot;&gt;&lt;/textarea&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;schools&quot;&gt;Schools attended (max. 6)&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<h3 id="to-include-an-expandable-mdl-text-field-component-">To include an <em>expandable</em> MDL <strong>text field</strong> component:</h3>
<p>&nbsp;1. Code an &quot;outer&quot; <code>&lt;div&gt;</code> element to hold the expandable text field.</p>
<pre><code class="language-markup">&lt;div&gt;
...
&lt;/div&gt;
</code></pre>
<p>&nbsp;2. Inside the div, code a <code>&lt;label&gt;</code> element with a <code>for</code> attribute whose value will match the <code>&lt;input&gt;</code> element&#39;s <code>id</code> value (to be coded in step 5).</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;label for=&quot;expando1&quot;&gt;
...
&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;3. Inside the label, code a <code>&lt;span&gt;</code> element; the span should be empty, and should be the label&#39;s only content. This element will contain the expandable text field&#39;s icon.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;label for=&quot;expando1&quot;&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;4. Still inside the &quot;outer&quot; div, after the label containing the span, code an &quot;inner&quot; (nested) <code>&lt;div&gt;</code> element.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;label for=&quot;expando1&quot;&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;div&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;5. Inside the &quot;inner&quot; div, code an <code>&lt;input&gt;</code> element with a <code>type</code> attribute of <code>&quot;text&quot;</code> (the text field), and an <code>id</code> attribute whose value matches that of the <code>for</code> attribute in step 2.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;label for=&quot;expando1&quot;&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;expando1&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;6. Still inside the &quot;inner&quot; div, after the text field, code a <code>&lt;label&gt;</code> element with a <code>for</code> attribute whose value also matches the <code>&lt;input&gt;</code> element&#39;s <code>id</code> value (coded in step 5), and a short string to be used as the field&#39;s placeholder text.</p>
<pre><code class="language-markup">&lt;div&gt;
&lt;label for=&quot;expando1&quot;&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;div&gt;
&lt;input type=&quot;text&quot; id=&quot;expando1&quot;&gt;
&lt;label for=&quot;expando1&quot;&gt;Expandable text field&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>&nbsp;7. Add one or more MDL classes, separated by spaces, to the &quot;outer&quot; div container, label, and span, and to the &quot;inner&quot; div container, text field, and field label using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable&quot;&gt;
&lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot; for=&quot;expando1&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
&lt;/label&gt;
&lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;expando1&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;expando1&quot;&gt;Expandable text field&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>The expandable text field component is ready for use. It will expand when the icon (the empty <code>&lt;span&gt;</code>) is clicked or gains focus.</p>
<h4 id="examples">Examples</h4>
<p>Expandable text field with a standard label.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable&quot;&gt;
&lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot; for=&quot;search-expandable&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
&lt;/label&gt;
&lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;search-expandable&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;search-expandable&quot;&gt;Search text&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Expandable text field with a floating label.</p>
<pre><code class="language-markup">&lt;div class=&quot;mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label&quot;&gt;
&lt;label class=&quot;mdl-button mdl-js-button mdl-button--icon&quot; for=&quot;search-expandable2&quot;&gt;
&lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;
&lt;/label&gt;
&lt;div class=&quot;mdl-textfield__expandable-holder&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;search-expandable2&quot;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;search-expandable2&quot;&gt;
Enter search text below
&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<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>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-textfield</code></td>
<td>Defines container as an MDL component</td>
<td>Required on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-js-textfield</code></td>
<td>Assigns basic MDL behavior to input</td>
<td>Required on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-textfield__input</code></td>
<td>Defines element as textfield input</td>
<td>Required on input or textarea element</td>
</tr>
<tr>
<td><code>mdl-textfield__label</code></td>
<td>Defines element as textfield label</td>
<td>Required on label element for input or textarea elements</td>
</tr>
<tr>
<td><code>mdl-textfield--floating-label</code></td>
<td>Applies <em>floating label</em> effect</td>
<td>Optional; goes on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-textfield__error</code></td>
<td>Defines span as an MDL error message</td>
<td>Optional; goes on span element for MDL input element with <em>pattern</em></td>
</tr>
<tr>
<td><code>mdl-textfield--expandable</code></td>
<td>Defines a div as an MDL expandable text field container</td>
<td>For expandable input fields, required on &quot;outer&quot; div element</td>
</tr>
<tr>
<td><code>mdl-button</code></td>
<td>Defines label as an MDL icon button</td>
<td>For expandable input fields, required on &quot;outer&quot; div&#39;s label element</td>
</tr>
<tr>
<td><code>mdl-js-button</code></td>
<td>Assigns basic behavior to icon container</td>
<td>For expandable input fields, required on &quot;outer&quot; div&#39;s label element</td>
</tr>
<tr>
<td><code>mdl-button--icon</code></td>
<td>Defines label as an MDL icon container</td>
<td>For expandable input fields, required on &quot;outer&quot; div&#39;s label element</td>
</tr>
<tr>
<td><code>mdl-input__expandable-holder</code></td>
<td>Defines a container as an MDL component</td>
<td>For expandable input fields, required on &quot;inner&quot; div element</td>
</tr>
<tr>
<td><code>is-invalid</code></td>
<td>Defines the textfield as invalid on initial load.</td>
<td>Optional on <code>mdl-textfield</code> element</td>
</tr>
</tbody>
</table>
<p>(1) The &quot;search&quot; 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>
<blockquote>
<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>&lt;input class=&quot;mdl-textfield mdl-js-textfield&quot; type=&quot;text&quot; disabled&gt;</code>
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
</div>
</section>
<section id="tooltips-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Tooltips</h3>
<p>Useful information on hover.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-simple">
<!-- Simple Tooltip -->
<div id="tt1" class="icon material-icons">add</div>
<div class="mdl-tooltip" data-mdl-for="tt1">
Follow
</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-large">
<!-- Large Tooltip -->
<div id="tt2" class="icon material-icons">print</div>
<div class="mdl-tooltip mdl-tooltip--large" for="tt2">
Print
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Simple
</div>
<div class="snippet-caption">
Large
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="tooltip/tooltip-simple.html">&lt;!-- Simple Tooltip --&gt;
&lt;div id=&quot;tt1&quot; class=&quot;icon material-icons&quot;&gt;add&lt;/div&gt;
&lt;div class=&quot;mdl-tooltip&quot; data-mdl-for=&quot;tt1&quot;&gt;
Follow
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="tooltip/tooltip-large.html">&lt;!-- Large Tooltip --&gt;
&lt;div id=&quot;tt2&quot; class=&quot;icon material-icons&quot;&gt;print&lt;/div&gt;
&lt;div class=&quot;mdl-tooltip mdl-tooltip--large&quot; for=&quot;tt2&quot;&gt;
Print
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-rich">
<!-- Rich Tooltip -->
<div id="tt3" class="icon material-icons">cloud_upload</div>
<div class="mdl-tooltip" data-mdl-for="tt3">
Upload <strong>file.zip</strong>
</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-tooltip demo-tooltip__tooltip-multiline">
<!-- Multiline Tooltip -->
<div id="tt4" class="icon material-icons">share</div>
<div class="mdl-tooltip" for="tt4">
Share your content<br>via social media
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Rich
</div>
<div class="snippet-caption">
Multiple lines
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="tooltip/tooltip-rich.html">&lt;!-- Rich Tooltip --&gt;
&lt;div id=&quot;tt3&quot; class=&quot;icon material-icons&quot;&gt;cloud_upload&lt;/div&gt;
&lt;div class=&quot;mdl-tooltip&quot; data-mdl-for=&quot;tt3&quot;&gt;
Upload &lt;strong&gt;file.zip&lt;/strong&gt;
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><code id="tooltip/tooltip-multiline.html">&lt;!-- Multiline Tooltip --&gt;
&lt;div id=&quot;tt4&quot; class=&quot;icon material-icons&quot;&gt;share&lt;/div&gt;
&lt;div class=&quot;mdl-tooltip&quot; for=&quot;tt4&quot;&gt;
Share your content&lt;br&gt;via social media
&lt;/div&gt;
</code><div class="codepen-extra-css">&lt;style&gt;&lt;/style&gt;</div><div class="codepen-extra-css">&lt;style&gt;
body {
padding: 20px;
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<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>
<p>Tooltips are a ubiquitous feature of most user interfaces, regardless of a site&#39;s content or function. Their design and use is an important factor in the overall user experience. See the tooltip component&#39;s <a href="http://www.google.com/design/spec/components/tooltips.html">Material Design specifications page</a> for details.</p>
<h3 id="to-include-an-mdl-tooltip-component-">To include an MDL <strong>tooltip</strong> component:</h3>
<p>&nbsp;1. Code an element, such as a <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, or <code>&lt;span&gt;</code>, and style it as desired; this will be the tooltip&#39;s target. Include an <code>id</code> attribute and unique value to link the container to its tooltip.</p>
<pre><code class="language-markup">&lt;p id=&quot;tt1&quot;&gt;HTML&lt;/p&gt;
</code></pre>
<p>&nbsp;2. Following the target element, code a second element, such as a <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, or <code>&lt;span&gt;</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&#39;s <code>id</code>.</p>
<pre><code class="language-markup">&lt;p id=&quot;tt1&quot;&gt;HTML&lt;/p&gt;
&lt;span for=&quot;tt1&quot;&gt;HyperText Markup Language&lt;/span&gt;
</code></pre>
<p>&nbsp;3. Add one or more MDL classes, separated by spaces, to the tooltip element using the <code>class</code> attribute.</p>
<pre><code class="language-markup">&lt;p id=&quot;tt1&quot;&gt;HTML&lt;/p&gt;
&lt;span for=&quot;tt1&quot; class=&quot;mdl-tooltip&quot;&gt;HyperText Markup Language&lt;/span&gt;
</code></pre>
<p>The tooltip component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A target with a simple text tooltip.</p>
<pre><code class="language-markup">&lt;p&gt;HTML is related to but different from &lt;span id=&quot;xml&quot;&gt;&lt;i&gt;XML&lt;/i&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;span class=&quot;mdl-tooltip&quot; for=&quot;xml&quot;&gt;eXtensible Markup Language&lt;/span&gt;
</code></pre>
<p>A target with &quot;rich&quot; (containing HTML markup) tooltip text.</p>
<pre><code class="language-markup">&lt;p&gt;HTML is related to but different from &lt;span id=&quot;xml&quot;&gt;&lt;i&gt;XML&lt;/i&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;span class=&quot;mdl-tooltip&quot; for=&quot;xml&quot;&gt;e&lt;b&gt;X&lt;/b&gt;tensible &lt;b&gt;M&lt;/b&gt;arkup &lt;b&gt;L&lt;/b&gt;anguage&lt;/span&gt;
</code></pre>
<p>A target with a long text tooltip that automatically wraps.</p>
<pre><code class="language-markup">&lt;p&gt;HTML is related to but different from &lt;span id=&quot;xml&quot;&gt;&lt;i&gt;XML&lt;/i&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;span class=&quot;mdl-tooltip&quot; for=&quot;xml&quot;&gt;XML is an acronym for eXtensible Markup Language&lt;/span&gt;
</code></pre>
<p>A target with tooltip text in a larger font size.</p>
<pre><code class="language-markup">&lt;p&gt;HTML is related to but different from &lt;span id=&quot;xml&quot;&gt;&lt;i&gt;XML&lt;/i&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;span class=&quot;mdl-tooltip mdl-tooltip--large&quot; for=&quot;xml&quot;&gt;eXtensible Markup Language&lt;/span&gt;
</code></pre>
<p>A target with a tooltip containing both an image and text.</p>
<pre><code class="language-markup">&lt;p&gt;HTML is related to but different from &lt;span id=&quot;xml&quot;&gt;&lt;i&gt;XML&lt;/i&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;span class=&quot;mdl-tooltip&quot; for=&quot;xml&quot;&gt;
&lt;img src=&quot;xml-logo-small.png&quot; width=&quot;20&quot; height=&quot;10&quot;&gt; eXtensible Markup Language&lt;/span&gt;
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-tooltip</code></td>
<td>Defines a container as an MDL tooltip</td>
<td>Required on tooltip container element</td>
</tr>
<tr>
<td><code>mdl-tooltip--large</code></td>
<td>Applies large-font effect</td>
<td>Optional; goes on tooltip container element</td>
</tr>
<tr>
<td><code>mdl-tooltip--left</code></td>
<td>Positions the tooltip to the left of the target</td>
<td>Optional; goes on tooltip container element</td>
</tr>
<tr>
<td><code>mdl-tooltip--right</code></td>
<td>Positions the tooltip to the right of the target</td>
<td>Optional; goes on tooltip container element</td>
</tr>
<tr>
<td><code>mdl-tooltip--top</code></td>
<td>Positions the tooltip to the top of the target</td>
<td>Optional; goes on tooltip container element</td>
</tr>
<tr>
<td><code>mdl-tooltip--bottom</code></td>
<td>Positions the tooltip to the bottom of the target</td>
<td>Optional; goes on tooltip container element</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
</div>
</div>
<section class="docs-text-styling download mdl-color--grey-800">
<a href="../started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a>
</section>
<footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
<ul>
<li class="mdl-mini-footer--social-btn">
<a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a>
</li>
<li class="mdl-mini-footer--social-btn">
<a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a>
</li>
<li class="mdl-mini-footer--social-btn">
<a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
</li>
</ul>
<ul class="docs-link-list">
<li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
</ul>
</footer>
</main>
</div>
<!-- IE Compatibility shims -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
<![endif]-->
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
<link href="../assets/ie.css" rel="stylesheet">
<![endif]-->
<!-- end shims -->
<!-- Material Design Lite -->
<script src="../material.min.js"></script>
<!-- Add Copy-to-CodePen buttons to code blocks -->
<script src="../assets/codepen.js"></script>
<!-- Enable Prism syntax highlighting -->
<script src="../assets/prism.js"></script>
<script src="../assets/prism-markup.min.js"></script>
<script src="../assets/prism-javascript.min.js"></script>
<script src="../assets/prism-css.min.js"></script>
<script src="../assets/prism-bash.min.js"></script>
<script src="../assets/main.js"></script>
<!-- Built with love using Material Design Lite -->
</body>
</html>