Visual hierarchy can be achieved or improved by use of Container component. With this component more content blocks having a different context or information can be easily handled in one interface.
Use
Container is meant to be used in interface where two or more content blocks need their own space.
Benefits of Container? Its variability.
- Size can be scaled to fit content or screen.
- It can be used together with other containers to allow for better orientation in the interface.
- It can accommodate more complex content blocks.
- It's easy to be further divided by use of Divider component.
Format
Content
Container can accommodate any content. Use established design patterns and definitions sourced from design system foundations.
Padding
Provide a clear space around the content inside the Container. Use space according to options defined in design system foundations. Padding may vary on different devices. Use common sense.
Modifiers
We have container prepared to be used in light and dark themed interfaces. Select appropriate theme accordingly.
Examples of use
Light themed interface
Dark themed interface
Related Resources
-> Specs in Figma