Bixby Developer Center

Guides
References

compound-card

optionalmultiple allowed

A card that can contain other Views components, such as another card, text, images, hbox containers, or title-areas. Compound cards enable you to create a more customized card with an array of child component options.

If necessary, you can loop the components within a compound-card content container using a for-each loop:

compound-card {
content {
for-each (x) {
as (y) {
...
}
}
}

Example

layout-macro-def (flower-compound-card) {
params {
param (flower) {
type (Flower)
min (Required) max (One)
}
}
content {
compound-card {
content {
image-card {
aspect-ratio (4:3)
image-url ("#{value(flower.imageUrls[0])}")
title-area {
halign (Start)
slot1 {
text {
value ("#{value(flower.name)}")
style (Title_M)
}
}
}
}
paragraph {
value {
template ("#{value(flower.priceRange)}")
}
style (Detail_L)
}
single-line {
text {
value {
template ("#{value(flower.deliveryType)}")
}
style (Detail_M_Soft)
}
}
divider
single-line {
text {
value ("In Stock")
style (Detail_M_Soft)
}
}
}
}
}
}

View on GitHub

Here is how a compound-card appears on different devices:

MobileWatchTVFridge
compound-cardcompound-cardcompound-cardcompound-card
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Design Considerations

This component is applicable to these moments:

You can find design specifications for this component in the Components Spec download under Design Resources.

Child Keys

chin[deprecated]
optional
This key is deprecated
content
optional
Layout container that holds informational content
on-click
optional
Defines an intent to use when a user clicks on the component