Box

Status: Stable

Latest released: 2019

Current version: v4.1.2

Storybook
GitHub

<Box> and <BoxContainer> are simple flexbox layout components that respect NerdWallet breakpoints. See the NerdWallet grid guidelines to learn more.

Variants

Basic Three Column

1
2
3

Development

import Box, { BoxContainer } from '@nerdwallet/react-box';
<BoxContainer>
<Box wide={{ columns: 4 }}>Content here..</Box>
</BoxContainer>;

Props

<BoxContainer>

children

node

Required

notWide

Object

Default

null

wide

Object

Default

null

<Box>

children

node

Default

null

className

string

Default

null

component

elementType

React component or HTML element to use instead of div.

Default

'div'

notWide

Object

Object to indicate the behavior of the flex container in the narrower (>=768) breakpoint.

{

/**

Remove the horizontal margin around the left, right, or both sides of Box. Intended to be used on the outer columns of the Grid (reason for the name of the prop).

*/

noGutter: 'left' | 'right' | 'both'

/**

Align items (symmetric to flexbox) along the cross-axis.

*/

direction: string

/**

Arrange the boxes based on cross and main axis within the narrower breakpoint. Behaves like the justify-content CSS property and supports the standard.

*/

justify: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly' | 'start'

/**

Number to indicate how many columns to fill the flex container in the smaller (<= 767) breakpoint. If this is set with a prop other than the default, we apply display-flex.

*/

columns: 'auto' | 0 | 1 | 2 | 3 | 4

/**

Flag to indicate if flexbox items should wrap or nowrap. Default is wrap.

*/

wrap: 'wrap' | 'nowrap'
}

Default

{
  columns: 'auto',
  direction: 'row',
  noGutter: null,
  justify: 'space-between',
  wrap: 'wrap',
}

wide

Object

Object to indicate the behavior of the the flex container in the wider (>=768) breakpoint.

{

/**

Remove the horizontal margin around the left, right, or both sides of Box. Intended to be used on the outer columns of the Grid (reason for the name of the prop).

*/

noGutter: 'left' | 'right' | 'both'

/**

Align items (symmetric to flexbox) along the cross-axis.

*/

direction: string

/**

Arrange the boxes based on cross and main axis within the narrower breakpoint. Behaves like the justify-content CSS property and supports the standard.

*/

justify: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly' | 'start'

/**

Number to indicate how many columns to fill the flex container in the wider (>= 768) breakpoint. If this is set with a prop other than the default, we apply display-flex.

*/

columns: 'auto' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

/**

Flag to indicate if flexbox items should wrap or nowrap. Default is wrap.

*/

wrap: 'wrap' | 'nowrap'
}

Default

{
  columns: 'auto',
  direction: 'row',
  noGutter: null,
  justify: 'space-between',
  wrap: 'wrap',
}