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.
- Organize the group layout with the information presented clearly by applying the styles in the box container.
- Box can be reused accros the UI, avoid using different variants in the same page.
- Use always a minimun padding and always 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 distictions 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 using an applicationbackground-color different than white, the limits of the box are goig to be clearly visible no matter the variant chosen.
Any type of content can be place inside the box component.
Edit this page on GitHub
PreviousBleed
NextBulleted List