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
ChangelogBanner
Banner is a module that contains content for the promotion of essential events and services.
The banner has the following configuration types: Right and Background.
You can change the background color (from Modulor colors) in the right-sided banner. Changing the color for Title or Subtitle is disabled.
In the Background type, you can change the background image. Changing the color for the Title or the Subtitle is disabled.
Important: It is preferable to use the Right type. Use the Background type for significant events only.
Basic types
Behaviour
The component contains Button low (always in White style).
The developer can set up a custom width of the banner. The height always remains the same.
Specs
Max characters:
- Body 50 characters
- Title 50 characters
Size for mobile: 280x152 px
Size for desktop: 392x152 px
/w=3840,quality=90,fit=scale-down)
Important: Background type needs Black background of 20% opacity.
Breakpoints
Size for mobile: 280x152 px Max 600 px for mobile Size for desktop: 392x152 px; 600-1920+
Content
Right type
/w=3840,quality=90,fit=scale-down)
Image size: 160×160 px. We recommend using a @2x size. Picture format: we recommend using PNG. JPG and GIF are also available.
/w=3840,quality=90,fit=scale-down)
Safe zone: 160×98 px
Important: Post the important information in the safe zone.
Background type
/w=3840,quality=90,fit=scale-down)
Image size: 392×152 px. We recommend using a @2x size. Picture format: we recommend using PNG. JPG and GIF are also available.
/w=3840,quality=90,fit=scale-down)
Safe zone: 160×98 px
Important: Post the important information in the safe zone.
