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)


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.


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


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.

