Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

List

Default

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

Variations

With title

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

Node

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

Has icon

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

Indented
Copy Pug
Copy HTML
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>
  • Item 01
  • Item 02
  • Item 03
  • Item 04

Numbered
Copy Pug
Copy HTML
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>
  • Item 01
  • Item 02
  • Item 03
  • Item 04

Rich content table list
Copy Pug
Copy HTML
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>
Outlook 2013
Windows
82%
Outlook 2013
Windows
32%
Outlook 2013
Windows
12%
Outlook 2013
Windows
12%

Related components

Table