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