components
Banner Gradient
Banners with gradual transition of colors to create depth and visual interest.
Variants
Countdown states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
Color
gradient violet (default)
all solid color token
all gradient color token
none
Predefined by variants
Radius
8px
0px
none
top right & left : 8px
bottom right & left : 0px
Width
full-width
none
Dynamic, follow screen size
Height
fixed (48px)
none
Delay time
4 sec
exposed
Vertical can adjust the transition for all banners with same delay time
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
For most cases, use Invert Icon. Changeable to Other color icon for lighter gradients background.
Container width
full-width
none
Full Width : Sets Textfield width to 100% of container.
Source
app
URL
none
Vertical can use either App or URL sources.
Size
24x24 (default)
20x20
16x16
none
Text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Vertical can change between Regular and Bold as they see fit.
Color
icon invert (default)
all icon color token
exposed
For most cases, use Invert Text. Changeable to all text color token
Alignment
align-left
none
Overflow handling
truncation : end
none
Max line
max 2 lines
none
Countdown
removable
changeable
Timer
data type : time
none
callback function is exposed. so when the timer hit certain time (e.g. 00:00), Vertical can do anything.
Color
text invert (default)
text HE
text LE
text disabled
text activity
text alert
text positive
none
For most cases, use Invert Text. Changeable to Other color Text for lighter gradients background.
Text style
body 3 - bold
none
Text alignment
align-right
none
Right icon
removable
unchangeable
Color
icon invert (default)
icon HE
none
Size
16x16
none
Source
tds_ic_chevron_right
none
Dimension
Tap area
Transition logic
Variants
Countdown states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
Color
gradient violet (default)
all solid color token
all gradient color token
none
Predefined by variants
Radius
8px
0px
none
top right & left : 8px
bottom right & left : 0px
Width
full-width
none
Dynamic, follow screen size
Height
fixed (48px)
none
Delay time
4 sec
exposed
Vertical can adjust the transition for all banners with same delay time
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
For most cases, use Invert Icon. Changeable to Other color icon for lighter gradients background.
Container width
full-width
none
Full Width : Sets Textfield width to 100% of container.
Source
app
URL
none
Vertical can use either App or URL sources.
Size
24x24 (default)
20x20
16x16
none
Text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Vertical can change between Regular and Bold as they see fit.
Color
icon invert (default)
all icon color token
exposed
For most cases, use Invert Text. Changeable to all text color token
Alignment
align-left
none
Overflow handling
truncation : end
none
Max line
max 2 lines
none
Countdown
removable
changeable
Timer
data type : time
none
callback function is exposed. so when the timer hit certain time (e.g. 00:00), Vertical can do anything.
Color
text invert (default)
text HE
text LE
text disabled
text activity
text alert
text positive
none
For most cases, use Invert Text. Changeable to Other color Text for lighter gradients background.
Text style
body 3 - bold
none
Text alignment
align-right
none
Right icon
removable
unchangeable
Color
icon invert (default)
icon HE
none
Size
16x16
none
Source
tds_ic_chevron_right
none
Dimension
Tap area
Transition logic
Variants
Countdown states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
Color
gradient violet (default)
all solid color token
all gradient color token
none
Predefined by variants
Radius
8px
0px
none
top right & left : 8px
bottom right & left : 0px
Width
full-width
none
Dynamic, follow screen size
Height
fixed (48px)
none
Delay time
4 sec
exposed
Vertical can adjust the transition for all banners with same delay time
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
For most cases, use Invert Icon. Changeable to Other color icon for lighter gradients background.
Container width
full-width
none
Full Width : Sets Textfield width to 100% of container.
Source
app
URL
none
Vertical can use either App or URL sources.
Size
24x24 (default)
20x20
16x16
none
Text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Vertical can change between Regular and Bold as they see fit.
Color
icon invert (default)
all icon color token
exposed
For most cases, use Invert Text. Changeable to all text color token
Alignment
align-left
none
Overflow handling
truncation : end
none
Max line
max 2 lines
none
Countdown
removable
changeable
Timer
data type : time
none
callback function is exposed. so when the timer hit certain time (e.g. 00:00), Vertical can do anything.
Color
text invert (default)
text HE
text LE
text disabled
text activity
text alert
text positive
none
For most cases, use Invert Text. Changeable to Other color Text for lighter gradients background.
Text style
body 3 - bold
none
Text alignment
align-right
none
Right icon
removable
unchangeable
Color
icon invert (default)
icon HE
none
Size
16x16
none
Source
tds_ic_chevron_right
none
Dimension
Tap area
Transition logic
