Side By Side Layout

SAIL Design System guidance available for Side by Side Layout When you want to split the available space evenly to create a visual balance in your design, use the side by side layout.

About the side by side layout

Displays components alongside each other.

See Columns vs. Side by Side for guidance on when to use this component versus a columns layout.

Where to use the side by side layout

Use a!sideBySideLayout() in the following components:

• a!formLayout(): contents parameter.
• a!headerContentLayout(): contents parameter, or in the header parameter (inside a!cardLayout()).
• a!pane(): contents parameter (inside a!paneLayout()).
• a!wizardStep(): contents parameter (inside a!wizardLayout()).
• a!boxLayout(): contents parameter.
• a!cardLayout(): contents parameter.
• a!cardGroupLayout(): cards parameter (inside a!cardLayout()).
• a!columnLayout(): contents parameter (inside a!columnsLayout()).
• a!sectionLayout(): contents parameter.
• a!sideBySideItem(): item parameter (inside another a!sideBySideLayout())
• a!tabItem(): contents parameter (inside a!tabLayout()).
• a!chatMessage(): messageContent parameter (inside a!chatField()).
• a!sidebarTemplate(): additionalContents parameter (inside a!formLayout() or a!wizardLayout()).
• a!barOverlay(): contents parameter (inside a!billboardLayout()).
• a!columnOverlay(): contents parameter (inside a!billboardLayout()).
• a!fullOverlay(): contents parameter (inside a!billboardLayout()).

You can't use a!sideBySideLayout() in a read-only grid (a!gridField()) or editable grid (a!gridLayout()).

Supported components

The items parameter of a!sideBySideLayout() supports a!sideBySideItem().

Parameters

a!sideBySideLayout( items, alignVertical, showWhen, spacing, marginBelow, stackWhen, marginAbove )

Using the side by side layout

The following sections cover important details about the side by side layout.

Using the stackWhen parameter for responsive design

Use the stackWhen parameter to make side by side items stack vertically at specific screen widths. See Responsive Design for guidance on designing interfaces that adapt to different screen sizes.

Width breakpoints for the stackWhen parameter

The stackWhen parameter values use the following pixel ranges to determine their responsive behavior. For example, if the stackWhen parameter for the side by side layout is set to "PHONE" and the screen width is 480 pixels or less, the side by side items will stack.

Examples

The following examples demonstrate the side by side layout.

To experiment with examples, copy and paste the expression into an interface object.

Input fields with relative widths

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a!sideBySideLayout(
  items: {
    a!sideBySideItem(
      width: "4X",
      item: a!textField(
        label: "First Name"
      )
    ),
    a!sideBySideItem(
      item: a!textField(
        label: "M.I."
      )
    ),
    a!sideBySideItem(
      width: "4X",
      item: a!textField(
        label: "Last Name"
      )
    )
  }
)

Minimized width for icon and button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
a!sideBySideLayout(
  alignVertical: "MIDDLE",
  spacing: "DENSE",
  items: {
    a!sideBySideItem(
      width: "MINIMIZE",
      item: a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: a!richTextIcon(
          icon: "user",
          size: "LARGE"
        )
      )
    ),
    a!sideBySideItem(
      item: a!textField(
        labelPosition: "COLLAPSED"
      )
    ),
    a!sideBySideItem(
      width: "MINIMIZE",
      item: a!buttonArrayLayout(
        marginBelow: "NONE",
        buttons: {
          a!buttonWidget(
            label: "Check Availability",
            size: "SMALL",
            style: "OUTLINE",
            color: "SECONDARY"
          )
        }
      )
    )
  }
)

Nested side by side layout and items

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
{
  a!cardLayout(
    contents: {
      a!sideBySideLayout(
        spacing: "STANDARD",
        items: {
          a!sideBySideItem(
            item: {
              a!stampField(
                shape: "SEMI_ROUNDED",
                labelPosition: "COLLAPSED",
                icon: "box-open",
                size: "SMALL"
              )
            },
            width: "MINIMIZE"
          ),
          a!sideBySideItem(
            item: {
              a!sideBySideLayout(
                alignVertical: "MIDDLE",
                items: {
                  a!sideBySideItem(
                    item: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: {
                              "Sprint 2 Deliverables"
                            },
                            size: "MEDIUM",
                            style: {
                              "STRONG"
                            }
                          )
                        }
                      )
                    },
                    width: "MINIMIZE"
                  ),
                  a!sideBySideItem(
                    item: {
                      a!tagField(
                        labelPosition: "COLLAPSED",
                        tags: {
                          a!tagItem(
                            backgroundColor: "#E7F1FF",
                            text: "Ready to Deploy"
                          )
                        }
                      )
                    }
                  )
                }
              ),
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: {
                      "All deliverables for the stories and tickets worked on in Sprint 2"
                    },
                    color: "SECONDARY"
                  )
                }
              )
            }
          )
        },
        alignVertical: "MIDDLE"
      )
    },
    style: "TRANSPARENT",
    shape: "SEMI_ROUNDED"
  )
}

Feature compatibility

Related recipes

The following recipes include usage of the Side By Side Layout.

• Action Banner Pattern (Formatting, Buttons, Rich Text, Cards):

  Use the action banner pattern to display prominent messages that include interactive elements like links or buttons.

• Activity History Pattern (Formatting):

  The Activity History pattern provides a common style and format for displaying an organization's activity measures.

• Build a Wizard with Milestone Navigation (Conditional Display, Validation, Wizards):

  Create a wizard that divides a form into validated steps and uses the milestone component to display progress.

• Cards as Info Pattern (Cards, Formatting, Stamps):

  Use this pattern to display high level summaries of options with icons and descriptions. This pattern uses card layouts with stamp fields and rich text to create visually distinct information cards.

• Cards as List Items Patterns (Choice Components, Images):

  Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

• Configure a Custom Search Box with Smart Search (Grids, Query Data, Records):

  Implement smart search in a custom search box for a read-only grid.

• Connect Document Viewer to an AI Chat Response:

  This pattern illustrates how to connect a!documentViewerField component to an AI chat response.

• Create a Custom Chat Interface:

  Build a custom chat interface by using the cardLayout component to give each message a distinct visual style.

• Document List Pattern (Documents):

  Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.

• Duration Display (Rich Text, Events):

  Use the duration display pattern to show the amount of time in between events in a quick, easy-to-read way.

• Dynamic Inputs (Inputs, Dynamic Links):

  Use the dynamic inputs pattern to allow users to easily add or remove as many values as needed.

• Event Timelines (Timeline, Events):

  Use the event timeline pattern to display a dated list of events and actions in chronological order. This pattern uses a combination of cards, rich text, and user images to show an easy to navigate list of dated events.

• Inline Stats Pattern (Formatting, Rich Text):

  Use this pattern to display data values with icons in a compact, horizontal layout. This pattern uses side by side layouts with rich text display components to create inline statistics.

• Inline Tags for Side-by-Side Layout Pattern (Formatting):

  This pattern shows the best practice for combining tags with standard-sized rich text, or plain text, using a side by side layout.

• KPI Patterns (Formatting):

  The Key Performance Indicator (KPI) patterns provide a common style and format for displaying important performance measures.

• Leaderboard (Looping):

  Use the leaderboard pattern to show a selection of your data in an easy to read ranked display.

• Limit the Number of Rows in a Grid That Can Be Selected (Validation, Grids, Records):

  Limit the number of rows that can be selected to an arbitrary number.

• Navigation Patterns (Conditional Display, Formatting, Navigation):

  Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

• Refresh Data After Executing a Smart Service (Auto-Refresh, Smart Services)
• Trend-Over-Time Report (Charts, Reports):

  This report provides an attractive, interactive design for exploring different series of data over time.

• Upload Multiple Documents and Edit Document Properties (Document Management, Records):

  Build a form that allows users to create a record and upload related documents. Users can edit the document name and add a document description before submitting the form.

• Upload and rename a file (Document Management, Records):

  Allow users to upload and rename a file.

• User List Pattern (Looping):

  The user list pattern retrieves all the users in a specified group and displays them in a single column.

• Year-Over-Year Report (Charts, Reports, Formatting):

  This is a feature-rich, interactive report for sales and profits by products over select periods of time.

Feedback