This guide describes visual design tips and further explanations on why certain layout patterns are ideal for various situations.
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 components listed in this document. For more information on component specifications, especially for design purposes, see Designing Components.
Multiple results require a list of cards. There are several different styles of Cards from our component library. Find the best card that fits the information hierarchy of your capsule. The following table lists examples of cards you can use.
Image Card | Thumbnail Card | Title Card | Cell Card | Compound Card |
---|---|---|---|---|
This section discusses the various types of single result layouts that you might need to use. You should display a single result in the following situations:
This single result layout is also sometimes called a "Details View".
A details 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 of your layout.
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:
This layout uses these components:
image-carousel
title-area
single-line
(Uses both an icon and a text inline.)paragraph
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 in slot1
of a title-area
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.
Within space resorts, here is a full example:
This layout uses these components:
title-area
(In slot1
, the text style is set to Title_L
, while slot2
has text style set to Detail_L
.)single-line
(Uses both an icon and a text inline, with the style set to Detail_L
)image-list
partitioned
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)}")
}
}
}
}
If you are confirming that an action has been completed and you don't need a receipt, you can create a simple layout to indicate to the user a Done Moment, which is the simplest result view you can create.
This layout uses these components:
single-line
(Uses just an image in Title_XXL
)paragraph
(Uses a Title_M
text style)attribution-link
(Allows users to punch out, in case they 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")
}
This layout is useful for a "done" moment after completing a transactional workflow, such as a purchase.
When gathering input from a user, there are several ways to set up your input view.
Selection layouts are made using the selection-of
key in the input view. Within this list, you should use a card. For more information on the specific cards within a selection layout, see Selection Components.
There are many options to use in a Confirmation Moment, but the key points are this:
cell-card
without an on-click
, title-area
, single-line
, partitioned
image
, single-line
section
, hbox
and vbox
image-card
, thumbnail-card
, title-card
, cell-card
, compound-card
input-cell
or split-input-cell
Within space resorts, here is a full example:
This layout uses these components:
image-card
split-input-cell
and input-cell
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
)single-line
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{
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)
}
}
}