Stack

Stack component is a core layout component that enables uniform spacing between children.

import { Stack } from 'design-system/stack';

Gap

The gap prop expects any of our theme spacing tokens.

Card in a Stack.
Card in a Stack.
Card in a Stack.
<Stack gap="small">
  <Card>
    <p>Card in a Stack.</p>
  </Card>

  <Card>
    <p>Card in a Stack.</p>
  </Card>

  <Card>
    <p>Card in a Stack.</p>
  </Card>
</Stack>
<Stack gap="small">
  <Card>
    <p>Card in a Stack.</p>
  </Card>
  <Card>
    <p>Card in a Stack.</p>
  </Card>
  <Card>
    <p>Card in a Stack.</p>
  </Card>
</Stack>

Orientation

Orientation changes the direction of the Stack.

Card in a Stack.
Card in a Stack.
Card in a Stack.
<Stack orientation="horizontal" gap="small">
  <Card>
    <p>Card in a Stack.</p>
  </Card>

  <Card>
    <p>Card in a Stack.</p>
  </Card>

  <Card>
    <p>Card in a Stack.</p>
  </Card>
</Stack>
<Stack orientation="horizontal" gap="small">
  <Card>
    <p>Card in a Stack.</p>
  </Card>
  <Card>
    <p>Card in a Stack.</p>
  </Card>
  <Card>
    <p>Card in a Stack.</p>
  </Card>
</Stack>