Container¶

The Container component is used to center and constrain the width of your content.

Import¶

import { Container } from '@themakit/container';

<Container>
  <p>This content is inside a container.</p>
</Container>

You can make the container fluid (full-width) using the fluid prop.

<Container fluid>
  <p>This content spans the full width of the screen.</p>
</Container>

You can specify a custom maximum width for the container.

<Container maxWidth="800px">
  <p>This content is constrained to a maximum width of 800px.</p>
</Container>

Prop	Type	Default	Description
`fluid`	`boolean`	`false`	Whether the container spans the full width of the screen.
`maxWidth`	`string`	`'1200px'`	The maximum width of the container.

The Container component is a layout tool and does not have specific accessibility features.
Ensure the content inside the container is accessible.

You can customize the appearance of the Container component using the theme:

const theme = {
  components: {
    Container: {
      maxWidth: '1200px',
      padding: '16px',
    },
  },
};

For more information on theming, see the Theming Guide.