User Guide Ordered and Unordered Lists

Overview

Add List: Ordered Add List: Unordered

Use this tool to:

Create ordered (numbered) list of items.
- Ordered lists are used for sequential information and are automatically enumerated by the browser.
Give step by step instructions that follow a sequence.
Create unordered (bulleted) list of items
- Unordered lists are used when the order of the items is not relevant. List items in unordered lists are typically marked with a bullet.

Related Tools:

No related tools

Interface

The following panels will describe what can be accomplished in each section of this tool:

Content

The following controls are available in the Content section:

Content panel controls

1. Increase/Decrease Indent: Change the indent level for the current list item. Use for nesting lists.
2. Rearrange Items: Use this section to change the order of items in the list
3. Drag Handle: Click and drag or tab to this area and use arrow keys to move items up or down in the list
4. Item Text: A preview of the item text to help identify which item is being adjusted
5. Delete Item: Remove the item from the list

Style

Use the tools in the Style section to:

Style panel controls

1. Ordered List Styles: Change the number style for the current list (Decimal, Decimal with Leading Zero, Lower Alpha, Upper Alpha, Lower Roman, Upper Roman)
2. Bullet Styles: Change the bullet style for the current list (Disk, Circle, Square)
3. Other Styles: Additional display options (Pill List, List Group, No Style)
4. Reset to Default Style: Change the current list back to its default style (Decimal for ordered lists, Disk for unordered lists)
5. Remove List Format: Converts each item in the current list to a paragraph
6. Space Between Items: Adds extra space between each item in the list
7. Hanging Indent: A Hanging indent, also known as a second line indent, uses the default margin for the first line, and then indents each subsequent line of the item.

Advanced

Ordered Lists Only

The Advanced panel provides the following options:

Advanced panel controls

1. Manually Set Start #: Set the number from which the list will start counting
2. Manually Set Item #: Change the number of the current item, subsequent items will continue counting from this number

A Note About Setting Numbers

You will enter a number regardless of the list style. For alpha or roman list styles, the number you enter will be displayed with the corresponding style. For example, if you enter 5, it will display as e/E for alpha styles and v/V for roman styles.

Instructions

Add an Ordered List

Ordered lists are used for sequential information and are automatically enumerated by the browser.

To add a new ordered list:

Place your cursor in the editor where you want the new list to go
or use your cursor to select multiple existing paragraphs.
Open the Add panel.
Select List: Ordered.

Add an Unordered List

Unordered lists are used when the order of the items is not relevant. List items in unordered lists are typically marked with a bullet.

To add a new unordered list:

Place your cursor in the editor where you want the new list to go
or use your cursor to select multiple existing paragraphs.
Open the Add panel.
Select List: Unordered.

Add a List Item

The DesignPLUS Sidebar doesn't provide an option to add an item to a list due to the ease of adding items in the Canvas editor.

Using the Canvas Editor

To add items to an existing list using the native Canvas editor:

Place your cursor at the beginning or end of a list item.
Hit Enter.

Note that this will duplicate the type and style of content that your cursor was in when you hit enter. For example, if your cursor is in bolded or italicized text, the new list item will also be bolded or italicized.

Delete a List Item

To delete an item from a list:

Place your cursor within the list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Content panel, click the Delete Item button for that item.

Change the List Type

To change the style and/or type of a list:

Place your cursor within an existing list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Style panel, choose the desired ordered or unordered style.

Do not change list types using the Canvas editor

Using the native Canvas editor to change the list type will also turn parent elements like a Content Block, Callout, Accordion Panel, etc into a list which can break style and structure.

Canvas has submitted a support ticket to the company that built the editor to see if they can get this fixed.

Increase/Decrease Item Indent Level

There are multiple ways to change the indent level of a list item:

DesignPLUS Sidebar

Place your cursor within the item you want to change.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Content panel, click the Decrease Indent or Increase Indent button.

Canvas Editor - Keyboard Shortcut

There are default shortcut keys built into the Canvas editor:

Place your cursor within the item you want to change.
Press Tab to increase indent or Shift+Tab to decrease indent.

Change the Start Number for an Ordered List

To set the starting number for the first item in an ordered list:

Place your cursor within an existing list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered option as the active tool.
In the Advanced panel, type the desired number in the Manually Set Start # input.

A Note About Setting Numbers

Change the Number for an Item in an Ordered List

To change the number for an item anywhere in a list (will continue counting from this number):

Place your cursor within the item whose number you want to change.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered option as the active tool.
In the Advanced panel, type the desired number in the Manually Set Item # input.

A Note About Setting Numbers

Rearrange List Items

To change the order of the list items:

Place your cursor within an existing list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Content panel, find the item you wish to move and then do one of the following:
- Click the Grip icon at the start of the row and drag the item to the desired location
- Tab until the Reorder button has keyboard focus and use your up or down keys to move the item to the desired location

Convert a List to Paragraphs

To remove the list format and change an existing list into paragraphs:

Place your cursor within an existing list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Style panel, click the Remove List Format button.

Add a Hanging Indent to List Items

A Hanging indent, also known as a second line indent, uses the default margin for the first line, and then indents each subsequent line of the item.

To set a list to use hanging indents:

Place your cursor within an existing list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Style panel, check the Hanging Indent checkbox.

Add Extra Space Between List Items

To add extra space between each item in a list:

Place your cursor within an existing list.
Make sure you are in the Edit Current Element tab.
Choose the List: Ordered or List: Unordered option as the active tool.
In the Style panel, check the Space Between Items checkbox.

Resources

Examples

Ordered

Decimal

Item
Item
Item

Decimal with Leading Zero

Item
Item
Item

Upper Alpha

Item
Item
Item

Lower Alpha

Item
Item
Item

Upper Roman

Item
Item
Item

Lower Roman

Item
Item
Item

Unordered

Disc

Item
Item
Item

Circle

Item
Item
Item

Square

Item
Item
Item

Pill List

Item
Item
Item

List Group

Item
Item
Item

No Style

Item
Item
Item

Other Options

Space Between Items

Item
Item
Item

Hanging Indent

Item with enough content that it wraps to additional lines
Item with enough content that it wraps to additional lines
Item with enough content that it wraps to additional lines

Manually Set Start Number

Item
Item
Item

Manually Set Item Number

Item
Item
Item
Item

Design Considerations/Best Practices

Please consider the following when choosing to use an ordered or unordered list :

Ordered lists are used for sequential information and are automatically enumerated by the browser.
Unordered lists are used when the order of the items is not relevant. List items in unordered lists are typically marked with a bullet.

Do not change list types using the Canvas editor

Using the native Canvas editor to change the list type will also turn parent elements like a Content Block, Callout, Accordion Panel, etc into a list which can break style and structure.

Canvas has submitted a support ticket to the company that built the editor to see if they can get this fixed.

Legacy Comparison

Legacy

Features in the legacy version:

Change list style
- Decimal/ Decimal with Leading Zero
- Lower/Upper Alpha
- Lower/Upper Roman
- Bullets: Disc, Circle, Square
- No Style
- Pill List
Reset list style
Increase/decrease indent
Set item number
Set list start numbe

Current

In addition to the features in the legacy version, this version adds the following:

Rearrange Items
Create lists
List Group Style
Remove List Format
Space Between Lists
Hanging Indent