Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • Resource management: Resource details
    • Details page
    1. Cloudscape Design System
    2. Patterns
    3. Resource management: Resource details
    4. Details page

    Details page

    On a details page, users can view at a glance all the available information about a single resource.

    Published: May 6, 2022
    View demo

    On this page

    1. Building blocks
    2. General guidelines
    3. Writing guidelines
    4. Related patterns

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Building blocks

    Page structure navigation for desktop usersPage structure navigation for desktop users
    Page structure navigation for mobile usersPage structure navigation for mobile users

    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. For more information about structuring side navigation content, follow the guidelines for side navigation.

    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

    • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

    • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

    • Use present-tense verbs and active voice.

    • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

    • Avoid directional language.

      • For example: use previous not above, use following not below.

    • Use device-independent language.

      • For example: use choose or select not click.

    Component-specific guidelines

    Breadcrumbs

    • Follow the writing guidelines for breadcrumbs.

    • Don't include details in the breadcrumb title.

    Buttons

    • Follow the writing guidelines for button.

    Container

    • Follow the writing guidelines for containers.

    • For the details summary container, use this text:

      • General configuration

      • [Resource type] settings

    Related patterns

    Resource details

    On a resource details page, users can view the details of a resource and, when relevant, any related resources.

    Details page as a hub

    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.

    Details page with tabs

    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.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS