Stack

Used to layout its children in a vertical or horizontal stack.

Demo

React

Item 1

Item 2

Item 1

Item 2

Vue

Item 1

Item 2

Item 1

Item 2

Example

React

// Import components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';

return (
  <Stack spacing="md">
    <Placeholder className="h-20 w-40">
      Item 1
    </Placeholder>

    <Placeholder className="h-20 w-40">
      Item 2
    </Placeholder>
  </Stack>
);

// Import components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';

return (
  <Stack
    orientation="horizontal"
    spacing="md"
  >
    <Placeholder className="h-40 w-20">
      Item 1
    </Placeholder>

    <Placeholder className="h-40 w-20">
      Item 2
    </Placeholder>
  </Stack>
);

Vue

<script setup lang="ts">
// Import components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';
</script>

<template>
  <Stack spacing="md">
    <Placeholder class="h-20 w-40">
      Item 1
    </Placeholder>

    <Placeholder class="h-20 w-40">
      Item 2
    </Placeholder>
  </Stack>
</template>

<script setup lang="ts">
// Import components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';
</script>

<template>
  <Stack
    orientation="horizontal"
    spacing="md"
  >
    <Placeholder class="h-40 w-20">
      Item 1
    </Placeholder>

    <Placeholder class="h-40 w-20">
      Item 2
    </Placeholder>
  </Stack>
</template>

Props

Name	Type	Default	Description
orientation	Orientation	vertical	Stack orientation
spacing	Size	—	A gap between the items

Types

export type Orientation = 'vertical' | 'horizontal'
export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

Spacing

Value	Class equivalent	Width
xs	.gap-xs	0.5rem / 8px
sm	.gap-sm	0.75rem / 12px
md	.gap-md	1rem / 16px
lg	.gap-lg	1.25rem / 20px
xl	.gap-xl	2rem / 32px