Container
Basic Usage
By default the container doesn’t apply any props and therefore acts like an empty div.
import { Container } from '@krakentech/coral';
<Container>
<Typography>content</Typography>
</Container>content
viewport
container content
Properties
hasBorderRadius
Apply rounding to the component. The border-radius amount is set to the value defined in theme.borderRadius.base.
<Container hasBorderRadius theme="base100" padding="md">
<Typography color="base500">content</Typography>
</Container>content
fullHeight
Explicitly set the container to be full height. Example includes 150px height as the wrapper.
<div style={{ height: '150' }}>
<Container fullHeight>
<Typography>content</Typography>
</Container>
</div>content
fullWidth
Explicitly set the container to be full width. You might want to do this if you have multiple containers in a Stack that has justifyContent and flexWrap modifiers, but one of them needs to stay full width.
<Stack justifyContent="flex-end" flexWrap="wrap">
<Container>
<Typography>Aligned right</Typography>
</Container>
<Container fullWidth>
<Typography>Full width</Typography>
</Container>
<Container>
<Typography>Also aligned right</Typography>
</Container>
</Stack>Aligned right
Full width
Also aligned right
margin
The props marginX and marginY override the respective values set with margin. Furthermore, marginLeft, marginRight, marginBottom and marginTop override the respective values set with marginX, marginY or margin. Besides the normal coral spacing values you can also use auto as a value.
<Container margin="xxl" marginX="sm" marginLeft="xs" marginBottom="none">
<Typography>content</Typography>
</Container>content
minWidth
<Stack justifyContent="flex-end" flexWrap="wrap">
<Container>
<Typography>Aligned right</Typography>
</Container>
<Container minWidth={400}>
<Typography>400px width</Typography>
</Container>
<Container>
<Typography>Also aligned right</Typography>
</Container>
</Stack>Aligned right
400px width
Also aligned right
maxHeight
Note:
overflow-y: autois automatically set
<Container maxHeight={50}>
<Typography>Long Running Content</Typography>
<Typography>Long Running Content</Typography>
<Typography>Long Running Content</Typography>
<Typography>Long Running Content</Typography>
<Typography>Long Running Content</Typography>
<Typography>Long Running Content</Typography>
</Container>Long Running Content
Long Running Content
Long Running Content
Long Running Content
Long Running Content
Long Running Content
minHeight
<Container minHeight={200}>
<Typography>content</Typography>
</Container>content
maxWidthPreset
With the maxWidthPreset prop you can define the maximum container width. The container max width values can be configured through the theme configuration.
<Container maxWidthPreset="sm">
<Typography>content</Typography>
</Container>The default presets are:
sm560pxmd740pxlg1140pxxl1440px
content
maxWidth
Alternatively, you can also set a custom maxWidth in pixels.
<Container maxWidth={100}>
<Typography>content</Typography>
</Container>content
padding
Analogous to the margin, the props paddingX and paddingY override the respective values set with padding. Furthermore, paddingLeft, paddingRight, paddingBottom and paddingTop override the respective values set with paddingX, paddingY or padding.
<Container padding="xxl" paddingX="md" paddingLeft="xs" paddingBottom="sm">
<Typography>content</Typography>
</Container>content
position
<Container position="fixed" top={0} left={0} fullWidth>
<Typography textAlign="center">I'm fixed</Typography>
</Container>top / right / bottom / left
<Container position="relative" top={5} right={5} bottom={5} left={5}>
<Typography>content</Typography>
</Container>zIndex
<Container zIndex={1}>
<Typography>content</Typography>
</Container>theme
You can also apply various themes on the container as shown in the example.
<Container theme="base100" padding="md">
<Typography color="base500">content</Typography>
</Container>content
Responsiveness
<Container padding={{ base: "sm", md: 'xl' }}>
<Typography>
<span>This container will have sm by default, and xl padding starting at the md breakpoint.</span>
</Typography>
</Container>