Skip to main content

Container

Component
Live

The Container component groups UI elements in a fixed area.  

Code

Usage​

The Container provides a responsive and constrained layout for content. This allows control of the width and alignment of internal content, and in relation to the overall layout of the page.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Container } from "@iag/chroma-react-ui.components";

When to use​

Use the Container component when you need to control the layout of your content for different viewport sizes. It's especially useful when the content needs to maintain a readable line length or when you want to centre content on larger screens.

Do

  • Do define the internal layout of the Container across different viewports to effectively display the content.