Container

 

React

Is new design vision part implemented using new tokens?

Up to date

The most versatile element within the Mews Design System is this layout component meticulously designed to address particular use cases, such as establishing minimum and maximum dimensions, ensuring precise positioning, and overseeing z-index management, among its array of functionalities.

Use this component for adding spacings or other styling properties to the wrapped content instead of creating custom components:

Don’t ❌


                                                        
                                                        
                                                            const MyCustomDivider = styled(Divider)`
                                                            padding: ${getSpacingToken('200')}px ${getSpacingToken('0')} ${getSpacingToken('25')}px;
                                                        `;
                                                        
                                                            

Do ✅


                                                        
                                                        
                                                            <Container padding={['200', '0', '25']}>
                                                            <Divider />
                                                        </Container>
                                                        
                                                            

Don’t ❌


                                                        
                                                        
                                                            <SegmentedControl
                                                            style={{
                                                                width: '160px'
                                                            }}
                                                            value={value}
                                                            name="my-component"
                                                        >
                                                            <SegmentedControlItem label="Cards" value="1" />
                                                            <SegmentedControlItem label="Table" value="2" />
                                                        </SegmentedControl>
                                                        
                                                            

Do ✅


                                                        
                                                        
                                                            <Container width="160px">
                                                            <SegmentedControl
                                                                value={value}
                                                                name="my-component"
                                                            >
                                                                <SegmentedControlItem label="Cards" value="1" />
                                                                <SegmentedControlItem label="Table" value="2" />
                                                            </SegmentedControl>
                                                        </Container>
                                                        
                                                            

Resources

Example

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

                                                        
                                                        
                                                            import { Container, Typography } from '@optimus-web/core';
                                                        
                                                        <Container
                                                            position="relative"
                                                            display="inline-block"
                                                            top="0"
                                                            bottom="0"
                                                            left="0"
                                                            right="0"
                                                            inset=""
                                                            width="100%"
                                                            height="100%"
                                                            minWidth="200px"
                                                            minHeight="100px"
                                                            maxWidth="90vw"
                                                            maxHeight="50vh"
                                                            zIndex={1}
                                                            padding="300"
                                                            largePhoneUp={{
                                                                maxWidth: '40vw',
                                                                minHeight: '50px',
                                                            }}
                                                            tabletUp={{
                                                                maxWidth: '45vw',
                                                                minHeight: '75px',
                                                            }}
                                                            desktopUp={{
                                                                maxWidth: '50vw',
                                                                minHeight: '100px',
                                                            }}
                                                            largeDesktopOnly={{
                                                                maxWidth: '60vw',
                                                                minHeight: '125px',
                                                            }}
                                                        >
                                                            <Typography preset="bodyMedium">
                                                                The most versatile element within the Mews Design System is this layout component meticulously
                                                                designed to address particular use cases, such as establishing minimum and maximum dimensions,
                                                                ensuring precise positioning, and overseeing z-index management, among its array of functionalities.
                                                            </Typography>
                                                        </Container>
                                                        
                                                            

API

Name

Description

Type

Default (uses CSS defaults)

position?

Defines the CSS positioning

'absolute' | 'fixed' | 'relative' | 'sticky'

static (CSS default)

display?

Defines the CSS display

'inline-block' | 'block' | 'inline'

block

top?

Defines the CSS top property

string

auto

bottom?

Defines the CSS bottom property

string

auto

right?

Defines the CSS right property

string

auto

left?

Defines the CSS left property

string

auto

inset?

Defines the CSS inset property, a shorthand for defining top, bottom, right, left properties

string

undefined

width?

Defines the Container width

string

auto

height?

Defines the Container height

string

auto

minWidth?

Defines the Container min width

string

auto

minHeight?

Defines the Container min height

string

auto

maxWidth?

Defines the Container max width

string

auto

maxHeight?

Defines the Container max height

string

auto

zIndex?

Defines the Container z-index

number

auto

padding?

Defines the Container padding, follow the same logic of the CSS property, from 1 to 4 values can be provided.

SpacingToken | [SpacingToken, SpacingToken] | [SpacingToken, SpacingToken, SpacingToken] | [SpacingToken, SpacingToken, SpacingToken, SpacingToken];

undefined

align

Aligns the container as a block element in the page, uses margin underneath.

'center' | 'left' | 'right'

undefined

ResponsiveIntervals

See responsive documentation