Default container

Default containers often hold dashboard widgets, charts, or other information on a page. These tiles contain discrete widgets and content. They're most often used to segment information on a dashboard or other landing page.

A default container should not be nested inside another container and, should only appear on a page with a background of #efefef. If a header is needed otherwise, use an alternate, nested or other type of container.

Default container example

Last updated: Mar 2017

Action container

The user's main work area on any screen should appear inside an action container. This container typically includes the name of the assignment, deadline and the task owner.

The background of this container is blue, in order to call attention to the task that the user needs to complete. This color distinction separates the task from other information on screen, keeping the user focused, while allowing them to reference the surrounding data easily.

Buttons related to submitting or canceling this action should appear in the bottom right-hand corner of the action container.

Case edit action container example

Action containers may be different depending on the context. The Customer Service application uses a slightly different version of the action container — the header of the action container is white, and is surrounded by a grey-blue border. Treating it in this way captures the attention of the user, while maintaining the same basic structure.

Customer service action container example

Last updated: Mar 2017

Nested container

Nested containers come in a variety of styles and apply to many use-cases. One property they all share is their transparent background, allowing them to be nested within default tiles or action containers in order to create hierarchy.

Last updated: Mar 2017

Next: Modals and overlays