Skip to content

Box

Status: Stable

Latest released: 2019

Current version: v4.1.6

Storybook
GitHub

<Box> is a simple flexbox layout component that respects NerdWallet breakpoints. It's normally used inside of the <CenteredContainer>, from @nerdwallet/reacy-layout.

See the Currency Grid guidelines to learn more.


Variants

Single Box

Content here...

Development

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

Props

<BoxContainer>

children

node

Required

notWide

Object


wide

Object

<Box>

children

node


className

string


component

= 'div'

elementType

React component or HTML element to use instead of div.


notWide

Object

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

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'
}

wide

Object

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

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'
}