Components List
BasMaterial UI logo

© BasMaterial UI - v0.2.8

Notifications
View All

List

List are a flexible and powerful component for displaying a series of content.

Basic

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

<ul class="bas-ui-list">
    <li class="bas-ui-list-item">Cras justo odio</li>
    <li class="bas-ui-list-item">Dapibus ac facilisis in</li>
    <li class="bas-ui-list-item">Morbi leo risus</li>
    <li class="bas-ui-list-item">Porta ac consectetur ac</li>
</ul>

Links

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac 

<div class="bas-ui-list bas-ui-hoverable">
    <a href="#" class="bas-ui-list-item">Cras justo odio</a>
    <a href="#" class="bas-ui-list-item active">Dapibus ac facilisis in</a>
    <a href="#" class="bas-ui-list-item">Morbi leo risus</a>
    <a href="#" class="bas-ui-list-item">Porta ac consectetur ac</a>
</div>

With Header

  • Header

  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

<ul class="bas-ui-list bas-ui-hoverable">
    <li class="bas-ui-list-item bas-ui-list-header"><h4>Header</h4></li>
    <li class="bas-ui-list-item">Dapibus ac facilisis in</li>
    <li class="bas-ui-list-item">Morbi leo risus</li>
    <li class="bas-ui-list-item">Porta ac consectetur ac</li>
</ul>

With Content

  • Title - Single line
  • Title - Truncate text - Large title sample
    Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
  • Title
    Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
  • Title - Without Avatar
    Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci. 

<ul class="bas-ui-list bas-ui-hoverable">

    <li class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-secondary-content">
        <img class="circle" src="assets/img/avatar/avatar_1.jpg">
        <h6 class="bas-ui-list-title">Title - Single line</h6>
        <a class="bas-ui-list-secondary-content-body"><i class="mdi mdi-star bas-ui-icon bas-ui-icon-24"></i></a>
    </li>

    <li class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-truncate active">
        <img class="circle" src="assets/img/avatar/avatar_2.jpg">
        <div class="bas-ui-list-body">
            <h6 class="bas-ui-list-title">Title - Truncate text - Large title sample</h6>
            Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
        </div>
    </li>

    <li class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-secondary-content">
        <img class="circle" src="assets/img/avatar/avatar_3.jpg">
        <div class="bas-ui-list-body">
            <h6 class="bas-ui-list-title">Title</h6>
            Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
        </div>
        <a class="bas-ui-list-secondary-content-body active"><i class="mdi mdi-star bas-ui-icon bas-ui-icon-24"></i></a>
    </li>

    <li class="bas-ui-list-item">
        <div class="bas-ui-list-body">
            <h6 class="bas-ui-list-title">Title - Without Avatar</h6>
            Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
        </div>
    </li>

</ul>

Dismissable

Adding the class dismissable after to bas-ui-list-item. This is only for touch enabled devices.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac 

<ul class="bas-ui-list bas-ui-hoverable">
    <li class="bas-ui-list-item dismissable">
        Cras justo odio
        <i class="mdi mdi-send bas-ui-icon bas-ui-icon-right bas-ui-icon-24 secondary-color-text"></i>
    </li>
    <li class="bas-ui-list-item dismissable">
        Dapibus ac facilisis in
        <i class="mdi mdi-send bas-ui-icon bas-ui-icon-right bas-ui-icon-24 secondary-color-text"></i>
    </li>
    <li class="bas-ui-list-item dismissable">
        Morbi leo risus
        <i class="mdi mdi-send bas-ui-icon bas-ui-icon-right bas-ui-icon-24 secondary-color-text"></i>
    </li>
    <li class="bas-ui-list-item dismissable">
        Porta ac consectetur ac
        <i class="mdi mdi-send bas-ui-icon bas-ui-icon-right bas-ui-icon-24 secondary-color-text"></i>
    </li>
</ul>