Box

Box is the most abstract component on top of which most other Arc UI components are built. By default, it renders a div element.

The Box component is useful because it helps with some common use cases:

• Provide a shorthand way to pass styles via props (bg instead of backgroundColor). See styled-system for all properties and shorthands.
• Compose new component and allow for override using the as prop.
• Sets some safe defaults for elements, namely setting box-sizing: border-box.

Import

import { Box } from '@wpmedia/arc-ui-layout'

Usage

Box 1

Box 2

Link me

<> <Box bg="blue.500" color="white"> Box 1 </Box> <Box bg="blue.200" color="text.blue" p="medium"> Box 2 </Box> <Box p="medium" /> <Box as="a" href="" paddingTop="large"> Link me </Box> </>

<>
  <Box bg="blue.500" color="white">
    Box 1
  </Box>
  <Box bg="blue.200" color="text.blue" p="medium">
    Box 2
  </Box>
  <Box p="medium" />
  <Box as="a" href="" paddingTop="large">
    Link me
  </Box>
</>

Copy