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
B100
R100
Y100
G100
none
Predefined by Variants
- General: B100
- Alert: R100
- Warning: Y100
- Success : G100
Width
full-width
none
Height
Hug
none
Radius
8px
0px
none
Predefined by Variants
- Sectional: 8px
- Full: 0px
Ripple
ON/OFF
none
On : that has link action
Off : without link action, view only
Title text
removable
changeable
Text style
body 1 - bold
none
Color
text HE (default)
text invert
none
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.
Body text
removable
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 : end
truncation : none
none
Max line
max 2 lines
no max line
none
2 options of Overflow handlings:
- max 2 lines, truncation: end (default)
- No max line, no truncation.
Action link
removable
changeable
Text style
body 3 - bold
none
Color
text activity
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 lines
none
Left icon
unremovable
unchangeable
Color
icon activity
icon alert
icon warning
icon positive
none
Predefined by Variants
Icon
tds_ic_information
tds_ic_alert_high
tds_ic_warning
tds_ic_oval_check
none
Size
24x24
none
Source
URL
none
Left icon
removable
unchangeable
Color
icon HE
none
Predefined by Variants
Icon
tds_ic_cross_big
none
Size
16x16
none
Source
TDS asset
URL
none
Dimension
Tap area
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
B100
R100
Y100
G100
none
Predefined by Variants
- General: B100
- Alert: R100
- Warning: Y100
- Success : G100
Width
full-width
none
Height
Hug
none
Radius
8px
0px
none
Predefined by Variants
- Sectional: 8px
- Full: 0px
Ripple
ON/OFF
none
On : that has link action
Off : without link action, view only
Title text
removable
changeable
Text style
body 1 - bold
none
Color
text HE (default)
text invert
none
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.
Body text
removable
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 : end
truncation : none
none
Max line
max 2 lines
no max line
none
2 options of Overflow handlings:
- max 2 lines, truncation: end (default)
- No max line, no truncation.
Action link
removable
changeable
Text style
body 3 - bold
none
Color
text activity
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 lines
none
Left icon
unremovable
unchangeable
Color
icon activity
icon alert
icon warning
icon positive
none
Predefined by Variants
Icon
tds_ic_information
tds_ic_alert_high
tds_ic_warning
tds_ic_oval_check
none
Size
24x24
none
Source
URL
none
Left icon
removable
unchangeable
Color
icon HE
none
Predefined by Variants
Icon
tds_ic_cross_big
none
Size
16x16
none
Source
TDS asset
URL
none
Dimension
Tap area
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
B100
R100
Y100
G100
none
Predefined by Variants
- General: B100
- Alert: R100
- Warning: Y100
- Success : G100
Width
full-width
none
Height
Hug
none
Radius
8px
0px
none
Predefined by Variants
- Sectional: 8px
- Full: 0px
Ripple
ON/OFF
none
On : that has link action
Off : without link action, view only
Title text
removable
changeable
Text style
body 1 - bold
none
Color
text HE (default)
text invert
none
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.
Body text
removable
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 : end
truncation : none
none
Max line
max 2 lines
no max line
none
2 options of Overflow handlings:
- max 2 lines, truncation: end (default)
- No max line, no truncation.
Action link
removable
changeable
Text style
body 3 - bold
none
Color
text activity
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 lines
none
Left icon
unremovable
unchangeable
Color
icon activity
icon alert
icon warning
icon positive
none
Predefined by Variants
Icon
tds_ic_information
tds_ic_alert_high
tds_ic_warning
tds_ic_oval_check
none
Size
24x24
none
Source
URL
none
Left icon
removable
unchangeable
Color
icon HE
none
Predefined by Variants
Icon
tds_ic_cross_big
none
Size
16x16
none
Source
TDS asset
URL
none
Dimension
Tap area
