List

Default
e-list

  • Item 01
  • Item 02
  • Item 03
  • Item 04
<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>

Variations

With title
> e-list__title

  • Title 01
    Item 01
  • Title 02
    Item 02
  • Title 03
    Item 03
  • Title 04
    Item 04 
<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>

Node
e-list__item-node, for AC

  • Item 01
  • Item 02
  • Item 03
  • Item 04
<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>

Has icon
.e-list__item-has_icon

  • Qui sunt exercitation ut eu consectetur culpa officia proident, irure labore. Tempor duis et consequat qui sint aliqua laborum ea commodo dolore. Nulla, proident in, irure voluptate officia, proident tempor. Ullamco dolor non in nostrud nisi sunt dolore qui officia aliqua ut.
  • Ad mollit enim dolore in tempor eu. Consequat cillum magna, officia, qui, dolor proident dolor magna dolor. Mollit laborum voluptate dolore eu mollit, cupidatat in ullamco mollit id dolor aliqua non. Irure, nisi dolor ut dolor do ut velit ex velit ut pariatur nulla reprehenderit.
  • Sint nisi ut veniam, aliquip sed sit consectetur sint exercitation voluptate incididunt, id elit. Eu, lorem excepteur, enim mollit ad culpa consectetur, eu dolore. Laborum aliqua qui ut, id et deserunt ad irure ut. Nostrud in cillum voluptate culpa in.
  • Anim deserunt aliquip ea laborum est sint esse ea, duis duis. Ex, sunt sint occaecat, in, dolore amet. Excepteur, laborum sit enim ipsum dolor laborum do, incididunt. Tempor voluptate, aliquip fugiat, sit sint est incididunt, dolore?
  • Voluptate voluptate in elit tempor esse anim dolore culpa, laboris labore aliqua incididunt, dolore. Ipsum exercitation fugiat proident consectetur qui excepteur qui, enim. Pariatur dolor, ut veniam aliqua sed nulla. Aliqua ut id, commodo cillum adipiscing sed cupidatat, lorem ex enim dolor anim do, labore?
  • Duis consectetur minim officia occaecat cillum. Cupidatat cupidatat commodo aliquip. Anim eiusmod in commodo eiusmod, cillum id, in ullamco anim, dolore culpa, mollit ad. Deserunt enim nostrud ut minim magna lorem aliqua id ipsum eu enim.
  • Nulla, excepteur voluptate veniam eu, minim sunt. Id laborum, ullamco aliquip duis consectetur deserunt esse, tempor mollit. Est reprehenderit veniam id magna magna esse aute, et, qui. Lorem pariatur labore, commodo deserunt aute, aute eiusmod exercitation id laborum dolore incididunt exercitation.
  • Eu esse non aliquip dolor? Veniam consectetur ut aliquip do culpa ullamco culpa id sit. Eu sint consectetur cillum, id voluptate, pariatur quis cupidatat, fugiat in non dolor, sit ipsum minim minim? Esse ipsum velit dolor veniam laborum, amet, elit culpa, fugiat.
  • Officia, culpa fugiat, ex, cupidatat. Magna fugiat, ut, eu ut sed do laborum ipsum ut? Magna nulla et sed adipiscing dolore, voluptate, enim occaecat. Minim et consectetur labore sint, velit cupidatat, voluptate sed cillum. 
<ul class="e-list">
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-ac" size="large"></e-icon>
    Nulla, fugiat ullamco quis dolore, cupidatat deserunt cillum labore non. In velit aliqua commodo lorem. Ad ex ad magna dolor tempor velit incididunt ut irure sunt esse, ullamco culpa aliquip consectetur. Sunt dolor aute, cillum ea sit nulla duis consectetur? 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-check" size="large"></e-icon>
    Aliqua magna minim aliqua do. Aliqua mollit officia est est officia cillum ea sint. Deserunt quis consequat qui est duis fugiat eiusmod. Lorem, esse sed cillum velit est ipsum cillum pariatur et. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-compare" size="large"></e-icon>
    Sunt ex magna, excepteur fugiat, sunt, quis eu reprehenderit. Sint, occaecat incididunt in ullamco laboris, incididunt eu adipiscing consequat? Magna dolor, laboris reprehenderit mollit, aute cupidatat in esse. Dolore dolor pariatur est, aute, in deserunt, esse voluptate aute reprehenderit nisi exercitation. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-deliver" size="large"></e-icon>
    Dolor occaecat incididunt, id, aliqua labore sed, laboris cillum ea, qui consequat esse. Do in consequat velit elit ex ea enim, in. Sed, amet lorem, dolor, in ullamco. Cupidatat sunt commodo laborum, quis adipiscing incididunt do. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-des" size="large"></e-icon>
    Ut tempor deserunt sed consequat, incididunt in mollit irure incididunt, cillum enim. Laboris veniam anim mollit in et. Veniam in est sunt adipiscing nulla cupidatat aute ad, sed dolore sit. Sit nostrud dolore dolor consequat tempor ad nulla. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-domains" size="large"></e-icon>
    Proident occaecat exercitation exercitation ullamco velit ad? Sint nulla nulla nulla dolore dolor nisi amet in lorem. In ullamco quis, amet est proident, dolor commodo et esse dolor. Et, magna deserunt, amet. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-quality" size="large"></e-icon>
    Dolor ut ipsum, aute, duis duis. Consequat laborum enim in adipiscing velit labore irure sed ut incididunt eu, sit. Aute commodo, commodo enim velit lorem cupidatat, occaecat consectetur, incididunt. Officia in culpa laboris eiusmod fugiat ipsum culpa laborum est adipiscing, ullamco deserunt. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-segmentation" size="large"></e-icon>
    Minim voluptate ex cupidatat ipsum, elit labore cupidatat reprehenderit nostrud, aute dolor, laboris cupidatat. Aliqua nisi commodo amet voluptate, fugiat, enim et, aute dolore anim minim. Dolor elit occaecat ut, et eu quis, adipiscing proident ut. Voluptate veniam labore id excepteur, dolor aute aliqua. 
  </li>
  <li class="e-list__item e-list__item-has_icon">
    <e-icon icon="e-des-trends" size="large"></e-icon>
    Nulla velit ex excepteur aliqua incididunt aliquip velit proident irure lorem esse? Ad est pariatur dolore, ullamco adipiscing in non, dolor minim. Voluptate dolor quis sint laboris. Veniam enim ipsum ut veniam. 
  </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>Non tempor adipiscing, aliqua ad anim in. Occaecat, incididunt lorem ut irure irure exercitation, ut, ad exercitation sit duis ut. Mollit aliquip quis ut cupidatat ex culpa fugiat, cillum, in dolore velit dolor irure dolor ex. Fugiat, aliquip dolore tempor in reprehenderit, dolor labore pariatur nostrud, aliqua, et. 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-check" size="large"></e-icon>Qui, aliquip, deserunt, amet anim ullamco aute, ut culpa pariatur incididunt dolor. Mollit duis et consequat, aliqua voluptate, adipiscing adipiscing, ex in, nulla. Deserunt ex dolor, amet in, non amet adipiscing lorem? Cillum, aliqua velit dolore commodo, ut laboris non, excepteur? 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-compare" size="large"></e-icon>Do laborum occaecat ea ullamco tempor nisi. Tempor, reprehenderit, minim adipiscing, anim id, sed tempor lorem sint minim, mollit. Minim ullamco nisi cillum do? Non est, consectetur ut ex, ut commodo, reprehenderit ex? 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-deliver" size="large"></e-icon>Nulla velit ipsum laboris et ullamco do. Consequat ea, lorem, ut aliquip in elit sit in. Ut, nostrud do pariatur non. Ex lorem ipsum in lorem tempor in dolor ut duis in. 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-des" size="large"></e-icon>In, ut esse exercitation aliqua ut proident quis, officia aute incididunt labore in fugiat voluptate, exercitation? Culpa officia, enim consequat magna non deserunt exercitation irure? Cupidatat in sit in cupidatat ut commodo in veniam sunt. Voluptate laboris non. 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-domains" size="large"></e-icon>Voluptate minim laborum pariatur sit labore. Elit enim, sunt adipiscing anim proident veniam dolor commodo adipiscing. Voluptate elit ut est nulla velit eiusmod commodo minim minim enim. Nulla, dolore, commodo sit ex, eu. 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-quality" size="large"></e-icon>Sit est ex, voluptate mollit sunt, dolore officia. Ut cillum quis ex, sint laborum culpa? Deserunt ad in aliqua, aliquip, quis. Do id, nostrud ut sunt fugiat in in ad commodo. 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-segmentation" size="large"></e-icon>Esse elit enim sit, in sit aliquip dolor. Sunt voluptate aute officia incididunt est voluptate? Mollit, ut, reprehenderit, fugiat, velit ad cupidatat ad. Ut consequat sint, esse cupidatat, dolore, ad ex mollit consectetur. 
                            </li>
                            <li class="e-list__item e-list__item-has_icon">
                              <e-icon icon="e-des-trends" size="large"></e-icon>Sunt qui ipsum tempor ut esse cillum est voluptate consequat enim, in, dolore? Dolor, esse excepteur et cupidatat fugiat, quis, ut velit? Duis lorem, non esse lorem excepteur. Amet veniam veniam eu ex anim, sit laboris aute. 
                            </li>
                          </ul>

Indented
e-list-indented

  • Item 01
  • Item 02
  • Item 03
  • Item 04
<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>

Numbered
e-list-numbered

  • Item 01
  • Item 02
  • Item 03
  • Item 04
<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>

Rich content table list

Outlook 2013
Windows
 82%
Outlook 2013
Windows
 32%
Outlook 2013
Windows
 12%
Outlook 2013
Windows
 12% 
<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>

Related components

Table

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history