Lists

Secction Header

Basic list

  • Cras justo odio 5
  • Dapibus ac facilisis in 14
  • Morbi leo risus
  • Porta ac consectetur ac 7
  • Vestibulum at eros

Inside a card & Colors

  • Cras justo odio
  • Dapibus ac facilisis in 14
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
    <li class="list-group-item"><span class="ms-auto badge-pill bg-primary">5</span>Cras justo odio</li>
    <li class="list-group-item"><i class="zmdi zmdi-favorite-outline"></i><span class="ms-auto badge-pill">14</span> Dapibus ac facilisis in</li>
    <li class="list-group-item"><i class="zmdi zmdi-star"></i>Morbi leo risus</li>
    <li class="list-group-item"><i class="zmdi zmdi-email"></i><span class="ms-auto badge-pill bg-royal">7</span>Porta ac consectetur ac</li>
    <li class="list-group-item"><i class="zmdi zmdi-fire"></i>Vestibulum at eros</li>
</ul>

<h3>With Links</h3>
<div class="list-group">
    <a href="javascript:void(0)" class="list-group-item list-group-item-action withripple">...</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action withripple">...</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action withripple">...</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action withripple">...</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action withripple">...</a>
</div>

MaterialStyle

Social Links