How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogList view
List View is a module that contains two main components: List cells and Section heading. It has a navigation function.
List view inherits the following components: List cells, Section heading, and Control.
Use recommendations
List view is the most common module in the design system. It can be used in almost any screen and flow. We recommend you to assemble a screen with this component first, and then try alternative solutions.
✅ Use cases: settings, profile, menu, navigation elements.
❌ Unsuitable cases: not found yet.
Behaviour
Basic structure:
- Section Heading and all its configurations.
- List cells and all its configurations.
- Unlimited number of lists.
Blocks are separated from each other by dividers.
Divider behaviour:
Divider is bound in Title inside List cells. If there is an icon, margin on the left is 56 px. If there is no icon, margin is 16 px.
/w=3840,quality=90,fit=scale-down)
Hint text that can be added as an option.
List cells must be able to stand:
- together
- separately
- without divider between blocks
- with divider
Important: Space between blocks equals 8 px.
On this page
