---
menu: Atoms
name: Container
route: /container
---

import { Playground, PropsTable } from 'docz';
import Container from '../container';
import Text from '../text';
import Row from '../row';
import Col from '../col';

# Container

## Use cases

Container is the most simple content component, useful to create layouts as:

<div>
  <Container bordered>
    <Col bordered hasContent/>
  </Container>
</div>

Combine Container with Col and Row component to create more complex layouts.

<div>
  <Container bordered>
    <Row bordered>
      <Col bordered hasContent/>
      <Col bordered hasContent/>
    </Row>
  </Container>
</div>

You can create containers using Container, giving to then maximum or minimum size through this props.

<div>
  <Container bordered hasContent maxWidth='50%' minHeight='10vh' />
</div>

## PropsTable

<PropsTable of={Container} />

## Playground

<Playground>
  <Container flex bordered maxWidth='50%' minHeight='20vh'>
    <Row bordered>
      <Col bordered hasContent/>
      <Col bordered hasContent/>
    </Row>
    <Row bordered hasContent/>
  </Container>
</Playground>

## Warnings

Container is a component part of the grid system of this library. Detailed info about the other grid components can be found on this pages:

- [Grid System](/#grid-system)
- [Container](/container)
- [Col](/col)
- [Row](/row)

**bordered prop is just for debug use;*

**hasContent prop is to set a internal padding from theme, useful right?*

<div>
  <Container bordered hasContent/>
</div>