Container

Usage

A card container is an element designed to contain page elements to be used within the grid layout that has been set out. This is used to highlight all the other UI elements like text, form fields, buttons. The containers are white which will make the atoms more accessible for users and easy to identify.

These containers do not have other states and are not selectable.

Stacking and Sizing

• When stacking containers, the margin in between should be 24px

• The padding inside the container can be 24px, or if used on a smaller scale the padding can be set to 16px

• Container radius is 4px

Best Practices

• Always use a card container to contain the atoms that are being used to display within the page

• Use collapsible card container - accordion - if the page is consisting of many complex modules, and the content doesn’t need to be shown all the time

• Add meaningful titles to card containers that best describe the content inside

• Avoid stacking card containers inside each other