antora-ui/docs/modules/ROOT/pages/list-styles.adoc

= List Styles

== Ordered list numeration

The browser automatically numbers xref:antora:asciidoc:ordered-and-unordered-lists.adoc[ordered lists] and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman.

AsciiDoc allows the author to override the numeration style for an ordered list.
Here's an example of that output:

[source,html]
----
<div class="olist loweralpha">
<ol class="loweralpha" type="a">
<li><p>a</p></li>
<li><p>b</p></li>
<li><p>c</p></li>
</ol>
</div>
----

In order to support this customization, you must assign the list-style-type property to the following classes on the `<ol>` element in your stylesheet.

|===
|<ol> class |list-style-type property value

|arabic
|decimal

|decimal
|decimal-leading-zero

|loweralpha
|lower-alpha

|lowergreek
|lower-greek

|lowerroman
|lower-roman

|upperalpha
|upper-alpha

|upperroman
|upper-roman
|===

== Checklist

A xref:antora:asciidoc:checklists.adoc[checklist] is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).
Here's an AsciiDoc source example that produces a checklist:

[source,asciidoc]
----
* [ ] todo
* [x] done!
----

If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text.

[source,html]
----
<div class="ulist checklist">
<ul class="checklist">
<li>
<p><i class="fa fa-square-o"> todo</p>
</li>
<li>
<p><i class="fa fa-check-square-o"> done!</p>
</li>
</ul>
</div>
----

The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element.

Here's how it might appear:

* [ ] todo
* [*] done!