components

Bottomsheet

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

components

Bottomsheet

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

components

Bottomsheet

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

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

  1. 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

  1. Close Action

unremovable

Color

icon HE

none

Source

TDS assets

none

  1. Handle

unremovable

Color

N0

none

  1. 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

  1. 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

  1. Image

unremovable

unchangeable

Type

TDS Image

exposed

  1. Close Action

unremovable

unchangeable

Color

icon HE

none

Source

TDS assets

none

  1. Handle

unremovable

unchangeable

Color

N0

none

  1. 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

  1. 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

  1. Close Action

unremovable

Color

icon HE

none

Source

TDS assets

none

  1. Handle

unremovable

Color

N0

none

  1. 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

  1. 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

  1. Image

unremovable

unchangeable

Type

TDS Image

exposed

  1. Close Action

unremovable

unchangeable

Color

icon HE

none

Source

TDS assets

none

  1. Handle

unremovable

unchangeable

Color

N0

none

  1. 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

  1. 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

  1. Close Action

unremovable

Color

icon HE

none

Source

TDS assets

none

  1. Handle

unremovable

Color

N0

none

  1. 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

  1. 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

  1. Image

unremovable

unchangeable

Type

TDS Image

exposed

  1. Close Action

unremovable

unchangeable

Color

icon HE

none

Source

TDS assets

none

  1. Handle

unremovable

unchangeable

Color

N0

none

  1. 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

design@tiket.com

© Passport tiketdesign 2024. All Right Reserved.

design@tiket.com

© Passport tiketdesign 2024.
All Right Reserved.