> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/typography/list-style.md).

# List Style

#### List Style Type Classes

The following classes allow you to control the list-style-type property, which defines the appearance of list item markers.

**`.list-none`**

Removes any marker or bullets from the list items.

CSS equivalent: `list-style-type: none;`

Example usage:

```html
<ul class="list-none">
  <li><!--List with no marker--></li>
</ul>
```

***

**`.list-disc`**

Sets the list marker to a disc, which is the default for unordered lists.

CSS equivalent: `list-style-type: disc;`

Example usage:

```html
<ul class="list-disc">
  <li><!--List with disc marker--></li>
</ul>
```

***

**`.list-circle`**

Sets the list marker to an open circle.

CSS equivalent: `list-style-type: circle;`

Example usage:

```html
<ul class="list-circle">
  <li><!--List with circle marker--></li>
</ul>
```

***

**`.list-square`**

Sets the list marker to a square.

CSS equivalent: `list-style-type: square;`

Example usage:

```html
<ul class="list-square">
  <li><!--List with square marker--></li>
</ul>
```

***

**`.list-decimal`**

Sets the list marker to numbers(decimals), which is the default for ordered lists.

CSS equivalent: `list-style-type: decimal;`

Example usage:

```html
<ol class="list-decimal">
  <li><!--List with decimals marker--></li>
</ol>
```

***

**`.list-decimal-leading-zero`**

Sets the list marker to numbers with a leading zero (01, 02, 03, etc.).

CSS equivalent: `list-style-type: decimal-leading-zero;`

Example usage:

```html
<ol class="list-decimal-leading-zero">
  <li><!--List with decimal-leading-zero marker--></li>
</ol>
```

***

**`.list-lower-roman`**

Sets the list marker to lowercase Roman numerals (i, ii, iii, etc.).

CSS equivalent: `list-style-type: lower-roman;`

Example usage:

```html
<ol class="list-lower-roman">
  <li><!--List with lower-roman marker--></li>
</ol>
```

***

**`.list-upper-roman`**

Sets the list marker to uppercase Roman numerals (I, II, III, etc.).

CSS equivalent: `list-style-type: upper-roman;`

Example usage:

```html
<ol class="list-upper-roman">
  <li><!--List with upper-roman marker--></li>
</ol>
```

***

**`.list-lower-alpha`**

Sets the list marker to lowercase alphabetical characters (a, b, c, etc.).

CSS equivalent: `list-style-type: lower-alpha;`

Example usage:

```html
<ol class="list-lower-alpha">
  <li><!--List with lower-alpha marker--></li>
</ol>
```

***

**`.list-upper-alpha`**

Sets the list marker to uppercase alphabetical characters (A, B, C, etc.).

CSS equivalent: `list-style-type: upper-alpha;`

Example usage:

```html
<ol class="list-upper-alpha">
  <li><!--List with upper-alpha marker--></li>
</ol>
```

***

**`.list-lower-greek`**

Sets the list marker to lowercase Greek characters (α, β, γ, etc.).

CSS equivalent: `list-style-type: lower-greek;`

Example usage:

```html
<ol class="list-lower-greek">
  <li><!--List with lower-greek marker--></li>
</ol>
```

***

**`.list-upper-greek`**

Sets the list marker to uppercase Greek characters (Α, Β, Γ, etc.).

CSS equivalent: `list-style-type: upper-greek;`

Example usage:

```html
<ol class="list-upper-greek">
  <li><!--List with upper-greek marker--></li>
</ol>
```

***

**`.list-lower-latin`**

Sets the list marker to lowercase Latin characters (a, b, c, etc.).

CSS equivalent: `list-style-type: lower-latin;`

Example usage:

```html
<ol class="list-lower-latin">
  <li><!--List with lower-latin marker--></li>
</ol>
```

***

**`.list-upper-latin`**

Sets the list marker to uppercase Latin characters (A, B, C, etc.).

CSS equivalent: `list-style-type: upper-latin;`

Example usage:

```html
<ol class="list-upper-latin">
  <li><!--List with upper-latin marker--></li>
</ol>
```

***

**`.list-disclosure-closed`**

Sets the list marker to a closed disclosure triangle.

CSS equivalent: `list-style-type: disclosure-closed;`

Example usage:

```html
<ul class="list-disclosure-closed">
  <li><!--List with disclosure-closed marker--></li>
</ul>
```

***

**`.list-disclosure-open`**

Sets the list marker to an open disclosure triangle.

CSS equivalent: `list-style-type: disclosure-open;`

Example usage:

```html
<ul class="list-disclosure-open">
  <li><!--List with disclosure-open marker--></li>
</ul>
```

***

#### List Style Position Classes

These classes control the position of the list marker relative to the list item content.

**`.list-inside`**

Sets the list marker to appear inside the content box of the list item.

CSS equivalent: `list-style-position: inside;`

Example usage:

```html
<ul class="list-inside">
  <li><!--List with list-inside position--></li>
</ul>
```

***

**`.list-outside`**

Sets the list marker to appear outside the content box of the list item.

CSS equivalent: `list-style-position: outside;`

Example usage:

```html
<ul class="list-outside">
  <li><!--List with list-outside position--></li>
</ul>
```