Container

The <Container> component is a CSS grid layout component in which you can wrap child components. This component should be used if you want to structure content or form components. It is also useful when you want to use a <Breakout>.

<Container> width is based on used font and is optimized for readability. You can use header or content as content type and set the size prop to small, medium or large.

It is also possible to set the alignment for the <Container> itself and for its children.

Import

To import the component you just have to use this code below.

import { Container } from '@marigold/components';

Props

Examples

Container sizes

In this example the size prop is set to small. You can also choose medium or large size. It sets the width of the content of the container.

Text Container

In some cases, the width of the content can be smaller than the container's width. You can use the align prop to align the container left, center or right. The alignItems props allows you to align the children left, center or right.