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
ChangelogNavigation bar
Navigation Bar is the main navigation component. You can configure the component internally, assembling what you need from it.
Editing of Navigation bar is disabled.
Behaviour
/w=3840,quality=90,fit=scale-down)
Navigation bar has its own notifications inside the icons. Notifications can be in all three icons. The component supports any icons from the kit.
We recommend using the icon on the left as a navigation icon — to go back. And the icons on the right should open like modal windows.
The component size depends on the layout.
Click zones are indicated by the boxes below in the documentation. The click area of the icon is 40×40 px.
The component supports RTL (right-to-left). Although there’s no automatic RTL option in design (designer should create it manually), there’s such a funchion in code (developer can mirror existing components).
Content left
Icon block
Any icon from the kit can be used. The icon ic/24/back_ios is preferable.
Type block
Recommended max length: 10 characters.
The component can contain not only "Close" but also any other text. It is better to use it only for modal windows.
Center
Logo
Important: This type can’t exist with Content Left.
The component supports:
- Image logotype from S3, or link, or Modulor image
- Modulor image with color tokens
Large title
/w=3840,quality=90,fit=scale-down)
Important: This type can’t exist with Content Left.
Recommended max length: 17 characters, with Content right enabled.
1 line
Recommended max length: 18 characters, with Content right enabled; or 25 characters, with Content right and Content left disabled.
2 lines
Recommended max length for Title: 18 characters, with Content right enabled; or 25 characters, with Content right and Content left disabled.
Recommended max length for Subtitle: 27 characters, with Content right enabled, or 36 characters, with Content right and Content left disabled.
2 buttons and 2 icons
Content center is able to hide when Content right or left require more space.
Content right
Icon block
/w=3840,quality=90,fit=scale-down){kind=icon}
Any icon from the kit can be used.
Type block
/w=3840,quality=90,fit=scale-down)
Recommended max length: 10 characters.
The component can contain not only "Done", but also any other text. It is better to use it only for modal windows.
Double icon block
/w=3840,quality=90,fit=scale-down){kind=icon}
Button
/w=3840,quality=90,fit=scale-down){kind=icon}
Recommended max length: 10 characters when using Type="Button"; in Large title.
2 buttons
/w=3840,quality=90,fit=scale-down){kind=icon}
Two buttons can be used with 2 icons.
Recommended max length of both buttons together is 14 characters when used with Logo left and Large title (Recommended max length 6 characters).
Triple icon block
/w=3840,quality=90,fit=scale-down){kind=icon}
Recommended max length: 6 characters when using Large title.
Important: This type can be used only with a Large title on start pages.
Custom view
The component supports a custom display of central content.
Th height is 56 px. The width is flexible, limited by the icon area.
You can use any custom animation for a custom view.
On this page
