Container

The grand orchestrator of layout harmony. Container is a div that knows its limits, boasting a max-width layout, and effortlessly aligning your content for different screen sizes with grace.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec diam sit amet lacus tincidunt facilisis.

1import { Container, FlexBox } from '@sugarcoat/ui';
2
3<FlexBox gap='3' justify='center'>
4  <Container
5    css={{
6      bg: 'brand.a4',
7      border: "1px solid token(colors.neutral200)"
8    }}>
9    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
10  </Container>
11</FlexBox>
12

API Reference

Component	Description
Container	A responsive container component that centers content and maintains consistent max-width across different screen sizes.

Component Properties

Container

Prop	Type	Default	Description
size	`string`	"md"	Sets the maximum width of the container based on predefined breakpoints.
css	CSSProperties	-	Custom CSS properties to be applied to the container.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius