The fundamental building block.
Use the display prop to specify the layout behaviour. You can change it across breakpoints using the object syntax.
We do not plan to create a component that combines block, flex, and grid display values, as this usually leads to messy layouts. Sensibly composing Box, Flex, and Grid components is the key to creating even the most complex responsive layouts.
Use the position, inset, top, bottom, left, and right props to create positioned elements. You can also change these values across breakpoints using the object syntax.
The position offset props don’t support space scale values like "1", "2", "3", … , encouraging the separation of layout concerns. Use margin and padding props to achieve a similar result.
Use the width and height props to specify the Box size.
As usual, the numerical values "1", "2", "3", … , correspond to the space scale steps.
Use the shrink and grow props to control the size of elements in a flex container.
Use the p, py, px, pt, pb, pl, and pr props to add padding around elements.
Combine padding and margin props to increase the clickable area of links.
Used 900 times across 2 packages
position
334 files
/:environmentId/authentication
/branding/edit
/p/:portalSessionId/log-streams/:logStreamId/completed/components/edit/details
Show 324 more files