Bixby Developer Center

Guides
References

cell-card

optionalmultiple allowed

A cell defined as a card. You should use a cell-card when the information you want to display is short and simple, but want the user to tap on it for more information. For example, a cell with basic contact information can be tapped for the full profile. In another example, a cell can show a recipe name and an image, which when tapped shows the full recipe instructions.

Cell cards consist of a three-slot system, with different cell variations offering different slot combinations. For more information, see the child keys listed and the demo below.

Note

Consider the following situations:

  • If you nest a card within a compound-card, any on-click defined is ignored.
  • If your cards are in a selection-of, these cards are tappable with an intent automatically generated, even if you do not provide one. Also, if you have multi-selection enabled, on-click is ignored.
  • If your cards are in a list-of or displaying the details in a result view, and you do not provide an on-click, then the component won't look nor be tappable.

Interactive Demo

Child Keys

slot2
required
The middle slot within a cell
on-click
optional
Defines an intent, a URL, or a view-for to use when a user taps on the component
slot1
optional
The left-most slot within a cell, which can hold a cell-image
slot3
optional
The right-most slot in a cell

Examples

result-view {
match: Flower (flower) {
from-output: ShowFlowerCellCards
}

message {
template ("Here are flowers as cell cards:")
}

render {
if (size(flower) > 1) {
list-of (flower) {
where-each (item) {
cell-card {
slot1 {
image {
url ("#{value(item.imageUrls[0])}")
shape (Square)
}
}
slot2 {
content {
order (PrimarySecondary)
primary ("#{value(item.name)}")
secondary ("#{value(item.priceRange)}")
}
}
on-click {
view-for (item)
}
}
}
}
} else-if (size(flower) == 1) {
layout-match (flower) {
mode (Details)
}
}
}
conversation-drivers {
conversation-driver ("Show a cell area")
}
}

View on GitHub

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

MobileWatchTVFridge
cell-cardcell-cardcell-cardcell-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 during these Moments:

Notice that the background color of each cell card is a different color than the main background color, indicating to the user that the cell card is tappable.

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