Layout

Layout components help replace common patterns when building a UI.

For example, <Flex /> saves you the time of having to write <div style={{ display: 'flex' }} /> or <Block display="flex" />.

Box#

Basic div element with no defaults

LeftRight
() => (
  <Box
    backgroundColor="#edf2f7"
    justifyContent="space-between"
    maxWidth="300px"
  >
    <Button>Left</Button>
    <Button>Right</Button>
  </Box>
);
() => (
  <Box
    backgroundColor="#edf2f7"
    justifyContent="space-between"
    maxWidth="300px"
  >
    <Button>Left</Button>
    <Button>Right</Button>
  </Box>
);

Flex#

Renders a div with display: flex set by default.

LeftRight
() => (
  <Flex
    backgroundColor="#edf2f7"
    justifyContent="space-between"
    maxWidth="300px"
  >
    <Button>Left</Button>
    <Button>Right</Button>
  </Flex>
);
() => (
  <Flex
    backgroundColor="#edf2f7"
    justifyContent="space-between"
    maxWidth="300px"
  >
    <Button>Left</Button>
    <Button>Right</Button>
  </Flex>
);

Block#

Renders a div with display: block set by default.

First Block
Second Block
() => (
  <>
    <Block backgroundColor="#edf2f7" maxWidth="300px">
      First Block
    </Block>
    <Block backgroundColor="#edf2f7" maxWidth="300px">
      Second Block
    </Block>
  </>
);
() => (
  <>
    <Block backgroundColor="#edf2f7" maxWidth="300px">
      First Block
    </Block>
    <Block backgroundColor="#edf2f7" maxWidth="300px">
      Second Block
    </Block>
  </>
);