Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Container

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

The container hold data for the children components. It is not a component by its own, it present other components such as text, tables or images. You can access controlled component by importing the Kubit Design System library.

import { Container } from '@kubit-ui-web/react-components'
12345
<Container
  variant="DEFAULT"
>
  Content
</Container>

Variants

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<Container
  variant='DEFAULT'
>
  Content
</Container>
<Container
  variant='ALTERNATIVE'
>
  <span style={{color: 'white'}}>
    Content

Children

The children property serves to incorporate additional components as content within the "container" component. Without this content, this component fails its fundamental purpose. Nonetheless, the property remains optional, offering adaptability to each project's needs.

Action bottom sheetAccessibility
ContainerDesign Specs