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


dividers

1 | 2 | 3


spacing

= 3

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

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