Simple atomic layout components with a declarative React API that support the NDS Grid Guidelines.

Used to

  1. Codify standardized component and page level layouts at NerdWallet.
  2. Bridge the gap between Design and Eng.
  3. Obviate need for much of the custom media query logic previously required.

See the NDS Grid Guidelines for a more comprehensive picture on the rationale behind Box at NerdWallet, as well as descriptions of the difference between adaptive and fluid layouts, etc.

Usage

Note: if you're interested in the design rationale and how <Box> relates to the grid system, check out Box Design.

<Box> is an atomic layout component that provides gutters (right and left padding) based on the NDS Grid Guidelines.

It is normally used within the context of a <BoxContainer>, which applies a constrained max-width and outer side margins, specified by the NDS Grid Guidelines.

Loading...

Loading examples...

Props

<BoxContainer>

Simple convenience wrapper that defines the content area from the grid guidelines of the design system. Provides outer margin and max width by default. Used to stop fluidity of columns beyond the max-content-width specified in base-styles.

Name

Description

Type

Default

children

node

<Box>

Atomic alignment component. Internally knows about the NDS breakpoint. Used to implement component and page level layout around a consistent grid system.

Name

Description

Type

Default

children

node

null

className

string

null

component

React component or HTML element to use instead of div.

custom

'div'

isReactNative

Boolean flag to indicate if a stylesheet should be created for React Native.

bool

false

small

shape of:

{ columns: 'auto', direction: 'row', display: 'flex', noGutter: null, justify: 'flex-start', wrap: 'wrap', }

small.noGutter

Remove the horizontal padding 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).

one of [[object Object],[object Object],[object Object]]

small.direction

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

string

small.justify

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

one of [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]

small.columns

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.

one of [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]

small.wrap

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

one of [[object Object],[object Object]]

wide

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

shape of:

{ columns: 'auto', direction: 'row', display: 'flex', noGutter: null, justify: 'flex-start', wrap: 'wrap', }

wide.noGutter

Remove the horizontal padding 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).

one of [[object Object],[object Object],[object Object]]

wide.direction

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

string

wide.hasOuterMargin

Flag used to indicate if the box needs the outer margin to be applied. spacing-3 on smaller breakpoints, spacing-5 on larger.

bool

wide.justify

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

one of [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]

wide.columns

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.

one of [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]

wide.wrap

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

one of [[object Object],[object Object]]

Basic

Use <Box> to constrain layouts to the 12 column grid system:

<ContentContainer /> Replacement

<BoxContainer> should be a drop in replacement for the older <ContentContainer /> component. Just compose children as you would've previously:

Maintainers

This component was created by Piper Chester.

See Also