Container

Storybook Github

Containers are used to group multiple components into a specific area that allows them to flow in a flexible/responsive manner. Containers can be used to help effectively manage lists, tables, dialogs, modals, slide out panels, content containers (top and bottom), and other components.

Appearance and Behavior #

Containers have sections for a header, a tab bar, a toolbar, body content, and a footer.

The Container component uses an optional drop shadow that can help distinguish it from other UI elements (e.g. applied in “overlay” situations, such as dialogs and slide-in panels).

Child containers (smaller Containers meant to reside inside of a larger Container) consist of a header, room for custom content on the left and right of the header text, and body sections. The body section can be used as a canvas to freely overlay multiple components.

Examples #

Do: Use Containers to build lists, tables, slide outs, and the like with proper component usage and placement.
Do: Use Containers to build lists, tables, slide outs, and the like with proper component usage and placement.
Don't: Use Containers to add or stack components in an improper or confusing manner.
Don’t: Use Containers to add or stack components in an improper or confusing manner.