Box
There are different ways to organise the content on the webpage to facilitate the user according to his nature of interaction with the content like forms, tables, lists etc. One of the best ways to organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component.
warning
This component will be removed from Halstack Design System in the future. Please consider the new Container component as an alternative for your current use cases.
- Organize the group layout with the information presented clearly by applying the styles in the box container.
- Box can be reused across the UI, avoid using different variants in the same page.
- Set always a minimum padding among the content and the box border. Also, try to leave enough margin when stacking boxes so the shadows don't overlap.
The shadow-default and shadow-high variants can be used to create clear distinctions between sections of content without the use of borders or separators, the no-shadow helps in the process of building the layout. Note that when an application background-color other than white is used, the boundaries of the box will be visible regardless of the variant chosen.
Any type of content can be placed inside the box component.