Building blocks

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

A.
Breadcrumbs

Follow the guidelines for the details page.

B.
Page title

Follow the guidelines for the details page.

C.
Global buttons

Follow the guidelines for the details page.

D.
Details summary container

Follow the guidelines for the details page.

E.
Container

Use containers to preview a set of related data. For each container, we recommend that you show only the first five items from the full list of related resources.

For example, you could group the following types of content into containers: errors, cache behaviors, security groups, logs, billing summary, or more than three graphs or charts.

F.
View all resources link

In the footer of each container, include a link with the following text: "View all {resource type}"
For example: View all logs

Users can choose this link to navigate to a new page to view the full set of related resources. Use the normal link component.

G.
In-context buttons

Use when users can perform actions on the related resources in the container.

For example: Edit, Delete, and Create.

H.
Side navigation

Follow the guidelines for the details page.

General guidelines

Do

  • Use containers to provide a functional preview of the first five items from the related resources page.
  • Use details as a hub to display the relation and dependencies of resources, while allowing users to navigate to the full set of resources.
  • When using this pattern, adapt the breadcrumbs on the view resources page to reflect the complete path.

Don't

  • Although the resources displayed in the container are just a subset, allow your users to take action on them. Containers should be fully interactive.

Writing guidelines

General, buttons, and containers

Breadcrumbs

  • Follow the guidelines for the details page.

  • For the related view resources page, use the following breadcrumb structure: {Service name} > {Resources type} > {Resource name/ID} > {Related resources}.

    • For example: Cloudscape example service > Instances > SLCCSMWOHOFUY0 > Logs

View resources link

  • Follow the writing guidelines for links.

  • Don't use terminal punctuation.

  • Use this format: View all {resource type}

    • For example: View all logs

Related patterns

On a resource details page, users can view the details of a resource and, when relevant, any related resources.
Users can use tabs to view the configuration details of a single resource on a single page. Users can choose each tab on the page to easily switch between different groupings of information in the same view.
With the container, you can present a group of pieces of content, indicating that the items are related. For example, a table is a type of container.