Advanced formatting for nested and complex lists

Owned by Hayley Stockall (Unlicensed)
Last updated: 30 May, 2024 by Marcella Marino
3 min read

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's. We will keep this page updated once the fix has been implemented by Drupal.

Using the source code option in the CMS, you can choose list glyphs and combine list types (ordered and unordered) in nested lists.

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

On this page:

Unordered lists

  1. In the Basic text component, click on the Source option in the toolbar.

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

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;">

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

  1. In the Basic text component, click on the Source option in the toolbar.

  2. Choose your list item marker from the table below and copy and paste the code snippet to replace the first tag of your list.

The type attribute of the <ol> tag defines the type of the list item marker:

List style type

Value

Code example

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.

  1. Create your list.

  2. Select the indented lines and click the indent button.

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