Lists
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)
Classes
- 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.)
Variations
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.
Examples
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.