Container

A responsive layout container that provides consistent max-width constraints at each breakpoint, matching Tailwind's container utility. The Container does not center or pad content by default, but offers props for centering, padding, fluid width, and responsive breakpoints.

---

Import

import { Container } from '@odyssee/components';
// Helpers (optional)
import { CenteredContainer, FluidContainer } from '@odyssee/components';

---

Basic Usage

Code Éditable

Résultat

---

Centered Container

Code Éditable

Résultat

---

Container with Padding

Code Éditable

Résultat

---

Responsive Breakpoint Container

Code Éditable

Résultat

---

Fluid Container (Full Width)

Code Éditable

Résultat

---

Subcomponents

CenteredContainer

A shortcut for <Container centered />.

Code Éditable

Résultat

FluidContainer

A shortcut for <Container fluid />.

Code Éditable

Résultat

---

Props

Name	Type	Default	Description
children	Pulse.JSX.Element | Pulse.JSX.Element[] | string	—	Content to render inside the container
centered	boolean	false	Center the container horizontally (mx-auto)
padding	"none" | "sm" | "md" | "lg" | "xl" | "2xl"	"none"	Horizontal padding (none, small, medium, large, extra large, 2xl)
breakpoint	"sm" | "md" | "lg" | "xl" | "2xl"	—	Apply container constraints only at this breakpoint and up
fluid	boolean	false	Use a fluid container (no max-width constraints, full width)
className	string	—	Additional CSS classes
id	string	auto	DOM id (auto-generated if not provided)
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <div>

---

Accessibility

• Renders a semantic <div> container.
• Does not alter content order or semantics.
• Use appropriate landmarks/headings inside the container for better navigation.
• Ensure sufficient color contrast for backgrounds and text.

---

Best Practices

• Use centered for most page layouts to keep content visually balanced.
• Use padding to provide comfortable spacing for content, especially on mobile.
• Use fluid for dashboards or layouts that require full-width content.
• Use breakpoint to make the container responsive only above a certain screen size.
• Avoid nesting multiple containers unless necessary for layout.

---

Subcomponents & Helpers

• CenteredContainer: Equivalent to <Container centered />.
• FluidContainer: Equivalent to <Container fluid />.

---