Design System

Visual Style

Components

Patterns

Guides

Resources

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

NameTypeDefaultDescription

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

Resources