Box is a component primitive that can be used to build the foundation of pretty much any other component. It keeps details like spacing, borders and colors consistent with the rest of Gestalt, while allowing the developer to focus on the content. Also known as “div” or “view”.
Usage Guidelines
Do
Use Box as a building block when creating components or layouts that do not rely on flexbox.
Use padding before you use margins, as padding will compose better and won’t collapse.
Design on a grid of 8pt (2, 4, 8, 12, etc).
Box is very similar to Figma’s Auto-layout functionality. Check that out here.
Don't
Avoid using arbitrary div elements. Prioritize using Box.
Accessibility
Setting display='visuallyHidden' on Box allows for an element to be visually hidden but still be read by screen readers.
The ‘visually-hidden’ CSS technique applies absolute positioning to the element. For a correct implementation, make sure the ‘visually-hidden’ element is correctly contained within a relative-positioned Box.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Div, View
Examples
FlexBox
JG
Josh Gachnang
joined 2 years ago
Colors
base
primary
secondaryLight
secondaryDark
secondaryExtraDark
neutral
neutralLight
neutralDark
disabled
error
errorLight
warning
warningLight
success
successLight
Responsive
Resize the viewport
Native: sm 320pt, md 375pt, lg 600pt, xl 1024pt. Web: sm 320pt, md 375pt, lg 1024pt, xl 1280pt.