Bixby Developer Center

Defines an area in the header where an image can appear, as well as additional text in a required title-area. A header is shown above the list of items for a Result List or Selection Prompt and can be used to provide additional context for the moment. For example, when there is a prompt for a ride share, you can display the company logo in an image with the text "Available Rides" to make it clear to the users what they are selecting.

Example

result-view {
  match {
    Hotel (hotel) {
      from-output: ShowHotelsHeaderImageArea
    }
  }

  message {
    template ("Here are hotels with a header using image-area:")
  }

  render {
    if (size(hotel) > 1) {
      list-of (hotel) {
        header {
          image-area {
            aria-label ("Hotels icon")
            aspect-ratio (4:3)
            image-object-fit (Contain)
            image-object-position (Center)
            image-background-color (Transparent)
            image-url (images/icons/hotel-icon.png)
            title-area {
              slot1 {
                text {
                  value ("Hotels")
                  style (Title_S)
                }
              }
              slot2 {
                single-line {
                  text {
                    value ("Hotels for you")
                    style (Detail_L_Soft)
                  }
                }
              }
              slot3 {
                single-line {
                  text {
                    value ("Based on your preferences")
                    style (Detail_M_Soft)
                  }
                }
              }
            }
          }
        }
        where-each (item) {
          macro (hotel-image-card) {
            param (hotel) {
              expression (item)
            }
          }
        }
      }
    }
    else-if (size(hotel) == 1) {
      layout-match (hotel) {
        mode (Details)
      }
    }
  }

  conversation-drivers {
    conversation-driver {
      template ("Show hotels as image cards")
    }
    conversation-driver {
      template ("Show hotels as thumbnail cards")
    }
    conversation-driver {
      template ("Show hotels as compound cards")
    }
  }
}

View master on GitHub

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