Box

Installation

npm install @nib/layout

Usage

import {Box} from '@nib/layout';

Interactive demo

<Box padding={4} background="default" foreground="brand" borderRadius="standard" mode="warm">
  <Copy>Lorem ipsum dolor sit amet.</Copy>
</Box>

Props

Considerations

The Box component can be used in place of a div whenever padding, background color, text color, border radius, text alignment or basic flex styling needs to be applied to a component.

Prior to this Box component, you would have had to have done something like this to add common, standard styling to a component:

import styled from 'styled-components';
import {colorDarkest, colorLightest} from '@nib-components/theme';
import {m, p} from '@nib/layout';

const MyBox = styled.div`
  ${m(5)};
  ${p({xs: 4, md: 6})};
  background-color: ${colorDarkest};
  border-radius: 4px;
  color: ${colorLightest};
  text-align: center;
`;

Now with Box you do not need to step out of the component you are working on to import a bunch of boilerplate and define a styled component that meets your specific needs. Just use the props provided by Box:

<Box margin={5} padding={{xs: 4, md: 6}} mode="sage" background="surface" foreground="muted" borderRadius="standard" textAlign="center">
  Hello world
</Box>

Set mode directly on Box

Since v3.7.0 mode can be set directly on the Box component instead of wrapping in a ModeProvider.

<Box mode="sage" background="default" foreground="brand" padding={5}>
  <Copy>Hello world!</Copy>
</Box>

See ModeProvider props for details on the mode prop.

DOM element

The Box component is a styled div element. To change this you can use the styled components as prop:

<Box padding={4} as="aside">
  <Stack space={4}>
    <Heading size={4}>Newsletter</Heading>
    <Copy>Lorem ipsum dolor sit amet.</Copy>
    <Link href="/subsribe">Sign up now</Link>
  </Stack>
</Box>

Logical Properties

Logical properties and values in CSS provide a powerful way to control layout and style based on the flow of content. Unlike traditional physical properties (such as margin-top or padding-left), logical properties adapt to different writing modes (horizontal or vertical) and text directions (left-to-right or right-to-left). This makes CSS more flexible and easier to internationalize.

Along with the above props, we do have below props to support the logical properties:

Note: Note: you can only pass a single value for both end and start for the paddingBlock, paddingInline, marginBlock and marginInline props.

Related components

• ModeProvider
• Stack