> For the complete documentation index, see [llms.txt](https://owwwlab.gitbook.io/chaos-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://owwwlab.gitbook.io/chaos-docs/els/icon-lists.md).

# Lists

### Numbers

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV04023cGB_sLysQ27%2Flists-1.png?generation=1535987995686839\&alt=media)

```
<ol class="with-shaded-label">
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  <li>List Five</li>
</ol>
```

### Lower Alpha

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0404XPKTmyseH389%2Flist-2.png?generation=1535987995588816\&alt=media)

```
<ol class="with-shaded-label ol-lower-alpha">
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  <li>List Five</li>
</ol>
```

### Upper Alpha

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0406U8GsX-msiwbV%2Flists-3.png?generation=1535987999387075\&alt=media)

```
<ol class="with-shaded-label ol-upper-alpha">
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  <li>List Five</li>
</ol>
```

### Lower Roman

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV040844pdF17oEiBC%2Flists-4.png?generation=1535987999386893\&alt=media)

```
<ol class="with-shaded-label ol-lower-roman">
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  <li>List Five</li>
</ol>
```

### Upper Roman

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV040AcBDaHaOCPTKp%2Flists-5.png?generation=1535987962926357\&alt=media)

```
<ol class="with-shaded-label ol-upper-roman">
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  <li>List Five</li>
</ol>
```

### Greek

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV040CrFOngtQ24_bM%2Flists-6.png?generation=1535987998319332\&alt=media)

```
<ol class="with-shaded-label ol-greek">
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  <li>List Five</li>
</ol>
```

### Simple lists

Above codes can be used to get simple ordered lists without using `.whith-shaded-label` class

## List with icon

![Icon lists](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV040ENvJf760bu2fg%2Ficon-lists.png?generation=1535987998345112\&alt=media)

### Markup

```
<ul class="icon-list">
    <li><i class="oli oli-two-hearts"></i> Icon List One</li>
    <li><i class="oli oli-airplane-mode-on"></i> Icon List Two</li>
    <li><i class="oli oli-user-male-circle-filled"></i> Icon List Three</li>
    <li><i class="oli oli-diamond"></i> Icon List Four</li>
</ul>
```

### Variations

1. You can see the default icon list's markup above.
2. It is represented by `.icon-list icon-border` class & the ul element would be:

   ```
   <ul class="icon-list icon-border">
   ```
3. It is represented by `icon-list icon-border radius` classes. Ul element would be like no.2.
4. It is represented by `icon-list icon-border circle` classes. Ul element would be like no.2.
5. It is just like the general markup except `theme-color` has been added to every icon element of the list, so icon would be:

   ```
   <li><i class="theme-color oli oli-two-hearts"></i> Icon List One</li>
   ```
6. It is represented by `icon-list icon-bg-box` classes. Ul element would be like no.2.
7. It is represented by `icon-list icon-dark radius` classes. Ul element would be like no.2.
8. It is represented by `icon-list icon-theme circle` classes. Ul element would be like no.2.