Box
===

```jsx
import Flex from '@ui/components/Flex';

<Flex layout="col" style={{ padding: 20 }}>
  <Flex>
    <Box>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis fugit porro eaque quisquam sequi, ut deserunt natus dolore deleniti, nihil ad neque? Sequi, non quis.
    </Box>
    <Box bem={[['rule']]}>
      Ex perspiciatis tempore debitis nihil, aspernatur at totam inventore iusto ipsam eius, corporis aliquid accusamus ut veritatis soluta a enim nam doloribus eveniet perferendis recusandae?
    </Box>
  </Flex>
  <Flex>
    <Box bem={[['pop']]}>
      Velit placeat dicta consequatur ut aut officia modi nihil architecto eos, quae laudantium animi, et, voluptatem ratione! Maxime obcaecati autem in! Vero pariatur inventore officia.
    </Box>
    <Box bem={[['modal']]}>
    Velit placeat dicta consequatur ut aut officia modi nihil architecto eos, quae laudantium animi, et, voluptatem ratione! Maxime obcaecati autem in! Vero pariatur inventore officia.
    </Box>
  </Flex>
</Flex>
```

### Modifiers

| Class    | Style             |
|:---------|:------------------|
| *`flat`* | light background  |
| *`rule`* | gray border       |
| *`pop`*  | border and shadow |