List Style Type
Utilities for controlling the bullet/number style of a list.
| Class | Properties |
|---|---|
| .list-armenian | list-style-type: armenian; |
| .list-circle | list-style-type: circle; |
| .list-decimal-leading-zero | list-style-type: decimal-leading-zero; |
| .list-disc | list-style-type: disc; |
| .list-georgian | list-style-type: georgian; |
| .list-lower-alpha | list-style-type: lower-alpha; |
| .list-lower-greek | list-style-type: lower-greek; |
| .list-lower-latin | list-style-type: lower-latin; |
| .list-lower-roman | list-style-type: lower-roman; |
| .list-none | list-style-type: none; |
| .list-square | list-style-type: square; |
| .list-upper-alpha | list-style-type: upper-alpha; |
| .list-upper-latin | list-style-type: upper-latin; |
| .list-upper-roman | list-style-type: upper-roman; |
Usage
E.g. use .list-none, .list-disc and .list-decimal to control the list style.
.list-none
- Apple
- Banana
- Cucumber
.list-disc
- Apple
- Banana
- Cucumber
.list-decimal
- Apple
- Banana
- Cucumber
For convenience
By default, a list is displayed without any padding. As soon as it appears within the .main-content area, padding is automatically added. This ensures that the list is flush with the text. The main content class can be changed in 4-elements/_lists.scss.
Variants
By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.