Bixby Developer Center

Guides
References

Result Component Patterns

Use these components and their design specifications within Result Moments within Result Views.

In addition to the components listed, you can also use the universal components to further organize and format your information.

Components for Multiple Results

When displaying multiple results, display each result item in a card. The types of cards, when to use them, and an interactive demo are available below.

Note

These pre-set components are advantageous because they can display information without having to worry about spacing between the components or which groups of components go well together.

Image Card

Use image cards when the image contains priority information requiring the user to make a decision. You can get the best visual impact with high-resolution dynamic images. An image card contains a title-area and an image.

This includes, but is not limited to:

  • Artist posters
  • Food images
  • Product close-ups
  • Beautiful nature scenes

Thumbnail Card

Use thumbnail cards if the image you're adding is only supplemental information. Thumbnail cards work well for lists where images are not the top priority, such as news headlines. Thumbnail cards are particularly useful for highlights.

The thumbnail area can be an illustration or an icon as well. You can use lower resolution images that are often provided by users. This includes, but is not limited to, news icons, portrait images and low-res images.

Title Card

The title-card is a pre-made card for simple text.

An image is not the only way to make the design bold. If your product doesn’t have images, you can also use a title-card and larger text to make the design more impactful. To maintain information hierarchy, limit the text information presented.

Cell Card

A cell-card is best used with an avatar image and a single line of text that contains more informational content. You can only use a a primary and secondary text slot for cell cards, so you can't use title fonts in this card. If you want a primarily text-based card, use a title card instead.

Compound Card

If you can't find a card style that fits your needs, you can create a custom card with compound-card.

Note

A compound card requires a touch event. You should only use the compound card when it takes the user to a new Bixby View for more information.

Components for Single Result

You can use these components for displaying the details of a single item. Examples of components you can use are listed below. You can also use universal components to add any information needed to display the result.

Note

Use cards in these situations only if they don't have an on-click defined because they display as a content area. Areas have the same format and structure as a card, but are not clickable, so they don't have the lightbox background and do not have rounded corners. Cards, on the other hand, should have an action happen when a user taps on it. For more information, see Cards.

Cell Card without an on-click

Create a cell area by using a cell-card without an on-click definition.

Image Carousel

Use an image-carousel to dive further into points of interests, entertainment content, or events.

Users can swipe horizontally through and tap on an image to open the image in fullscreen Lightbox mode, in the gallery view. The image carousel has a fixed ratio and the maximum number of images shown in the carousel is 9. If you have more than 9 images, the last image will render with "See More". If users tap on the "See More", they can view all images in lightbox mode.

Image Carousel Behavior diagram

Image List

Use an image-list for a scrollable horizontal list of images.

If more than 9 images are in the image list, the "See All" slot will render at the end of the image list. If you add an image list to a compound card, the image list displays the first three images.

Image List Behavior diagram

Title Area without an on-click

A title-area is a preset for titled content, with supplemental information organized in a three-slot system. Title areas are primarily used within other cards. If you want to add information in just a title area, use a title-card without an on-click, so that the title card displays as a title area. (See the note in the Components for Single Result.)

Thumbnail Card without an on-click

A thumbnail-card is another premade card that contains a small image and a title-area. If you are displaying a single result and don't need to have the user punch out of Bixby, don't specify a on-click.