Container

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. You can use it to center page content horizontally or within other components e.g., centering contents of the page header.

By default, Container takes the entire width of the parent. It supports the width property, which accepts any string value so that you can use it with px, %, or any other valid CSS measurement.

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

Properties

Name
Type
width
string
padding
number
children
React.ReactNode
className
Array<
string
undefined
null
false
>
attributes
object