List item UI component and widgets

List item component with pre-built widgets

List items are very essential for many kinds of UI designs including dashboards, chat applications etc, This component is designed with a huge combination of variants packed to use in a handy and easy way. This may dramatically cut down your design time.

What is included

• List item component with various properties
• Inter list item components such as badges, avatars with their properties
• Notification and Message list widgets
• Additional and most needed other UI components

Features

• Designed with figma autolayout
• Responsive (Can be used for any device size)
• Minimum and Maximum width and height levels are set
• All components and sub elements have their own states
• Pre-built widgets for notifications and message list
• On / Off (Visible true / False) elements inside the component
• Widgets are components that you can easily search and drag and drop
• Additional UI components included
• Free fonts used
• Designed to 12 column bootstrap grid system

States

• Default state
• Hover state
• Press state
• Selected state
• New item state (Ex:New message)

Style of the list items

This may ensure that the list elements are separated with a line, top line visible bottom line visible or fully outlines

• No borders
• Full borders
• Top border only
• Bottom border only
• Top and bottom borders only

Visible true / false items

• Check box with it's own states (Default / Hover / Press / Active)
• Avatar with it's own states (Default / Offline / Online / Idle / Disabled)
• Menu icon
• State badge with it's own states (Critical / Pending / Success) - You can change them to any label

Other UI components

• Search box
• Pagination in two types (Dots / lines)
• Buttons
• Add and Chat buttons
• Tab bars
• Vertical scroll bar
• Check box
• Switch

In widgets

• You can horizontally re-size to adjust your design
• Remove elements such as Create new chat or search box
• opy paste list items to add more items as per your need