Bixby Developer Center

A layout container that displays an image in a smaller format, as well as additional information within a title-area. It is best used in a list when an image is not a top priority, and you are only displaying information, not asking users to make a selection.

The thumbnail-area height grows with the thumbnail image, while the image width stays fixed. The actual fixed width varies with device, as well as which properties you specify for your image, such as image-object-fit, image-aspect-ratio, and image-object-position. Generally, thumbnails should be taller than they are wide.

Interactive Demo

Child Keys

image-url required	URL of the image
title-area required	Layout container to hold a title area, which can contain title text and other detailed text
aria-label optional	Aria label
image-aspect-ratio optional	Aspect ratio of image in thumbnail-card or thumbnail-area
image-background-color optional	Determines the background color of an image
image-object-fit optional	Determines how an image fits within a Bixby Views component
image-object-position optional	Determines the positioning alignment of an image within a Bixby Views component
image-position optional	Position of thumbnail image within thumbnail-card or thumbnail-area
image-shape optional	Determines the shape of the thumbnail image in a thumbnail-card or thumbnail-area
image-size optional	Determines the size of the thumbnail image in a thumbnail-card or thumbnail-area

Examples

result-view {
  match: RideShare (rideShare) {
    from-output: ShowThumbnailAreas
  }

  message {
    template ("Here is a thumbnail area:")
  }

  render {
    if (size(rideShare) > 1) {
      list-of (rideShare) {
        where-each (item) {
          thumbnail-card {
            image-url {
              template ("[#{value(item.images.url)}]")
            }
            title-area {
              halign (Start)
              slot1 {
                text {
                  style (Title_S)
                  value ("#{value(item.productType)}")
                }
              }
              slot2 {
                single-line {
                  text {
                    value ("Arrives in #{value(item.pickupETA)}")
                    style (Detail_L)
                  }
                }
              }
              slot3 {
                single-line {
                  text {
                    value ("#{value(item.priceRange)}")
                    style (Detail_M_Soft)
                  }
                }
              }
            }
          }
        }
      }
    } else-if (size(rideShare) == 1) {
      layout {
        section {
          content {
            thumbnail-area {
              image-url {
                template ("[#{value(rideShare.images.url)}]")
              }
              title-area {
                halign (Start)
                slot1 {
                  text {
                    style (Title_S)
                    value ("#{value(rideShare.productType)}")
                  }
                }
                slot2 {
                  single-line {
                    text {
                      value ("Arrives in #{value(rideShare.pickupETA)}")
                      style (Detail_L)
                    }
                  }
                }
                slot3 {
                  single-line {
                    text {
                      value ("#{value(rideShare.priceRange)}")
                      style (Detail_M_Soft)
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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 to these moments:

• Result Moment
• Confirmation Moment

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