# Container
> Cherry Container component - fluid width, text alignment, and responsive padding.
Source: https://cherry.al/code/container
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Container
The Container component provides features such as fluid width, text alignment, and padding adjustments based on screen size. Use it to create responsive layouts as a wrapper for other components and content. By default the container is centered with a max-width of 1280px (1440px from the `xxxl` breakpoint) and 20px padding (40px from the `lg` breakpoint).
```jsx
import React from "react";
import { Container } from "cherry-styled-components";
export default function Page() {
return Your content goes here!;
}
```
## Properties
Container content.
Class name applied to the container element.
Makes the container full-width without max-width constraints.
Text alignment within the container.
Base padding value in pixels. Replaces both the 20px default and the 40px `lg`-breakpoint default. Pass a number here: `"none"` is only handled by the breakpoint-specific props and produces invalid CSS on `$padding`, so use `$xsPadding="none"` to remove padding instead.
Padding at `xs` breakpoint.
Padding at `sm` breakpoint.
Padding at `md` breakpoint.
Padding at `lg` breakpoint.
Padding at `xl` breakpoint.
Padding at `xxl` breakpoint.
Padding at `xxxl` breakpoint.
The Container also accepts all standard HTML `div` attributes and forwards its `ref` to the underlying `div` element.