Container

The container centers your content horizontally. It's the most basic layout element.

Fixed Container

Fixed container is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

<Container>{/* Your content */}</Container>

Fluid Container

Fluid container is a full width container, spanning the entire width of the viewport.

<Container fluid>{/* Your content */}</Container>

Breakpoints and Containers

The table below illustrates how each container’s max-width compares to the original fixed and fluid across each breakpoint.

Breakpoints and Containers
BreakpointDimensionsFixed ContainerFluid Container
xxs< 520100%100%
xs520 - 767100%100%
sm768 - 959100%100%
md960 - 1023768px100%
lg1024 - 1365960px100%
xlg≥ 13661184px100%

API

Learn more about the properties and the customization points.

Usage

import Container from "@sonnat/ui/Container";


//or
import { Container } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Container Properties
NameTypeDefaultDescription
childrennode-The content of the container.
classNamestring-Append to the class names applied to the component so you can override or extend the styles.
noPaddingbooleanfalseIf true, the paddings will be removed.
fluidboolean
| "xss" | "xs"
| "sm" | "md"
| "lg" | "xlg"		falseDetermines whether the container should be fluid or not.
If true, the container will be fluid in all breakpoints.
If false, the container will be fixed.
If set to breakpoint ("xxs", "xs" and etc.), It will be fluid container in that breakpoint and wider screens.
  • The ref is forwarded to the root element.
  • Any other properties supplied will be provided to the root element.