Bixby Developer Center

References

title-area

required

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:

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