UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Stacking and Sizing
  • Best Practices

Was this helpful?

  1. Components

Container

PreviousContained buttonNextCounter

Last updated 4 years ago

Was this helpful?

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