Bixby Developer Center

Guides
References

title-area

optional

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 on GitHub

Here is how title-area appears on different devices:

MobileWatchTVFridge
title-area on Mobiletitle-area on Watchtitle-area on TVtitle-area on Fridge
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

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.