Container

Containers são áreas do layout que contêm os elementos principais de uma interface. Sua responsabilidade é definir o espaçamento lateral (paddings) e a largura máxima do conteúdo.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

children

ReactNode

  • —

Conteúdo interno.

align

left | right | center

  • left

  • right

  • center (default)

Determina o alinhamento do container em relação ao elemento acima direto. Essa propriedade controla a margem da esquerda e da direita.

as

ContainerContentHtmlTag

  • article

  • aside

  • div

  • header

  • footer

  • main

  • nav

  • section (default)

Tag HTML utilizada.

fluid

ContentHtmlTag

  • false (default)

  • true

Quando verdadeiro, expande para 100% do elemento acima, ignorando a propriedade CSS maxWidth. Os espaçamentos laterais são alterados de acordo com cada breakpoint e seus respectivos valores nos tokens. Por exemplo: quando o breakpoint for xs (até 575px) a largura será 100% com paddings de 24px, quando o breakpoint for xl (até 1429px) a largura também será 100% mas com paddings de 40px;

maxWidth

ContainerLayoutToken | default

  • xs

  • sm

  • md

  • lg

  • xl

  • xxl

  • default (default)

Determina a largura máxima do conteúdo (CSS maxWidth). Quando o valor é default a largura máxima utilizada será alterada de acordo com cada breakpoint e seus respectivos valores nos tokens. Por exemplo: quando o breakpoint for xs (até 575px) a largura será 100% com paddings de 24px, quando o breakpoint for xl (até 1429px) a largura será de 1280px com paddings de 40px;