Container

A container divides content into meaningful sections. It is the fundamental foundation of most of our components

Design

Up to date

React

Review required

When to use

Use a container in the following cases

To group content

To display multiple subjects and functions on a screen

To create a scannable UI

Style

The container is the area that can hold any kind of content. It is the keystone of widgets, posts, community content, cards, etc...

Behavior

Easily align content in columns or stack them (or as a grid if there are more elements than columns). Usually, a with defined columns wraps several components.

Important note: Do not use spacing between containers less than --space-4. Find out more about spacing here: Spacing

Content safe zone

The minimum padding for content elements inside the container is --space-4. Never use smaller.

Each container has to have always padding applied.

Avoid positioning the content to container borders.

Background color

The recommended color is white. In exceptional cases, a different color may be used. But it must make sense in the case.

Use contrast color acording to layer lever.

Don't use the same backgroud color for container and layer under it.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.