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

    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.

    Published: September 10, 2020
    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

    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

    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, buttons and containers

    • Follow the guidelines for details page.

    Tabs

    • Follow the general writing guidelines for tabs.

    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.

    Tabs

    With tabs, users can switch between different categories 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