PhiaUi.Components.Layout.Container (phia_ui v0.1.17)

Max-width content constrainer with responsive size presets.

Wraps page content in a centered, max-width constrained block. Designed for full-width page sections that need their content capped at a readable width.

Size	Max-width
`:sm`	`max-w-screen-sm`
`:md`	`max-w-screen-md`
`:lg`	`max-w-screen-lg`
`:xl`	`max-w-screen-xl`
`:"2xl"`	`max-w-screen-2xl`
`:full`	`max-w-full`
`:fluid`	unconstrained

Examples

<.container>
  <h1>Page content</h1>
</.container>

<.container size={:xl} class="py-8">
  <.simple_grid cols={3} gap={4}>
    ...
  </.simple_grid>
</.container>

<%!-- Full-width, no centering --%>
<.container size={:fluid} centered={false} padding={false}>
  <canvas id="chart" />
</.container>

<%!-- Fluid padding: scales from px-4 to px-8 automatically --%>
<.container fluid_padding>
  <h1>Smoothly scaled padding</h1>
</.container>

Summary

Functions

container(assigns)

Renders a max-width content container.

Functions

container(assigns)

Renders a max-width content container.

Attributes

size (:atom) - Max-width preset. Defaults to :lg. Must be one of :sm, :md, :lg, :xl, :"2xl", :full, or :fluid.
centered (:boolean) - Adds mx-auto to center horizontally. Defaults to true.
padding (:boolean) - Adds px-4 sm:px-6 lg:px-8 horizontal padding. Defaults to true.
fluid_padding (:boolean) - Uses CSS clamp-based fluid padding that scales smoothly between breakpoints. Overrides :padding when enabled. Defaults to false.
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

inner_block (required) - Content to constrain.