Ordered and Unordered Lists

User Guide Ordered and Unordered Lists

Overview

Overview

Add List: OrderedAdd 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

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

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:

  1. Place your cursor in the editor where you want the new list to go
    or use your cursor to select multiple existing paragraphs.
  2. Open the Add panel.
  3. Select List: Ordered.
    Add 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:

  1. Place your cursor in the editor where you want the new list to go
    or use your cursor to select multiple existing paragraphs.
  2. Open the Add panel.
  3. Select List: Unordered.
    Add 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:

  1. Place your cursor at the beginning or end of a list item.
  2. 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:

  1. Place your cursor within the list.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered or List: Unordered option as the active tool.
    Edit List: Ordered  Edit List: Unordered
  4. 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:

  1. Place your cursor within an existing list.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered or List: Unordered option as the active tool.
    Edit List: Ordered  Edit List: Unordered
  4. 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
  1. Place your cursor within the item you want to change.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered or List: Unordered option as the active tool.
    Edit List: Ordered  Edit List: Unordered
  4. In the Content panel, click the  Decrease Indent or  Increase Indent button.
    Increase/Decrease indent buttons
Canvas Editor - Keyboard Shortcut

There are default shortcut keys built into the Canvas editor:

  1. Place your cursor within the item you want to change.
  2. 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:

  1. Place your cursor within an existing list.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered option as the active tool.
    Edit List: Ordered
  4. 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):

  1. Place your cursor within the item whose number you want to change.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered option as the active tool.
    Edit List: Ordered
  4. 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:

  1. Place your cursor within an existing list.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered or List: Unordered option as the active tool.
    Edit List: Ordered  Edit List: Unordered
  4. 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:

  1. Place your cursor within an existing list.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered or List: Unordered option as the active tool.
    Edit List: Ordered  Edit List: Unordered
  4. In the Style panel, click the  Remove List Format button.
    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:

  1. Place your cursor within an existing list.
  2. Make sure you are in the Edit Current Element tab.
  3. Choose the List: Ordered or List: Unordered option as the active tool.
    Edit List: Ordered  Edit List: Unordered
  4. 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:

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

Resources

Resources

Examples

Ordered
Decimal
  1. Item
  2. Item
  3. Item
Decimal with Leading Zero
  1. Item
  2. Item
  3. Item
Upper Alpha
  1. Item
  2. Item
  3. Item
Lower Alpha
  1. Item
  2. Item
  3. Item
Upper Roman
  1. Item
  2. Item
  3. Item
Lower Roman
  1. Item
  2. Item
  3. 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
  1. Item
  2. Item
  3. Item
Manually Set Item Number
  1. Item
  2. Item
  3. Item
  4. 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