Bixby Developer Center

Guides
References

title-card

optionalmultiple allowed

A card that primarily shows text in three slots. Each slot can take text or single-line as content. This card serves as an entry point for more information and is useful when listing information.

Note

Consider the following situations:

  • If you nest a card within a compound-card, any on-click defined is ignored.
  • If your cards are in a selection-of, these cards are tappable with an intent automatically generated, even if you do not provide one. Also, if you have multi-selection enabled, on-click is ignored.
  • If your cards are in a list-of or displaying the details in a result view, and you do not provide an on-click, then the component won't look nor be tappable.

Interactive Demo

Child Keys

title-area
required
Layout container to hold a title area, which can contain title text and other detailed text
on-click
optional
Defines an intent, a URL, or a view-for to use when a user taps on the component

Examples

result-view {
match {
Hotel (hotel) {
from-output: ShowHotelTitleCard
}
}
render {
layout {
section {
content {
title-card {
title-area {
halign (Start)
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")
}
}
}
}
on-click {
intent {
goal: ShowHotelTitleCard
}
}
}
}
}
}
}
conversation-drivers {
conversation-driver ("Show a title area")
}
}

View on GitHub

Here is how title-card appears on different devices:

MobileWatchTVFridge
title-card on Mobiletitle-card on Watchtitle-card on TVtitle-card 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.