Bixby Developer Center

Guides
References

image-card

optionalmultiple allowed

A card that uses a rich image as the background of the card, alongside information that can be placed in three slots. Each slot can take text or single-line as content. The image used should contain priority information that helps a user make a decision. This is particularly useful in a list.

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.

Visual impact can be achieved with high-resolution dynamic images, including but not limited to artist posters, food images, product close-ups, and beautiful nature scenes. Images should provide enough contrast with light or dark text to clearly display labels and text. The image is cropped and stretched to fit within the card. The overall visual treatment is different from other cards because its background is a gradient. PNG or JPG image types are recommended.

Note

Do try to use images that are at least 300px in width.

If you use a lower resolution image, it will be stretched to fill the width and height. This might cause the image to look pixelated and blurry, like in the following example.

Don't do this!:

Pixelated Media Card

Examples

layout-macro-def (hotel-image-card) {
params {
param (hotel) {
type (Hotel)
min (Required) max (One)
}
}
content {
image-card {
aspect-ratio (4:3)
title-area {
halign (Start)
slot1 {
text {
value ("#{value(hotel.name)}")
style (Title_M)
}
}
slot2 {
single-line {
text {
value ("From #{value(hotel.lowRate)} • #{value(hotel.rating)} stars")
style (Detail_L)
}
}
}
}
image-url ("[#{value(hotel.images[0].url)}]")
}
}
}

View on GitHub

Here is how image-card appears on different devices:

MobileWatchTVFridge
image-cardimage-cardimage-cardimage-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

title-area
required
Layout container to hold a title area, which can contain title text and other detailed text
aria-label
optional
Aria label
aspect-ratio
optional
Determines image card's aspect ratio
bg-color[deprecated]
optional
This key is deprecated
column-size
optional
Determines how many image cards are displayed within a larger list
float-allowed
optional
Boolean
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-url
optional
URL of image to display
on-click
optional
Defines an intent to use when a user clicks on the component
size[deprecated]
optional
This key is deprecated
text-position
optional
Determines the location of the title-area with respect to the image in an image-card