Container

El componente Container es un contenedor flexible que permite ajustar el tamaño personalizado y aplicar padding de forma opcional, proporcionando una estructura para organizar contenido.

Ejemplo

Importación

Para importar el componente Container, se puede hacer desde fenextjs

import { Container } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
customSize	number	no	undefined	Tamaño personalizado del contenedor, calculado como customSize / 16 * rem.
usePaddingInline	boolean	no	true	Determina si se aplica padding en el contenedor.
children	ReactNode	no	undefined	Contenido o elementos que se mostrarán dentro del contenedor.
className	string	no	''	Clase CSS para personalizar el contenedor.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Básico

<Container>
  <div>Contenido</div>
</Container>

Container con tamaño personalizado

<Container customSize={48}>
  <div>Contenido</div>
</Container>

Container sin padding

<Container usePaddingInline={false}>
  <div>Contenido</div>
</Container>

Cols Contentloading