Shipfaster: UI Components

List Field

A stack which contain items with similar data content, such as images and text.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.

When to use

  • When you have lots of similar information that you want to organise and make it easy to scan.


Anatomy of list filed

Shipfaster UI list fields are made up of 2 parts.

  1. Left content: contains all the elements in the leading/left portion such as label, subtext, icon, imagery, etc
  2. Right content: contains all the actions, icons, and controls (radios, toggles, and checkboxes) along with text and description.

Best Practices

  1. Place a divider between rows with lots of content, such as those with three-line lists.
  2. Adjust list field width to create a more comfortable line length for reading.
  3. Too many different icons can draw too much attention and overwhelm users. Only use them if they provide clear value and don’t distract too much from important actions.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Pricing Icon
800+ of Downloads
Review Stars
800+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.