Bixby Developer Center

Guides
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

If you define an intent for the on-click key of this card, the intent is not passed in the following situations:

  • If this card is inside of a compound-card. The parent compound-card should be clickable and not individual components within it.
  • If this card is not inside of the Details mode of a view. Specifically, consider these examples:
    • If you have this card in an input-view and are using cards to list options for a user to choose, then clicking the card will choose the card and the defined intent is not passed.
    • If you have this card to list results with list-of, then clicking the card opens the selected item in Details mode and the defined intent is not passed. You cannot get to the Details mode in result-view if the has-details key is set to false.

The thumbnail height grows with the card, up to 176px. The width, however, stays the same at 92px. Generally, thumbnails should be taller than they are wide.

  • If your thumbnail is square and your text content is long, the image will be vertically centered within the thumbnail container.
  • If your thumbnail is wider than it is tall, the image will fit the width of the thumbnail container and vertically centered. More space will be added to the top and bottom of the image container, which might look unbalanced.
  • If your thumbnail is taller than it is wide, then the image fill the width of the space and the top and bottom will be cropped so that the image is vertically centered.

Examples

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

View on GitHub

Here is how thumbnail-card appears on different devices:

MobileWatchTVFridge
thumbnail-cardthumbnail-cardthumbnail-cardthumbnail-card
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

image-url
required
URL of image to display
title-area
required
Layout container to hold a title area, which can contain title text and other detailed text
aria-label
optional
Aria label
bg-color[deprecated]
optional
This key is deprecated
image-aspect-ratio
optional
Aspect ratio of image in thumbnail card
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 on the thumbnail-card
image-size[deprecated]
optional
This key is deprecated
on-click
optional
Defines an intent to use when a user clicks on the component
size[deprecated]
optional
This key is deprecated