Using the source code option in the CMS, you can choose list glyphs and combine list types (ordered and unordered) in nested lists.
...
Please note: this feature isn’t working as expected. If you attempt to apply a bulleted list the Basic text component, the following happens:
level 1: standard bullet
level 2: dash
level 3: dash
The correct list style should be:
level 1: circle
level 2: circle
level 3: square
The fix of this issue is blocked by Drupal. We will update this page once the fix has been implemented by Drupal.
The Basic text component toolbar allows you to indent list items to create nested lists. (
When you put your cursor on a list item, the indent buttons become available . Otherwise (otherwise they are greyed-out.) These nested items have the same symbol or number format as the 'parent' list.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>
...
The type attribute of the <ol> tag defines the type of the list item marker:
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>
...
<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
...