Demos
A demo is an example of a layout template using components. Use our demos to get a feel for the system, and see what services built with Cloudscape look like. Each demo opens in a new tab.
Demos (32)
![](/__images/yvlrib0vb3vb/56VRqbRrHJkuRoQwT5CLUi/fb700a4627861c5c8f856db35599759c/automated--example--cards-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/6Zw7rdTfjjEEObyGF0Dn4X/9e99d7cd4b710ee56e2a8b604f32a175/automated--example--cards-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/4IatkfA3P0uNGB2acXSblE/e027a85e53fa730f27fc2ad78a814cc2/automated--example--form-unsaved-changes-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/64h2wA0mV6QD9Eh8MrdDJp/6b1ddb8c8ef737bccd22ae54a685a10a/automated--example--form-unsaved-changes-external-dark-desktop--splash.png)
Communicate unsaved changes
An example of a form that prompts users with a confirmation modal when users leave the page with unsaved changes.
![](/__images/yvlrib0vb3vb/2tVKXNukhCjxGiTdHRP6F2/5ff730233ea55298b743ee7ee3e80ac2/image.png)
![](/__images/yvlrib0vb3vb/3ZlbEFz4jdg8OQH3eNPKR1/714800311a408ba63f278bb5b5138dfb/image.png)
Configurable Dashboard
Gives control to the user to show/hide, delete, move, change the size of, and add items to a dashboard.
![](/__images/yvlrib0vb3vb/66G29Spe0crHy3kChZdKD/1fac6490e2f3e88fd3355c227ce1443b/automated--example--delete-with-additional-confirmation-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/4qt5V5baggD6aOvd42G4AC/22d3a6c05295614ddfff0fa68f45c55f/automated--example--delete-with-additional-confirmation-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/7DXGT3H9F4EhRQrxLK5CV4/796c02db6725fc32db32e8306f2a487c/automated--example--delete-with-simple-confirmation-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/3Wc0Lby9wqT8OVGJGgWG88/bb8169afec222cbd54412cc2a41d4c53/automated--example--delete-with-simple-confirmation-external-dark-desktop--splash.png)
Delete with simple confirmation
Provide a layer of confirmation before deleting resources that cannot be easily recreated.
![](/__images/yvlrib0vb3vb/7rYc5wYr2A1ozA6rmLmXhf/0347831f4d2d8a2910a174f3a71a009c/automated--example--dashboard-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/17U9LqVtVbir7W0BTEayxF/c970d8a410667ee979c8dc075714a31d/automated--example--dashboard-external-dark-desktop--splash.png)
Density 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.
![](/__images/yvlrib0vb3vb/2QUXidawXeogWx9GrsHpiK/714decfb1f8d0e26aedc51346dcc3ee6/automated--example--details-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/6JYtvTgG5N13G1Zcp4JC11/78aa3f631daf76229b5484174d2b9f78/automated--example--details-external-dark-desktop--splash.png)
Details page
On a details page, users can view at a glance all the available information about a single resource.
![](/__images/yvlrib0vb3vb/ScrnqMKy4Z6ZQ944hFiH2/b6c2302c127343820321e72322c90d41/automated--example--details-hub-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/14vGI9YeJhU2rRWyIw8U5W/568e10385c2b944ae711ec0a7a652983/automated--example--details-hub-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/4KSNd5arcj4sXSAllH69jE/b13024bfa193be5c08a2649afdac3865/automated--example--details-tabs-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/3LNuEcpwrwyRQ7zPQQ2wH0/3f8cd62af9212c02e9882bdc8e4fc87a/automated--example--details-tabs-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/TIXzukYgNcAP0iuIcuXKd/cf017e5f5af18319fbd7f13cd4570216/automated--example--edit-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/CH0gRQMJDZpdjyDpqoUFb/124bbf173f1c81308acd978b8d672abb/automated--example--edit-external-dark-desktop--splash.png)
Edit resource
Use the page edit pattern when you want users to manage a service resource by editing its properties and configuration in bulk.
![](/__images/yvlrib0vb3vb/3mqszZjZnLZtR2DepkdNvZ/17075166f630585a2d2c61d1ef97eacf/automated--example--form-validation-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/5XjHV1f5uJulSsuzdhRxAf/f2b045202bebdcc08fbe7bbdfc713f5c/automated--example--form-validation-external-dark-desktop--splash.png)
Form validation
An example of a read-only form that showcases the form validation.
![](/__images/yvlrib0vb3vb/1Yid6SyVOIt0xu1804AgTX/466e88270f6391f76e6f19fc14db457a/automated--example--onboarding-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/4gR85YArzsByDm2L5t5hXf/a9e961645395f563728f50a058780736/automated--example--onboarding-external-dark-desktop--splash.png)
Hands-on tutorials
Hands-on tutorials help users onboard onto flows and features in a service, by providing contextual suggestions at decision points in workflows.
![](/__images/yvlrib0vb3vb/4pqK5VPyQ9rlll2hwEgtR6/d126106ad197a8fdb07ce38b2ada8372/automated--example--manage-tags-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/1SG4EiTSzx2SHxWpiePX9W/887f43ff4c159968b82b41b6c1ccc714/automated--example--manage-tags-external-dark-desktop--splash.png)
Manage tags
An example of managing tags while in the context of resource editing.
![](/__images/yvlrib0vb3vb/3JpgkVCnm2zZI67hKbt4Fi/62bba5849ebd63e4ae960c1a00bcb0a8/automated--example--wizard-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/6AnklI4T0yCDxGwLJfAspK/f23c6b4f7be3a8afdf97f300a96df294/automated--example--wizard-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/2IqSQi2glTygUjR3uy8f9j/6d7a4dc62711a5d25d4c54fb9ffad917/automated--example--delete-one-click-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/2RzGexRlN2WaP8wXkY3TVJ/9ab26c3454aa66398a639636ba289450/automated--example--delete-one-click-external-dark-desktop--splash.png)
One-click delete
With the one-click delete pattern, users can quickly delete low-risk, non-critical resources.
![](/__images/yvlrib0vb3vb/6k3f5TeMXWzBstqjE0q88D/13ecfd524eed8b1153ad9ca4b7f16106/automated--example--product-detail-page-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/W3CLlHJt3dBb5MwKa9weE/4f21011f6264a08395d1893bb806adfe/automated--example--product-detail-page-external-dark-desktop--splash.png)
Product detail page
An example of patterns and components used for content rich interfaces, in the context of a product detail page.
![](/__images/yvlrib0vb3vb/1V8epAFagvQwnN2GpZXNcS/4d3228e5289c98a76aa7aad867ee2b05/automated--example--read-from-s3-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/4xYHNKHkYNkthweM174cUN/67f35ec8e5dc8eb028a83560f4da843c/automated--example--read-from-s3-external-dark-desktop--splash.png)
Read from Amazon S3
An example of reading objects from Amazon S3.
![](/__images/yvlrib0vb3vb/wqPuF5rTnQdFHcBw2iOOB/6f929c51c633340f7af37a97877f615e/automated--example--dashboard-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/3Yg11iNMzqQPdiTdZttDL3/d5e4f012393d1fe0987ab8bb83b8cafc/automated--example--dashboard-external-dark-desktop--splash.png)
Service dashboard
A dashboard page presents at-a-glance information about service and resource status. Users can monitor this information and act upon it quickly.
![](/__images/yvlrib0vb3vb/mLd4xWSM1yv42ER9Z54CH/2bbc141dfd799e3c7939eba924c8c67e/automated--example--form-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/6KICID84PFCT0IpU8fkHui/61f0c77343f69b62d0cb13726cb57055/automated--example--form-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/2nprhGuLcnMuiWAhD37CJ9/54f5201367f16816ba98ba5d973dd0b0/automated--example--split-panel-multiple-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/6ma59M3HYZg3KhoVvTXxTa/020f948a8dd7834e826ab2e2b366c280/automated--example--split-panel-multiple-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/24O6h4v2TcT6AEMsYnaav3/20fb053bb2b0b281ff315c0db38d8c3c/automated--example--split-panel-comparison-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/3GJSZRl0DMPS6sK2HUKgyR/ee321c01ec8dbe8b43e913677f5d2919/automated--example--split-panel-comparison-external-dark-desktop--splash.png)
Split view with details comparison
An example of comparing key resource details within the split panel on a split view.
![](/__images/yvlrib0vb3vb/4xozBOHDvLrh4mlTYECcfF/cdd8ca875d1774d03d66087fa5f77452/automated--example--table-property-filter-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/5gjzPPYMoEZDQ5mrOOKGNf/3a0054f099be7d64b200c4d0d8d2caa4/automated--example--table-property-filter-external-dark-desktop--splash.png)
Table 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.
![](/__images/yvlrib0vb3vb/73nq6l6WFyH6PvhHN2XrPD/2736085e1ead1a2ea7037951618eef32/automated--example--server-side-table-property-filter-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/1V5OsBi1zGGLxPyMtvN3UF/029175e020f391e92d8e743ea1a31e7b/automated--example--server-side-table-property-filter-external-dark-desktop--splash.png)
Table property filter (server-side)
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.
![](/__images/yvlrib0vb3vb/lqOyAWJq3vF13DbxIEUaI/79808f38006e6242f4551a7c29940a33/automated--example--table-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/LcjozNwgtdyhVJFbIYXsl/612a01a8dc2f5b3ac5acdfd7a0845022/automated--example--table-external-dark-desktop--splash.png)
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.
![](/__images/yvlrib0vb3vb/2VUOCzquPz39iaW9IqNk9Q/2585b2b31d274324e9142d096ca72aac/automated--example--server-side-table-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/19P0nhfnzIV29W2PR3EZ8n/016952c82b920759761dd58c5af07e1e/automated--example--server-side-table-external-dark-desktop--splash.png)
Table 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.
![](/__images/yvlrib0vb3vb/41nQiVtdLIcmQJ8KqIc8fx/17dbc4bca5ba6976fdb2cd93e5771b63/automated--example--table-date-filter-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/4Ho4G2w2d3tiMmjIBNJL7C/33b5d04b53dfec89d74388c28879b47e/automated--example--table-date-filter-external-dark-desktop--splash.png)
Table view with date filter
A property filter supports custom property types, including dates, to employ convenient date/time inputs when defining filtering queries against date fields.
![](/__images/yvlrib0vb3vb/2DqpiZ0DNQgHITm6EhxrR/8dcf7e314e74c65ca376c2d83942801b/automated--example--table-expandable-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/l3rdLHFCO6dxBZGYeahrO/a28371518535eefb17222df06213a4e3/automated--example--table-expandable-external-dark-desktop--splash.png)
Table with expandable rows
Expandable rows allows customers to expand and collapse table rows to reveal one or more nested child rows.
![](/__images/yvlrib0vb3vb/1jMb7QJc1iIMUYJBAJqClE/e75d93fb6d8e9e8df38919efe2e8c426/automated--example--table-editable-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/nySSndp8hob4JBTtu0aeS/e337642fa79fe936926554e837bf79e7/automated--example--table-editable-external-dark-desktop--splash.png)
Table with inline edit
Inline editing allows customers to edit a cell value, and subsequently save or discard changes.
![](/__images/yvlrib0vb3vb/5DcmOzpNQlubtBf61a6bkg/38bb0f559122b3ac44755ef8b0503e08/automated--example--table-saved-filters-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/8uo55tMmg9zUIZzcxL0ix/c59d8f6825db8c628ab77b61e253c217/automated--example--table-saved-filters-external-dark-desktop--splash.png)
Table with saved filter sets
Enable users to save filter configurations as filter sets and quickly apply them in a collection of resources.
![](/__images/yvlrib0vb3vb/8MWk2rG5W4pjNPW5x6DDF/86bf9278a29560f0f73aa09d3040f28a/automated--example--table-select-filter-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/6amyI9NG7AIKhvuUqVKI7t/bf7ab3a157f580fe124a57e896ea20ab/automated--example--table-select-filter-external-dark-desktop--splash.png)
Table with select filter
A select filter lets users find specific items in a collection of resources by choosing one or two properties.
![](/__images/yvlrib0vb3vb/6PPs9puGC8e4NIhyKs1WY4/bdf40a99784697c2fb0d20915ba72029/automated--example--non-console-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/4QbKqwtLQQAtMbGtRkueAO/640553b3df20fcc2802b8df9f37dbe38/automated--example--non-console-external-dark-desktop--splash.png)
Top navigation
The top navigation, when paired with side navigation and breadcrumbs, forms a global, scalable navigation system
![](/__images/yvlrib0vb3vb/1DFVPUfTEVBNTk489xBM33/fbafc05338e4802e179622064bcc2752/automated--example--write-to-s3-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/5LPHuPWH1UJ3UUrz8oZMjA/6c412f15a7aa9258dac041d3c01f6963/automated--example--write-to-s3-external-dark-desktop--splash.png)
Write to Amazon S3
An example of writing objects to Amazon S3.