Container
Container is a responsive layout utility to control width of the main content area.

Usage

Container should be used as a wrapper for your main content. It provides the content with max-width for larger screens and adds horizontal paddings for mobile.

By default, Container takes the full width of the parent. it supports size property from smallest to larger to control the max-width.

If you use Container to center content inside another component which already has its own padding - you can remove it from Container with padded={false}.

Properties

NameTypeDefaultRequiredComment
sizesmallest, smaller, small, medium, large, larger-falseCenter on desktop?
paddedbooleantruefalseShould have padding?
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element