React | Stack | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { Button, Card, Stack, StackItem } from '@optimus-web/core';
                                                        
                                                        <Stack spacing="300" distribution="stretch">
                                                            <StackItem contentFit>
                                                                <Card />
                                                            </StackItem>
                                                            <Stack
                                                                spacing="200"
                                                                distribution="space-between"
                                                                phoneOnly={{
                                                                    spacing: '50',
                                                                    distribution: undefined,
                                                                }}
                                                                largePhoneMax={{
                                                                    vertical: true,
                                                                }}
                                                                tabletMax={{
                                                                    distribution: 'space-between',
                                                                }}
                                                                desktopUp={{
                                                                    distribution: 'space-around',
                                                                }}
                                                            >
                                                                <Button wide>Share</Button>
                                                                <Button wide variant="primary">
                                                                    View more
                                                                </Button>
                                                            </Stack>
                                                        </Stack>

Name	Description	Type	Default
children	Items of Stack	ReactNode	undefined
spacing?	Defines the spacing between items	Spacings	undefined
vertical?	Defines if the Stack is vertical	StackVerticalVariants	undefined
distribution?	Defines how the items should be distributed	StackDistribution	undefined
alignment?	Defines how the whole Stack should be aligned	StackAlignment	undefined
itemAlignment?	Defines how the items should be aligned	StackAlignment	undefined
fill?	Defines if Stack should fill the surrounding space	boolean	undefined
wrap?	Defines if Stack should wrap around the surrounding space	boolean	undefined
inline?	Defines if Stack should behave like an inline element	boolean	undefined
ResponsiveIntervals	See responsive documentation

Name	Description	Type	Default
padding?	Defines the padding for an item part of Stack	Spacings	undefined
contentFit?	Defines if the item should fit the content	boolean	undefined
width?	Defines the width of the item	string	undefined
minWidth?	Defines the minimum width of the item	string	undefined
maxWidth?	Defines the max width of the item	string	undefined
grow?	Defines if the item should grow	boolean	undefined
ResponsiveIntervals	See responsive documentation

Stack

Resources

Example

API

Stack

StackItem