Container

1
import { Container } from "styled-system/jsx";
2

3
const Demo = () => {
4
  return (
5
    <Container>
6
      <div>This is the Container</div>
7
    </Container>
8
  );
9
};

1
import { Container } from "styled-system/jsx";

1
<Container>
2
  <div />
3
</Container>

1
import { Container, VStack } from "styled-system/jsx"
2
import { For } from '@cerberus/react'
3
import { DecorativeBox } from "compositions/lib/decorative-box"
4

5
const Demo = () => {
6
  return (
7
    <VStack>
8
      <For each={["sm", "md", "xl", "2xl"]}>
9
        {(size) => (
10
          <Container key={size} maxW={size} px="2">
11
            <DecorativeBox>
12
              This is some text within a container of size {size}. It will be be contained based on the maxWidth prop.
13
            </DecorativeBox>
14
          </Container>
15
        )}
16
      </For>
17
    </VStack>
18
  )
19
}