components
Bottomsheet
Banners with gradual transition of colors to create depth and visual interest.
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
none
Container Width
full-width
none
Radius
16px
16px
0px
0px
none
top right & left : 16px
bottom : right & left : 0px
Elevation
elevation-01
none
Title
removable
changeable
Initial state
Typography token
heading 2
none
Color
text HE
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Scrolling State
Typography token
heading 3
none
Color
text HE
none
Overflow handling
truncation : end
none
Max lines
max 1 line
none
Close Action
unremovable
Color
icon HE
none
Source
TDS assets
none
Handle
unremovable
Color
N0
none
Link Action
removable
Typography token
body 1 - bold
none
Color
text activity
none
Text overflow
no max line
none
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
none
Container Width
full-width
none
Radius
16px
16px
0px
0px
none
top right & left : 16px
bottom : right & left : 0px
Title
removable
changeable
Initial state
Typography token
heading 2
none
Color
text HE
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Scrolling State
Typography token
heading 3
none
Color
text HE
none
Overflow handling
truncation : end
none
Max lines
max 1 line
none
Image
unremovable
unchangeable
Type
TDS Image
exposed
Close Action
unremovable
unchangeable
Color
icon HE
none
Source
TDS assets
none
Handle
unremovable
unchangeable
Color
N0
none
Icon action (1 & 2)
removable
changeable
Size
16x16
none
Color
icon HE
none
Icon
tds_ic_share_android
none
Dimension
Behavior
Visibility
Control
Bottom sheets appear when triggered by a user action, such as tapping a button or an icon. They can be dismissed by:
Tapping a button within the bottom sheet
Tapping the blanket
Swiping the header down
Using a close affordance within the bottom sheet’s top bar
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
none
Container Width
full-width
none
Radius
16px
16px
0px
0px
none
top right & left : 16px
bottom : right & left : 0px
Elevation
elevation-01
none
Title
removable
changeable
Initial state
Typography token
heading 2
none
Color
text HE
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Scrolling State
Typography token
heading 3
none
Color
text HE
none
Overflow handling
truncation : end
none
Max lines
max 1 line
none
Close Action
unremovable
Color
icon HE
none
Source
TDS assets
none
Handle
unremovable
Color
N0
none
Link Action
removable
Typography token
body 1 - bold
none
Color
text activity
none
Text overflow
no max line
none
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
none
Container Width
full-width
none
Radius
16px
16px
0px
0px
none
top right & left : 16px
bottom : right & left : 0px
Title
removable
changeable
Initial state
Typography token
heading 2
none
Color
text HE
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Scrolling State
Typography token
heading 3
none
Color
text HE
none
Overflow handling
truncation : end
none
Max lines
max 1 line
none
Image
unremovable
unchangeable
Type
TDS Image
exposed
Close Action
unremovable
unchangeable
Color
icon HE
none
Source
TDS assets
none
Handle
unremovable
unchangeable
Color
N0
none
Icon action (1 & 2)
removable
changeable
Size
16x16
none
Color
icon HE
none
Icon
tds_ic_share_android
none
Dimension
Behavior
Visibility
Control
Bottom sheets appear when triggered by a user action, such as tapping a button or an icon. They can be dismissed by:
Tapping a button within the bottom sheet
Tapping the blanket
Swiping the header down
Using a close affordance within the bottom sheet’s top bar
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
none
Container Width
full-width
none
Radius
16px
16px
0px
0px
none
top right & left : 16px
bottom : right & left : 0px
Elevation
elevation-01
none
Title
removable
changeable
Initial state
Typography token
heading 2
none
Color
text HE
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Scrolling State
Typography token
heading 3
none
Color
text HE
none
Overflow handling
truncation : end
none
Max lines
max 1 line
none
Close Action
unremovable
Color
icon HE
none
Source
TDS assets
none
Handle
unremovable
Color
N0
none
Link Action
removable
Typography token
body 1 - bold
none
Color
text activity
none
Text overflow
no max line
none
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
none
Container Width
full-width
none
Radius
16px
16px
0px
0px
none
top right & left : 16px
bottom : right & left : 0px
Title
removable
changeable
Initial state
Typography token
heading 2
none
Color
text HE
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Scrolling State
Typography token
heading 3
none
Color
text HE
none
Overflow handling
truncation : end
none
Max lines
max 1 line
none
Image
unremovable
unchangeable
Type
TDS Image
exposed
Close Action
unremovable
unchangeable
Color
icon HE
none
Source
TDS assets
none
Handle
unremovable
unchangeable
Color
N0
none
Icon action (1 & 2)
removable
changeable
Size
16x16
none
Color
icon HE
none
Icon
tds_ic_share_android
none
Dimension
Behavior
Visibility
Control
Bottom sheets appear when triggered by a user action, such as tapping a button or an icon. They can be dismissed by:
Tapping a button within the bottom sheet
Tapping the blanket
Swiping the header down
Using a close affordance within the bottom sheet’s top bar
