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.

Code

Usage

Specifications

Design tokens

Color

Component token	Element	Core token	Value
`backgroundColor`	Container	`color-white`	#ffffff
`borderColor`	Container	`color-transparent`	transparent
`noneShadowDepthShadowColor`	Shadow	`color-transparent`	transparent
`oneShadowDepthShadowColor`	Shadow	`color-grey-300-a`	#00000033
`twoShadowDepthShadowColor`	Shadow	`color-grey-300-a`	#00000033

Border

Component token	Element	Core token	Value
`borderThickness`	Container border	`border-width-0`	0
`borderRadius`	Container border	`border-radius-medium`	0.25rem / 4px
`borderStyle`	Container border	`border-style-none`	-

Shadow

Component token	Element	Core token	Value
`noneShadowDepthShadowOffsetX`	Container shadow	-	-
`noneShadowDepthShadowOffsetY`	Container shadow	-	-
`noneShadowDepthShadowBlur`	Container shadow	-	-
`noneShadowDepthShadowSpread`	Container shadow	-	-
`oneShadowDepthShadowOffsetX`	Container shadow	-	0x
`oneShadowDepthShadowOffsetY`	Container shadow	-	3px
`oneShadowDepthShadowBlur`	Container shadow	-	6px
`oneShadowDepthShadowSpread`	Container shadow	-	0px
`twoShadowDepthShadowOffsetX`	Container shadow	-	0x
`twoShadowDepthShadowOffsetY`	Container shadow	-	3px
`twoShadowDepthShadowBlur`	Container shadow	-	10px
`twoShadowDepthShadowSpread`	Container shadow	-	0px

Width

In the cases of fillParent and fillContent the box is going to behave as a fluid container occupying the space the parent leaves for its children or adapting its size to the children it the box has. Instead of using a fluid approach, you can set a fixed size, choosing between small, medium and large properties.

Width	Value
`small`	48px
`medium`	240px
`large`	480px
`fillParent`	-
`fillContent`	-

Margin

Margin	Value
`xxsmall`	6px
`xsmall`	16px
`small`	24px
`medium`	36px
`large`	48px
`xlarge`	64px
`xxlarge`	100px

And also apply different values to each side of the component: top, bottom, left and right.

Specifications
Design tokens

Edit this page on GitHub

Report an issue on GitHub

Bleed

NextBreadcrumbs

Box