Bixby Developer Center

Guides

Components and Layout Patterns

This topic describes visual design tips and further explanations on why certain components and layout patterns are ideal for various situations.

Note

For more information on the various child keys used within the code sample, such as the image-object-fit key for an image in a thumbnail card, see the reference pages for the various components listed in this document. For more information on component specifications, especially for design purposes, see Components Spec download under Design Resources.

Multiple Results

Multiple results require a list of cards. We have 5 different styles of Cards from our component library. Find the best card that fits the information hierarchy of your capsule.

image-card v1image-card v2thumbnail-cardtitle-cardcell-card
image-cardimage-cardthumbnail-cardtitle-cardcell-card

For the image-card, v1 sets the text-position to Below while v2 sets it to Overlay.

Image Card

Image cards are used when the image contains priority information requiring the user to make a decision. Visual impact can be achieved with high-resolution dynamic images.

This includes, but is not limited to:

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

Text position BelowText position Overlay
image-card v1image-card v2

Example 1: Below

image-card v1

image-card {
text-position (Below)
image-background-color (White)
image-object-fit (Contain)
aspect-ratio (16:9)
image-url {
template ("[#{value (spaceResort.images[0].url)}]")
}
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa")
}
}
}
}
}
Example 2: Overlay

image-card v2

image-card {
text-position (Overlay)
image-background-color (White)
image-object-fit (Contain)
aspect-ratio (1:1)
image-url {
template ("[#{value(spaceResort.images[0].url)}]")
}
title-area {
slot1 {
text {
value ("#{value(spaceResort.name)}")
style (Title_L)
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa")
}
}
}
}
}

Thumbnail Card

Thumbnail cards are good if the image you're adding is only supplemental information. This works well for lists where images are not the top priority, such as News headlines. The thumbnail area can be an illustration or an icon as well. It’s fine to use low resolution images that are often provided by users.

This includes, but is not limited to, news icons, portrait images and low-res images.

Right ThumbnailLeft Thumbnail
thumbnail-card v1thumbnail-card v2

Example 1: Image on Right

thumbnail-card v1

thumbnail-card {
image-aspect-ratio (1:1)
image-object-fit (Cover)
image-position (End)
image-url {
template ("images/planet.png")
}
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa")
}
}
}
}
}
Example 2: Image on Left

thumbnail-card v2

thumbnail-card {
image-aspect-ratio (3:4)
image-object-fit (Cover)
image-position (Start)
image-url {
template ("images/planet.png")
}
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa")
}
}
}
}
}

Title Card

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, make sure to limit the text information presented.

Left AlignedCenter Aligned
title-card v1title-card v2

Example 1: Left Aligned

title-card v1

title-card {
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa")
}
}
}
}
}
Example 2: Center Aligned

title-card v2

 title-card {
title-area {
halign (Center)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa")
}
}
}
}
}

Cell Card

A cell-card us best used with an avatar image and a single line of text that contains more informational content.

cell-card

cell-card {
slot1 {
image {
url {
template ("images/planet.png")
}
shape (Circle)
}
slot2 {
content {
order (SecondaryPrimary)
primary {
template ("Venus Space Spa")
}
secondary {
template ("Venus • 0.904g")
}
}
}
}

Compound Card

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

Example 1: Compound Card

compound-card

compound-card {
content {
single-line {
image {
background-color (Transparent)
shape (Circle)
style (Title_XXL)
url {
template ("images/planet.png")
}
}
}
single-line {
text {
value {
template ("Venus Space Spa")
}
}
}
paragraph {
value {
template ("It's no wonder the most romantic resort is on the planet named after the Roman goddess of love and beauty.")
}
}
}
}
Example 2: Comparison Compound Card

This layout also uses a compound-card. For example, sports tournaments can use this card to display scoring.

compound-card

compound-card {
content {
hbox {
content {
vbox {
halign (Center)
content {
single-line {
image {
background-color (Transparent)
shape (Circle)
style (Title_XXL)
url {
template ("images/Earth.png")
}
}
}
single-line {
text {
value {
template ("Earth")
}
style (Title_XS)
}
}
single-line {
text {
value {
template ("Depart")
}
style (Detail_M)
}
}
}
}
vbox {
halign (Center)
valign (Bottom)
content {
single-line {
image {
background-color (Transparent)
shape (Square)
url {
template ("images/spaceShip.png")
}
}
}
}
}
vbox {
halign (Center)
content {
single-line {
image {
background-color (Transparent)
shape (Circle)
style (Title_XXL)
url {
template ("images/Venus.png")
}
}
}
single-line {
text {
value {
template ("Venus")
}
style (Title_XS)
}
}
single-line {
text {
value {
template ("Arrive")
}
style (Detail_M)
}
}
}
}
}
}
}
}

Single Result

This section discusses the various types of single result layouts that you might need to use.

Detail Layout

A detail layout shows the details of a particular item. For space resorts, that might be the details of a specific space resort.

If images are a top priority piece of information, use an image-carousel at the very top.

Detail Layout with Image Carousel

Images are useful to see details of your product, which can further help the user make a decision. Other examples might include hotel rooms or restaurant interiors. Use beautiful high-resolution images to make a dynamic impact, such as artist posters, delicious food, close-ups of your product, or nature imagery.

Within space resorts, here is a full example:

Detail Layout with Image Carousel

This layout uses these components:

  1. image-carousel
  2. title-area
  3. single-line (Uses both an icon and a text inline.)
  4. paragraph
  5. thumbnail-card in a separate section (This lists the rooms.)

Here is the code:

//header
section {
content{
image-card {
text-position (Below)
image-background-color (White)
image-object-fit (Contain)
aspect-ratio (16:9)
image-url {
template ("images/planet.jpg")
}
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa | Swimming Pool")
}
}
}
}
}
single-line {
image {
url {
template ("images/starRating.png")
}
}
text {
value {
template ("(280 reviews)")
}
}
}
}
}

// Rooms list
section {
title{
template("Rooms")
}
content {
for-each (roomList) {
as (room){
thumbnail-card {
image-aspect-ratio (9:16)
image-object-fit (Cover)
image-position (End)
image-url {
template ("images/planet.png")
}
title-area {
halign (Start)
slot1 {
text {
value {
template ("#{value (room.price)}")
}
}
}
slot2 {
paragraph {
value {
template ("Room #{i}")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa | Swimming Pool")
}
}
}
}
}
}
}
}
}

If image aren't a top priority, you can still make a bold design with text.

Using large images is not the only way to make the design bold. Use larger text for the title-area in slot1 to make the design more impactful. As a best practice, you can add an image-list under a nice title in your layout. The image list can mask and show three images. If you use this layout with compound-card, you can create a customized card.

Detail Layout with Image Carousel

Within space resorts, here is a full example:

Detail Layout with Image List

This layout uses these components:

  1. title-area (In slot1, the text style is set to Title_L, while slot2 has text style set to Detail_L.)
  2. single-line (Uses both an icon and a text inline, with the style set to Detail_L)
  3. image-list
  4. partitioned (This lists the room amenities)
  5. paragraph in a separate section (This lists the rooms)

Here is the code:

section {
content{
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
style (Title_L)
}
}
slot2 {
paragraph {
value {
t emplate ("Venus • 0.904g")
}
style (Detail_L)
}
}
slot3 {
single-line {
image {
url {
template ("images/starRating.png")
}
style (Detail_L)
}
text {
value {
template ("(280 reviews)")
}
style (Detail_L)
}
}
}
}
image-list {
images (resort.images)
}
partitioned {
content {
for-each (resort.features) {
as (feature) {
paragraph {
value {
template ("#{value (feature.description)}")
}
}
}
}
}
}
}
}
section {
title{
template("About our resort")
}
content {
paragraph {
value {
template ("#{value (resort.description)}")
}
}
}
}

Done Moment Layout

If you are confirming an action has been completed and you don't need a receipt, you can create a simple layout to the user to indicate a Done Moment, which is the simplest result view you can create.

Detail Layout with Image List

This layout uses these components:

  1. single-line (Uses just an image in Title_XXL)
  2. paragraph (Uses a Title_M text style)
  3. attribution-link (To punch out, in case users want more information)

Here is the code:

single-line {
image {
url {
template ("images/planet.png")
}
}
}
paragraph {
value {
template ("It is currently....")
}
style (Title_M)
}
attribution-link {
label {
template ("More on CP name")
}
url ("https://bixbydevelopers.com/dev/docs/sample-capsules/walkthroughs/space-resorts")
}

Receipt Layout

This layout is useful for a "done" moment after completing a transactional workflow, such as a purchase.

Receipt 1 Receipt 2

Code TBD

Getting Inputs

If you need information from the user, you can use one of the pickers. If you want to just provide the user a selection of items to choose from, tailor the selection layout.

Selection Layouts

Selection layouts are made using the selection-of key in the input view. Within this list, you should use a card.

Cell CardTitle CardCompound Card
Cell CardTitle CardCompound Card
Cell Card Example
//cell-card
selection-of (roomList){
where-each (room) {
cell-card {
slot1 {
image {
url {
template ("#{value (room.image)}")
}
shape (Circle)
}
}
slot2 {
content {
order (SecondaryPrimary)
primary {
template ("#{value (room.name)}")
}
secondary {
template ("#{value (room.gravity)}")
}
}
}
}
}
}
Title Card Example
//title-card
selection-of (roomList){
where-each (room) {
title-card {
title-area {
halign (Start)
slot1 {
text {
value {
template ("#{value (room.price)}")
}
}
}
slot2 {
paragraph {
value {
template ("#{value (room.gravity)}")
}
}
}
slot3 {
paragraph {
value {
template ("#{value (room.window)}")
}
}
}
}
}
}
}
Compound Card Example
//compound-card
selection-of (roomList){
where-each (room) {
compound-card {
content {
title-area {
halign (Start)
slot1 {
text {
value {
template ("#{value (room.price)}")
}
}
}
slot2 {
paragraph {
value {
template ("#{value (room.gravity)}")
}
}
}
slot3 {
paragraph {
value {
template ("#{value (room.window)}")
}
}
}
}
image-list {
images (room.images)
}
}
}
}
}

Confirming

There are many options to use in a Confirmation Moment, but the key points are this:

Within space resorts, here is a full example:

Confirmation Layout

This layout uses these components:

  1. image-card
  2. split-input-cell and input-cell
  3. payment-selection
  4. hbox with several vbox components (Using the text style Detail_M_Soft for most items, except for the line you want to stand out ("Total to pay now:"), which uses the text style Detail_L)
  5. single-line
  6. paragraph (Using Legal as the text style)

Here is the code:

section {
content{
image-card {
text-position (Below)
image-background-color (White)
image-object-fit (Contain)
aspect-ratio (16:9)
image-url {
template ("images/planet.jpg")
}
title-area {
halign (Start)
slot1 {
text {
value {
template ("Venus Space Spa")
}
}
}
slot2 {
paragraph {
value {
template ("Venus • 0.904g")
}
}
}
slot3 {
paragraph {
value {
template ("Cryo Spa | Swimming Pool")
}
}
}
}
}
split-input-cell {
left {
input-cell {
label {
template ("Room")
}
value {
template ("Room 1")
}
}
}
right {
input-cell {
label {
template ("Guests")
}
value {
template ("2")
}
}
}
}
input-cell {
label {
template ("Stay Dates")
}
value {
template ("September 11 - 16")
}
}
}
}

section {
title {
template ("Contact Information")
}
content {
input-cell {
label {
template ("Name")
}
value {
template ("[#{value(cart.event.boxOffice.recipient.firstName)}][ #{value(cart.event.boxOffice.recipient.lastName)}]")
}
}
input-cell {
label {
template ("Phone number")
}
value {
template ("[#{value(cart.event.boxOffice.recipient.phoneNumber)}]")
}
}
input-cell {
label {
template ("Email")
}
value {
template ("[#{value(cart.event.boxOffice.recipient.emailAddress)}]")
}
}
}
}

section {
content{
payment-selection
}
}

section {
content{
hbox {
content {
vbox {
halign (Start)
content {
text {
value {
template ("Room")
}
style (Detail_M_Soft)
}
text {
value {
template ("Taxes and Fees")
}
style (Detail_M_Soft)
}
text {
value {
template ("Booking Fee")
}
style (Detail_M_Soft)
}
text {
value {
template ("Total to pay now:")
}
style (Detail_L)
}
text {
value {
template ("Mandatory fees collected at hotel")
}
style (Detail_M_Soft)
}
}
}
vbox {
halign (End)
content {
text {
value {
template ("[#{value (cost.room)}]")
}
style (Detail_M_Soft)
}
text {
value {
template ("[#{value (cost.fee)}]")
}
style (Detail_M_Soft)
}
text {
value {
template ("[#{value (cost.booking)}]")
}
style (Detail_M_Soft)
}
text {
value {
template ("[#{value (cost.grandTotal)}]")
}
style (Detail_L)
}
text {
value {
template ("[#{value (cost.feeAtHotel)}]")
}
style (Detail_M_Soft)
}
}
}
}
}
}
}

section {
title{
template("Reservation Terms")
}
content{
paragraph{
value {
template ("#{value (terms)}")
}
style (Legal)
}
}
}