Bixby Developer Center

Guides
References

cell-card

optionalmultiple allowed

A cell defined as a card, in that a cell-card has rounded corners and a discernible background. Users can tap on a cell-card for more information, unlike a cell-area. 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 that can be clicked on for the full contact profile. Another example would be a cell-card that shows a recipe name and an image, which when clicked on gives the full recipe instructions. If slot1 and slot3 are not specified, slot2 grows to fill the remaining width.

Note

If you define an intent for the on-click key of this card, the intent is not passed in the following situations:

  • If this card is inside of a compound-card. The parent compound-card should be clickable and not individual components within it.
  • If this card is not inside of the Details mode of a view. Specifically, consider these examples:
    • If you have this card in an input-view and are using cards to list options for a user to choose, then clicking the card will choose the card and the defined intent is not passed.
    • If you have this card to list results with list-of, then clicking the card opens the selected item in Details mode and the defined intent is not passed. You cannot get to the Details mode in result-view if the has-details key is set to false.

Cell cards are made up of a three-slot system (slot1, slot2, and slot3), with different cell variations offering different slot combinations. The different slots can only hold certain types of information. The slots will span the cell, depending on how many slots are specified.

  • One-slot cell cards only generate information in slot2.
  • Two-slot cell cards can have information in slot1 and slot2 or slot2 and slot3.
  • Three-slot cell cards have information in slots slot1, slot2, and slot3.

For more information about each slot, see the specific child keys listed.

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) {
has-details (false)
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)}")
}
}
}
}
}
}
}
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 clickable.

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

Child Keys

slot2
required
The middle slot within a cell
on-click
optional
Defines an intent to use when a user clicks 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