Bixby Developer Center

Guides
References

title-area

optionalmultiple allowed

Layout container to hold a title area, which can contain title text and other detailed text. Each title-area can contain up to three slots: slot1, slot2, and slot3. Recommendations for each slot are in the corresponding reference page and in the diagram below:

Title Area Slots

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-areatitle-areatitle-areatitle-area
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.

Child Keys

halign
optional
Horizontal alignment
hAlign[deprecated]
optional
This key is deprecated
slot1
optional
Top slot in title-area
slot2
optional
Middle slot in title-area
slot3
optional
Bottom slot in title-area