Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

List

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-list

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

Variations

With title

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
> e-list__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>
JavaScript
Copy JavaScript
  • Title 01
    Item 01
  • Title 02
    Item 02
  • Title 03
    Item 03
  • Title 04
    Item 04

Node

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-list__item-node, for AC

<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 e-list__item-node-disabled">
    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 e-list__item-node-disabled">
    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>
JavaScript
Copy JavaScript
  • Item 01
  • Item 02
  • Item 03
  • Item 04

Has icon

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

Indented
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-list-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>
JavaScript
Copy JavaScript
  • Item 01
  • Item 02
  • Item 03
  • Item 04

Bulleted
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-list-bulleted

<ul class="e-list e-list-bulleted">
  <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-bulleted">
  <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>
JavaScript
Copy JavaScript
  • Item 01
  • Item 02
  • Item 03
  • Item 04

Numbered
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-list-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>
JavaScript
Copy JavaScript
  • Item 01
  • Item 02
  • Item 03
  • Item 04

Rich content table list
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

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

Related components

Table