Skin CSS Framework

@ebay/skin/list

DS v1

A list component is used to display certain types of data in a structured format. It can be used to display a list of items, a list of links, or a list of buttons.

This can be placed inside a container and will resize to fit the contents. The list expands to a maxumum of 480px.

Default List

  • Text 1
  • Text 2
  • Text 3

Actionable list

List also supports buttons or links as a list item. Actionable components, such as a switch, can be added in the trailing portion of the list, but they cannot be used in conjunction with buttons or link.

  • Link
  • Item 1 with an action

List with dividers

To add a divider, add a hr element after the list item.

  • Item 1
  • Item 2
  • Item with a large amount of text that should wrap and go to the next line. If there is too much it would wrap

List with variable width

The list will adjust to the width of the container it is in.

  • Item 1
  • Item 2

List with fieldset

For an interactive list, you can add a fieldset with radios or checkboxes

Choose an Option