Building blocks

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

A.
Breadcrumbs

Use the following breadcrumb structure: {Service name} > {Resources type} > {Resource name/ID}

For example: CloudFront > Distributions > SLCCSMWOHOFUY0

B.
Page title

Use the resource name or ID as the title. It should match the last breadcrumb exactly.

C.
Header or global buttons

Use when the actions will affect the entire resource.

For example: Edit or Delete

D.
Details summary container

Place the most relevant information about the resource in this container. To organize content, use key-value pairs.

E.
Related resources container - optional

Use when showing related sections that don't require navigating to a different page.

F.
In-context buttons - optional

Use when the user can perform actions on the respective container's content.

G.
Side navigation

Navigation is open by default on details pages. Learn more about structuring side navigation content on the service navigation pattern page.

General guidelines

Do

  • Use containers to group your content into meaningful sections. Reflect the creation flow in your information grouping.

Don't

  • Don't compromise on the discoverability of your content. Use simple details pages to display self-contained information about the resource.
  • Don't use containers for very long resource lists (more than 10 items). Instead, use a details page as a hub pattern.

Writing guidelines

General writing guidelines

  • Keep labels and descriptions clear and concise.

  • Use parallel sentence structure.

  • Use sentence case for all text. Don’t use title case.

  • Use terminal punctuation (periods, exclamation points, question marks).

  • Use present-tense verbs and active voice wherever possible.

  • Don't use "please," "thank you," or Latinisms such as "e.g.," "i.e.," or "etc."

Breadcrumbs

  • Follow the writing guidelines for breadcrumbs.

  • Don't include "details" in the breadcrumb title.

Buttons

  • Follow the writing guidelines for buttons.

Container

  • Follow the writing guidelines for containers.

  • For the details summary container, use one of the following titles:

    • General configuration

    • {Resource type} settings

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.
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.