...
If you want to choose the type of list identifier (symbol or number format) and build nested lists that combine ordered and unordered items, you have to adjust these settings in the source code.
Unordered lists
In the Basic text component, click on the Source option in the toolbar.
Choose your list item marker from the table below and copy and paste the code snippet to replace the first tag of your list.
List style type | Value | Code example |
|---|---|---|
Standard bullet | disc | <ul style="list-style-type:disc;"> |
Circle | circle | <ul style="list-style-type:circle;"> |
Square | square | <ul style="list-style-type:square;"> |
Dash | ? | <ul class="dashed"> |
Code example
<ul style="list-style-type:disc"> <li>Oranges</li> <li>Apples</li> <li>Bananas</li> <li>Grapes</li></ul>
How each unordered list type displays
...
Ordered lists
In the Basic text component, click on the Source option in the toolbar.
Choose your list item marker from the table below and copy and paste the code snippet to replace the first tag of your list.
...
List style type | Value | Code example |
|---|---|---|
Numbers (Arabic) | 1, 2, 3 | <ol type="1"> |
Uppercase letters | A, B, C | <ol type="A"> |
Lowercase letters | a, b, c | <ol type="a"> |
Uppercase Roman numerals | I, II, III | <ol type="I"> |
Lowercase Roman numerals | i, ii, iii | <ol type="i"> |
Code example
<ol style="list-style-type:lower-alpha" type="a"> <li>Oranges</li> <li>Apples</li> <li>Bananas</li> <li>Grapes</li></ol>
How each ordered list type displays
...
Combination lists
You can mix ordered and unordered lists and choose the list item type.You start and end the nested list within the main list.
Create your list.
Select the indented lines and click the indent button.
Go into the Source code and paste in the code snippet to replace the first line of code in the section of the list where you want to change set the list identifier type.
Code example
Note the placement of the opening and closing tags within a 'parent' list.
<ol style="list-style-type:decimal" type="1">
<li>Apples
<ul style="list-style-type:disc">
<li>Pink lady</li>
<li>Fuji</li>
<li>Granny smith</li>
</ul>
</li>
<li>Oranges</li>
<li>Bananas
<ol style="list-style-type:lower-alpha" type="a">
<li>Lady finger</li>
<li>Cavendish</li>
<li>Plantain</li>
</ol>
</li>
<li>Grapes
<ol style="list-style-type:lower-roman" type="i">
<li>Muscat</li>
<li>Sultana</li>
<li>Shiraz</li>
</ol>
</li>
</ol>
How it displays
...
Control list counting
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the 'start' attribute (for example: <ol start="50">). This is useful when list numbering continues after a heading.
Code example
<ol start="50"> <li>Jessica</li> <li>Richard</li> <li>Marcella</li> <li>Nadim</li></ol>
How it displays
50. Jessica
51. Richard
52. Marcella
...