#### Column boxed boxes

    const pad = {
      horizontal: 'small',
      vertical: 'small',
      between: 'small'
    };

    <Box colorIndex="brand" pad={pad}>
      parent box

      <Box colorIndex="accent-1" align="center" pad="medium">
        child 1 box
      </Box>

      <Box colorIndex="accent-2" align="end" pad="large">
        child 2 box
      </Box>
    </Box>

#### Row boxed boxes

    const pad = {
      horizontal: 'small',
      vertical: 'small',
      between: 'small'
    };

    <Box colorIndex="brand" pad={pad} direction="row">
      parent box

      <Box colorIndex="accent-1" align="center" pad="medium">
        child 1 box
      </Box>

      <Box colorIndex="accent-2" align="end" pad="large">
        child 2 box
      </Box>
    </Box>