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
none
Predefined by variants
Radius
16px
0px
none
top right & left : 16px
bottom right & left : 0px
Width
full-width
none
Dynamic, follow screen size
Height
hug
top padding : 12px
bottom padding : 28px
none
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
Size
32x32 (default)
20x20
16x16
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
Vertical can change between Regular and Bold as they see fit.
Color
text invert (default)
all text color token
exposed
For most cases, use Invert Text. Changeable to HE Text for lighter gradients.
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 invert
none
For most cases, use Invert Icon. Changeable to HE Icon for lighter gradients.
Size
16x16
none
Icon
tds_ic_chevron_right
none
Source
TDS asset
URL
none
Vertical can use either App or URL sources.
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
none
Predefined by variants
Radius
16px
0px
none
top right & left : 16px
bottom right & left : 0px
Width
full-width
none
Dynamic, follow screen size
Height
hug
top padding : 12px
bottom padding : 28px
none
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
Size
32x32 (default)
20x20
16x16
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
Vertical can change between Regular and Bold as they see fit.
Color
text invert (default)
all text color token
exposed
For most cases, use Invert Text. Changeable to HE Text for lighter gradients.
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 invert
none
For most cases, use Invert Icon. Changeable to HE Icon for lighter gradients.
Size
16x16
none
Icon
tds_ic_chevron_right
none
Source
TDS asset
URL
none
Vertical can use either App or URL sources.
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
none
Predefined by variants
Radius
16px
0px
none
top right & left : 16px
bottom right & left : 0px
Width
full-width
none
Dynamic, follow screen size
Height
hug
top padding : 12px
bottom padding : 28px
none
Left icon
unremovable
changeable
Color
icon invert (default)
all icon color token
exposed
Size
32x32 (default)
20x20
16x16
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
Vertical can change between Regular and Bold as they see fit.
Color
text invert (default)
all text color token
exposed
For most cases, use Invert Text. Changeable to HE Text for lighter gradients.
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 invert
none
For most cases, use Invert Icon. Changeable to HE Icon for lighter gradients.
Size
16x16
none
Icon
tds_ic_chevron_right
none
Source
TDS asset
URL
none
Vertical can use either App or URL sources.
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
