compose-preview M3 Wear OS Apps Design Kit

Cards

7 of 47 components implemented · Open in Figma

Our renders Design spec Diff %

Outline every component Only what we don't implement Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets

7 of 47 components implemented

Style=Tonalcatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Placeholders.kt#CardPlaceholder Style=Outlineno code behind this Layout type=App Card, Style=Tonal, Content type=Text, Interactive=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Cards.kt#ApplicationCard Layout type=Title Card + Icon, Style=Tonal, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Tonal, Content type=Text, Interactive=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Cards.kt#PlainCard Layout type=Title Card 2, Style=Tonal, Content type=Text, Interactive=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Cards.kt#TitledCard Layout type=Title Card 3, Style=Tonal, Content type=Text, Interactive=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Cards.kt#TitledCard Layout type=App Card, Style=Background Image, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Background Image, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Background Image, Content type=Text, Interactive=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Cards.kt#PlainCard Layout type=Title Card 2, Style=Background Image, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Background Image, Content type=Text, Interactive=Yesno code behind this Layout type=App Card, Style=Tonal, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Tonal, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Tonal, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card 2, Style=Tonal, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Tonal, Content type=Image, Interactive=Yesno code behind this Layout type=App Card, Style=Tonal, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Tonal, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Tonal, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card 2, Style=Tonal, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Tonal, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=App Card, Style=Tonal, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Tonal, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Tonal, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card 2, Style=Tonal, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Tonal, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=App Card, Style=Outline, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Outline, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Outline, Content type=Text, Interactive=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/Cards.kt#OutlineCard Layout type=Title Card 2, Style=Outline, Content type=Text, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Outline, Content type=Text, Interactive=Yesno code behind this Layout type=App Card, Style=Outline, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Outline, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Outline, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card 2, Style=Outline, Content type=Image, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Outline, Content type=Image, Interactive=Yesno code behind this Layout type=App Card, Style=Outline, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Outline, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Outline, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card 2, Style=Outline, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Outline, Content type=Gallery 1, Interactive=Yesno code behind this Layout type=App Card, Style=Outline, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card + Icon, Style=Outline, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card 1, Style=Outline, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card 2, Style=Outline, Content type=Gallery 2, Interactive=Yesno code behind this Layout type=Title Card 3, Style=Outline, Content type=Gallery 2, Interactive=Yesno code behind this