Skip to content

The <Stack> component lays out its children vertically with consistent spacing between them. Optionally, it can show dividers between its children.

Variants

Default

Spacing

Dividers



Examples

Nested <Stack>s with different spacing

Card 1

Image

Some content in a card.

Card 2

Image

Some other content in a card.

Development

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

Props

<Stack>

children

node

Required

className

string

Default

null

dividers

1 | 2 | 3

Default

null

spacing

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

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

Default

3