Container
Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.
Import
import { Container } from "@deca-ui/react"
Usage
To contain any piece of content, wrap it in the Container component.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend rhoncus ligula, eget porta enim aliquam nec. Suspendisse ultrices lorem lobortis feugiat tempor.
<Container
css={{
bg: "$primary",
color: '$white',
p: '$4',
br: '$md',
}}
>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed eleifend rhoncus ligula, eget porta enim aliquam nec.
Suspendisse ultrices lorem lobortis feugiat tempor.
</Text>
</Container>
Fluid
Use the fluid To have maxWidth be 100% at all times.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend rhoncus ligula, eget porta enim aliquam nec. Suspendisse ultrices lorem lobortis feugiat tempor.
<Container
fluid
css={{
bg: "$secondary",
color: '$white',
p: '$4',
br: '$md',
}}
>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed eleifend rhoncus ligula, eget porta enim aliquam nec.
Suspendisse ultrices lorem lobortis feugiat tempor.
</Text>
</Container>
Made by Heril Saha