Container

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            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>
                                                        
                                                            

Storybook

Open example in our Storybook

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

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 shorthand property

SpacingToken

undefined

ResponsiveIntervals

See responsive documentation