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, anyon-clickdefined 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-clickis ignored. - If your cards are in a
list-ofor displaying the details in a result view, and you do not provide anon-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")
}
}
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.