Bixby Developer Center

References

thumbnail-card

optionalmultiple allowed

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.

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.

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.

Interactive Demo

Child Keys

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

Examples

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)
}
}
}
}

View master on GitHub

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.