Ordered and Unordered Lists
User Guide Ordered and Unordered Lists
Overview
Overview
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
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:
- 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:
- 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:
- 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
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
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.
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
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.
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
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