List
| Last update: | () |
| Message | doc(search): new tags and hidden components --skip-ci |
| Committer: | Tamás Bíró |
| Version history | |
Default
<ul class="e-list">
<li class="e-list__item">
Item 01
</li>
<li class="e-list__item">
Item 02
</li>
<li class="e-list__item">
Item 03
</li>
<li class="e-list__item">
Item 04
</li>
</ul>
<ul class="e-list">
<li class="e-list__item">Item 01</li>
<li class="e-list__item">Item 02</li>
<li class="e-list__item">Item 03</li>
<li class="e-list__item">Item 04</li>
</ul>- Item 01
- Item 02
- Item 03
- Item 04
Variations
With title
<ul class="e-list">
<li class="e-list__item">
<div class="e-list__item__title">
Title 01
</div>
Item 01
</li>
<li class="e-list__item">
<div class="e-list__item__title">
Title 02
</div>
Item 02
</li>
<li class="e-list__item">
<div class="e-list__item__title">
Title 03
</div>
Item 03
</li>
<li class="e-list__item">
<div class="e-list__item__title">
Title 04
</div>
Item 04
</li>
</ul>
<ul class="e-list">
<li class="e-list__item">
<div class="e-list__item__title">Title 01</div>Item 01
</li>
<li class="e-list__item">
<div class="e-list__item__title">Title 02</div>Item 02
</li>
<li class="e-list__item">
<div class="e-list__item__title">Title 03</div>Item 03
</li>
<li class="e-list__item">
<div class="e-list__item__title">Title 04</div>Item 04
</li>
</ul>-
Title 01Item 01
-
Title 02Item 02
-
Title 03Item 03
-
Title 04Item 04
Node
<ul class="e-list">
<li class="e-list__item e-list__item-node">
Item 01
</li>
<li class="e-list__item e-list__item-node">
Item 02
</li>
<li class="e-list__item e-list__item-node">
Item 03
</li>
<li class="e-list__item e-list__item-node">
Item 04
</li>
</ul>
<ul class="e-list">
<li class="e-list__item e-list__item-node">Item 01</li>
<li class="e-list__item e-list__item-node">Item 02</li>
<li class="e-list__item e-list__item-node">Item 03</li>
<li class="e-list__item e-list__item-node">Item 04</li>
</ul>- Item 01
- Item 02
- Item 03
- Item 04
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>
Magna ut, occaecat in fugiat cupidatat deserunt? Nostrud cillum dolor sint laboris officia, adipiscing deserunt nostrud consectetur anim anim. Eiusmod, ea, dolor adipiscing excepteur. Aliquip dolor mollit, in consequat sunt ut nostrud ut.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-check" size="large"></e-icon>
Ut, in consectetur officia eu est culpa? Elit qui proident velit in, laboris lorem in dolore ullamco ad voluptate aliqua in. Pariatur quis, et ipsum, esse sunt, non, tempor id id, ut irure? Non, laboris, eiusmod ex veniam elit mollit voluptate dolore amet, et.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-compare" size="large"></e-icon>
Sunt in in, deserunt incididunt. Incididunt et elit nulla id ea, incididunt culpa? Irure enim mollit esse ipsum eu dolor amet nostrud nulla, consectetur dolor voluptate, officia. Velit pariatur ut ex quis sit, cillum eiusmod enim aute ipsum.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-deliver" size="large"></e-icon>
Exercitation minim, sit laborum ut ut non, consectetur commodo deserunt in. Eiusmod incididunt, reprehenderit culpa ut consectetur, labore magna dolor tempor veniam elit? Duis adipiscing velit, fugiat aute cupidatat, dolore exercitation? Adipiscing, dolore aute commodo, aliqua sunt, esse amet.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-des" size="large"></e-icon>
Veniam in dolor dolore ea ex pariatur, ipsum sint ut reprehenderit aute. In esse dolore, elit proident dolor laboris, irure. Nulla in irure ea pariatur ut aute eiusmod nostrud sunt. Sit dolore sit ut est tempor, mollit dolor magna laboris est.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-domains" size="large"></e-icon>
Do laboris, consectetur commodo lorem, ex in irure. Sunt tempor ullamco elit laborum, in lorem ex velit ad. Ea in aliquip velit veniam, dolor ex, in ipsum incididunt. Eiusmod, in in velit aute ad sed labore esse?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-quality" size="large"></e-icon>
Qui aute ea ut aliqua irure excepteur sunt do? Est occaecat eiusmod officia pariatur, esse ea. Anim, adipiscing id minim laboris mollit. In culpa aliquip excepteur adipiscing culpa aute quis fugiat dolor occaecat sit et adipiscing, occaecat.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-segmentation" size="large"></e-icon>
Nostrud ipsum dolor occaecat voluptate fugiat culpa magna proident voluptate, laboris eiusmod magna, velit eiusmod. Nostrud non lorem ea ea qui irure, pariatur officia consectetur, aute? Elit anim aliquip deserunt mollit officia enim officia labore dolor nulla. Ex deserunt, pariatur in, nostrud culpa.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-trends" size="large"></e-icon>
Non, nulla et ullamco, ex officia, adipiscing in cupidatat culpa? Laboris, nostrud non ea nostrud ex nulla deserunt nostrud. Duis incididunt, proident eu aute ea officia, proident dolor. Nisi, ullamco aliqua consequat amet, laboris sit.
</li>
</ul>
<ul class="e-list">
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-ac" size="large"></e-icon>Anim enim labore cupidatat non quis, in id incididunt? Aliquip sint dolore, pariatur, cillum, tempor in, ut, culpa. Duis, in, amet, culpa excepteur in pariatur est, ut est aliquip. Labore deserunt velit id cupidatat mollit in, nulla lorem adipiscing.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-check" size="large"></e-icon>Mollit veniam, quis occaecat eiusmod non tempor. Nulla lorem, magna qui. Tempor ut sunt exercitation officia cillum nisi exercitation minim cupidatat ut. Minim mollit nisi do nulla consequat non esse et?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-compare" size="large"></e-icon>Consequat est labore in pariatur proident deserunt ut. Aliqua sunt, id sint ullamco, laboris magna voluptate sit proident ullamco. Aute, cupidatat nostrud ad aute sed amet deserunt id et. Ipsum, est, sit, minim ipsum consequat et, incididunt, excepteur officia?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-deliver" size="large"></e-icon>Velit sint, elit dolore minim magna lorem? Deserunt sunt adipiscing do ex, aute dolor. Laborum dolor ullamco quis in. Irure duis, amet sint mollit culpa, labore pariatur, pariatur labore, excepteur voluptate ipsum?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-des" size="large"></e-icon>Ut occaecat, nostrud in ex enim duis incididunt? Dolore eiusmod laborum fugiat veniam elit ut voluptate nostrud eu ipsum, magna in? Cupidatat labore do culpa, lorem do exercitation voluptate non, elit aliquip fugiat lorem. In ea, excepteur velit nisi laborum, in laboris dolor, culpa.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-domains" size="large"></e-icon>Ad nisi minim ipsum minim? Duis ex veniam ut deserunt eu aliquip, voluptate, sint aliquip occaecat commodo. Tempor et ut voluptate sint ipsum voluptate in elit do, sunt fugiat. Et id ad esse est proident ullamco in velit irure.
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-quality" size="large"></e-icon>In sed cupidatat cupidatat ut fugiat laborum irure, dolor consectetur labore, ad. Aliquip eiusmod nulla culpa commodo ipsum, sunt elit veniam duis ea magna in. Elit aute culpa dolor. Dolore irure sed deserunt cillum dolor lorem anim aliqua, aliquip?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-segmentation" size="large"></e-icon>Dolor et quis cupidatat id dolore dolor minim esse? Et proident id, exercitation, ex tempor irure. Non sed cupidatat adipiscing nisi ut laborum ullamco sint deserunt. Adipiscing laborum, reprehenderit, dolor elit in eiusmod pariatur lorem laboris elit exercitation est minim?
</li>
<li class="e-list__item e-list__item-has_icon">
<e-icon icon="e-des-trends" size="large"></e-icon>Aliqua ex laborum nulla dolor irure aliquip non, lorem amet adipiscing? Dolor occaecat ut ea ut, et, veniam lorem voluptate voluptate. Lorem dolor in dolore excepteur eu, deserunt eu sit, aliquip, voluptate reprehenderit tempor nulla dolor. Ea velit consequat, consectetur dolor proident occaecat irure ullamco nulla aliqua esse ex?
</li>
</ul>-
Mollit, ut ut, velit laboris ad ut, laboris, do. Commodo, consectetur in, lorem qui eu tempor ea ullamco. Consectetur laboris laborum lorem in magna enim. Fugiat, minim dolore reprehenderit aute minim eu quis. -
Laborum proident, quis veniam eu sit sunt deserunt amet fugiat nisi anim, do excepteur. Minim mollit non dolore veniam non duis aute. Veniam, quis ullamco pariatur, adipiscing laboris dolore, consectetur qui, proident cupidatat. Amet exercitation, aute tempor aute ut sint commodo sint, nulla in. -
Quis sint aute ut mollit nisi, non ullamco. Sit esse labore, et reprehenderit eu non ad deserunt. Ex id, exercitation commodo, et, aute dolore irure, et in. In ipsum culpa fugiat sit dolore, nisi eu commodo mollit ut. -
Consequat, proident irure qui et culpa elit id. Nisi anim veniam consequat sint labore, in. In laboris fugiat qui, cillum ullamco occaecat, irure officia ut commodo. Aliquip mollit lorem in, aute fugiat voluptate laborum est non minim dolore in, in. -
Quis ea labore nisi minim. Laboris tempor dolore et cillum esse, eiusmod esse quis, qui eu dolor? In sunt incididunt adipiscing adipiscing cillum aliqua ad aliquip duis eiusmod, et, mollit. Ex dolor esse dolore ipsum sit anim, sunt fugiat. -
Exercitation ut mollit quis, ut incididunt eu sed dolore consequat. Eu lorem, dolore, amet, laborum cupidatat fugiat, do. Ullamco, magna dolor sit, consectetur eiusmod fugiat. Sed ut, mollit laborum aliqua dolor eu velit enim ea, eu officia sunt ipsum adipiscing consequat. -
Ad, amet reprehenderit id nisi ad deserunt sed. Nulla consectetur, culpa sed eiusmod. Quis eiusmod laborum laborum cupidatat magna sint aute esse minim reprehenderit, mollit. Enim dolore, labore id tempor consequat laboris velit eu deserunt? -
Ea ex ea nulla exercitation in qui ea? Deserunt anim quis, ullamco ut mollit, commodo? Tempor, reprehenderit enim lorem voluptate incididunt voluptate aliquip nisi nulla adipiscing. Ad dolore eu velit enim magna et? -
In, nostrud in nostrud est laborum. Id, sint voluptate et, adipiscing, aliquip, incididunt, reprehenderit dolor sunt dolor. Consectetur ut duis. Esse, adipiscing dolor reprehenderit do nisi id, culpa sed sint, do.
Indented
<ul class="e-list e-list-indented">
<li class="e-list__item">
Item 01
</li>
<li class="e-list__item">
Item 02
</li>
<li class="e-list__item">
Item 03
</li>
<li class="e-list__item">
Item 04
</li>
</ul>
<ul class="e-list e-list-indented">
<li class="e-list__item">Item 01</li>
<li class="e-list__item">Item 02</li>
<li class="e-list__item">Item 03</li>
<li class="e-list__item">Item 04</li>
</ul>- Item 01
- Item 02
- Item 03
- Item 04
Numbered
<ul class="e-list e-list-numbered">
<li class="e-list__item">
Item 01
</li>
<li class="e-list__item">
Item 02
</li>
<li class="e-list__item">
Item 03
</li>
<li class="e-list__item">
Item 04
</li>
</ul>
<ul class="e-list e-list-numbered">
<li class="e-list__item">Item 01</li>
<li class="e-list__item">Item 02</li>
<li class="e-list__item">Item 03</li>
<li class="e-list__item">Item 04</li>
</ul>- Item 01
- Item 02
- Item 03
- Item 04
Rich content table list
<table data-e-version="2" class="e-table e-table-verticalcentered e-table-condensed">
<tbody>
<tr class="e-table__row">
<td class="e-table__col e-table__col-auto">
<input type="checkbox" id="tablelist-1" class="e-checkbox e-checkbox-onlycheckbox">
<label for="tablelist-1"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div style="background-image: url(https://placehold.it/650x1200/32d17e/fff);" class="e-table__thumbnail"></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 type="checkbox" id="tablelist-2" class="e-checkbox e-checkbox-onlycheckbox">
<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 type="checkbox" id="tablelist-3" class="e-checkbox e-checkbox-onlycheckbox">
<label for="tablelist-3"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div style="background-image: url(https://placehold.it/50x50/32d17e/fff);" class="e-table__thumbnail"></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 type="checkbox" id="tablelist-3" class="e-checkbox e-checkbox-onlycheckbox">
<label for="tablelist-3"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div style="background-image: url(https://placehold.it/50x50/32d17e/fff);" class="e-table__thumbnail"></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>
<table data-e-version="2" class="e-table e-table-verticalcentered e-table-condensed">
<tbody>
<tr class="e-table__row">
<td class="e-table__col e-table__col-auto">
<input type="checkbox" id="tablelist-1" class="e-checkbox e-checkbox-onlycheckbox">
<label for="tablelist-1"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div style="background-image: url(https://placehold.it/650x1200/32d17e/fff);" class="e-table__thumbnail"></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 type="checkbox" id="tablelist-2" class="e-checkbox e-checkbox-onlycheckbox">
<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 type="checkbox" id="tablelist-3" class="e-checkbox e-checkbox-onlycheckbox">
<label for="tablelist-3"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div style="background-image: url(https://placehold.it/50x50/32d17e/fff);" class="e-table__thumbnail"></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 type="checkbox" id="tablelist-3" class="e-checkbox e-checkbox-onlycheckbox">
<label for="tablelist-3"></label>
</td>
<td class="e-table__col e-table__col-auto">
<div style="background-image: url(https://placehold.it/50x50/32d17e/fff);" class="e-table__thumbnail"></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>|
Outlook 2013
Windows
|
|
||
|
Outlook 2013
Windows
|
|
||
|
Outlook 2013
Windows
|
|
||
|
Windows
|
|