compose-preview Material 3 Design Kit

Cards

6 of 27 components implemented · Open in Figma

Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets
Style=Outlined, Layout=Media & text — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#OutlinedCardSticker Style=Outlined, Layout=Slot — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#OutlinedCardSticker Style=Elevated, Layout=Media & text — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#ElevatedCardSticker Style=Elevated, Layout=Slot — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#ElevatedCardSticker Style=Filled, Layout=Media & text — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#FilledCard Style=Filled, Layout=Slot — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#FilledCard Style=Outlined, Layout=Media & text — no code behind this Style=Outlined, Layout=Slot — no code behind this Style=Elevated, Layout=Media & text — no code behind this Style=Elevated, Layout=Slot — no code behind this Style=Filled, Layout=Media & text — no code behind this Style=Filled, Layout=Slot — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Dragged — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Dragged — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Dragged — no code behind this
6 of 27 components implemented
Style=Outlined, Layout=Media & textcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#OutlinedCardSticker Style=Outlined, Layout=Slotcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#OutlinedCardSticker Style=Elevated, Layout=Media & textcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#ElevatedCardSticker Style=Elevated, Layout=Slotcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#ElevatedCardSticker Style=Filled, Layout=Media & textcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#FilledCard Style=Filled, Layout=Slotcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Cards.kt#FilledCard Style=Outlined, Layout=Media & textno code behind this Style=Outlined, Layout=Slotno code behind this Style=Elevated, Layout=Media & textno code behind this Style=Elevated, Layout=Slotno code behind this Style=Filled, Layout=Media & textno code behind this Style=Filled, Layout=Slotno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Draggedno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Draggedno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Draggedno code behind this