materialize-css

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <title>Materialize - Documentation</title>  <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"> <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">  <meta name="theme-color" content="#EE6E73"> <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />   <link href="../../../css/prism.css" rel="stylesheet" /> <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div style="padding-right: 300px;"> <h3>Badges</h3> <h4>Collection</h4> <div class="row"> <div class="col s4"> <div class="collection"> <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a> <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a> <a href="#!" class="collection-item"><span class="new badge blue">4</span>Alan</a> <a href="#!" class="collection-item"><span class="new badge black-text">4</span>Alan</a> <a href="#!" class="collection-item">Alan</a> <a href="#!" class="collection-item"><span class="badge">14</span>Really long text Really long text Really long text Really long text Really long text Really long text</a> <a href="#!" class="collection-item"><span class="new badge">4</span>Really long text Really long text Really long text Really long text Really long text Really long text</a> </div> </div> </div> <h4>Dropdown</h4> <div class="row"> <div class="col s4"> <ul id="dropdown2" class="dropdown-content"> <li><a href="#!">one<span class="badge">1</span></a></li> <li><a href="#!">two<span class="new badge">1</span></a></li> <li><a href="#!">two<span class="new badge blue">1</span></a></li> <li><a href="#!">two<span class="new badge black-text">1</span></a></li> <li><a href="#!">three</a></li> <li><a href="#!"><span class="badge">1</span>Really long text Really long text Really long text Really long text Really long text Really long text</a></li> <li><a href="#!"><span class="new badge">1</span>Really long text Really long text Really long text Really long text Really long text Really long text</a></li> </ul> <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a> </div> <div class="col s4"> <ul id="dropdown3" class="dropdown-content"> <li><a href="#!">one<span class="badge">1</span></a></li> <li><a href="#!">two<span class="new badge">1</span></a></li> <li><a href="#!">two<span class="new badge blue">1</span></a></li> <li><a href="#!">two<span class="new badge black-text">1</span></a></li> <li><a href="#!">three</a></li> <li><a href="#!">Really long text Really long text Really long text Really long text Really long text<span class="badge">1</span></a></li> <li><a href="#!">Really long text Really long text Really long text Really long text Really long text<span class="new badge">1</span></a></li> </ul> <a class="btn dropdown-button" href="#!" data-constrainwidth="false" data-activates="dropdown3">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a> </div> </div> <h4>Nav</h4> <nav> <div class="nav-wrapper"> <a href="" class="brand-logo">Logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="">sass</a></li> <li><a href="">sass <span class="new badge">4</span></a></li> <li><a href="">sass <span class="new badge blue">4</span></a></li> <li><a href="">sass <span class="new badge black-text">4</span></a></li> <li><a href="">sass <span class="badge">4</span></a></li> </ul> </div> </nav> </div> <ul id="slide-out" class="side-nav fixed" style="right: 0; left: auto;"> <li> <a href="#!">Orders <span class="new badge">4</span></a> </li> <li> <a href="#!">Second Sidebar Link <span class="badge">4</span></a> </li> </ul> <h4>Collapsible</h4> <div class="row"> <div class="col s4"> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><span class="new badge">4</span><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><span class="new badge blue">4</span><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><span class="new badge black-text">4</span><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><span class="badge">1</span><i class="material-icons">place</i>Very long title Very long title Very long title Very long title Very long title</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> </div> </div>  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="../../../bin/materialize.js"></script>   <script> $(document).ready(function(){ $('select').material_select(); }); </script> </body> </html>