Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
  • Patterns
    • Overview
  • General
    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
    • Density settings
    • Error messages
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
    • Help system
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service dashboards
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Timestamps
    • Validation
  • Resource management
    • Create resource
      • Multipage create
      • Single page create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
    • View resources
      • Table view
      • Card view
      • Split view
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • Patterns: Overview

    Patterns

    Patterns are reusable combinations of components that solve common user problems. Our best practice solutions help users achieve their goals and ensure consistency across experiences.

    Patterns (40)

      Actions

      Ways to invoke actions in the interface.

      Announcing beta and preview features

      Communicate to users which features are in beta or preview.

      Announcing new features

      Communicate new feature releases to users.

      Card view

      A collection of resources represented as cards. It’s effective for glancing at small sets of similar resources with text, numerical, and imagery data sets.

      Communicating unsaved changes

      Communicate to users that unsaved changes on the page will be discarded when users leave a page.

      Configurable dashboard

      Gives control to the user to show/hide, delete, move, change the size of, and add items to a dashboard.

      Create resource

      With the create new resource pattern, users can create new resources.

      Dashboard items

      Dashboard items are self contained UI elements that address specific customer needs, such as navigating to a resource, monitor resources status, or viewing a costs summary.

      Data visualization

      Data visualization is a graphic representation of information and quantitative data intended to quickly and clearly convey meaning.

      Delete patterns

      With delete patterns, users can delete existing resources.

      Delete with additional confirmation

      The delete with additional confirmation pattern helps prevent users from performing accidental, high-severity deletions by adding friction during the deletion process.

      Delete with simple confirmation

      Provide a layer of confirmation before deleting resources that cannot be easily recreated.

      Density settings

      With the density settings pattern, users can define the preferred density level of the content visible within the interface. 

      Details page

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

      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.

      Edit resource

      With the edit resource pattern, users can edit properties and configurations of resources.

      Empty states

      An empty state occurs when users haven’t created a resource or have deleted all existing resources. A zero results state occurs when users have filtered and there are no matches.
      Error messages in an alert or flashbarError messages in an alert or flashbar

      Error messages

      Error messages inform users of an error, malfunction, unsuccessful action, or critical issue. The error message gives a description of the issue, and provides next steps to fix it.

      Feedback mechanisms

      Ways to communicate specific messages to a user in an interface.

      Filtering patterns

      Filtering patterns let users find specific items in a collection of resources. Users can filter by exact values or by finite sets of properties.

      Hands-on tutorials

      Hands-on tutorials provide contextual suggestions at decision points in workflows, and also clarify all the steps that need to be completed in order to achieve an objective.

      Help system

      The help system pattern allows users to easily and quickly access help within the interface and current workflow.

      Loading and refreshing

      Loading and refreshing is used to refresh collections of data in the interface.

      Multipage create

      Use the multipage create, which employs the wizard component, when you want users to create resources by completing a set of interrelated tasks. We recommend multipage create for long or complex configurations.

      Onboarding

      The process of getting started with a product or feature.

      One-click delete

      With the one-click delete pattern, users can quickly delete low-risk, non-critical resources.

      Resource details

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

      Selection in forms

      Form elements that allow users to select one or more items from a list of options.

      Service dashboards

      A dashboard page presents at-a-glance information about service and resource status. Users can monitor this information and act upon it quickly.

      Service navigation

      Provides a structural view of the service's navigation, and offers globally accessible functionality.

      Side navigation

      Provides a structural view of a services's navigation, allowing users to easily navigate sections and pages within the service.

      Single page create

      Use single page create if you want your users to create a resource on a single page. This component is optimized for simple to medium-complex forms.

      Split view

      A collection of resources presented as table or cards and paired with a split panel for contextual resource details. It’s effective for quickly browsing or comparing key resource details.

      Static dashboard

      Identify and structure a predefined and persistent set off items within a dashboard.

      Table view

      The table view pattern is a collection of resources in a tabular format. It's effective for quickly identifying categories or comparing values in a large text and numerical data set.

      Timestamps

      Timestamps display the relative, absolute, or ISO datetime at which an event has occurred or will occur.

      Top navigation

      Top navigation provides global controls that help users use the product or service. It’s comprised of a collection of global functionalities that are separate from the product's structural navigation.

      Validation

      After a user types data into a required field or fields and submits a form, validate the data. If the user leaves a required field blank or enters incomplete or incorrect information, display an error message that tells the user how to fix the issue.