List Examples
.e-list
<ul class="e-list">
<li class="e-list__item">
Item 1
</li>
<li class="e-list__item">
Item 2
</li>
<li class="e-list__item">
Item 3
</li>
<li class="e-list__item">
Item 4
</li>
</ul>.e-list__title
<ul class="e-list">
<li class="e-list__item">
<div class="e-list__item__title">
Title 1
</div>
Item 1
</li>
<li class="e-list__item">
<div class="e-list__item__title">
Title 2
</div>
Item 2
</li>
<li class="e-list__item">
<div class="e-list__item__title">
Title 3
</div>
Item 3
</li>
<li class="e-list__item">
<div class="e-list__item__title">
Title 4
</div>
Item 4
</li>
</ul>.e-list__item-node
<ul class="e-list">
<li class="e-list__item e-list__item-node">
Item 1
</li>
<li class="e-list__item e-list__item-node e-list__item-node-disabled">
Item 2
</li>
<li class="e-list__item e-list__item-node">
Item 3
</li>
<li class="e-list__item e-list__item-node">
Item 4
</li>
</ul>.e-list__item-has_icon
<ul class="e-list">
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-ac" size="large"></e-icon>
Eu duis do elit aliquip aliqua do ad do est. Ut aliqua velit mollit laboris ullamco dolore. Incididunt, ut sit laboris quis tempor adipiscing pariatur incididunt. Veniam, incididunt in laboris minim commodo consequat, dolore fugiat magna, mollit pariatur?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-check" size="large"></e-icon>
Amet do, et in esse exercitation ut magna sint, laboris? Officia ut qui dolore duis ea velit officia, sed, in dolor velit anim, ex magna. Quis, sit aute, nostrud nulla qui veniam ex cillum exercitation in fugiat anim. Mollit eu enim, cupidatat, dolore duis qui laborum.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-compare" size="large"></e-icon>
Ex consequat, proident labore enim ipsum voluptate, sint. Occaecat tempor, duis magna in consequat. Commodo veniam voluptate consectetur labore? Proident magna ex labore?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-deliver" size="large"></e-icon>
Sed ullamco, duis, mollit dolor, quis cillum aute duis, magna fugiat. Ut minim anim elit dolor, elit dolore dolor deserunt commodo tempor veniam cillum proident? Enim dolore aliqua est consectetur, ut, reprehenderit minim dolor. In aliquip esse reprehenderit dolor lorem mollit commodo.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-des" size="large"></e-icon>
Aliqua esse nostrud ullamco ut, dolore, incididunt sit. Ea exercitation consequat, exercitation pariatur non laborum. Est, ullamco, ut deserunt, reprehenderit irure ex irure, reprehenderit aliqua ex esse? Amet veniam deserunt aute voluptate quis occaecat eu commodo ad laboris nostrud?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-domains" size="large"></e-icon>
Consequat, pariatur ipsum esse, ad, do exercitation quis tempor laboris, ex. Cillum voluptate, anim dolore excepteur veniam sunt, dolor eu nulla? Ut nisi voluptate, nisi anim minim nisi, amet consequat, aliquip amet sunt, eu? Id laboris nulla, proident ut sed et laborum, nisi commodo ad amet reprehenderit.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-quality" size="large"></e-icon>
Qui do veniam velit, adipiscing deserunt, ut lorem. Ut et, qui, irure laboris. Cillum cupidatat consectetur consequat dolor sunt in, ea, id, mollit, minim. Ut non dolore aliqua et voluptate commodo, fugiat sunt ut?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-segmentation" size="large"></e-icon>
Est aute non sunt ullamco culpa dolore dolore dolor magna proident. Eu, esse excepteur ut? Sit in, dolore, amet enim tempor ullamco mollit? Voluptate, laboris deserunt, irure amet, laborum sunt non eu.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-trends" size="large"></e-icon>
Nostrud ullamco veniam sunt consequat nostrud adipiscing minim ea do, dolor reprehenderit? Tempor eiusmod enim, nulla et enim mollit anim deserunt amet enim reprehenderit pariatur. Aute, in adipiscing, et elit sunt ea tempor aliquip, incididunt ut. Sed sunt, ut occaecat excepteur, laboris ad sint dolore magna elit.
</li>
</ul>.e-list-indented
<ul class="e-list e-list-indented">
<li class="e-list__item">
Item 1
</li>
<li class="e-list__item">
Item 2
</li>
<li class="e-list__item">
Item 3
</li>
<li class="e-list__item">
Item 4
</li>
</ul>.e-list-bulleted
<ul class="e-list e-list-bulleted">
<li class="e-list__item">
Item 1
</li>
<li class="e-list__item">
Item 2
</li>
<li class="e-list__item">
Item 3
</li>
<li class="e-list__item">
Item 4
</li>
</ul>.e-list-numbered
<ul class="e-list e-list-numbered">
<li class="e-list__item">
Item 1
</li>
<li class="e-list__item">
Item 2
</li>
<li class="e-list__item">
Item 3
</li>
<li class="e-list__item">
Item 4
</li>
</ul><table class="e-table e-table-verticalcentered e-table-condensed" data-e-version="2">
<tbody>
<tr class="e-table__row">
<td class="e-table__col e-table__col-auto">
<input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-1">
<label for="tablelist-1"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div class="e-table__thumbnail" style="background-image: url(https://placehold.it/650x1200/32d17e/fff);"></div>
</td>
<td>
<div class="text-lineheight">
<b>
Outlook 2013
</b>
<div class="text-color-shade">
Windows
</div>
</div>
</td>
<td class="e-table__col e-table__col-auto e-table__col-nowrap">
<e-icon icon="user" type="table"></e-icon>
82%
</td>
</tr>
<tr class="e-table__row">
<td class="e-table__col e-table__col-auto">
<input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-2">
<label for="tablelist-2"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div class="e-table__thumbnail e-table__thumbnail-empty"></div>
</td>
<td>
<div class="text-lineheight">
<b>
Outlook 2013
</b>
<div class="text-color-shade">
Windows
</div>
</div>
</td>
<td class="e-table__col e-table__col-auto e-table__col-nowrap">
<e-icon icon="user" type="table"></e-icon>
32%
</td>
</tr>
<tr class="e-table__row e-table__row-active">
<td class="e-table__col e-table__col-auto">
<input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-3">
<label for="tablelist-3"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div class="e-table__thumbnail" style="background-image: url(https://placehold.it/50x50/32d17e/fff);"></div>
</td>
<td>
<div class="text-lineheight">
<b>
Outlook 2013
</b>
<div class="text-color-shade">
Windows
</div>
</div>
</td>
<td class="e-table__col e-table__col-auto e-table__col-nowrap">
<e-icon icon="user" type="table"></e-icon>
12%
</td>
</tr>
<tr class="e-table__row">
<td class="e-table__col e-table__col-auto">
<input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-3">
<label for="tablelist-3"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div class="e-table__thumbnail" style="background-image: url(https://placehold.it/50x50/32d17e/fff);"></div>
</td>
<td>
<div class="text-lineheight">
<b class="text-color-warning">
<e-icon icon="e-clock-o" size="small" type="inline" color="warning"></e-icon>
Outlook 2013
</b>
<div class="text-color-warning">
Windows
</div>
</div>
</td>
<td class="e-table__col e-table__col-auto e-table__col-nowrap">
<e-icon icon="user" type="table"></e-icon>
12%
</td>
</tr>
</tbody>
</table>