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. Make sure to read about the image considerations when choosing images for your image card.

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.

Interactive Demo

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
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 the image
on-click optional	Defines an intent, a URL, or a view-for to use when a user taps on the component
text-position optional	Determines the location of the title-area with respect to the image in an image-card

Image Considerations

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

Additional design information about image card can be found in the Design Guides.

Examples

macro-def (flower-compound-card) {
  params {
    param (flower) {
      type (Flower)
      min (Required) max (One)
    }
  }
  content {
    compound-card {
      content {
        image-card {
          aspect-ratio (4:3)
          image-url ("#{value(flower.imageUrls[0])}")
          title-area {
            halign (Start)
            slot1 {
              text {
                value ("#{value(flower.name)}")
                style (Title_M)
              }
            }
          }
        }
        paragraph {
          value {
            template ("#{value(flower.priceRange)}")
          }
          style (Detail_L)
        }
        single-line {
          text {
            value {
              template ("#{value(flower.deliveryType)}")
            }
            style (Detail_M_Soft)
          }
        }
        divider
        single-line {
          text {
            value ("In Stock")
            style (Detail_M_Soft)
          }
        }
      }
      on-click {
        view-for (flower)
      }
    }
  }
}

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.

Bixby Developer Center