BoxHealthy

Basic usage

Use Box when there are no other options. It can accept all system props. Here is a basic example with color and spacing props applied. It also has flexbox applied with a nested box

import { Box } from '@houzz/ui';

<Box
    color="white"
    fontWeight="bold"
    borderRadius="medium"
    display="flex"
    position="relative"
    alignItems="center"
    borderRadius="medium"
    overflow="hidden"
>
    <Box p="M" bg="blue.core" flexGrow="1" textAlign="center">
        A nested flex item box
    </Box>
    <Box p="M" bg="green.core" flexGrow="1" textAlign="center">
        A nested flex item box
    </Box>
</Box>

Centering content

Override component

If you want to render a different tag or component, use the as polymorphic prop provided by styled-components. Some cases may call for forwardedAs.

import { Box } from '@houzz/ui';

<Box as="section" p="S" fontWeight="bold" bg="accentTint">
    Renders as <code>section</code>
</Box>

Psuedo classes

houzz-ui does not have PsuedoBox support (yet). The team is evaluating how to integrate this into the library. For now, you can do:

Props

Accessibility

• The box component is a powerful layout tool, however, when using it make sure there is not a more HTML semantic option.
• Since box will render a div by default, it provides no context to accessibility tools.
• Read more about HTML semantics here.