Container

Layout

Abrir no Storybook

Contêiner de página que centraliza e limita a largura do conteúdo.

Quando usar: envolver seções inteiras do hotsite.

Quando não usar: para alinhar itens em colunas (use Grid).

Importar

import { Container } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/Container.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/Container.css';

Exemplos

Default

Exemplo: Container, Default

const Default = () => <Container>(<>
      <Typography variant="h2">Concorra a prêmios</Typography>
      <Typography>Cadastre sua nota fiscal e participe.</Typography>
    </>)</Container>;

Fluid

Exemplo: Container, Fluid

const Fluid = () => <Container fluid>(<>
      <Typography variant="h2">Concorra a prêmios</Typography>
      <Typography>Cadastre sua nota fiscal e participe.</Typography>
    </>)</Container>;

Props

Prop	Tipo	Padrão	Descrição
fluid	boolean	—	true ocupa toda a largura; false limita à largura máxima centralizada. Padrão: false.