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.
import React from "react";
import { Container } from "cherry-styled-components";
export default function Page() {
return (
<Container $textAlign="center">
Your content goes here!
</Container>
);
}Container content.
Makes the container full-width without max-width constraints.
Text alignment within the container.
Base padding value.
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.
Cherry theme object.