Blank lists

By default, ordered and unordered lists have no bullet.
This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.

• Item 1
• Item 2
• Item 3 with explicit disc bullet (See below)

Normal lists

Regular-looking lists can be created by simply adding the .l-bullets or .list-bullets class to list's root element.
These classes must also be used for any nested children lists !

Bullet position

By default, the lists do not include their bullet in the parent element.
This is due to the fact that the imposed spacings when using list-style-position: inside; looks like absolute trash.

This behavior can be changed by using the .l-bullet-inside or list-bullet-inside classes.
Alternatively, a nicer manual spacing can be applied by using the .l-bullet-manual or list-bullet-manual classes.

Please note that the following classes must be applied to the root element and any nested list's root element too.

Bullet styles

Each list and its entry can have its bullets' style changed by using the following classes in the ul, ol or li elements.
The type property also works as expected in these cases.

Please note that some of the more exotic bullet styles may not fit properly when using the manual position as shown below.
This is a known issue and won't be fixed as it is an edge-case.

• Disc: .l-bullet-disc, .list-bullet-disc
• Square: .l-bullet-square, .list-bullet-square
• Decimal: .l-bullet-decimal, .list-bullet-decimal
• Decimal: .l-bullet-decimal-leading, .list-bullet-decimal-leading
• Gregorian: .l-bullet-georgian, .list-bullet-georgian
• Chinese: .l-bullet-chinese, .list-bullet-chinese
• Kannada: .l-bullet-kannada, .list-bullet-kannada
• None: .l-bullet-none, .list-bullet-none