Halstack
Design system
v6.0.0
OverviewIntroduction
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard
Box
Ready
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.
| Component token | Element | Core token | Value |
|---|---|---|---|
noneShadowDepthShadowOffsetX | Container shadow | - | none |
noneShadowDepthShadowOffsetY | Container shadow | - | none |
noneShadowDepthShadowBlur | Container shadow | - | none |
noneShadowDepthShadowSpread | Container shadow | - | none |
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 |
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.
| Property | Value |
|---|---|
small | 48px |
medium | 240px |
large | 480px |
fillParent | - |
fillContent | - |
Edit this page on GitHub
PreviousBleed
NextBulleted List