0
# List Style Utilities
1

2
List style utilities control the appearance of list markers for ordered and unordered lists. These utilities provide control over bullet points, numbering, and marker removal.
3

4
## Capabilities
5

6
### List Style Types
7

8
Control the type of marker displayed for list items.
9

10
```scss { .api }
11
.list-none { list-style: none; }
12
.list-disc { list-style: disc; }
13
.list-decimal { list-style: decimal; }
14
```
15

16
## Usage Examples
17

18
### Navigation Lists
19

20
```html
21
<!-- Remove list markers for navigation -->
22
<ul class="list-none flex gap-3">
23
  <li><a href="#home">Home</a></li>
24
  <li><a href="#about">About</a></li>
25
  <li><a href="#contact">Contact</a></li>
26
</ul>
27
```
28

29
### Content Lists
30

31
```html
32
<!-- Standard bulleted list -->
33
<ul class="list-disc pl-4">
34
  <li>First item with bullet point</li>
35
  <li>Second item with bullet point</li>
36
  <li>Third item with bullet point</li>
37
</ul>
38

39
<!-- Numbered list -->
40
<ol class="list-decimal pl-4">
41
  <li>First step in process</li>
42
  <li>Second step in process</li>
43
  <li>Third step in process</li>
44
</ol>
45
```
46

47
### Custom Styled Lists
48

49
```html
50
<!-- List without default markers for custom styling -->
51
<ul class="list-none">
52
  <li class="flex align-items-center gap-2 mb-2">
53
    <i class="pi pi-check text-green-500"></i>
54
    <span>Completed task</span>
55
  </li>
56
  <li class="flex align-items-center gap-2 mb-2">
57
    <i class="pi pi-times text-red-500"></i>
58
    <span>Incomplete task</span>
59
  </li>
60
  <li class="flex align-items-center gap-2 mb-2">
61
    <i class="pi pi-clock text-yellow-500"></i>
62
    <span>Pending task</span>
63
  </li>
64
</ul>
65
```
66

67
### Nested Lists
68

69
```html
70
<!-- Mixed list styles for hierarchy -->
71
<ul class="list-disc pl-4">
72
  <li>Main category
73
    <ul class="list-none pl-4 mt-2">
74
      <li class="mb-1">• Subcategory item</li>
75
      <li class="mb-1">• Another subcategory item</li>
76
    </ul>
77
  </li>
78
  <li>Another main category
79
    <ol class="list-decimal pl-4 mt-2">
80
      <li>Numbered subcategory</li>
81
      <li>Another numbered subcategory</li>
82
    </ol>
83
  </li>
84
</ul>
85
```
86

87
### Card List Layout
88

89
```html
90
<!-- Card-style list without markers -->
91
<ul class="list-none grid gap-3">
92
  <li class="p-3 border-1 border-round">
93
    <h4 class="font-bold mb-2">Card Item 1</h4>
94
    <p class="text-color-secondary">Description for the first item</p>
95
  </li>
96
  <li class="p-3 border-1 border-round">
97
    <h4 class="font-bold mb-2">Card Item 2</h4>
98
    <p class="text-color-secondary">Description for the second item</p>
99
  </li>
100
</ul>
101
```
102

103
## Usage Guidelines
104

105
**List None:**
106
- Use for navigation menus and custom-styled lists
107
- Essential for flexbox and grid-based list layouts
108
- Removes default spacing and markers completely
109

110
**List Disc:**
111
- Standard bullet points for unordered lists
112
- Good for feature lists and general content
113
- Browser default for `<ul>` elements
114

115
**List Decimal:**
116
- Numbered markers for ordered sequences
117
- Ideal for step-by-step instructions and procedures
118
- Browser default for `<ol>` elements
119

120
**Best Practices:**
121
- Combine with padding utilities (`pl-4`) to maintain proper indentation
122
- Use `list-none` with custom markers (icons, emojis) for enhanced designs
123
- Consider accessibility when removing list semantics
124

125
## Responsive Variants
126

127
All list style utilities support responsive variants:
128

129
- `sm:list-none` - Remove list markers on small screens and up
130
- `md:list-disc` - Apply disc markers on medium screens and up  
131
- `lg:list-decimal` - Apply decimal markers on large screens and up
132
- `xl:list-none` - Remove markers on extra large screens and up