ul.eq-ui-list
li.eq-ui-list-item Cras justo odio
li.eq-ui-list-item Dapibus ac facilisis in
li.eq-ui-list-item Morbi leo risus
li.eq-ui-list-item Porta ac consectetur ac
<ul class="eq-ui-list">
<li class="eq-ui-list-item">Cras justo odio</li>
<li class="eq-ui-list-item">Dapibus ac facilisis in</li>
<li class="eq-ui-list-item">Morbi leo risus</li>
<li class="eq-ui-list-item">Porta ac consectetur ac</li>
</ul>
.eq-ui-list.eq-ui-hoverable
a.eq-ui-list-item(href='#') Cras justo odio
a.eq-ui-list-item.active(href='#') Dapibus ac facilisis in
a.eq-ui-list-item.active(href='#') Morbi leo risus
a.eq-ui-list-item.active(href='#') Porta ac consectetur ac
<div class="eq-ui-list eq-ui-hoverable">
<a href="#" class="eq-ui-list-item">Cras justo odio</a>
<a href="#" class="eq-ui-list-item active">Dapibus ac facilisis in</a>
<a href="#" class="eq-ui-list-item">Morbi leo risus</a>
<a href="#" class="eq-ui-list-item">Porta ac consectetur ac</a>
</div>
ul.eq-ui-list.eq-ui-hoverable
li.eq-ui-list-item.eq-ui-list-header
h4 Header
li.eq-ui-list-item Dapibus ac facilisis in
li.eq-ui-list-item Morbi leo risus
li.eq-ui-list-item Porta ac consectetur ac
<ul class="eq-ui-list eq-ui-hoverable">
<li class="eq-ui-list-item eq-ui-list-header"><h4>Header</h4></li>
<li class="eq-ui-list-item">Dapibus ac facilisis in</li>
<li class="eq-ui-list-item">Morbi leo risus</li>
<li class="eq-ui-list-item">Porta ac consectetur ac</li>
</ul>
ul.eq-ui-list.eq-ui-hoverable
li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-secondary-content
img.circle(src='assets/img/doc/avatar/avatar_1.jpg')
h6.eq-ui-list-title Title - Single line
a.eq-ui-list-secondary-content-body
i.mdi.mdi-star.icon.icon-24
li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-truncate.active
img.circle(src='assets/img/doc/avatar/avatar_2.jpg')
.eq-ui-list-body
h6.eq-ui-list-title 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.
li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-secondary-content
img.circle(src='assets/img/doc/avatar/avatar_3.jpg')
.eq-ui-list-body
h6.eq-ui-list-title 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.
a.eq-ui-list-secondary-content-body.active
i.mdi.mdi-star.icon.icon-24
li.eq-ui-list-item
.eq-ui-list-body
h6.eq-ui-list-title 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="eq-ui-list eq-ui-hoverable">
<li class="eq-ui-list-item eq-ui-list-avatar eq-ui-list-secondary-content">
<img class="circle" src="assets/img/doc/avatar/avatar_1.jpg">
<h6 class="eq-ui-list-title">Title - Single line</h6>
<a class="eq-ui-list-secondary-content-body"><i class="mdi mdi-star icon icon-24"></i></a>
</li>
<li class="eq-ui-list-item eq-ui-list-avatar eq-ui-list-truncate active">
<img class="circle" src="assets/img/doc/avatar/avatar_2.jpg">
<div class="eq-ui-list-body">
<h6 class="eq-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="eq-ui-list-item eq-ui-list-avatar eq-ui-list-secondary-content">
<img class="circle" src="assets/img/doc/avatar/avatar_3.jpg">
<div class="eq-ui-list-body">
<h6 class="eq-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="eq-ui-list-secondary-content-body active"><i class="mdi mdi-star icon icon-24"></i></a>
</li>
<li class="eq-ui-list-item">
<div class="eq-ui-list-body">
<h6 class="eq-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>Adding the class dismissable after to eq-ui-list-item. This is only for touch enabled devices.
ul.eq-ui-list.eq-ui-hoverable
li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-secondary-content
img.circle(src='assets/img/doc/avatar/avatar_1.jpg')
h6.eq-ui-list-title Title - Single line
a.eq-ui-list-secondary-content-body
i.mdi.mdi-star.icon.icon-24
li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-truncate.active
img.circle(src='assets/img/doc/avatar/avatar_2.jpg')
.eq-ui-list-body
h6.eq-ui-list-title 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.
li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-secondary-content
img.circle(src='assets/img/doc/avatar/avatar_3.jpg')
.eq-ui-list-body
h6.eq-ui-list-title 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.
a.eq-ui-list-secondary-content-body.active
i.mdi.mdi-star.icon.icon-24
li.eq-ui-list-item
.eq-ui-list-body
h6.eq-ui-list-title 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="eq-ui-list eq-ui-hoverable">
<li class="eq-ui-list-item dismissable">
Cras justo odio
<i class="mdi mdi-send icon icon-right icon-24 eq-ui-secondary-color-text"></i>
</li>
<li class="eq-ui-list-item dismissable">
Dapibus ac facilisis in
<i class="mdi mdi-send icon icon-right icon-24 eq-ui-secondary-color-text"></i>
</li>
<li class="eq-ui-list-item dismissable">
Morbi leo risus
<i class="mdi mdi-send icon icon-right icon-24 eq-ui-secondary-color-text"></i>
</li>
<li class="eq-ui-list-item dismissable">
Porta ac consectetur ac
<i class="mdi mdi-send icon icon-right icon-24 eq-ui-secondary-color-text"></i>
</li>
</ul>