Component

Material Design 3 carousel tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Enabled
Outline
Outline tokens
TokenValue
Carousel item outline colormd.comp.carousel-item.with-outline.outline.color
#79747E
Carousel item outline widthmd.comp.carousel-item.with-outline.outline.width
1dp
Container
Container tokens
TokenValue
Carousel item container colormd.comp.carousel-item.container.color
#FEF7FF
Carousel item container elevationmd.comp.carousel-item.container.elevation
0dp
Carousel item container shadow colormd.comp.carousel-item.container.shadow-color
#000000
Carousel item container surface tint layer colormd.comp.carousel-item.container.surface-tint-layer.color
#6750A4
Carousel item container shapemd.comp.carousel-item.container.shape
28dp
Hover
Container
Container tokens
TokenValue
Carousel item hover container elevationmd.comp.carousel-item.hover.container.elevation
1dp
State layer
State layer tokens
TokenValue
Carousel item hover state layer colormd.comp.carousel-item.hover.state-layer.color
#1D1B20
Carousel item hover state layer opacitymd.comp.carousel-item.hover.state-layer.opacity
8%
Outline
Outline tokens
TokenValue
Carousel item hover outline colormd.comp.carousel-item.with-outline.hover.outline.color
#79747E
Focus
Focus indicator
Focus indicator tokens
TokenValue
Carousel item focus indicator colormd.comp.carousel-item.focus.indicator.color
#625B71
Carousel item focus indicator thicknessmd.comp.carousel-item.focus.indicator.thickness
3dp
Carousel focus indicator offsetmd.comp.carousel-item.focus.indicator.outline.offset
2dp
Outline
Outline tokens
TokenValue
Carousel item focus outline colormd.comp.carousel-item.with-outline.focus.outline.color
#1D1B20
Container
Container tokens
TokenValue
Carousel item focus container elevationmd.comp.carousel-item.focus.container.elevation
0dp
State layer
State layer tokens
TokenValue
Carousel item focus state layer colormd.comp.carousel-item.focus.state-layer.color
#1D1B20
Carousel item focus state layer opacitymd.comp.carousel-item.focus.state-layer.opacity
10%
Pressed (ripple)
Outline
Outline tokens
TokenValue
Carousel item pressed outline colormd.comp.carousel-item.with-outline.pressed.outline.color
#79747E
Container
Container tokens
TokenValue
Carousel item pressed container elevationmd.comp.carousel-item.pressed.container.elevation
0dp
State layer
State layer tokens
TokenValue
Carousel item pressed state layer colormd.comp.carousel-item.pressed.state-layer.color
#1D1B20
Carousel item pressed state layer opacitymd.comp.carousel-item.pressed.state-layer.opacity
10%
Disabled
Container
Container tokens
TokenValue
Carousel item disabled container elevationmd.comp.carousel-item.disabled.container.elevation
0dp
Carousel item disabled container opacitymd.comp.carousel-item.disabled.container.opacity
38%
Carousel item disabled container colormd.comp.carousel-item.disabled.container.color
#FEF7FF
Outline
Outline tokens
TokenValue
Carousel item disabled outline colormd.comp.carousel-item.with-outline.disabled.outline.color
#79747E
Carousel item disabled outline opacitymd.comp.carousel-item.with-outline.disabled.outline.opacity
12%