Tailor Element: List

Stack parallel content alongside icons, numbers or images using the list element.

A list is a Tailor element. If you’ve never used Tailor before, read the intro tutorial first.

The list element can be useful for explaining a process or making a high-level ordered list with sub-steps, like this tutorial.

Add the list element

  • Drag the List element onto the page.
  • By default, the element will have two list items like the ones below.

List item

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

List item

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Edit the first list item's title

  • Click on the first list item near the top edge (not on the placeholder text); a blue outline should appear around the entire list item.
  • Click Edit in the top right corner.

  • Give your list item a Title.
  • Horizontal alignment: In general, we recommend leaving it at the default, left.

Edit the first list item's graphic type and size

Graphic type

By default, the Graphic type is set to icon, with a checkmark selected.

To choose a different icon from the icon library:

  • Click the Change Icon button under the checkmark.
  • Pick an icon that relates to your list’s content.
  • Click the Select button.

To display an image next to the list item:

  • Select Image from the Graphic type dropdown.
  • Click the Select Image button.
  • Choose an image from the Media Library or upload a new one.

To display a number next to the list item, pick Number from the dropdown menu.

Graphic size

  • For whichever graphic type you choose, you must then select a Graphic Size
  • Small or medium are suitable for most cases.

Click Apply. (Scroll down for examples.)

Edit the first list item's body content

  • Click on the first list item’s placeholder text; a blue outline should appear around the text.
  • Click Edit in the top right corner.
  • Add content using the visual editor.
  • Click Apply.

Edit the second list item

Repeat steps 2-4 for the second list item to edit its title, graphic, and body content.

Adding additional list items

  • To add additional list items, click toward the top of the first list item; a blue outline should appear around the item.
  • In the top left of the list item, click the blue dropdown labeled List item.
  • From the dropdown menu, click List; a blue outline should appear around the entire list.
  • In the top right corner of the list, click Add.

Alternatively, you can copy a list item then edit the copy. 

The copy appears directly under the copied list item, rather than at the end of the list, making this method particularly useful for adding items in the middle of a list.

Additionally, copying an item maintains your chosen graphic type and size. For example, if you were using medium-sized numbers, your copied item will follow suit.

Repeat steps 2-4 to edit each new list item’s title, body text and graphic, if needed.

Rearranging list items

To change a list item’s order, drag and drop it to the desired location. 

Moving or deleting your entire list

  • To select your entire list as an element, click toward the top of the first list item; a blue outline should appear around the item.
  • In the top left of the list item, click the blue dropdown labeled List item.
  • From the dropdown menu, click List; a blue outline should appear around the entire list.
  • From that point you can either drag and drop the list elsewhere or click Delete in the top right corner.

List examples 

The examples below show the graphic options you have for lists. By default, the graphic type is set to show the checkmark icon. Using the graphic type dropdown menu, you can choose a different icon, an image, or a number. You can also select one of three sizes. 

See step three above to learn how to select the graphic type.

  The lists below are nested inside of cards.

Icons

Small Icon

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Medium Icon

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Large Icon

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Images

Small Image

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Medium Image

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Large Image

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Numbers

Small Number

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Medium Number

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Large Number

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target