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).
import React from "react";
import { Container } from "cherry-styled-components";
export default function Page() {
return <Container $textAlign="center">Your content goes here!</Container>;
}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.