Bixby Developer Center

Layout container to hold a title area, which can contain title text and other detailed text. Each title-area can contain up to five slots: slot1, slot2, slot3, slot4, and slot5. You should prioritize putting information in the first slots (slot1, slot2, and if needed, slot3) before using lower level slots (slot4 and slot5).

Interactive Demo

Child Keys

halign optional	Horizontal alignment
slot1 optional	Top slot in title-area
slot2 optional	One of the middle slots in title-area
slot3 optional	One of the middle slots in title-area
slot4 optional	Bottom slot in title-area
slot5 optional	Bottom-most slot in title-area

Examples

result-view {
  match { 
    Hotel (hotel) {
      from-output: ShowHotelTitleArea
    }
  }
  render {
    layout {
      section {
        content {
          title-area {
            slot1 {
              text {
                style (Title_S)
                value ("#{value(hotel.name)}")
              }
            }
            slot2 {
              single-line {
                text {
                  style (Title_XS)
                  value ("From #{value(hotel.lowRate)}")
                }
              }
            }
            slot3 {
              single-line {
                text {
                  style (Detail_M_Soft)
                  value ("#{value(hotel.rating)} stars")
                }
              }
            }
          }
        }
      }
    }
  }
  conversation-drivers {
    conversation-driver ("Show a title 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 to these moments:

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

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