Scalable collection

Scalable collection is the 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. Options: Double, Title 2, Title 1+Label.

Scalable collection supports up to 30 buttons.

Behaviour

There are a few types of this grid: 1x, 2x, 3x, 3x/2.

1 button

2 buttons

3 buttons

4 buttons

5 buttons

6 buttons

7 buttons

8 buttons

9 buttons

10 buttons

Specs

Adaptive mobile

320 px Margin: 8 px Gap: 8 px cell=(100%-2*margin-2*gap)/3=96 px

360 px Margin: 8 px Gap: 8 px cell=(100%-2*margin-2*gap)/3=110 px

390 px Margin: 8 px Gap: 8 px cell=(100%-2*margin-2*gap)/3=119 px

Adaptive desktop

On desktop, the content lines up in one row.

720 px Margin: 8 px Gap: 8 px cell=(100%-2*margin-2*gap)/3=110 px

1120 px Margin: 8 px Gap: 8 px cell=(100%-2*margin-2*gap)/3=115 px

1140 px Margin: 8 px Gap: 8 px cell=(100%-2*margin-2*gap)/3=151 px

Types of content

There are 2 types of content for this module: background type and right-position type.

Right-position

Right-position type is used for regular navigation sections.

Specs

Image size: 110×110 px. We recommend using @2x size. Picture format: we recommend PNG. JPG and GIF are available.

Safe zone: 110×70 px. Post the important information in the safe zone.

Background

Background type is intended for various events, promotions, rare bonuses, etc. Things that won't be around all the time are perfect for business and should be promoted more strongly.

In other cases, background type can’t be used. Use the right-position type instead.

There can be maximum two background blocks for the entire section with QABs. If you have two lines or less, then use only one block so that they don’t take all the attention.

Background blocks should not be next to each other horizontally or vertically; separate them carefully.

Background blocks can be in 2 cells, 50% and 100% sizes.

Please don’t fill in small squares: text should remain readable. Besides, there's no point of promoting a block with unique images but not giving enough space to it.

Specs

Image size: 500×156 px. We recommend using @2x size. Picture format: we recommend PNG. JPG and GIF are available.

Safe zone: 110×70 px. Post the important information in the safe zone.

Important: Place 2 lines max per title. Place 2 lines max per subtitle.

Recommended max text length

Title: 9-15 characters (9 if one line or 15 if two lines) Subtitle: 9-15 characters (9 if one line or 15 if two lines)

Label

States or additional functionality are embedded in the labels. Labels are used as an additional opportunity to highlight a promo. Live statuses in game categories, indications of a championship, tournament, or another special event can be seen there.

Labels should be present at maximum 2/3 of the blocks. Otherwise, they'll become too common.

Label height is always the same. The color of the labels is the same for all menus; take colors only from the library of tokens of the theme used.

Place no more than two words (+numbers).

Please don't use labels explicitly. Try to use them so that the element remains displayed.

Images

In the following cases, the images aren’t suitable for collection:

The image is too bright—the title is not readable
The image has an inscription that is superimposed on the title
The image is motley—the title is not readable
There are too many details, the cut is sloppy

On this page

Scalable collection
Types of content
Right-position
Background
Label
Images