The Container component is a layout primitive for constraining content width and centering content.

Themed Container component.

Examples

<.container size="2">
  <p>Content goes here</p>
</.container>

Props

• as - The element to render. Defaults to "div". Accepts: "div".
• as_child - Composes the component into its immediate child instead of rendering its own HTML element.
• size - Controls the max-width of the content. Accepts: "1" (448px), "2" (688px), "3" (880px), "4" (1136px). Responsive supported. Defaults to "4".
• display - Controls whether the container is visible or hidden. Accepts: "none", "initial". Responsive supported.
• align - Controls the alignment of the content. Accepts: "left", "center", "right". Responsive supported.
• width, min_width, max_width - Width utilities. Responsive supported.
• height, min_height, max_height - Height utilities. Responsive supported.
• m, mt, mr, mb, ml, mx, my - Margin utilities (theme scale). Responsive supported.
• class - Additional CSS classes to add to the element.
• style - Additional inline styles.
• rest - Additional HTML attributes.
• inner_block - Slot for container children.

Attributes

• m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• as_child (:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults to false.
• width (:any) - Width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• max_width (:any) - Max width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• min_width (:any) - Min width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• height (:any) - Height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• max_height (:any) - Max height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• min_height (:any) - Min height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• as (:string) - Defaults to "div". Must be one of "div".
• size (:string) - Controls the max-width of the content. Responsive supported. Defaults to "4". Must be one of "1", "2", "3", or "4".
• display (:string) - Controls whether the container is visible or hidden. Responsive supported. Must be one of "none", or "initial".
• align (:string) - Controls the alignment of the content. Responsive supported. Must be one of "left", "center", or "right".
• class (:string) - Additional CSS classes to add to the element. Defaults to nil.
• style (:string) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)