components
Banner Info & Notification
Convey important info or notifications at the top of the page to ensure visibility.
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0 (default)
all solid color token
exposed
Radius
8px
none
Width
full-width
none
Height
hug
none
With title : min height 96px
Without title : min height 72px
Elevation
elevation-01
none
Ripple
ON/OFF
none
On : that has link action
Off : without link action, view only
Title
removable
changeable
Text style
body 1 - bold
none
Color
text HE (default)
text invert
exposed
Overflow handling
truncation : none
none
Alignment
align-left
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Close icon
removable
unchangeable
Color
icon HE (default)
icon invert
none
Size
16x16
none
Icon
tds_ic_cross_big
none
Source
TDS asset
URL
none
Super graphic
removable
unchangeable
Position
top right
none
Size
height : 96px
width : 93px
none
Image source
URL
none
5. Body text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Can combine between regular and bold
Color
text HE (default)
text invert
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
6. Text link
removable
changeable
Text style
body 3 - bold
none
Color
activity text
none
Overflow handling
truncation : none
none
7. Illustration
removable
changeable
Position
center
none
Source
URL
none
Dimension
Tap area
Implementation example
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0 (default)
all solid color token
exposed
Radius
8px
none
Width
full-width
none
Height
hug
none
With title : min height 96px
Without title : min height 72px
Elevation
elevation-01
none
Ripple
ON/OFF
none
On : that has link action
Off : without link action, view only
Title
removable
changeable
Text style
body 1 - bold
none
Color
text HE (default)
text invert
exposed
Overflow handling
truncation : none
none
Alignment
align-left
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Close icon
removable
unchangeable
Color
icon HE (default)
icon invert
none
Size
16x16
none
Icon
tds_ic_cross_big
none
Source
TDS asset
URL
none
Super graphic
removable
unchangeable
Position
top right
none
Size
height : 96px
width : 93px
none
Image source
URL
none
5. Body text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Can combine between regular and bold
Color
text HE (default)
text invert
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
6. Text link
removable
changeable
Text style
body 3 - bold
none
Color
activity text
none
Overflow handling
truncation : none
none
7. Illustration
removable
changeable
Position
center
none
Source
URL
none
Dimension
Tap area
Implementation example
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0 (default)
all solid color token
exposed
Radius
8px
none
Width
full-width
none
Height
hug
none
With title : min height 96px
Without title : min height 72px
Elevation
elevation-01
none
Ripple
ON/OFF
none
On : that has link action
Off : without link action, view only
Title
removable
changeable
Text style
body 1 - bold
none
Color
text HE (default)
text invert
exposed
Overflow handling
truncation : none
none
Alignment
align-left
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Close icon
removable
unchangeable
Color
icon HE (default)
icon invert
none
Size
16x16
none
Icon
tds_ic_cross_big
none
Source
TDS asset
URL
none
Super graphic
removable
unchangeable
Position
top right
none
Size
height : 96px
width : 93px
none
Image source
URL
none
5. Body text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Can combine between regular and bold
Color
text HE (default)
text invert
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
6. Text link
removable
changeable
Text style
body 3 - bold
none
Color
activity text
none
Overflow handling
truncation : none
none
7. Illustration
removable
changeable
Position
center
none
Source
URL
none
Dimension
Tap area
Implementation example
