<div class="demo-preview-block"> <ul class="mdl-nav-pills"> <li>Test1</li> <li class="mdl-nav-pill--accent mdl-nav-pill--light-text">Test2</li> <li><a href="#">Test3</a></li> </ul> <div class="mdl-nav-pill">Test 4</div> <div class="mdl-nav-pill"><a href="#">Test5</a></div> <ul class="mdl-nav-pills mdl-nav-pills--as-row mdl-nav-pill--light mdl-nav--light-text"> <li>Test1</li> <li>Test2</li> <li><a href="#">Test3</a></li> <li>Test4</li> <li>Test5</li> <li>Test6</li> <li class="mdl-nav-pill--lighter"><a href="#">Test7</a></li> <li>Test8</li> <li>Test9</li> <li>Test10</li> <li>Test11</li> <li>Test12</li> <li>Test13</li> </ul> <div class="mdl-nav-pill">Test 6</div> <div class="mdl-nav-pill">Test 7</div> <div class="testblock">Testblock - should stay in place</div> <ul class="mdl-nav-pills mdl-nav-pill--dark mdl-nav--light-text"> <li>Test1</li> <li class="mdl-nav-pill--darker">Test2 - darker</li> <li><a href="#">Test3</a></li> </ul> <div class="mdl-nav-pill">Test 4</div> <div class="mdl-nav-pill mdl-nav-pill--accent mdl-nav--light-text">Test 5 - accent</div> <ul class="mdl-nav-pills mdl-nav-pills--as-row mdl-nav-pill--accent"> <li>Test1</li> <li class="mdl-nav-pill--darker mdl-nav-pill--light-text">Test2 darker</li> <li><a href="#">Test3</a></li> </ul> <div class="mdl-nav-pill">Test 6</div> <div class="mdl-nav-pill mdl-nav-pill--darker mdl-nav-pill--light-text">Test 7</div> <div class="testblock">Testblock - should stay in place</div> </div>