Skip to content

The <Cluster> component lays out its children horizontally with consistent spacing between them, wrapping to a new line if necessary.


Variants

Default

Spacing


Development

import { Cluster } from '@nerdwallet/react-layout';
<Cluster>
Children go here!
<Cluster>

Props

<Cluster>

align

= 'left'

'left' | 'center' | 'right'


alignY

= 'top'

'top' | 'center' | 'bottom'


children

node

Required

className

string


spacing

= 3

0 | 1 | 2 | 3 | '3-half' | 4 | 5

The fixed-amount of horizontal space between each child element.