Box

A layout component for controlling width, margin, padding, colour and shadows.

Box

import { Box } from "@nulogy/components";

<Box bg="darkBlue" color="white" p="x3">Box</Box>

Variations

Width

Width can be set using a fraction or string.

Half

200px

<Box width={1/2}>Half</Box>
<Box width="200px">200px</Box>

Text Color

Color can be set using a reference to the theme.colors object.

blue

<Box color="blue">blue</Box>

Background Color

Color can be set using a reference to the theme.colors object.

lightBlue

<Box bg="lightBlue">lightBlue</Box>

Margins

Margins can be set using a reference to the theme.space object.

x3 (24px)

<Box m="x3">x3</Box

Padding

Padding can be set using a reference to the theme.space object.

x3 (24px)

<Box p="x3">x3</Box

Shadows

There are three shadows that can be set using a reference to the theme.shadows object.

large shadow

<Box p="x3" boxShadow="large">large shadow</Box>

Responsive

All Box props can be used responsively by using an object that defines small, medium and/or large, based on the theme.breakpoints object

Green text on large screens, blue on medium and red on small.

<Box color={{ extraSmall: "red", small: "blue", medium: "green"}}>
  Green text on large screens, blue on medium and red on small.
</Box>

Props

Name	Type	Default	Description
order	number		Sets the order to be used with Flex component
className	String	undefined	className passed to the box component.

The Box component has access to space, colour, layout, border, boxShadow, textAlign, and position style props. See the style prop documentation for a full list of available props.

Related components

Flex

Visual Style

Components

Patterns

Resources

Box