Skip to main content link. Accesskey S


These are simple lists whose only available action is to delete items (but that option is not always available). They are typically found in the left or right columns.


Editable List (items can be deleted)


  • lotusList - Class assigned to the ul tag of the list
  • lotusEditable - Additional class assigned to the ul tag of the list when you want a delete icon available for list items.
  • lotusSelected - Class assigned to the li tag of a list item you want to appear selected.
  • lotusDelete - class assigned to the link tag that surrounds the delete icon
  • lotusLeft - necessary for proper alignment of list text.

Basic Implementation

Create the list using an unordered html list. Assign the class lotusList to the ul tag.

Create list items inside li tags. List items are aligned right because most of them require numbers or icons along the right-hand side. So any normal text needs to be wrapped in a link or a span with a lotusLeft class assigned to it. (Doing it this way keeps things in proper order for screen readers.)


For an editable list, which contains delete icons, assign the addtional lotusEditable class to the ul tag.

Create the delete icons using inline images, and wrap them in a link tag assigned the class lotusDelete.


Sample HTML

Sample HTML - Editable List

CSS (lists.css)

Theme CSS (listsTheme.css)

The code for lists has been the same since the component (and its editable variation) was created.

See also:

IBM, the IBM logo, and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at