React
Is new design vision part implemented using new tokens?
Up to date
A flexible styled-component wrapper that provides low-level layout control with responsive capabilities. Designed for engineers to efficiently handle layout and positioning through a simple props API rather than direct CSS manipulation.
The component accepts standard CSS positioning properties (width, height, position, etc.) and includes specialized features for:
- Responsive styling across breakpoints
- Standardized spacing through theme-aware padding props
- Alignment control (center, left, right)
- Overflow and z-index management
Intended as a building block for constructing complex UI layouts while maintaining design system consistency. By using Container, engineers can avoid creating numerous custom styled components for basic layout needs, reducing boilerplate code and promoting more consistent implementations throughout the application.
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
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"
overflowX="auto"
overflowY="auto"
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 |
|
overflowX |
Defines the CSS overflow-x behaviour |
'auto' | 'hidden' | 'scroll' | 'visible' | 'initial' |
undefined |
|
overflowY |
Defines the CSS overflow-y behaviour |
'auto' | 'hidden' | 'scroll' | 'visible' | 'initial' |
undefined |
|
ResponsiveIntervals |
|
|