Demos (27)

Card viewCard 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.
Communicate unsaved changesCommunicate unsaved changes
An example of a form that prompts users with a confirmation modal when users leave the page with unsaved changes.
Delete with frictionDelete with friction
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 confirmationDelete with simple confirmation
Provide a layer of confirmation before deleting resources that cannot be easily recreated.
Density settingsDensity settings
The density settings pattern uses local storage to remember the user's preferred density setting. This pattern is for switching between comfortable and compact mode at the service level.
Details pageDetails page
On a details page, users can view at a glance all the available information about a single resource.
Details page as a hubDetails 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 tabsDetails 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 resourceEdit resource
Use the edit resource flow when you want a user to manage a service resource by editing its properties and configuration, and then saving the changes.
Form validationForm validation
An example of a read-only form that showcases the form validation.
Hands-on tutorialsHands-on tutorials
Hands-on tutorials help users onboard onto flows and features in a service, by providing contextual suggestions at decision points in workflows.
Manage tagsManage tags
An example of managing tags while in the context of resource editing.
Multipage create 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.
One-click deleteOne-click delete
With the one-click delete pattern, users can quickly delete low-risk, non-critical resources.
Read from amazon s3Read from amazon s3
An example of reading objects from Amazon S3.
Service dashboardService dashboard
A dashboard page presents at-a-glance information about service and resource status. Users can monitor this information and act upon it quickly.
Single page createSingle 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 Split view
A collection of resources presented as table or cards and paired with a split panel for contextual resource details. It is effective for quickly browsing or comparing key resource details.
Split view with detailsSplit view with details
An example of comparing key resource details within the split panel on a split view.
Table property filterTable property filter
A property filter lets users find specific items in a collection of resources by choosing properties, property values, typing free text and combining them with operators.
Table with select filterTable with select filter
Variant of the table view for large data sets. Property filtering, pagination, and sorting are performed on the server-side, only the visible items are loaded on the client side.
Table viewTable 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.
Table view server sideTable view server side
Variant of the table view for large data sets. Filtering, pagination, and sorting are performed on the server-side, only the visible items are loaded on the client side.
Table view with date filterTable view with date filter
A date range picker filter lets users find specific items in a collection of resources by specifying a date and time range.
Table with select filterTable with select filter
A select filter lets users find specific items in a collection of resources by choosing one or two properties.
Top navigationTop navigation
The top navigation, when paired with side navigation and breadcrumbs, forms a global, scalable navigation system
Write to amazon s3Write to amazon s3
An example of writing objects to Amazon S3.