Bixby Developer Center

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 demo and the specific child keys listed.

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 master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Design Considerations

This component is applicable during these Moments:

• Selection in an Input Moment
• Result Moment
• Confirmation Moment

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.