Box Layout

When to use a box layout

Use a box layout to create a strong visual grouping of related components. Each box consists of a title bar and can have a border or shadow. 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. For example, use "ERROR" to tell 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.

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

When to use borders and shadows

Don't use borders and shadows together. Use either borders or shadows, depending on the header content layout background color.

On white page backgrounds, use borders without shadows for the best look.

On transparent page backgrounds, use shadows without borders to help the box layout stand out more.

Use border weight to add emphasis

Use the Border Weight parameter to set the thickness of the box border. Valid values are "Thin" (default), "Medium", and "Thick".

A thicker border draws attention to a specific box, giving that item more visual weight than the content around it.

Use this sparingly. If every box on the page has a thick border, none of them stand out. Use the same border weight for all boxes that serve the same purpose on a page.

Use border color for custom styling

Use the Border Color parameter to style your boxes with custom colors. You can choose a predefined color or set a custom color with a hex code.

Choose a border color that complements the box contents and the rest of the page. Avoid using several different border colors on the same page, as that creates visual clutter.

If the Style parameter is set to "Info" or "Error", the border color matches the style color by default.