components
Banner Gradient
Banners with gradual transition of colors to create depth and visual interest.
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
gradient violet (default)
all solid color token
all gradient color token
exposed
Predefined by variants
Width
full-width
none
Dynamic, follow screen size
Height
hug
none
Radius
0px
none
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
Support tint ON/OFF
Size
32x32 (default)
24x24
20x20
none
Source
TDS asset
URL
none
Vertical can use either App or URL sources.
Text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Color
text invert (default)
all text color token
exposed
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.
Right icon
removable
unchangeable
Color
icon invert (default)
icon HE
none
For most cases, use Invert Icon. Changeable to HE Icon for lighter gradients.
Size
16x16
none
Icon
tds_ic_chevron_right
none
Page control
removable
unchangeable
Variant
white (default)
blue
none
Vertical designer will use 1 of this variant and can’t combine in between.
Dimension
Implementation examples
Text adjustable
Icon size & position
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
gradient violet (default)
all solid color token
all gradient color token
exposed
Predefined by variants
Width
full-width
none
Dynamic, follow screen size
Height
hug
none
Radius
0px
none
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
Support tint ON/OFF
Size
32x32 (default)
24x24
20x20
none
Source
TDS asset
URL
none
Vertical can use either App or URL sources.
Text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Color
text invert (default)
all text color token
exposed
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.
Right icon
removable
unchangeable
Color
icon invert (default)
icon HE
none
For most cases, use Invert Icon. Changeable to HE Icon for lighter gradients.
Size
16x16
none
Icon
tds_ic_chevron_right
none
Page control
removable
unchangeable
Variant
white (default)
blue
none
Vertical designer will use 1 of this variant and can’t combine in between.
Dimension
Implementation examples
Text adjustable
Icon size & position
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
gradient violet (default)
all solid color token
all gradient color token
exposed
Predefined by variants
Width
full-width
none
Dynamic, follow screen size
Height
hug
none
Radius
0px
none
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
Support tint ON/OFF
Size
32x32 (default)
24x24
20x20
none
Source
TDS asset
URL
none
Vertical can use either App or URL sources.
Text
unremovable
changeable
Text style
body 3 - regular
body 3 - bold
none
Color
text invert (default)
all text color token
exposed
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.
Right icon
removable
unchangeable
Color
icon invert (default)
icon HE
none
For most cases, use Invert Icon. Changeable to HE Icon for lighter gradients.
Size
16x16
none
Icon
tds_ic_chevron_right
none
Page control
removable
unchangeable
Variant
white (default)
blue
none
Vertical designer will use 1 of this variant and can’t combine in between.
Dimension
Implementation examples
Text adjustable
Icon size & position
