Overview of Layouts

SAIL provides a variety of layouts that allow you to arrange content and controls in each user interface. Selecting the right combination of layouts results in the ideal combination of information density, task efficiency, and an intuitive user experience.

Page Width

When designing for a Sites user experience, select the appropriate page width for the content. Choose the “wide” page width for content-packed UIs such as those with many columns of data. The “narrow” width is appropriate for interfaces such as simple one-column and two-column forms where excessive white space is undesirable. The “standard” width is a good compromise for many common use cases. Keep in mind that the selected width for a Site page applies until the user navigates to another page, even when UI content is updated (such as when drilling into a record instance from a record list). Make sure that the width you choose works well for all content that will be displayed on that page.

Page widths compared: (L-R) full, standard, and narrow

On mobile devices, Sites pages always use the full width of the screen regardless of the configured page width.

The page width for UIs viewed in Tempo is always equivalent to the “standard” setting for Sites pages. Interfaces designed for “wide” or “narrow” Sites pages will automatically adjust to fit within Tempo pages.

Tempo pages always use the full width of the screen when viewed on mobile devices.

When embedding SAIL UIs into another web page, the available width is dictated by the dimensions of the Appian container, which is controlled by the web page designer.

Dashboard and Form

Start each page design by selecting a Dashboard or Form Layout. Use the Form Layout for interfaces that feature submission buttons at the bottom. Use a Dashboard for all other UIs.

Columns and Side-by-Side Layouts

The columns layout and side-by-side layout provide two, complementary techniques for specifying the lateral arrangement of components across the width of your pages.

The columns layout is used for the primary, top-level organization of a page or section.

Columns are used to define the overall content arrangement of this page: the billboard is divided into 2 columns and the main body is divided into 3 columns.

By default, columns split available width into evenly-distributed areas. You may also choose a specified width for certain columns to fix the layout of their contents across different screen and browser window sizes (the other columns, without set widths, will evenly split the remaining space).

The first column of main page content has a specified width of MEDIUM that remains constant even as the page width changes. The remaining columns (2 and 3) automatically adjust by splitting leftover space.

The side-by-side layout is used for fine-grained control over the presentation of small groups of related components.

The orange outlines show all the places in this UI where side-by-side layouts are used to precisely arrange components within the overall columns of the page.

Side-by-side layouts, by default, split available width evenly. You can use weights to assign a greater proportion of space to certain items in a layout.

The “First Name” and “Last Name” side-by-side items each have a weight of 4, so they take up 4x as much of the available width as the “M.I.” field.

Use the minimize width setting to allow a side-by-side item to take up only as much space as is necessary (the remaining items will split any leftover space). This configuration works best for items with a defined width, such as buttons or images with a specified size.

In this example, the MINIMIZE width is applied to the avatar-style image, so it takes up as much space as it needs. The rich text item to the right of the image takes up all of the remaining width. Shrinking the image size from LARGE (top) to SMALL (bottom) shows how the MINIMIZE width automatically adjusts.

Another key difference between columns and side-by-side is the logical relationship between their horizontal layout elements.

Across columns, the meaningful order of components is vertical. That is, users read from top to bottom within each column. The horizontal relationship between column contents is generally incidental (i.e. which field in one column lines up with which field in the next column). This becomes significant when viewing UIs on small form-factor devices (like mobile phones); columns are “flattened” into a vertical stack instead of being alongside each other.

With side-by-side layouts, the meaningful order of components is horizontal. That is, users read from left to right (or right to left, depending on the language) to comprehend the contents.

Column contents flow from top to bottom, while side-by-side items flow horizontally. This example combines columns for “Payment Information” and “Billing Address” with side-by-side layouts for arranging field groups for credit card and address inputs.

NOTE: The current versions of the Appian mobile apps for iOS and Android do not yet support side-by-side layouts. Side-by-side items will be rendered as a vertical stack.

Section Layout

Use section layouts to visually group related parts of interfaces. Each Section has a vertical margin below it to separate it from other page content. An optional heading may be specified to describe the section. Sections may also be configured to allow users to collapse and expand content.

Use section headings to describe the key content groupings on a page.

Wrap content in a section layout to create vertical spacing below it.

Box Layout

Use a box layout to create a strong visual grouping of related components. Each box consists of a title bar and a border. Specify a concise heading in the title bar to describe the box contents.

Use box layouts sparingly as they may make pages look more cluttered. Choose a simpler design if a box layout would not help users to better comprehend the UI.


Don’t nest box layouts within other box layouts as this creates a cluttered interface

Below are some examples of how box layouts may be used effectively.

Highlight key information and controls

Use a box layout to draw attention to particular portions of a form such as important prompts or error messages. Choose the appropriate style for the content of the box (e.g., ERROR for telling the user about a problem).

Designate primary content sections

Use box layouts instead of section layouts to organize and describe main content sections on a page. This approach results in a heavily-compartmentalized page design that may not be appropriate for all use cases. Choose this method if it is very important for users to notice the distinction between content sections. Examples include longer forms where grouping questions into box layouts will help keep users from feeling overwhelmed, and dense dashboards where boxes break information up into digestible chunks.

Avoid mixing box layouts and section headings as that may make it harder for users to understand the structure of the page.

Also avoid mixing box styles for decorative purposes. Styles such as WARN and ERROR are intended to help draw attention to a single box shown in an interface. When using multiple box layouts to organize a page, the STANDARD and ACCENT styles are most appropriate.


Do use the same style for all boxes when they represent page sections (generally, STANDARD and ACCENT styles work best).


Don't mix box styles on the same page.

Billboard Layout

Use a billboard layout to show content overlaid above a decorative background color, photo, or video. The height of the billboard can be configured, as well as the position of the overlay. Choose an overlay background style (dark, light, or transparent) to make sure that content can be easily seen against the selected background. Note that the text color is automatically switched to white for improved legibility when the “dark” style is selected.

A variety of size and style configurations allow designers to tailor how content is displayed on top of a decorative background in the billboard layout.

Review this walk-through of an example user interface to see how layouts come together to create an appealing and usable page.