Stack is a standalone layout component which positions elements vertically by default, adding space between each element.

Usage

Import

import { Stack } from '@passfort/castle'
content_copy
Copy

Example

The Stack container uses flexbox under the hood.

<Stack>
  <Item flex={1} />
  <Item flex={1} />
  <Item flex={1} />
</Stack>
<Stack>
  <Item flex={1} />
  <Item flex={1} />
  <Item flex={1} />
</Stack>
content_copy
Copy
live example

Responsive Styles

A Stack can be made responsive with Breakpoints.

import { Breakpoints } from '@passfort/castle'
content_copy
Copy

<Breakpoints
  config={{
    md: 400,
  }}
>
  <Stack direction={{ base: 'row', md: 'column' }}>
    <Item flex={1} />
    <Item flex={1} />
    <Item flex={1} />
  </Stack>
</Breakpoints>
<Breakpoints
  config={{
    md: 400,
  }}
>
  <Stack direction={{ base: 'row', md: 'column' }}>
    <Item flex={1} />
    <Item flex={1} />
    <Item flex={1} />
  </Stack>
</Breakpoints>
content_copy
Copy
live example