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.

Props

NameTypeDescriptionDefault
shadowDepth0 | 1 | 2The size of the shadow to be displayed around the box.2
displaystringChanges the CSS display property of the container.'inline-flex'
Required
children
React.ReactNodeCustom content that will be placed in the box component.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
size'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'Size of the component.'fitContent'

Examples

Basic usage