Documentation Playground
Skip to content
Docs

Container

Constrains the maximum width of page content. 
<.box width="100%" style="background: var(--gray-a2); border-radius: var(--radius-3);">
  <.container size="1"><.decoration_box height="96px" /></.container>
</.box>

API Reference

This component is based on the div element and supports common margin props.

Prop Type Default Description
align string — Controls the alignment of the content. Responsive supported.
as string "div"
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
class string nil Additional CSS classes to add to the element.
display string — Controls whether the container is visible or hidden. Responsive supported.
height any — Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
max_height any — Max height 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'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
min_height any — Min height 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'}`
ml 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'}`
mt 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'}`
size string "4" Controls the max-width of the content. Responsive supported.
style string ""
width any — Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
align Controls the alignment of the content. Responsive supported.
Type string Default —
as
Type string Default "div"
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
class Additional CSS classes to add to the element.
Type string Default nil
display Controls whether the container is visible or hidden. Responsive supported.
Type string Default —
height Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
max_height Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
max_width Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
min_height Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
min_width Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
size Controls the max-width of the content. Responsive supported.
Type string Default "4"
style
Type string Default ""
width Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —

Container sizes use the following max-width values, which may be customized if needed.

Size CSS variable Width
size="1" --container-1 448px
size="2" --container-2 688px
size="3" --container-3 880px
size="4" --container-4 1136px

Width and height utilities are also available. Related layout primitives: Box, Flex, Grid, Section.

← Grid Section →