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.

By default, Container has a horizontal padding of x4 units, but you can customize it by using padding property. For example, if you use Container to center content inside another component which already has its own padding - you can completely remove it.

Properties

NameTypeDefaultRequiredComment
sizesmallest, smaller, small, medium, large, larger-falseCenter on desktop?
paddingResponsive(number)truefalseCustom padding value
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element