Visual style

The Cloudscape visual style is flat, modern, and robust. Shadows are used to provide visual hierarchy through elevation to help to mimic the behavior of layering elements on the page. In Cloudscape, typically large elements that encompass smaller elements have a shadow, while the smaller elements that are used inside larger elements don't have a shadow. In some cases, when a more subtle sense of depth is needed inside an element which already has a shadow, we apply a lighter shadow called inner shadow.

Consider the following example. A table is meant to live directly in the app layout, so it has an outer shadow applied by default. However, when you enforce a sticky header on the table, a lighter shadow is applied in the header to mimic the scrolling layer. On the other hand, an input does not have any shadow because it is typically used inside other elements which have shadow, such as form sections.

Shadow

Large elements that contain other elements have a shadow.

Container

• Flash

Other examples not shown: table, cards, form section, and modal.

Inner shadow

A light shadow is applied to elements that are used inside other elements that already have a shadow.