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
ChangelogCollection
Collection is a module that forms a grid of content on key product pages.
It may have different configurations: with a picture on the whole block and with a picture + background. Text can only be placed on top. There are several options: Double, Title 2, Title 1+Label.
Specs
/w=3840,quality=90,fit=scale-down)
The grid consists of blocks of 5 basic sizes:
- 168 (Fluent) x 56 px (x)
- 168 (Fluent) x 120 px (2x)
- 168 (Fluent) x 184 px (3x)
- 168 (Fluent) x 248 px (4x)
- 168 (Fluent) x 312 px (5x)
Each block has 8 px margins.
/w=3840,quality=90,fit=scale-down)
Important:When building a grid, keep in mind:
- All blocks must eventually come together in a grid, which is assembled into a single block.
- The grid should be varied and provide different options for pictures to look whole.
- Horizontal blocks cannot be the same in the grid.
Breakpoints
(image)
<600 for mobile
(image)
600-1260 for tablet
(image)
1261 -1679 for desktop
(image)
1680-1920+ for full HD
Content
/w=3840,quality=90,fit=scale-down)
Size: 240×312 px Format: PNG Safe zone: 20 px Max file sixe: 50 kB Naming: microgaming-marco-polo
Important: The picture always stays the same size.
Use skeleton animation in case of long loading.
On this page
