Bixby Developer Center



optionalmultiple allowed

A cell-area defines a cell within a layout, with no background or border (which is partially what differentiates it from a cell-card). A cell-area can be used individually in page layouts or within selection prompt lists. A cell-area is commonly used to represent subjects with simple information that does not need to be represented as cards. For example, you can use a cell-area to display a contact's picture, name, and phone number. You should use cell-area when the information you want to display is short and simple, such as phone contacts or recipe names.

Cell-areas 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

The middle slot within a cell
The left-most slot within a cell, which can hold a cell-image
The right-most slot in a cell


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

message {
template ("Here is a flower as a cell area:")

render {
list-of (flower) {
where-each (item) {
cell-card {
slot1 {
image {
url ("#{value(item.imageUrls[0])}")
shape (Square)
slot2 {
content {
order (PrimarySecondary)
primary ("#{value(}")
secondary ("#{value(item.priceRange)}")
conversation-drivers {
conversation-driver ("Show a cell card")

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:

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