Container

Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.

This component uses tailwindcss max-w-* utility classes to set the max width of a component.

Import#

import { Container } from '@nature-ui/core';

Usage#

To contain any piece of content, wrap it in the Container component.

There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production
Editable Example

With size#

The size prop accepts one of xs, sm, md, lg, xl or any valid css width property value.

There are many benefits to a joint design and development system. Not only does it bring benefits to the design team...
Editable Example

Props#

NameTypeDefaultDescription
centerContentboolean-If true, container will center its children regardless of their width.
sizestringxs, sm, md, lg, xl, stringCan be one of the above or a valid css width property value like 500px