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;


E.g. use .list-none, .list-disc and .list-decimal to control the list style.


  • Apple
  • Banana
  • Cucumber


  • Apple
  • Banana
  • Cucumber


  • 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.


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.