Layout

A layout is an underlying structure that allows you to organize information and lay your content. A well-designed layout has a clear hierarchy and guides users through key pieces of information that serve their goal. Consistent layouts create a predictable experience, letting users build mental models that help them navigate through a series of pages within and across services.

Cloudscape offers a set of basic building blocks that can be used to construct a layout. The display and properties of these elements vary depending on the page structure used to create a given experience. The design system provides 2 page structures: app layout and content layout. App layout is more opinionated about how the elements on the page look and behave, as it was designed to be used in highly productive applications, which coexist with other applications as part of a larger offering. Repeating patterns across them is crucial to reduce cognitive load and maximize efficiency. On the other hand, content layout is less opinionated and offers much more flexibility, so that applications with medium to low interaction use cases that can benefit from a higher level of visual expression can leverage it to build their page layout.

Page structure for productive use cases (app layout)

App layout was designed to serve use cases that require high levels of information density, user interaction, and user focus, supporting users completing their tasks efficiently. It is optimized for scenarios such as productivity tools.

App layout provides the page layout structure for productive use cases that include collapsible side navigation and tools. It consumes 100% of the width and height of the page and contains the following regions:

• Left side region to display a collapsible side navigation (E)

• Right side region, also collapsible, to display the tools and secondary panels (F)

• Top region to display page level notifications such as flashbars (A), and breadcrumbs (B)

• Central region to display the header (C), and the content (D)

App layout provides a simple and light page header to remove any distractions from the data users need to interact with on the page. The header may include a page title, description, and actions. Additionally, it provides predefined content types that determine the default state of the side navigation, as well as maximum content width for some canonical use cases such as table views, dashboards, and forms.

In app layout, the overall width of the content area has different values across breakpoints to ensure a balanced and consistent overall page design. For content-heavy pages such as full-page table and cards, or unique use-cases such as a canvas layout or a full-page task board, the width of the content area should fill 100% of the available space. There should be no max-width on the content area if the use case requires it.

Page structure for expressive use cases (content layout)

Content layout was designed to serve use cases that may benefit from a higher level of visual expression and storytelling, where there’s a low level of interactivity on the page, and information density is not critical. These use cases are usually found in documentation and marketing sites.

Content layout provides the page layout structure for expressive use cases. It consumes 100% of the width and height of the page and contains the following regions:

• Top region to display page level notifications such as flashbars (A), and breadcrumbs (B)

• Header region (C) with styling capabilities in compliance to the hero header pattern (D)

• Content region (E)

Common use cases that benefit from using this component are a) when users land on a service (for example, sign in page, landing page), b) when users browse contents related to a specific offering (for example, category page), and c) when users learn about a product or service (for example, product detail page).

Content layout enables the definition of a background style (solid color, gradient, or image), includes variants with different styles to separates the header from the content (divider or solid background), the option to create a container-header overlap, and the possibility to include a secondary header content. Content layout also allows more freedom to define layout properties such as the maximum content width, and content padding. To learn more about header styling use cases, see hero header pattern guidelines.

Information inside the content area can be distributed using the 12-col grid, along with other components such as column layout for greater control (creating multiple columns inside a component). The content can be displayed using containers, cards, or directly laying the content on the background of the page.

Content layout also includes slots to display page-level notifications and breadcrumbs. It can be used in combination with the app layout component if there’s a need to include side navigation and tools. Because of the flexible layout and the additional header styling capabilities, content layout is the recommended component for use cases such as marketing and documentation applications.

Predictable

Define layouts that support concrete user flows and apply them consistently across your service. Using different page types to display information will help users navigate through your service in a more efficient way.

Consistent

Build layouts following the spacing system and create a coherent visual experience. Use a consistent logic when distributing content vertically down the page to determine the hierarchy and structure of your layout.

Responsive

Our design system works with responsive layouts. Don’t design for specific screen sizes, devices, or resolutions; instead, build for responsive, fluid content in a browser. To learn more about responsive layouts see responsive design to learn more about responsive layouts.