A card that displays an image in a smaller format, as well as additional information within a title-area
. It is best used in a list when an image is not a top priority.
Consider the following situations:
compound-card
, any on-click
defined is ignored.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.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.The thumbnail-card
height grows with the thumbnail image, while the image width stays fixed. The actual fixed width varies with device, as well as which properties you specify for your image, such as image-object-fit
, image-aspect-ratio
, and image-object-position
. Generally, thumbnails should be taller than they are wide.
image-url required | URL of the image |
title-area required | Layout container to hold a title area, which can contain title text and other detailed text |
aria-label optional | Aria label |
image-aspect-ratio optional | Aspect ratio of image in thumbnail-card or thumbnail-area |
image-background-color optional | Determines the background color of an image |
image-object-fit optional | Determines how an image fits within a Bixby Views component |
image-object-position optional | Determines the positioning alignment of an image within a Bixby Views component |
image-position optional | Position of thumbnail image within thumbnail-card or thumbnail-area |
image-shape optional | Determines the shape of the thumbnail image in a thumbnail-card or thumbnail-area |
image-size optional | Determines the size of the thumbnail image in a thumbnail-card or thumbnail-area |
on-click optional | Defines an intent, a URL, or a view-for to use when a user taps on the component |
macro-def (rideshare-thumbnail-card) {
params {
param (rideShare) {
type (RideShare)
min (Required) max (One)
}
}
content {
thumbnail-card {
title-area {
halign (Start)
slot1 {
text {
style (Title_S)
value ("#{value(rideShare.productType)}")
}
}
slot2 {
single-line {
text {
value ("Arrives in #{value(rideShare.pickupETA)}")
style (Detail_L)
}
}
}
slot3 {
single-line {
text {
value ("#{value(rideShare.priceRange)}")
style (Detail_M_Soft)
}
}
}
}
image-url {
template ("[#{value(rideShare.images.url)}]")
}
image-position (End)
on-click {
view-for (rideShare)
}
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
This component is applicable to these moments:
You can find design specifications for this component in the Components Spec download under Design Resources.