Container

import { Container } from "@prismane/core";

<Container>
  Containing text within a well-designed container is a powerful technique to
  captivate users' attention. By providing space around the text, the content
  gains prominence and becomes visually appealing. This focused presentation not
  only enhances readability but also guides users' eyes to the essential
  message. A thoughtful container complements the overall aesthetics of the
  interface and creates a sense of order and elegance. Whether it's a subtle
  drop shadow or a vibrant background, the container elevates the text, making
  it stand out amidst other elements.
</Container>

<Flex direction="column" gap={fr(1)} grow>
  <Container maxSize="xs" bg="red">
    xs Size Container
  </Container>
  <Container maxSize="sm" bg="green">
    sm Size Container
  </Container>
  <Container maxSize="base" bg="teal">
    base Size Container
  </Container>
  <Container maxSize="md" bg="copper">
    md Size Container
  </Container>
  <Container maxSize="lg" bg="ruby">
    lg Size Container
  </Container>
  <Container maxSize="500px" bg="gray">
    500px Container
  </Container>
</Flex>