Building blocks

A
G
C
B
D
E
F
A
G
B
C
D
E
F

A.
Breadcrumbs

Follow the guidelines for details page.

B.
Page title

Follow the guidelines for details page.

C.
Global buttons

Follow the guidelines for details page.

D.
Details summary container - optional

  • Follow the guidelines for details page.

  • For a details page with tabs, this section serves as a summary that is always visible when users switch between the tabs.

  • Use it to display important information that applies to tasks in all the tabs.

E.
Tabs

  • Use tabs to organize information about the resource into mutually exclusive, meaningful content groups.

  • Follow this rule: one tab, one task.

  • Use tabs to group similar content.

  • Adjust the sections in tabs to fit the content. Content sections in tabs can have different lengths.

  • Use multiple containers in content sections to further organize content, as needed.

  • Arrange the tabs in a logical order: start with the details of the resource, followed by the most frequently accessed information type that supports user tasks.

  • Examples of content that can be grouped into sections in a single tab: logs, charts, and data visualization for monitoring, key-value pairs, and descriptions.

F.
In context buttons - optional

Use when users can perform contextual actions on the page of the tab.

G.
Side navigation

Follow the guidelines for details page.

General guidelines

Do

  • Use tabs only on details pages.
  • Use tabs to organize complex or lengthy content and user tasks into independent, self-contained categories.
  • Use tabs to organize discrete but related user tasks.

Don't

  • Don't use tabs for hubs, navigation, steps, or containers that link the users to other pages. Instead use the details page as a hub pattern.
  • Don't use service names as tabs labels (for example: use "Monitoring" or "Graphs" instead of "CloudWatch").
  • Don't introduce tabs if you can group your content into meaningful sections on a Details page. The number of sections is not an indicator of whether to use tabs.
  • Don't use tabs if users need to compare or access information in each tab simultaneously.
  • Don't use this pattern if content discoverability is more important than saving space. Prefer a simple details page.
  • Don't disable tabs. All content should always be accessible.
  • Don't use more than seven tabs.

Writing guidelines

Breadcrumbs, buttons and containers

Follow the guidelines for details page.

Tabs

Follow the general writing guidelines for tabs.

Related patterns

On a resource details page, users can view the details of a resource and, when relevant, any related resources.
With the details page as a hub pattern, users can view the details about a resource and a preview of related resources. Use the hub for resources that have large and complex data sets.
With tabs, users can switch between different categories of information in the same view.