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
    1. Cloudscape Design System
    2. Patterns
    3. Resource management: Resource details

    Resource details

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

    Published: June 5, 2020

    On this page

    1. Patterns
    2. Flow chart
    3. Criteria

    Did this page help you?

    Tell us more - optional

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

    Patterns

    While your service could include a split view which provides users with a subset of resource details, a dedicated resource details page allows users to view the details of a resource on a single page and perform actions on that resource.

    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.

    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.

    Flow chart

    Criteria

    Details pageDetails page with tabsDetails page as a hub
    User tasksOne main taskMultiple tasks on a resourceMultiple tasks on a resource and related resources
    Content structureEverything at a glanceContextualContextual
    NavigationDoes not serve as navigationDoes not serve as navigationServes as navigation

    User tasks

    Users can perform tasks that directly affect a resource (for example: Edit or Delete the resource) or tasks that also affects a related resource.

    • Use tabs to structure the information into independent, actionable groups.

    • Use a container with a link to navigate users to related resources.

    Content structure

    Details pages should always contain the details of a resource. If possible, display all information at once on a details page, so that everything is accessible by the user.

    • Details page with tabs displays details of a single resource on a single page, grouping information by task.

    • Details page as a hub displays details of a resource and a preview of related resources on a single page. Provide links to view the full resource collection for each related resource.

    Navigation

    The details page (with or without tabs) is always self-contained and keeps the user focused in one place.

    Use details page as a hub if users need to navigate to one or more view resources pages.

    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